你真的懂HTML5的语义化吗
什么是语义化
就是用正当、正确的标签来展现内容
语义化的好处
- 代码结构清晰,方便阅读,有利于团队合作开发
- 有利于搜索引擎优化(SEO)
语义化内容标签
标题
h1 一个页面只可有一个,多用于包含logo
h2 模块标题
h3 段落的小节标题
h4, h5, h6 不常用
强调内容的重要性
<strong>智能定制</strong>
strong和em都表示强调,strong显示为粗体,em显示为斜体,且strong的强调程度要比em更高
视觉上突出显示文本
<mark></mark>
如:搜索结果中高亮的关键词(百度关键词搜索参照)
时间
<p>文章发表于<time datetime="2019-08-28 20:00">2019-08-28</time></p>
定义联络信息
<address></address>
可定义article元素的作者信息,但不适用于嵌套的article元素
代表一段独立的内容,经常与说明配合使用
<figure> <!-- 图片、图表、表格等 --> <figcaption>标题/说明</figcaption></figure>
figcaption元素必需是figure元素的第一个或者者最后一个子元素
语义化结构标签
section使用场景
对页面中的内容进行分块,一个section元素通常由标题以及内容组成
<header></header><section> <h2>标题</h2> <p>段落内容</p></section><section> <h2>标题</h2> <img src="./img/product.jpg" alt="图片说明"></section><section> <h2>标题</h2> <p>段落内容</p></section><footer></footer>
注:不推荐为那些没有标题的内容使用section标签
article使用场景
它比section具备更明确的语义,代表一个独立的、完整的相关内容块,可以包含一个或者多个section
<article> <header> <h2>标题</h2> <p>发表日期:<time datetime="2019-08-28 20:00">2019-08-28</time></p> </header> <p>文章内容段</p> <p>文章内容段</p></article>
aside使用场景
独立于内容的一部分,且可以被单独的拆分出来而不会使整体受影响,常用于定义页面侧边栏
<aside> <h2></h2> <ul> <li></li> <li></li> </ul></aside>
main使用场景
用来呈现文档或者应用的主体部分,一个页面只能有一个main标签
<main></main>
header使用场景
页面中的header
<header> <h1 role="logo"> <a href="/">梦创</a> </h1> <nav> <a href="/">首页</a> <a href="/product">产品详情</a> <a href="/about">关于我们</a> </nav></header>
分块中的header
<section> <header> <h2>标题</h2> <p>信息详情</p> </header> <p>分块内容段</p></section>
文章中的header
<article> <header> <h2>标题</h2> <p>发表日期:<time datetime="2019-08-28 18:00">2019-08-28</time></p> </header> <p>文章内容段</p></article>
注:article、section、aside、nav都可以拥有自己的header和footer
role属性的使用场景
用来加强语义性,当现有的HTML标签不能充分表达语义的时候,可以借助role来说明
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 你真的懂HTML5的语义化吗
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 你真的懂HTML5的语义化吗