在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
快速查询 article | aside | nav | section | header | footer 架构预览 nav 定义导航链接的部分 在页脚显示一个站点的导航链接,如首页、服务信息页面、版权信息页面等 <nav> <ul> <li><a href=”#”>Home</a></li> <li><a href=”#”>CSS</a></li> <li><a href=”#”>Html5</a></li> </ul> </nav> article 定义文章 装载显示一个独立的文章内容,论坛帖子、新闻、博客文章、用户评论等,artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系。 <article> <h1>标题</h1> <p> 内容</p> <article>用户评论</article> <article>回复评论</article> </article> section 定义文档中的节 章节、页眉、页脚或文档中的其他部分, <section> <h1>标题1</h1> <p>内容1</p> </section> <section> <h1>标题2</h1> <p>内容2</p> </section> aside 定义文章的侧栏 广告,成组的内容,友情链接,侧边栏等 <aside> <h1> 侧栏标题1</h1> <p>这是侧栏内容1</p> </aside> <aside> <h1> 侧栏标题2</h1> <p>这是侧栏内容3</p> </aside> header 定义文档的页眉 通常是一些引导和导航信息 <header> <p>logo</p> <nav> <ul> <li>Home</li> <li>Html5</li> </ul> </nav> </header> footer 定义文档或节的页脚 在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息 <footer> <p>© 2019 All Rights Reserved. </p> </footer> 参考文献 1 html5 | http://caibaojian.com/html5 下面是其它网友的补充 百度 IFE 任务一要求构建一个页面结构,看似简单,但需充分考虑到语义化。这篇文章简单谈谈 HTML5 语义化中的页面结构语义化的一些经验和理解。 1、为什么需要语义化 易修改、易维护。 2、结构语义化 语义元素均有一个共同特点——他们均不做任何事情。换句话说,语义元素仅仅是页面结构的规范化,并不会对内容有本质的影响。 下图展示了一个典型的页面结构。 头部 <header>元素有两种用法,第一是标注内容的标题,第二是标注网页的页眉,如上图你看到的那样。除非必要(内容标题附带其它信息的情况下:发布时间、作者等),一般不在内容中使用<header>。因而,网页中可以包含多个<header>元素。按照 HTML5 的规定,<header>都应包含某个级别的标题,所以应隐式或显式地包含标题,通常将不希望显示的标题设置为display: none;,一方面遵守规范,另一方面则提供了无障碍阅读而不至于影响到页面设计。 导航栏 导航栏使用<nav>看起来是理所当然的,进一步,它也用于一组文章的链接。一个页面可以包含多个<nav>元素,但通常仅仅在页面的主要导航部分使用它。 <!-- 案例一 --> <nav> <!-- 此处是链接 --> <aside></aside> <aside></aside> </nav> <!-- 案例二 --> <aside> <nav> <!-- 此处是链接 --> </nav> <section></section> <div></div> </aside> 如果侧栏中包含其它不同于链接的其它区块,那么,使用第二种方案显然更为合适。 导航通常包含一组链接,普遍认为,链接使用列表来组织。 <nav> <ul> <li><a href="#" title="链接">链接</a></li> <li><a href="#" title="链接">链接</a></li> <li><a href="#" title="链接">链接</a></li> </ul> </nav> 附注
当 <section>标签适合标记的内容区块: 与页面主体并列显示的小内容块。 页脚 同可“包罗万象”的 <div> <aside> <!-- 其它内容 --> </aside> <footer> <!-- 法律、版权、来源、联系信息等 --> </footer> </div> 主要内容 在早先的 HTML5 版本中并没有规定页面主体的标签,相关的书中经常会说:除去头部、尾部、侧栏等其它部分,剩下的自然是主体部分。 然而,HTML5.1 中规定了一个 文章
文章中包含插图时,使用新的语义元素<figure>标签。 <article> <h1>标题</h1> <p> <!-- 内容 --> </p> <figure> <img src="#" alt="插图"> <figcaption>这是一个插图</figcaption> </figure> </article> 上述情况下, 总结 以上所述是小编给大家介绍的HTML5常用的语义化标签,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对极客世界网站的支持! |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论