美文网首页
html学习之路(三)- 块级标签

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

作者: 绝弹 | 来源:发表于2018-11-08 20:58 被阅读0次
<!-- 块级标签(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>

相关文章

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

    div标签 p标签 pre标签 figure标签 figcaption标签 ul标签 ol标签 li标签 dl标签...

  • HTML标签类型

    /*HTML标签类型 html /*HTML标签类型 1.块级标签:*1....

  • HTML中块级元素和行内元素

    HTML标签CSS盒模型块级元素和行内元素的定义块级元素和行内元素的分类 1、 HTML标签 html标签定义: ...

  • 前端编程之路一一HTML标签分类

    HTML标签分类 HTML标签有更多种,不仅限于以下标签,仅作记录。 块级元素 块级元素(block level ...

  • display

    一.HTML标签的分类 块级标签(block) 典型的块级标签: , ,, , 它们具有如下...

  • HTML常用标签介绍

    html中标签有很多,主要分为三组,分别是块级元素、内联元素、内联块级元素。 块级元素 常见的块级元素有 ~ 、 ...

  • 2020-02-25小程序学习

    一、小程序的基础 view块级元素 text 行级元素 1.组件开始学习:类似HTML 标签,高于HTML,内部封...

  • CSS布局(inline和block)

    CSS内联元素和块级元素, 内联块级元素 HTML语言标签元素被分为三种类型: 内联元素(行内元素), 块级元素,...

  • 小白的前端之路-HTMl

    HTML——超文本标记语言 HTMl里面有标签,标签又分为单标签和双标签,也分为行级元素和块级元素 标签是用<>包...

  • html常用标签

    今天韩老师主要讲了HTML的常用标签,在我的今天的学习当中,主要学习到了一些行级标签以及块级标签,主要内容如下所示...

网友评论

      本文标题:html学习之路(三)- 块级标签

      本文链接:https://www.haomeiwen.com/subject/otgbxqtx.html