HTML知识点

1.HTML、XML、XHTML 有什么区别？

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

2.怎样理解 HTML 语义化的？

语义化 HTML 就是选择合适的标签、使用合理的代码结构来编写HTML的方式，使代码更具可读性，也使得浏览器的爬虫和机器能对代码更好地解析。

为什么要语义化？

• 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构；
• 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
• 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
• 便于团队开发和维护，语义化更具可读性，是下一步的网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

如何让HTML语义化？

• 尽可能少的使用无语义的标签div和span；
• 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
• 不要使用纯样式标签，如：b、font、u等，改用css设置。
• 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
• 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
• 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
• 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

3.怎样理解内容与样式分离的原则？

1. 由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。使页面载入得更快。
2. 修改设计时更有效率在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。
3. 保持视觉的一致性。
4. 由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中代码更加适合搜索引擎。
5. 由于CSS富含丰富的样式，使页面更加灵活性，更加的美观，它可以根据不同的浏览器，而达到显示效果的统一和不变形，对浏览者和浏览器更具亲和力。

4.有哪些常见的meta标签？

	向搜索引擎说明你的网页的关键词
	告诉搜索引擎你的站点的主要内容
	告诉搜索引擎你的站点的制作的作者
	声明文档使用的字符编码
	定时让网页在指定的时间n内跳转
	移动设备
	可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式
	禁用缓存
	优先使用 IE 最新版本和 Chrome

5.文档声明的作用?严格模式和混杂模式指什么? 的作用?

1. 文档声明的作用是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

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

3. 添加了就等同于开启了标准模式，以免浏览器启动混杂模式。

6.浏览器乱码的原因是什么？如何解决？

• 查看文档的声明使用的字符编码
• 修改正确的字符编码
• 查看并设置浏览器中的字符编码

7.常见的浏览器有哪些，什么内核?

浏览器	内核
Internet Explorer	IE内核
chrome&Safari	WebKit
Mozilla Firefox	Gecko
Opera	Presto

8.列出常见的标签，并简单介绍这些标签用在什么场景?

• a 标签：定义超链接，用于一个页面链接到另一个页面。
• button 标签：定义一个按钮。
• body 标签：定义文档的主体。
• em 标签：把文本定义为强调的内容。
• strong 标签：把文本定义为语气更强的强调的内容。
• from 标签：用于为用户输入创建 HTML 表单。
• h1 - h6 标签：可定义标题。h1定义最大的标题。h6定义最小的标题。
• head 标签：用于定义文档的头部，它是所有头部元素的容器。
• i 标签：显示斜体文本效果。
• img 标签：向网页中嵌入一幅图片。有两个必需的属性：src 属性 和 alt 属性。
• input 标签：用于搜集用户信息。
• li 标签：定义列表项目。
• link 标签：定义文档与外部资源的关系。
• meta 标签：可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
• nav 标签：定义导航链接的部分。
• ol 标签：定义有序列表。
• p 标签：定义段落。
• span 标签：被用来组合文档中的行内元素。
• table 标签：定义 HTML 表格。
• ul 标签：定义无序列表。