190320&你如何理解 HTML 语义化？

你如何理解 HTML 语义化？

• 概要
• HTML目标
• HTML实现原理
• HTML优点
• HTML缺点
• HTML演进趋势
• HTML解决的问题
• HTML技术规范
• HTML最佳实践
• HTML市场应用趋势
• 小结

概要

HTML 语义化，更符合 W3C统一的规范标准，是技术趋势。
没有样式时，浏览器的默认样式也能让页面结构很清晰。
对功能障碍用户友好。屏幕阅读器（如果访客有视觉障碍）会完全根据你的标记来“读”你的网页。
对其他非主流终端设备友好。例如机顶盒、PDA、各种移动终端。
对 SEO 友好。

起底 HTML

目标：

HTML 的诞生是为了描述超文本。描述超文本的方式有很多，比如：HTML、TGML、还有 markdown。超文本的用途也很多，例如：描述一个网页，或者描述一个 Word 文档等。做网页只是其中之一。HTML 最初设计时确实是为了做网页考虑的。但 HTML 不是做网页的唯一工具。

实现原理：

探索 HTML 是如何呈现、渲染还有它强大的功能时，你只是在探索你的浏览器的解码能力而已。具体 HTML 是如何实现在浏览器展示的，其实也就相当于是浏览器的解析过程具体如何的，这点放到浏览器和网络以及协议去讲。

HTML 的优点在于：

• a、网络标准统一。HTML5 本身是由 W3C 推荐出来的；
• b、多设备、跨平台。用 HTML5 的优点主要在于，这个技术可以进行跨平台的使用。比如你开发了一款 HTML5 的游戏，你可以很轻易地移植到 UC 的开放平台、Opera 的游戏中心、Facebook 应用平台，甚至可以通过封装的技术发放到 App Store 或 Google Play 上，所以它的跨平台性非常强大，这也是大多数人对 HTML5 有兴趣的主要原因 ；
• c、即时更新。通常平台的审核都需要七个工作日左右的时间，如果你发布之后发现问题怎么办?Web 方式就不存在这种问题；
• d、有利于搜索引擎优化，便于 SEO，Baidu，Google 都会优先收录静态页面，不仅收录的快还收录的全；
• e、加快页面打开浏览速度。静态页面无需连接数据库打开速度较动态页面有明显提高；
• f、减轻服务器负担，浏览网页无需调用系统数据库。

HTML 的缺点在于：

• a、安全：像之前 Firefox4 的 web socket 和透明代理的实现存在严重的安全问题，同时 web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料；
• b、完善性：许多特性各浏览器的支持程度也不一样；
• c、技术门槛：HTML5 简化开发者工作的同时代表了有许多新的属性和 API 需要开发者学习，像 web worker、web socket、web storage 等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战；
• d、性能：某些平台上的引擎问题导致 HTML5 性能低下。
• e、兼容性：只能支持到 IE9 及较新的浏览器。

演进趋势：

HTML 就是一门语言，中文全名叫做：“超文本标记语言”。超文本的意思就是不止文本，还可以包含图片，链接，音乐，甚至程序等非文字元素。

本质上来看，HTML 其实和我们日常交流使用的语言没什么两样，不同在于自然语言是用于人与人之间的交流，而 HTML 则是用于人与浏览器之间的交流。

要想让浏览器按照我们的意愿展示出我们期望的酷炫效果，我们就得学会用 HTML 语言来告诉浏览器，在页面的那个位置，放置一个什么控件。至于这个控件长啥样，具体有什么功能，则分别要 CSS 和 JavaScript 来实现。

CSS：层叠样式表，是用来表现 HTML 或 XML 等文件样式的计算机语言。

JavaScript：一种直译式脚本语言，用来给网页实现复杂的动态功能。

关于这两门语言的更多内容暂时不在这儿讨论。接着说 HTML。

---

HTML 发展到如今，只经历了了短短的十多年。它是在 1993 年首次发布，作为一种网上信息浏览传输的规范。

之后的几年又迅速发布了 2.0 版，再到 3.2 版和 4.0 版。直到 1999 年的 4.01 版成为一个标志性的版本。

在这高速发展的⼏年⾥，W3C 组织逐渐掌握了 html 规范的控制权。之后，HTML 经过了一个较为争议的过程，出现了一个分支，XHTML 和 HTML5。由于 XHTML 的不兼容性，造成众多浏览器厂家和开发者的反对：W3C 关闭了 XHTML 项目。

2006 年 W3C 重新接入其中，于 2008 年发布了 html5 的草案，提出了解决问题的办法和标准。于是各大浏览器厂商按耐不住开始升级浏览器以支持 html5，html 重新焕发出无穷无尽的生命力并在互联网的舞台上大放光彩。

可以说，html5 的出现和设计就是为了解决问题，它不是一个颠覆性的概念。相反，它的核心理念是保持一切新特性平滑过渡，以保证兼容性所以可以放心使用。同时它的更新非常具有实用性，它在所有可能的地方都努力进行了分离：让表现和内容分离，使得访问下更佳，降低了不必要的复杂度让代码更具有可读性，同时让文件不会过大导致页面加载变慢还化繁为简，有了新的简化的 doctype，新的简化的字符集声明，简单而强大的 html5API 还以浏览器原生功能替代了部分 js 代码，开发体验使用体验大大增强。

解决的实际问题：

诞生出来主要就是为了做网页的。但不仅仅可以做网页，还可以开发游戏之类的。

技术规范：

HTML 这门语言，主要是通过一个个被尖括号<>包裹的标签对内容进行标记，来告诉浏览器如何显示其中的内容。例如文字如何处理，画面如何安排，图片如何显示等。其中作为结束的标签在<>中有一个反斜杠/HTML 中的标签按照类别主要分为 12 大类，共 119 种，其中有 30 个是 HTML 5 中新推出的标签。我们来看看我们最常用的标签都有哪些吧

常见的 9 类标签。基础类，格式类，表单类，图像类，音频视频类，链接类，样式类，列表类，表格类。

HTML5 的新特性：新的 doctype 和新的字符集写法；新增语义元素-结构类，文本类；新增 Form 表单的表单元素，表单特性和函数；

掌握这些常用标签和新特性，就可以进行网页的开发。

最佳实践:

如果想尽可能的去用好 HTML，还是 w3cschool 上学习练习 HTML 语法，然后多做 demo。

除此之外，

• a、尽可能少的使用无语义的标签 div 和 span；
• b、需要强调的文本，可以包含在 strong 或者 em 标签中（浏览器预设样式，能用 CSS 指定就不用他们），strong 默认样式是加粗（不要用 b）、em 是斜体（不用 i）。

市场应用趋势：

主要还是开发者，用来开发网页，游戏或者移动应用等。

小结

用语义化的标签去编写代码，更符合 W3C 标准，是技术趋势。

• 有利于搜索引擎优化 SEO，
• 没有样式时，页面也能呈现出很好的内容结构、代码结构。
• 用户体验。对 title、alt 用于解释名词或解释图片信息、label 标签的活用等
• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页。
• 便于团队开发和维护。语义化更具可读性，是下一步网页的重要动向，遵守 W3C 标准的团队都遵循这个标准，可以减少差异化。

参考

HTML 是什么？
HTML5 的优点与缺点？
简述 HTML 的优点和缺点
HTML5 的优点与缺点
html5 的优缺点
理解 HTML 语义化