HTML初探

---

HTML、XML、XHTML之间的区别

	html	xml	xhtml
区别	超文本标记语言，语法较为松散、不严格	可拓展标记语言，主要用于存储数据和结构	可拓展超文本标记语言，基于xml，作用与html类似，但语法更严格

---

HTML语义化

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析

原因：

• 为了在没有css的情况下，页面也能呈现出页面结构、代码结构，提高用户体验
• 有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重
• 便于团队开发和维护，语义化使网页更具可读性，从而提高效率

具体做法：

使用下文中常见的HTML标签替代div+class的方式编写网页，根据具体的使用场景，选用对应的标签来描述相对应的内容

---

相关规范

• 2格缩进，即用两个空格代替tab
• 标签属性用双引号
• 自闭合元素的尾部不添加斜线
• 不要省略可选的结束标签（
、）ps.不看相关文档的话我还不知道这两个尾标签可省略，但是，最好不要省略：）

---

doctype

在HTML页面第一行添加标准模式（standard mode）的声明，能够保证在每个浏览器中拥有一致的展现

声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令

HTML 5不基于SGML，所以不需要引用DTD

HTML 4.01基于SGML，需要引用DTD
有三种声明

• Strict （严格）

• Transitional（过渡）

• Frameset

点我了解常见的声明

---

标准模式与混杂模式

• 标准模式又称严格模式，指浏览器按照W3C标准解析代码
• 混杂模式又称兼容模式，指浏览器用自己的方式解析代码

速记：

1. 严格DTD——严格模式
2. 有URI的过渡DTD——严格模式；没有URI的过渡DTD——混杂模式
3. DTD不存在或格式不正确——混杂模式
4. HTML 5 没有严格、混杂之分

不同文档模式主要影响css的呈现，尤其是对盒模型的解析

---

语言属性

给html根元素指定lang属性，能为文档设置正确的语言，以便语音合成工具确定发音、翻译工具确定使用何种规则

---

常见的meta标签属性

• 必须的属性

属性	值	描述
content	some_text	定义与http-equiv或name属性相关的元信息

• 可选的属性

属性	值	描述
http-equiv	content-type expires refresh set-cookie	把content属性关联到HTTP头部
name	author description keywords generator revised others	把content属性关联到一个名称
scheme	some_text	定义用于翻译content属性值的格式

详见w3s
拓展segmentfault

---

IE兼容模式

X-UA-Compatible是IE8的专用标记，指定IE8模拟某个特定版本的浏览器模式进行渲染，

详见stackoverflow相关回答

---

网页乱码

编写HTML文件时，编码方式若未更改，编辑器会以默认编码方式保存，保存后的HTML文件在浏览器打开时，若浏览器此时的解码方式与HTML文件的编码方式不匹配，就会产生乱码

编码方式——常见的编码方式有unicode、utf-8、gbk(用于中文)

解决方法
将文件的编码方式通过meta标签写入文档的head标签内

浏览器解析html文档时，则会按照meta标签内所规定的方式进行解码

---

常见的浏览器及其内核

浏览器	Chrome	Firefox	IE	Safari	Opera
内核	Blink Webkit	Gecko	Trident	Webkit	Presto

再给Edge内核的Edge浏览器一次机会吧，它还只是个孩子啊（逃

---

常见的HTML标签

名称	标签	使用场景	备注
标题	h1~h6	表示标题， 到 表示从一级标题到六级标题	-
段落	p	表示大段文字	-
链接	a	表示链接到一个地址	-
图像	img	用于展示图片	自闭合标签，不需要加 /
-	div	用于给页面划分区块	-
无序列表	ul li	表示并列的内容	可以嵌套
有序列表	ol li	表示带步骤或编号的并列内容	ol直接子元素只能是li，可以嵌套
-	dl dt dd	展示一系列“标题 内容”的场景	-
按钮	button	用于点击、提交等操作	-
表格	table	用于展示表格	thead tbody tfoot可省略
短引用	q	定义短的引用	用于简短的引用，内容不会与周围不同，无缩进，不成块
长引用	blockquote	定义块引用	内容会从常规文本中分离，左右缩进，有自己的空间
强调	em	定义强调的内容	内容会以斜体显示，语义化的角度，如果只想以斜体字，使用 i 标签
重点强调	strong	定义重点强调的内容	文字加粗

应注意各个标签相关属性的使用

---

内容与样式（和行为）分离原则

即，不在HTML标签上书写样式和行为，而是在HTML页面里用 style 标签和 script 标签来承载样式和行为，或者，将CSS和JavaScript作为独立文件外链出去

• 原因：如果对文本控制的样式和网页结构混合在一起，不利于网页的修改维护，使得网页内容不能够很好的展现于搜索引擎之下，不利于SEO

• 具体做法：将样式和行为放在 style 标签和 script 标签中，或者将CSS和JavaScript作为独立文件外链出去

---

初探小结

各个标签都是围绕HTML的相关标准而展开的，因此，在编写代码时，应遵守规范，应在功能完善、语义化的前提下做到内容与样式（及行为）分离

内容->HTML 样式->CSS 行为->JavaScript

由于某些不明原因或不可抗拒的因素而导致样式、脚本无法加载时，用户依然可以通过语义化的HTML（DOM树）获取网页信息，且样式、脚本与内容分离，降低代码耦合度，也便于维护