前端新手常见问题(一)

一、HTML、XML、XHTML 有什么区别

1、HTML
超文本标记语言,语法松散,是一种不严格的web语言,对大小写不敏感,标签没有成对出现的时候,浏览器也不会报错。
2、XML
可扩展标记语言, XML是用来对信息进行自我描述而设计的一种新语言,基于文本标记语言,XML可以让用户根据要表现的文档,自由地定义标记来表现具有实际意义的内容。它的设计宗旨是传输数据,而不是显示数据。它的标签没有被预定义。您需要自行定义标签。它被设计为具有自我描述性。
3、XHTML
XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。XML虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的站点,直接采用XML还为时过早。因此,我们在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。简单的说,建立XHTML的目的就是实现HTML向XML的过渡。以下为XHTML的特点:

        1.对大小写敏感,必须是小写的; 
        2.标签必须成对出现,有开始标签就必须有结束标签; 
        3.属性值必须在引号之内; 
        4.不支持属性最小化: 
                    eg:正确:<input checked='checked'> 
                            错误:<input checked> 
        5.name属性不赞成使用,以后会被淘汰; 
        6.空元素也要结束标签:如:<br/>,<hr/>(水平分割线)

可扩展标记语言和超文本标记语言之间的差异

它不是超文本标记语言的替代。
它是对超文本标记语言的补充。
它和超文本标记语言为不同的目的而设计:
​ 1.它被设计用来传输和存储数据,其焦点是数据的内容。
2.超文本标记语言被设计用来显示数据,其焦点是数据的外观。
超文本标记语言旨在显示信息,而它旨在传输信息。
对它最好的描述是:它是独立于软件和硬件的信息传输工具。

XHTML与HTML的区别:

标记的嵌套使用(严格/不严格)
大小写的使用(区分/不区分)
引号的使用(属性必须添加引用/随意)
结束标记(不许省略/可以省略)
样式的使用(type/style)

二、怎样理解 HTML 语义化

为什么要使用语义化的HTML呢?有什么好处呢?

html本身是没有表现的,我们看到例如 h1 是粗体,字体大小2em,加粗;strong 是加粗的,不要认为这是html的表现,这些其实html默认的css样式在起作用,所以首先我们要知道html和页面的表现是没有关系的,这些是css的事情。HTML在页面中的作用就是结构和含义,通俗点说就是划分内容,这里放什么,我们放的是什么。

语义化的好处:
1.去掉或样式丢失的时候能让页面呈现清晰的结构:
2.屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页.
3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对CSS的支持较弱).
4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.
5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
6.便于团队开发和维护

三、怎样理解内容与样式分离的原则

HTML负责网页内容(结构)部分,样式则负责了页面的展示效果。内容与样式分离使得内容和样式各自只负责自己的部分,消除两者的耦合。更重要的是分离增强了机器的可读性,使得机器、网络爬虫能更好地理解页面内容。

CSS与HTML分离的优点:
1、使页面载入得更快
2、修改设计时更有效率
3、保持视觉的一致性
4、更好地被搜索引擎收录
5、对浏览者和浏览器更具亲和力

CSS与HTML分离的缺点:
1、CSS网站制作的设计元素通常放在1个外部文件中,或几个文件,有可能相当复杂,甚至比较庞大。
2、虽然说DIV+CSS解决了大部分浏览器兼容问题,但是也有在部分浏览器中使用出现异常,比如火狐浏览器,在IE中显示正常的页面,到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题,但是可以说在目前来看,DIV+CSS还没有实现所有浏览器的统一兼容。
3、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。

四、常见的meta标签

<meta http-equiv="keywords" content="关键字1,关键字2,...">

<meta http-equiv="description" content="网页描述">

<meta name="renderer" content="webkit|ie-comp|ie-stand">

<meta name="renderer" content="webkit">

<meta name="renderer" content="ie-comp">

<meta name="renderer" content="ie-stand">

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >

<meta http-equiv="Window-target" content="_top">

<meta http-equiv="Refresh" content="2;URL=http://">

五、文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?

