div: 布局标签
html5新增布局标签:带有含义的div
<div style=”border: 1px solid red; width:500px;height:200px;”>aaa<div> div布局
语义标签
1.方便seo 搜索引擎好识别2.有利于程序员解读代码
<header style=”border: 1px solid red; width:500px;height:200px >头部标签</header> 以下同等
<nav>导航条</nav>
<article>板块</article>
<aside>侧边栏</aside>
<footer>底部标签</footer>
<span>是行内标签 不换行</span> <div>块标签 用来布局</div> <div>是独立占一行 <span>不是独立占一行
section和article的区分:
section
用作一段有专题性的内容,一般在它里面会带有标题。
section
典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。
<section>
<h1>文章章节小标题</h1>
<p>文章章节内容</p>
</section>
article
是一个特殊的
section
标签,它比
section
具有更明确的语义
,
它代表一个独立的、完整的相关内容块。
对于
article
标签来说,无论从结构上还是内容上来说,
article
本身就是独立的、完整的。有个最简单的判断方法是看这段内容脱离了上下文,是否还是完整的、独立的,如果是,则应该用
article
标签
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章内容</p>
</article>
综合案例:
<article> <header> <h1>文章标题</h1> <p><time datetime="2019-03-28">发表时间</time> </p> </header> <p>文章正文</p> <section> <h2>文章评论</h2> <article> <header> <h3>发表者:lanyf</h3> <p><time datetime="2019-03-28">10:13</time></p> </header> <p>评论内容</p> </article>
</section>
</article>
span:
行内标签
区域标签