ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML5 布局标签

2021-12-04 09:03:53  阅读:149  来源: 互联网

标签:标签 section 布局 HTML5 文章 article div


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

标签:标签,section,布局,HTML5,文章,article,div
来源: https://blog.csdn.net/Lonelydesertea/article/details/121709378

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有