-
HTML与CSS区别
类型 作用 关注 HTML 结构层 网页结构 CSS 表示层 网页样式
所以使用html标签时,更应该关注的是标签的语义
。样式则由CSS负责。
-
类比WORD文档
- 第一个标题是通过WORD文档中
预设的标题
样式实现的 - 第二个标题是通过修改
字体样式
实现的 两者都能实现同样的样式效果,那么我们为什么要使用标题样式呢? 因为预设的标题样式赋予的标题意义
是通过字体样式修改方式没有的。 那标题意义的字体到底有什么作用呢? 当我写好一篇文章想要通过写好的标题设置目录时,这时的标题一定要设置成WORD文档预设的标题。因为只有是真正意义上的标题才能设置成目录,而不是那些长得像标题的‘标题’。 这就好像在网页的搜索引擎中,用heading
的H1~H6
设置的标题才能让它知道这是一个标题,从而获取网页主要内容。 -
什么是语义化?
就是用最恰当的标签来展示内容。验证语义化的方法就是去掉css样式,然后看看页面是否还有良好的可读性。相信大家在刚开始学做网页的时候都是使用大量的div
和span
。但是其实除了div
很多更加合适的标签应该被我们在网页中运用到。
-
语义化分类
-
结构语义化,能够让用户很好的阅读,即使没有css样式,也能呈现清晰的结构
标签 内容 <header>
页眉标签。可以有多个,不仅仅是一个页面的头部,也可以是某个部分的头部。 <nav>
导航标签。 <main>
每个页面只能使用一次,而且不能被其他标签包围 <article>
文章标签 可以是一篇文章,一则用户提交的评论,一个交互式的小部件或小工具或其他独立的内容项,例如新闻内容,电影评论,案例研究,产品描述等等。 <section>
独立内容区域。尽管定义为一个“通用”的区块,但不能与div混淆。语义上来说,section标记的是页面中的特定的区域,而div则不传达任何语义。如果是出于样式的原因要对内容添加一个容器,建议用div <aside>
附注栏标签。重要引述,侧栏,指向相关文章的一组链接(新闻网站)广告 相关产品列表 <footer>
页脚标签。 相关文档的链接版权信息作者 -
标题语义化
- h1~h6标题
我们关注的不应该是标题的样式,更重要的应该的
标题的语义
。
因为通过css样式进行渲染也可以实现一个看起来像标题的样式。但是对于浏览器来说并不知道它是一个标题,只是一个被渲染过的文本。这就好比WORD文档中只有使用预设的标题才能设置目录一样,通过修改字体字号粗体样式修改的样式并不能转换成目录。
h1~h6重要性逐渐递减,在网页中h1的重要性仅次于<title></title>
标题。从SEO角度考虑,搜索引擎在检索网页,首先要看的是<title>
标题,通过标题来判断网页的主要内容。其次看的是<h1></h1>
标题。被赋予的h1标题具有很高的权重。
- 图片语义化
<figure>
<img src="/01.JPG" alt="xxx" title="xxx"/>
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
-
1.alt:用来替换图像,描述图片。
- 为看不到文档图像的浏览者提供文字说明。比如盲人阅读器就是根据语义来渲染图片,让阅读器读给他们听,告诉他们这是什么图片。或者图片加载失败时也是显示alt属性内容。
- 在语音输入的场景下,念出alt的内容,就会自动聚焦到那些图片。
- 在搜索引擎中,根据alt理解图片信息
- 移动设备中,比如数据漫游时,图片会被关闭,这时alt属性解释图片的意思。
-
2.title:对图片的说明以及额外的补充(区别于alt)。ie中鼠标经过图片时出现文字提示。
-
3.figcaption:图注文字
-
表单语义化
<fieldset>//包裹,给表单分组
<legend>//说明表单用途
表单组标题
</legend>
<label for="name">名字</label>//让说明文本和input标签关联起来
<input type="text" name="">
</fieldset>
</form>
效果图:
- 表格语义化
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
标题用caption,表头用thread,主体用tbody,尾部用tfoot。表头一般与一般单元格分开,表头用th,单元格用td。虽然加上表头主体尾部的效果与没加是一样的,但是代码更具有逻辑性,结构更加清晰。html语义结构特别重要,尤其是在搜索引擎中。
-
总结:语义化优点
- 易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
- 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
- 方便其他设备解析,如盲人阅读器根据语义渲染网页
- 有利于开发和维护,语义化更具可读性,代码更好维护。