web标准和 HTML 语义化

最新推荐文章于 2023-05-28 18:49:07 发布

s_kzn

最新推荐文章于 2023-05-28 18:49:07 发布

阅读量182

点赞数 1

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/m0_61700036/article/details/122748453

版权

1、web标准

web标准，简单来说就是将页面的结构、表现和行为各自独立实现（结构、表现和行为相分离原则）。结构主要由html标签组成，通俗来讲，写入body里的各种标签都是为了页面的结构；表现指的是css样式表，通过css样式表，可以使写入body的结构标签更具有美感；行为指的是页面和用户具有一定的交互，同时页面结构和样式会发生变化，主要由js构成。

web标准一般将三部分独立分开，使它们更加模块化。但一般产生行为时，结构和表现会发生变化，这三者之间的界限就会变模糊。

2、w3c

W3C对web标准提出了规范化的要求，在实际编程中，包含以下几点：

（1）对结构的要求：

（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）

a、标签字母要小写；

b、标签要闭合；

c、标签不允许随意嵌套。

（2）对css和js的要求：

1）尽量使用外联css样式表和 js脚本，使结构、表现和行为分成三块，符合规范，同时提高页面渲染速度，提高用户体验；

2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class命名要做到见文知义，标签越少，加载越快，用户体验更高，代码维护更简单，便于改版；

3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

3、Html 语义化

（1）什么是语义化

语义化，顾名思义，就是你写的HTML结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。那么，我们以后再开发的过程中，一定要注意了，尽量使用官方的有语义的标签，不要再使用一堆无意义的标签去堆你的结构。

（2）为什么要语义化

a. 为了在没有CSS的情况下，页面也能呈现出很好的内容结构、代码结构:为了裸奔时好看；

b. 用户体验：例如title、alt用于解释名词或解释图片信息的标签尽量填写有含义的词语、label标签的活用；

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

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

e. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

（3）写Html 代码需要注意

1. 尽可能少的使用无语义的标签div和span；

2. 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

3. 不要使用纯样式标签，如：b、font、u等，改用css设置。

4. 需要强调的文本，可以包含在strong或em标签中，strong默认样式是加粗（不要用b），em是斜体（不要用i）；

5. 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用footer包围。表头和一般单元格要区分开，表头用th，单元格用td；

6.表单域要用fieldset标签包起来，并用legend标签说明表单的用途；demo

7.每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

8.补充一点：不仅写html结构时，要用语义化标签，给元素写css类名时，也要遵循语义化原则，不要，随便起个名字就用，那样等以后，再重构时，非常难读。最忌讳的是不会英文，用汉语拼音代替。别那么LOW 。

（4）Html 常见语义化标签

<h1>~<h6> ，作为标题使用，并且依据重要性递减，<h1> 是最高的等级。
<p>段落标记，知道了 <p> 作为段落，你就不会再使用 <br /> 来换行了，而且不需要 <br /> 来区分段落与段落。<p> 中的文字会自动换行，而且换行的效果优于 <br />。段落与段落之间的空隙也可以利用 CSS 来控制，很容易而且清晰的区分出段落与段落。
<ul>、<ol>、<li>，<ul> 无序列表，这个被大家广泛的使用，<ol> 有序列表不常用。在 Web 标准化过程中，<ul> 还被更多的用于导航条，本来导航条就是个列表，这样做是完全正确的，而且当你的浏览器不支持 CSS 的时候，导航链接仍然很好使，只是美观方面差了一点而已。
<dl>、<dt>、<dd>，<dl> 就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。dl不单独使用，它通常与dt和dd一起使用。dl开启一个定义列表，dt表示要定义的项目名称，dd表示对dt的项目的描述。
<em>、<strong>，<em> 是用作强调，<strong> 是用作重点强调。
<table>、<thead>、<tbody>、<td>、<th>、<caption>，就是用来做表格不要用来布局

（5）Html 新增标签

header元素：header 元素代表“网页”或“section”的页眉。
footer元素：footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。
hgroup元素：
nav元素：nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。
aside元素：aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）
section元素：section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。
article元素：article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。