您的位置:首页 > Web前端 > HTML

HTML语义化的理解

2019-09-23 14:51 1301 查看
原文链接:http://www.cnblogs.com/dhpong/p/10754481.html

语义化的主要目的:用正确的标签做正确的事情。

语义化验证方法:css裸奔--去掉css样式,然后看页面是否还具有很好的可读性。


语义化意义 / 优点:
1.让页面的内容结构化
2.利于浏览器解析和SEO搜索引擎优化。
3.提高代码的可维护和可重用性。

 

语义化内容:
1.标题语义化
2.图片语义化
3.表单语义化
4.表格语义化

 

图片语义化:
1.figcaption:图注文字
2.alt:给搜索引擎看
3.title:给用户看

<figure>
<img src="./01.jpg" alt="给搜索引擎用" title="给用户看">
<figcaption>741852963</figcaption>
</figure>

 

表单语义化:
1.label-for:增强鼠标的可用性
2.legend:表单组标题
3.fieldset:给表单分组

<form>
<fieldset>
<legend>表单组标题</legend>
<p>
<label for="name">名字:</label>
<input type="text" name="">
</p>

</fieldset>
</form>

 

图片显示的方式:
1.使用img标签:HTML---> 搜索引擎优化
2.作为背景图:css --> 修饰页面

 

 

H5舍弃的标签:s、 u、 big、 center、 frame。

 

转载于:https://www.cnblogs.com/dhpong/p/10754481.html

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: