<!-- 块级标签(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 ©绝弹版权所有 <adress>联系邮箱:952222@163.com</adress>
</footer>
</body>