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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容