@TOC【修真院web小课堂】如何理解html结构的语义化
【css-04】
课题：如何理解html结构的语义化
分享人：陈凯
目录：
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.代码实战
6.拓展思考
7.参考文献
8.更多讨论
一、背景介绍
1.什么是html？
超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)。 运行在浏览器上，用来描述网页结构，是网页制作所必备的。
2.什么是html结构的语义化？
首先，语义化，顾名思义，就是你写的HTML结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。那么，我们以后再开发的过程中，一定要注意了，尽量使用官方的有语义的标签，不要再使用一堆无意义的标签去堆你的结构。
怎么知道，自己的页面结构是否语义化，那就要看你的HTML结构，在去掉CSS样式表之后，是否，依然能很好的呈现内容的结构，代码结构。也就是说，脱掉css的外衣，依然头是头，脚是脚。赤裸裸的完整的一篇文档。这也就是，语义化之后文档的效果。
其实语义化，也无非就是自己在使用标签的时候多使用有英文语义的标签，比如h标签，在HTML中就是就是用来定义标题，还有p标签，英文是paragraph段落，table表格标签,等等。
二、知识剖析
1、html结构语义化的意义
a. 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构
b. 用户体验：例如title、alt用于解释名词或解释图片信息的标签尽量填写有含义的词语、label标签的活用；
c. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
d. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页；
e. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
三、常见问题
1、如何学习html结构的语义化
四、解决方案
1、百度各种html标签的用法
推荐网站：w3cschool
2、有计划地学习并练习
比如先从常用的二三十个记起，记熟并用熟以后，尝试学习不剩下的那些不是很常用的标签，记得要剔除兼容性差的标签和那些不推荐使用的标签，新推出的标签记得要学习，因为这些标签肯定是因为经常要使用才加上去的。
五、编码实战
几十个常用的html标签及使用事项
1.标签
标签的作用。文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 2.
标签 用于显示文章内容，默认样式为段落前后都会留有空白。 5.标签 用于显示文章的标题，一共有六个h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。
是最高的等级。默认样式为字体加粗，字号从h1到h6依次变小。 6.标签 用于强调某些文字，带有强调语气，默认样式为强调内容变为斜体。 7.标签 用于强调某些文字，但强调语气大于标签，默认样式为强调内容加粗。 8.标签 没有语义，用作为文字添加特定的样式，无默认样式。 9.标签 用作短文本的引用，不用为引用文字加引号，标签默认样式会为引用文字自动添加引号。注意直接给引用文字加引号不同的是，使用标签使内容语义化，告诉浏览器这是引用别人的话，而直接加引号则没有语义。 10.
标签 用作长文本的引用，默认样式为左右缩进一定空白。 11.标签
标签作用相当于word文档中的回车。（在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入
）
标签有两种写法一种是 xhtml1.0写法
，另一种是 html4.01写法
。现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。
标签是一个空标签，即没有html内容。 12. 在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入一个空格，就必须输入 13.标签 用于添加水平横线，默认样式线条比较粗，颜色为灰色。标签有两种写法一种是 xhtml1.0写法，另一种是 html4.01写法。现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。标签是一个空标签，即没有html内容。 14.标签 用于显示一些网站的联系地址信息，也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。默认样式为斜体。 15.标签 用于添加一行代码。 16.
标签用于添加预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。因此可以用来添加一大段代码。17.标签用于显示没有前后顺序列表信息，ul-li是没有前后顺序的信息列表。默认样式为每项li前都自带一个圆点。18.标签用于显示有前后顺序列表信息，默认样式为每项前都自带一个序号，序号默认从1开始。19.标签用于划分一个独立的逻辑部分（逻辑部分是页面上相互关联的一组元素），标签的作用就相当于一个容器。20.标签用于显示表格信息1.创建表格的四个元素：table、tbody、tr、th、td2.…：整个表格以标记开始、标记结束。3.…：如果不加 , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分 段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）4.…：表格的头部的一个单元格，表格表头。5.…：表格的一行，所以有几对tr 表格就有几行。6.…：表格的一个单元格，一行中包含几对...，说明一行中就有几列。7.表格中列的个数，取决于一行中数据单元格的个数。8.默认样式table表格在没有添加css样式之前，在浏览器中显示是没有表格线的。表头，也就是th标签中的文本默认为粗体并且居中显示。9.为表格添加摘要（摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。）21.
标签默认样式会为引用文字自动添加引号。注意直接给引用文字加引号不同的是，使用标签使内容语义化，告诉浏览器这是引用别人的话，而直接加引号则没有语义。 10.
标签
标签作用相当于word文档中的回车。（在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入
）
标签有两种写法一种是 xhtml1.0写法
，另一种是 html4.01写法
。现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。
标签是一个空标签，即没有html内容。 12. 在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入一个空格，就必须输入 13.标签 用于添加水平横线，默认样式线条比较粗，颜色为灰色。标签有两种写法一种是 xhtml1.0写法，另一种是 html4.01写法。现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。标签是一个空标签，即没有html内容。 14.标签 用于显示一些网站的联系地址信息，也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。默认样式为斜体。 15.标签 用于添加一行代码。 16.
标签用于添加预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。因此可以用来添加一大段代码。17.标签用于显示没有前后顺序列表信息，ul-li是没有前后顺序的信息列表。默认样式为每项li前都自带一个圆点。18.标签用于显示有前后顺序列表信息，默认样式为每项前都自带一个序号，序号默认从1开始。19.标签用于划分一个独立的逻辑部分（逻辑部分是页面上相互关联的一组元素），标签的作用就相当于一个容器。20.标签用于显示表格信息1.创建表格的四个元素：table、tbody、tr、th、td2.…：整个表格以标记开始、标记结束。3.…：如果不加 , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分 段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）4.…：表格的头部的一个单元格，表格表头。5.…：表格的一行，所以有几对tr 表格就有几行。6.…：表格的一个单元格，一行中包含几对...，说明一行中就有几列。7.表格中列的个数，取决于一行中数据单元格的个数。8.默认样式table表格在没有添加css样式之前，在浏览器中显示是没有表格线的。表头，也就是th标签中的文本默认为粗体并且居中显示。9.为表格添加摘要（摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。）21.
23.标签
用于插入图片
1.src：标识图像的位置（地址）
2.alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本。
3.title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)。
4.图像可以是GIF，PNG，JPEG格式的图像文件。
24.标签
表单标签用于把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
1.
2. ：标签是成对出现的，以开始，以结束。
3.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
4…method ： 数据传送的方式（get/post）。
5.所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 标签之间（否则用户输入的信息可提交不到服务器上哦！）
25.标签
1.
2.当type="text"时，输入框为文本输入框;
3.当type="password"时, 输入框为密码输入框。
4.当 type=“radio” 时，控件为单选框。value为选项的值。
5.当 type=“checkbox” 时，控件为复选框。value为选项的值。
6.当type值设置为submit时，表现为有提交作用的控件按钮。value值为按钮上显示的字
7.当type值设置为reset时，表现为有提交作用的控件按钮。value值为按钮上显示的字
8.name：命名，以备后台程序ASP 、PHP使用。作为单复选框时，同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。
9.value：为文本输入框设置默认值。(一般起到提示作用)。
10.checked：作为单复选框时，当设置 checked=“checked” 时，该选项被默认选中.
26.标签
1.文本
2…用于在表单中输入大段文字
3.cols 多行输入域的列数。rows多行输入域的行数。（这两个属性可用css样式的width和height来代替：col用width、row用height来代替。）
27.标签
1.看书
2.用作实现下拉列表，value值为向服务器提交的值，设置selected="selected"属性，则该选项就被默认选中。
3.在标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。
28.
六、扩展思考
1、css选择器的用法
详见各相关网站资料
七、参考文献
/6549.html
/p/6bc1fc059b51
/zhouyouyangyuchen/p/7122925.html
八、更多讨论
问题：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 : 陈凯
