资讯专栏INFORMATION COLUMN

重学 html の 标签语义化

lk20150415 / 3246人阅读

摘要:语义化是指仅仅从元素上就能看出页面的大致结构。表述类缩写表示整段话的引用表示一行文字的引用表示引述作品名两个标签结合使用,来定义图文。黄浦江上的的卢浦大桥元素可定义预格式化的文本。在语义上表达是段代码。

HTML语义化是指仅仅从 HTML 元素上就能看出页面的大致结构。我们比较习惯使用 div、span 来垒页面,视觉上没啥问题,文字既内容,html 标签只被 css 样式所用,单从 html 结构上很难看出意图。语义标签则是纯文字的补充,比如标题,自然段、章节、列表等我们使用相应的 html 标签会更好些。

语义化的好处

对开发者友好---开发者可根据html标签大概了解页面结构

对搜索引擎友好---seo 排名更靠前

对无障碍设备友好---盲人软件读屏

标签列举 结构类

article、section、nav、aside、footer、header 、ul、li 等
该类标签大家掌握理解的应该都不错,按照字面理解即可。

表述类 abbr 缩写
WWW
blockquote、q、cite

blockquote 表示整段话的引用、q 表示一行文字的引用、cite表示引述作品名

figure、figcaption

两个标签结合使用,来定义图文。

黄浦江上的的卢浦大桥
pre、code

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
code 在语义上表达是段代码。和 span 没有太大的区别。

使用原则
用对比不用好,不用比用错好。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54970.html

相关文章

  • 重学 html link标签

    摘要:元素规定了外部资源与当前文档的关系。常用于链接样式表,创建网站图标,预加载资源等。那么我们就可以在标签设置字体的。注意当界面加载时,两个样式表都会下载到客户端,只是会根据场景不同使用不同的样式。标签的和属性的区别和目的引用一步前端 link元素规定了外部资源与当前文档的关系。常用于链接样式表,创建网站图标,预加载资源等。 链接样式表  创建站点图标 预加载 用于前端界面性能优化...

    ruicbAndroid 评论0 收藏0
  • 重学 html meta 标签

    摘要:标签的个属性。缓存所有响应,但并非必须。只为单个用户缓存,因此不允许任何中继进行缓存。比如说就不允许缓存的响应表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。 meta简介 网页元数据,常用于定义网页的编码、说明、关键字、修改日期及其他信息。这些数据服务于浏览器、搜索引擎等。 meta 标签的2个属性name, http-equiv。 。 name 属性 ...

    guyan0319 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<