首页 > Web开发 > 详细

html标签语义化

时间:2021-04-17 11:09:55      阅读:12      评论:0      收藏:0      [点我收藏+]

1.为什么要有语义化标签?

以前的html基本上就是div+css,然而div没有任何意义,全靠css显示页面的样式,因而近几年开发者提出了html结构的语义化,所以w3c就制订了语义化标签。

2.什么是语义化?

语义化就是构成html结构的标签要有意义,比如<header>表示头部,<main>表示页面主体,<footer>表示页面底部,那么这些标签构成的html结构就是有意义的,有语义化的,如果页面的头部,内容,底部用div表示,那么它就不是一个语义化的html结构。

3.怎么知道自己的页面结构是否语义化?

只要去掉css,看html代码的结构是否清晰,再看页面内容是否正常显示。

4.语义化的优点?

  1. 有语义化的标签的html结构更加清晰,方便编写代码;
  2. 对于团队来说,方便团队的开发与维护;
  3. 对于爬虫有利于seo,对于浏览器更加方便解析,
  4. 最重要的是对于用户
    • 因为网速的原因导致没有加载css,页面也能呈现出良好的页面结构;
    • 某些标签属性alt,title能带来良好的用户体验,还有就是用好label标签更利于用户交互,
    • 在特殊终端,如视障阅读器中语义化html可以呈现良好的结构)

5.怎么做才能写出语义化的html?

1.少使用或不使用<div><span>标签,用<p>标签代替<div>标签;
2.不使用样式标签如:<b><foot>标签;不使用<b><i>
3.强调文本放在<strong>或者<em>标签中;
4.使用表格table时,标题用<caption>,表头要用<thead>,主体部分用<tbody>包围,尾部用<tfoot>包围,表头用<th>标签,单元格用<td>
5.表单域用<filedset>,用<lengend>标签说明表单的用途;
6.<input>通过id或者for属性与<label>标签关联

6.html5新语义元素

技术分享图片

html标签语义化

原文:https://www.cnblogs.com/nnguhx/p/14669141.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!