前端面试学习笔记之HTML

基础

1.混杂模式和标准模式

文档类型

文档类型声明<!DOCTYPE>即document type,目的在于告诉浏览器应该用哪种html或者xhtml规范来解析文档(解释那些html标签、css等)。在dtd(document type defination)指定文档类型。
xhtml1.0 的dtd有三种声明:

  • 过渡模式:一种要求不很严格的,允许在html中使用html 4.01的标识(符合xhtml语法标准)。使用严格的dtd来制作页面当然是最理想的方式,但是对于还没有深入了解web标准的网页设计者,比较适合用过渡的dtd,因为这种dtd还允许使用表现层的标识、元素和属性,比较适合大多数的网页制作人员
  • 严格的:一种要求严格的dtd,不允许使用任何表现层的标识和属性。
  • 框架的:一种专门针对框架页面所使用的dtd,当页面中含有框架元素时,就要采用这种dtd。

混杂模式和标准模式

不同文档模式主要影响CSS内容的呈现,尤其是浏览器对盒模型的解析。例如:在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 模式下,IE的宽度和高度还包含了padding和border。
由于之前的浏览器都按照自己的规则来解析CSS,没有遵循W3C标准,网页开发者们不得不依据各个浏览器自身的规范来使用css。但是随着标准一致性越来越重要,遵循标准是个趋势,但是如果浏览器完全遵循标准,使用标准来解析CSS,一些旧网页就不能得到正确的呈现。所以,所有的浏览器都需要提供两种模式:混杂模式服务与旧式规则,而严格模式服务于标准规则。
文档模式主要有以下四种:
混杂模式是一种比较宽松的向后兼容的模式。混杂模式通常模拟老式浏览器的行为,以防止老站点无法工作。

如何触发模式

根据Doctype是否存在以及使用哪种DTD来触发其不同的模式:
对于HTML 4.01文档,包含严格DTD的DOCTYPE常常导致页面以标准模式呈现;包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现;但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

(1).触发混杂模式:

如果在文档开始处没有发现文档类型声明,则所有浏览器都会默认开启混杂模式。但采用混杂模式不是什么值得推荐的做法,因为不同浏览器在这种模式下的行为差异非常大,如果不使用某些hack技术,跨浏览器的行为根本就没有一致性可言。

(2).触发标准模式:

<!– HTML 4.01 严格型 –>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“>

<!– XHTML 1.0 严格型 –>

(3).触发准标准模式:
<!– HTML 4.01 过渡型 –>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>

<!– HTML 4.01 框架集型 –>

<!– XHTML 1.0 过渡型 –>

<!– XHTML 1.0 框架集型 –>

IE8中关闭超级标准模式:

//content属性中IE的值用于指定使用哪个版本的呈现引擎来呈现页面。设计这个值的目的就是为了向后兼容那些专门为老版本的IE设计的站点和页面。
参考文档:http://www.cnblogs.com/youxin/p/3345100.html
http://www.cnblogs.com/dtdxrk/archive/2012/07/19/2599447.html

2. strong:粗体强调标签,强调,表示内容的重要性;em:斜体强调标签,更强烈强调,表示内容的强调点 .
3. src:引用某个外部资源并嵌入到某个标签中,替代自己。I want to load up this resource for myself.下载的时候停止对文档的继续解析,href是超链接,某个外部资源链接。I want to refer to this resource for someone else.
href 表示超文本引用(hypertext reference),在 link、a 等元素上。src 表示来源地址,在 img、script、iframe 等元素上。src 的内容,是页面必不可少的一部分,是引入。href 的内容,是与该页面有关联,是引用。区别就是,引入和引用。注意,link 的 rel 为样式 media 也匹配时,也可理解成引入。
http://skyonsea.com/%E5%9C%A8html%E7%BD%91%E9%A1%B5%E8%AF%AD%E8%A8%80%E4%B8%ADhrefsrcurl%E6%A0%87%E7%AD%BE%E5%B1%9E%E6%80%A7%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%E4%B8%8D%E5%90%8C%E4%BD%BF%E7%94%A8%E6%83%85/

4.理解html标签语义化
语义化就是让标签和其所包裹的内容的意思想吻合。
浏览器对html标签有默认的CSS样式,这些默认样式是为了更好地表达html语义。
使用语义化标签可以使PAD等较弱支持CSS的设备以一种有意义的方式来渲染网页,去掉或丢失了某些CSS后仍然可以让页面呈现清晰的结构。
搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重,语义化更容易被搜索爬虫理解。爬虫很大程度上会忽略用于表现的标记,而只注重语义标记。
语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.

应 用

你可能感兴趣的:(html,web前端)