HTML5 布局标签

 div: 布局标签

HTML5 布局标签

 

  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>不是独立占一行

HTML5 布局标签

 HTML5 布局标签

 

HTML5 布局标签

 

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:行内标签 区域标签

上一篇:H5新增


下一篇:520套电商行业响应式html5模板b2c商城购物网站模板HTML5化妆品电商网站模板IT类电子商务商城购物企业网站模板html5网页静态模板Bootstrap扁平化网站源码