如何理解html结构的语义化

分享人：陈凯

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

一、背景介绍

什么是html?

超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。

HTML 不是一种编程语言，而是一种标记语言 (markup language)

运行在浏览器上，用来描述网页结构，是网页制作所必备的。

二、知识剖析

1.什么是html结构语义化?

语义化：用合理、正确的标签来展示内容

2.html结构语义化的意义

便于团队开发和维护，可以减少差异化。

方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页。

和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重

三、常见问题

1.html结构的语义化的学习方法

四、解决方案

1.百度

2.有计划地自学和练习

五、编码实战

1.各大相关网站理解标签概念，记住并且尝试运用

2.常见的二十多种html标签汇总

六、拓展思考

1.css选择器的用法

七、参考文献

八、更多讨论

问题：1、刚刚说用某些语义化的标签能自带格式，可以省css的代码，但是让html和css分离， html专注内容，css专注格式，这样做不是才对吗？

回答：事实的确如此，但用更合适更精准的html标签去描述网页结构， 并不是说就不可以进行css样式的修改了，只要用好css选择器就好了，这与我们今天所说的推行html结构的语义化并不冲突啊。

问题：2、使用html结构语义化的注意事项？

回答：注意各个标签的使用前置条件，以及它自带哪些属性，合理运用它自带的属性说不定可以事半功倍。

问题3：可以用div 结合class和ID语义化命名的方式来代替html的语义化？

回答：我们现在所推行的html结构的语义化，恰恰是为了消灭滥用div结合选择器的方式来进行结构布局的这种行为， 举个例子：我们倡导的是用<卧室>这样的写法去代替<房间 名字=“卧室”> 这样的写法，如果按照你说的方式来替代， 那真就是本末倒置了。当然，如果这个结构确实目前找不到合适的html标签进行描述，你可以使用这种方式去描述这个结构，但请记住，如果这个结构html标签里已经有了，那就不要再滥用div了。

问题4：一个html文件里可以有几个header？能把header写进footer里吗？

答案：header可以，只要符合页面逻辑就行，head就不行，一个html里只可以有一个head。各个标签的用法大家可以自行去查，并学着去用。

鸣谢

感谢大家观看

BY : 陈凯