HTML总结

2016.04.14 20:34 bizhongbio 471 1

一、对 WEB 标准以及 W3C 的理解与认识

WEB 标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括 XHTML 和 XML,表现标准语言主要包括 CSS,行为标准主要包括对象模型(如 W3C DOM)、ECMAScript 等。这些标准大部分由万维网联盟(外语缩写:W3C)起草和发布,也有一些是其他标准组织制订的标准,比如 ECMA(European Computer Manufacturers Association)的 ECMAScript 标准。

  • WEB 标准规范要求,书写标签必须闭合、标签小写、不乱嵌套,可提高搜索机器人对网页内容的搜索几率(SEO);
  • 建议使用外链 CSS 和 JS 脚本,从而达到结构与行为、结构与表现的分离,提高页面的渲染速度,能更快地显示页面的内容;
  • 样式与标签的分离,更合理的语义化标签,使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,从而降低维护成本、改版更方便;
  • 不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性。

遵循 W3C 制定的 WEB 标准,能够使用户浏览者更方便的阅读,使网页开发者之间更好的交流。

二、HTML 与 XHTML 有什么差别

HTML 与 XHTML 之间的差别,粗略可以分为两大类比较:一个是功能上的差别,另外是书写习惯的差别。关于功能上的差别,主要是 XHTML 可兼容各大浏览器、手机以及平板,并且浏览器也能快速正确地编译网页。

HTML 是一种基本的 WEB 网页设计语言,XHTML 是一个基于 XML 的标记语言。

  • XHTML 元素必须被正确地嵌套;
  • XHTML 元素必须被关闭;
  • 标签名必须用小写字母;
  • XHTML 文档必须拥有根元素。

2.1 XHTML 的规则

1)所有标签都必须小写

在 XHTML 中,所有的标签都必须小写,不能大小写穿插其中,也不能全部都是大写。看一个例子。

2)标签必须成双成对

像是 p、a、div 标签等,当出现一个标签时,必须要有对应的结束标签,缺一不可,就像在任何程序语言中的括号一样。

3)标签顺序必须正确

标签由外到内,一层层包覆着,所以假设你先写 div 后写 h1,结尾就要先写 h1 后写 div。只要记住一个原则“先进后出”,先弹出的标签要后结尾。

4)所有属性都必须使用双引号

在 XHTML 1.0 中规定连单引号也不能使用,所以全程都得用双引号。

5)不允许使用 target=”_blank”

从 XHTML 1.1 开始全面禁止 target 属性,如果想要有开新窗口的功能,就必须改写为 rel=”external”,并搭配 JavaScript 实现此效果。

三、Doctype? 严格模式与混杂模式如何触发这两种模式,区分它们有何意义?

混杂模式是一种比较宽松的向后兼容的模式。混杂模式通常模拟老式浏览器的行为,以防止老站点无法工作 。

  • 混杂模式(Quirks mode),让 IE 的行为与(包含非标准特性的)IE5 相同;
  • 标准模式(Standards mode),让 IE 的行为更接近标准行为;
  • 准标准模式(Almost standards mode),这种模式下的浏览器特性有很多都是符合标准的,不标准的地方主要体现在处理图片间隙的时候(在表格中使用图片时问题最明显);
  • 超级标准模式(Super standards mode),IE8 引入的一种新的文档模式,超级文档模式可以让 IE 以其所有版本中最符合标准的方式来解释网页内容。

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

根据 Doctype 是否存在以及使用哪种 DTD 来触发其不同的模式。如果 Doctype 不存在或者其形式不正确那么默认为混杂模式。如果 XHTML 文档中包含完整的 Doctype,那么它一般以标准模式呈现。

区分它们的意义可以让开发者更好的写出标准兼容的页面,同时不影响以前的页面标准。

四、HTML 语义化

语义化的含义就是用正确的标签做正确的事情,HTML 语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有样式 CCS 情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

五、行内元素、块级元素有哪些?

六、行内元素与块级元素不同点

块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示。通过样式控制,它们可以相互转换。

块级元素和行内元素之间的一个重要的不同点:尺寸

  • 设置宽度 width 无效;
  • 设置高度 height 无效,可以通过 line-height 来设置;
  • 设置 margin 只有左右 margin 有效,上下无效;
  • 设置 padding 只有左右 padding 有效,上下则无效。

:无效指它对其它元素的排列没有影响。也就是说,对于设置的 margin、padding 行内元素文档流里的上下元素来说,他们的间距不会因为上下 margin 或者上下 padding 而产生间距。但是就他本身而言,对于上下 margin 与 padding 是有效的。

HTML 总结,未完待续(To be continued)。

感谢你的阅读,本文版权归 双鱼bizhongbio 所有,转载时请注明出处。
注明出处格式:双鱼bizhongbio(https://bizhongbio.github.io/article/html-summary/

上一篇:
下一篇:

分享到

相关文章

1条评论

  1. T
    Ted 2016.04.20 13:35

    看看!

发表评论