HTML 总结

1 HTML 标签语义化

『概念』

使用合理的标签展示内容，让内容具有结构性。

『优点』

• 有利于 SEO：搜索引擎根据标签来确定上下文和各个关键字的权重。
• 方便其他设备解析：如屏幕阅读器、盲人阅读器、移动设备。
• 语义化更具可读性，便于团队开发和维护。

『H5 语义化标签』

• <header>：定义文档头部区域。
• <nav>：定义导航链接的部分。
• <section>：定义文档中的节，比如章节、页眉、页脚等。
• <article>：定义独立的内容。
• <aside>：定义主内容之外的内容，比如侧边栏。
• <footer>：定义文档底部区域。

---

2 H5 新增特性

• 用于绘画的 canvas 元素。
• 用于媒体回放的 video 和 audio 元素。
• 新的特殊内容元素，比如 article、footer、header、nav、section。
• 新的表单控件，比如 color、date、range、email、url、number。
• 本地存储localStorage、sessionStorage。

---

3 ‹label› 标签作用

主要是方便鼠标点击使用，增强用户操作体验。如果不使用 <label> 标签的输入框，只有鼠标点中输入框后才会获得焦点，但使用了 <label> 标签后，点击 <label> 标签里面的文字，输入框也会获得焦点。

---

4 ‹image› 标签上 title 属性与 alt 属性的区别是什么？

『title』

title 属性包含的文本会在光标悬停在图片上面时显示出来。

『alt』

alt 属性包含一条对图像的文本描述，当由于某种原因无法加载图像时，就会在页面上显示 alt 属性中的文本。

---

5 DOCTYPE 的作用？严格模式和混杂模式？

『DOCTYPE』

<!DOCTYPE> 声明叫做文件类型定义，作用是为了告诉浏览器该文件的类型。让浏览器解析器知道应该使用哪个规范来解析文档。

『严格模式』

又称标准模式，是指浏览器安装 W3C 标准解析代码。

『混杂模式』

又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

---

6 HTML5 为什么只写 ‹!DOCTYPE html› ？

H5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 DOCTYPE 来规范浏览器的行为。而 H5 之前基于 SGML，所以需要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型。

PS：SGML 是标准通用标记语言的集合，其中有 HTML、XML，因此需要用 DTD 来指定使用哪种规范。

---

7 src 和 href 的区别

『src』

src 指向的资源会嵌入到当前标签所在的位置，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到该资源执行完毕。

『href』

href 是用来建立资源和当前元素或文档之间的连接。在请求 href 资源时会并行下载资源，不会停止对当前文档的处理。

---

8 data-xxx 属性的作用？

可以用来自定义数据属性。

---

9 meta 有哪些常见的值？

meta 标签里面的内容，主要是提供关于这个 HTML 页面的元信息。简单点说，就是用这些信息来告诉浏览器，应该如何解析这个HTML文件。

好文章推荐

---

10 如何在 HTML 页面上展示 ‹div›‹/div› 这几个字符？

掌握小于号（<）和大于号（>）的代码即可。

&lt：<

&gl：>

<!-- <div></div> -->
&ltdiv&gt&lt/div&gt

---

11 在 input 里，name 有什么作用？

• 作为提交给服务器的数据的标识。在服务器根据 Name 通过 Request.Params 取得提交的数据。

• 在 type='radio' 单选框分组中通过 Name 属性来实现。

---

12 网页验证码有什么作用？

• 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票或论坛灌水。

• 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

---

13 五大主流浏览器及四大内核

• Trident

  • IE

• Gecko

  • FireFox

• Blink

  • 谷歌 & Opera

• Webkit

  • 苹果

---