使用HTML中的一些语义化标签来替代div的使用,可以使界面在没有CSS的情况下具有一定的结构性,并且能让代码看起来更加的易读,易管理。HTML5中新增的语义化标签大概有以下几种:
<main>文档中的主体部分,应该是唯一的</main>
<header>页眉</header>
<aside>与网站主内容无太大关联的内容,如侧边</aside>
<nav>导航</nav>
<section>文档中的某个区域</section>
<article>可以独立于本身进行阅读的文档,比如论坛、博客、新闻</article>
<details>
<summary>可以为details标签设置一个可见的标题</summary>
提供一个可开启、关闭的交互式控件,放置需要补充的详细内容。
添加open属性,可以控制内容的展开或收起
</details>
// 可以定义文档中的图片
<figure>
<img src="./test.jpg" />
<figcaption>可以figure标签添加图片标题</figcaption>
</figure>
<mark>部分文本高亮</mark>
<time>定义时间和日期</time>
<footer>页脚</footer>
详见下图: