HTML知识点

HTML、XML、XHTML的区别

• HTML(HyperText Markup Language)超文本标记语言：是语法较为松散的、不严格的Web语言。
• XML (eXtensible Markup Language)可扩展标记语言:主要用于存储数据和结构参考。
• XHTML (eXtensible HyperText Markup Language)可扩展超文本标记语言:基于XML，作用与HTML类似，但语法更严格参考。

HTML语义化

选择合适的标签、使用合理的代码结构，便于开发者阅读，同时让浏览器的爬虫和机器很好地解析。

内容与样式分离原则

我的理解是：

• HTML写结构，CSS写样式，JavaScript写事件动画等各种交互事件，三者相互分离，尽量不要把样式或者事件写到HTML里去，便于后期维护修改。
• 写 JS 的时候，尽量不要用 JS 去直接操作样式，而是通过给元素添加删除class来控制样式变化。

meta标签

The tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

常见标签

• 告诉浏览器解码方式：

• IE=edge告诉浏览器若是IE内核使用IE=edge最新的引擎渲染网页，chrome=1则可以激活Chrome Frame，采用谷歌浏览器内核去渲染页面：

• 告诉爬虫、搜索引擎关键字，你快来找我：

//搜索引擎：好的好的，我知道你是谁了。

• 告诉手机移动端页面正常的显示页面，别缩放啦，啥年代啦:

文档声明

DOCTYPE是用来声明文档类型和DTD（document type definition，文档类型定义）规范的，一个主要的用途便是文件的合法性验证。 如果文件代码不合法，那么浏览器解析时便会出一些差错。 。

文档声明的作用就在于告诉浏览器你是用什么类型的文档，然后浏览器就能按照你的文档类型进行解析，不然浏览器就会用混杂模式解析文档，不同的浏览器显示的效果都不太一样。

HTML 5

HTML 4.01 Strict

HTML 4.01 Transitional

严格模式和混杂模式

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

但是HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

关于浏览器乱码

浏览器乱码的原因很可能是在里没有指定编码方式，或者编码方式指定错误，浏览器就解析时就会乱码。一般都以"UTF-8"方式编码。

常见浏览器内核

• Trident：IE内核
• Webkit：chrome、safari内核
• Gecko：firefox内核
• 关于移动端：大多都是Webkit内核

常见标签

• h1~h6
• h1代表页面最大的标题
• h2二级标题
• h3... 更弱的标题
• p 段落，表示大段文字
• a 链接，链到一个地址
• img 展示一张图片
• div 语义为“一大块”，用于给页面划分区块，让结构更清晰
• ul li 无序列表
• ol li有序列表
• button 按钮
• iframe 用于嵌入一个页面 注意跨域操作问题
• table 用于展示表格，不要用来做布局 thead tbody tfoot可省略，浏览器会自动添加 border-collapse: collapse;用于合并边框