DOCTYPE是docunment type(文档定义)的简写,用来说明web设计中所用的html或xhtml的类型,指出浏览器或者其他阅读程序按照什么样的规则(W3C所发布的一个文档类型定义即DTD)集去解释文档中的标记.
由于历史的原因,浏览器对页面的渲染方式是不一样的。在W3C标准出来之前,浏览器对页面的渲染没有同一的标准,产生了差异,quirks mod(混杂模式或者兼容模式),但在W3C标准出台之后,浏览器对页面的渲染有了同一的标准即(严格模式或标准模式)。但是为了保证以前就得页面仍然正常显示,有的浏览器就保存了这两种渲染模式(标准兼容模式)。那么究竟采用哪一种方式进行渲染,就要看DOCTYPE生命中的DTD.
1.浏览器要使老旧的网页正常工作,但这部分网页是没有doctype声明的,所以浏览器对老旧的没有doctype声明的网页采用quirks mode解析。
2.对于那些浏览器不能识别的doctype声明,浏览器采用strict mode解析
3.在doctype声明中,没有使用DTD声明或者使用HTML4以下(不包括HTML4)的DTD声明时,基本所有的浏览器都是使用quirks mode呈现,其他的则使用strict mode解析。
4.在现有有doctype声明的网页,绝大多数是采用strict mode进行解析渲染的。
总之,加上doctype声明,让浏览器使用标准模式

注意:为了获得正确的doctype声明,关键就是让DTD与文档所遵循的标准对应。例如,假定页面文档遵循的是XHTML 1.0 Strict标准,文档的doctype声明就应该引用相应的DTD。另一方面,如果doctype声明指定的是XHTML DTD,但文档包含的是旧式风格的HTML标记,就是不恰当的;类似地,如果doctype声明指定的是HTML DTD,但文档包含的是XHTML 1.0 Strict标记,同样是不恰当的。
总之,doctype使浏览器按照dtd指定的渲染方式对页面进行渲染

严格模式与混杂模式——如何触发这两种模式,区分它们有什么意义呢?·
区别:严格模式是浏览器根据规范去显示页面;混杂模式是以一种向后兼容的方式去显示
意义:决定浏览器如何渲染网站(浏览器使用那种规范去解析网页)
触发:浏览器根据doctype是否存在和使用的是那种dtd来决定。

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法:
1、如果XHTML、HTML 4.01文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现。
2、包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现,但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
3、DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

六、浏览器乱码的原因是什么?如何解决

乱码造成原因:

1、比如网页源代码是gbk的编码,而内容中的中文字是utf-8编码的,这样浏览器打开即会出现html乱码。反之网页是编码utf-8,内容是gbk也会出现乱码。
2、html网页编码是gbk,而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。
3、浏览器不能自动检测网页编码,造成网页乱码。

解决办法

首先,在文件保存的时候你自己要清楚是用哪种编码方式保存的。如果你的文件是保存为utf-8格式,那么一定要在html 的 <head>里添加<meta charset="utf-8">,这句话的意思是告诉浏览器在打开这个页面的时候不要去猜了,直接用utf-8去解码。 同理,如果你的文件保存为gbk格式,一定在文件里添加<meta charset="gbk">
总结:

  1. 乱码产生的根本原因是你保存的编码格式和浏览器解析时的解码格式不匹配导致的。
  2. 乱码一般是英文以外的字符才会出现。

七、常见浏览器内核有哪些

1,使用Trident的是internet explorer,国产的绝大部分浏览器。Trident是就是ie内核
2,使用Gecko的是Mozilla Firefox,使用 Gecko 内核的浏览器也有不少,如 Netscape MozillaSuite/SeaMonkey 等
3,使用Presto的是opera,这是目前公认网页浏览速度最快的浏览器内核
4,使用WebKit的有苹果的safari,谷歌的chrome,还有国产的大部分双核浏览器其中一核就是WebKit

八、常用标签

1、HTML 标题 h(1~6)标签;标题(Heading)是通过 h1 - h6 等标签进行定义的。
2、HTML 段落是通过p标签定义的;段落是通过 p 标签定义的
3、链接 a 标签:HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
4、img标签:用于在网页中插入图片;
5、表格table标签:用于在 HTML 文档中创建表格
6、列表:
无序列表:ul li
有序列表:ol li
自定义列表:dl dt dd
7、<div>可定义文档中的分区或节,<div> 标签可以把文档分割为独立的、不同的部分它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。
8、button标签:用于创建按钮,在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
9、input标签:<input> 标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
10、iframe 元素会创建包含另外一个文档的内联框架(即行内框架);
11、<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。
12、<html> 与 </html> 标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。
13、<head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
14、<link> 标签定义文档与外部资源的关系。
15、<form> 标签用于为用户输入创建 HTML 表单。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271

推荐阅读更多精彩内容