HTML知识点
2017-02-18 本文已影响0人
Rising_suns
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.怎样理解内容与样式分离的原则？
- 由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。使页面载入得更快。
- 修改设计时更有效率在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。
- 保持视觉的一致性。
- 由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中代码更加适合搜索引擎。
- 由于CSS富含丰富的样式，使页面更加灵活性，更加的美观，它可以根据不同的浏览器，而达到显示效果的统一和不变形，对浏览者和浏览器更具亲和力。
4.有哪些常见的meta标签？
| <meta name="keywords" content=""> | 向搜索引擎说明你的网页的关键词 |
|---|---|
| <meta name="description" content=""> | 告诉搜索引擎你的站点的主要内容 |
| <meta name="author" content="你的姓名"> | 告诉搜索引擎你的站点的制作的作者 |
| <meta charset="utf-8"> | 声明文档使用的字符编码 |
| <meta http-equiv="refresh" content="n;url="> | 定时让网页在指定的时间n内跳转 |
| <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> | 移动设备 |
| <meta http-equiv="expires" content="Mon,12 May 2016 00:20:00 GMT"> | 可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式 |
| <meta http-equiv="pragma" content="no-cache"> | 禁用缓存 |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | 优先使用 IE 最新版本和 Chrome |
5.文档声明的作用?严格模式和混杂模式指什么?<!DOCTYPE html> 的作用?
- 文档声明的作用是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。
- 严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
- 混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
- 添加了<!DOCTYPE html>就等同于开启了标准模式，以免浏览器启动混杂模式。
6.浏览器乱码的原因是什么？如何解决？
- 查看文档的<meta charset="">声明使用的字符编码
- 修改正确的字符编码
- 查看并设置浏览器中的字符编码
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 标签：定义无序列表。
