html学习之路(三)- 块级标签

<!-- 块级标签(21),以下标签分类,仅方便个人记忆,并非官方给出,暂时写列出标签,以后再慢慢补上 -->

<!-- 独立块级 -->
<div>典型块级</div>
<p>文本段落</p>
<pre>文本预格式段落</pre>
<figure>独立内容</figure>
<figcaption>内容标题</figcaption>

<!-- 列表块级 -->
<ul>无序列表</ul>
<ol>有序列表</ol> <!-- 3属性 -->
<li>列表子项</li> <!-- 1属性 -->
<dl>定义列表</dl>
<dt>定义标题</dt>
<dd>定义内容</dd>

<!-- 语义块级 -->
<header>头部部分</header>
<nav>导航部分</nav>
<main>主体部分</main>
<section>区域部分</section>
<h1>标题部分</h6>
<hgroup>标题分组</hgroup>
<article>独立部分</article>
<aside>旁边部分</aside>
<footer>尾部部分</footer>
<adress>联系信息</adress>

div标签

说明:典型的块级标签,一般作为样式容器,并无特别语义。
属性:暂无
用法:
<!-- 作为样式容器,添加样式 -->
<div  class="red-font">青箬笠,绿蓑衣,斜风细雨不须归。</div>

p标签

说明:定义文本段落,忽略多余空白符,一般用于放置文本。
属性:暂无
用法:
<!-- 示例 -->
<p>日暮酒醒人已远,满天风雨下西楼。</p>

pre标签

说明:定义预格式文本段落,保留所有空白符。
属性:暂无
用法:
<!-- 怎么输入,怎么显示 -->
<pre>
  西窗下,
    风摇翠竹,
      疑是故人来。
</pre>

figure标签

说明:定义一段独立的内容,配合figcaption标签使用。
属性:暂无

figcaption标签

说明:定义figure标签内容的标题。
属性:暂无
<!-- 这段内容通常是独立的,与主体无关 -->
用法:
<figure>
  <img src="source.jpg">
  <figcaption>Source</figcaption>
</figure>

ul标签

说明:定义无序列表,配合li标签使用。
属性:暂无(样式修改请用CSS)
用法:
<!-- 不需排列顺序的内容 -->
<ul>
  <li>广西</li>
  <li>广东</li>
</ul>

ol标签

说明:定义有序列表,配合li标签使用。
属性:
1.type属性定义序号类型:a(小写),A(大写),i(小写罗马),I(大写罗马),1(数字,默认)
2.start属性定义开始序号:数值
3.reversed属性定义序号倒置:布尔值
用法:
<!-- 一个大写字母排序,序号倒置的列表 -->
<ol type="A"  reversed>
  <li>第一</li>
  <li>第二</li>
<ol>

li标签

说明:定义ol标签或ul标签的子项。
属性:value属性定义当前项的序列值,仅在ol标签中有效。
用法:
<ol>
  <li value="5">从5开始</li>
  <li>这里是6</li>
</ol>

dl标签

说明:定义一个包含术语定义即术语描述的列表(配合dt,dd标签使用)。
属性:暂无

dt标签

说明:定义一个术语的定义(配合dl,dd标签使用)
属性:暂无

dd标签

说明:定义一个术语的描述(配合dl,dt标签使用)
属性:暂无
用法:
<!-- 以上三个标签都不能单独使用,需要一起使用 -->
<dl>
  <dt>虎牙直播</dt>
  <dd>技术驱动娱乐,弹幕式互动直播平台</dd>
  <dt>斗鱼直播</dt>
  <dd>每个人的直播平台</dd>
</dl>

header标签

说明:定义一个头部部分,语义标签。
属性:暂无

nav标签

说明:定义一个导航部分,语义标签。
属性:暂无

main标签

说明:定义一个主体部分,语义标签。
属性:暂无

section标签

说明:定义一个独立部分,语义标签,略微却别与article标签。
属性:暂无

h1~h6标签

说明:定义一个标题,语义标签,一般用于文章。
属性:暂无

hgroup标签

说明:定义一个标题容器,语义标签,当有多级标题时使用。
属性:暂无

article标签

说明:定义一个独立结构,语义标签,略微区别于section标签。
属性:暂无

aside标签

说明:定义一个无关部分,语义标签,如个人笔记,相关广告,个人资料等。
属性:暂无

footer标签

说明:定义一个尾部部分,语义标签,可放置友情链接,版权声明等。
属性:暂无

adress标签

说明:定义一个联系信息,语义标签,如文章作者,联系电话,联系邮箱等。
属性:暂无
使用:
<!-- 以上10个语义标签,可简单示例如下,具体应用视情况而定 -->
<body>

  <!-- 头部导航部分 -->
  <header>
    <a href="index.html"><img src="logo.jpg"></a>
    <nav>
      <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="article.html">文章</a></li>
        <li><a href="product.html">作品</a></li>
        <li><a href="about.html">关于</a></li>
      </ul>
    </nav>
  </header>

  <!-- 文档主体内容 -->
  <main>
    <section>
      <h1>大圣归来</h1>
      <p>作者:绝弹 发布时间:<time datetime="2018-11-23" pubdate>2018-11-23</time></p>
    </section>
    <article>
      <p>一花一世界,一叶一菩提,如是知 如是见,如是信解而已,
         一切皆为虚幻,命由己造,相由心生,一  念愚即般若绝!
      </p>
    </article>
    <aside>
      标签:大圣,绝弹
    </aside>
  </main>

  <!-- 尾部部分一般声明版权,友情链接,链接信息等 -->
  <footer>
    Copyright &copy;绝弹版权所有 <adress>联系邮箱:952222@163.com</adress>
  </footer>

</body>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容