[04]HTML基础之块级标签

1. <p>标签

表示段落，多个空白符会合并成一个；<pre>标签表示预文本段落，所有空白符都不合并。

//临江仙诗句
<p>滚滚长江东逝水，浪花淘尽英雄，是非成败转头空。
青山依旧在，几度夕阳红。</p>
<pre>白发渔樵江渚上，惯看秋月春风，一壶浊酒喜相逢。
古今多少事，都付笑谈中。</pre>

2. <ul>标签

表示无序列表，表现为每个子项前都有圆点；<ol>标签表示有序列表，表现为每个子项前都有序号；<li>标签表示列表的子项目。

//无序列表
<ul> 导航：
    <li>首页</li>
    <li>分类</li>
</ul>
//有序列表
<ol> 目录：
    <li>第一章：灵感</li>
    <li>第二章：创作</li>
</ol>

3. <dl>标签

表示定义列表；<dt>标签表示定义列表的标题；<dd>标签表示定义列表的数据。

<dl>
    <dt>IEC</dt>
    <dd>国际电工委员会（International Electrotechnical Commission）成立于1906
    年，它是世界上成立最早的国际性电工标准化机构，负责有关电气工程和电子工程领域中
    的国际标准化工作。 </dd>
</dl>

4. <header>标签

语义标签，表示文档的头部；<main>标签表示文档的主体；<footer>标签表示文档的页脚。前面三个标签与<div>标签效果一致，但重在语义的强调上面。

//可以放置网站logo及导航链接
<header> 网站logo 导航链接 </header>
//可以放置文章内容或评论
<main> 文章标题 文章内容 </main>
//可以放置联系信息或版权信息
<footer> 版权信息 备案信息 </footer>

5. <article>标签

语义标签，表示重要的独立内容，例如某段文章的内容；<aside>标签表示不那么重要的偏旁内容，例如文章的分类标签，作者信息等。

<h1>断章节选</h1>
<article>你站在桥上看风景，看风景的人在桥上看你；明月装饰了你的梦，你装饰了别人的
梦。</article>
<aside>作者：卞之琳，祖籍南京市溧水区，现当代诗人、文学评论家、翻译家。</aside>

6. <hgroup>标签

语义标签，表示标题的分组；<h1>标签表示一级标题；<h2>标签表示二级标题；<h3>标签表示三级标题；<h4>标签表示四级标题；<h5>标签表示五级标题；<h6>标签表示六级标题。

<hgroup>
    <h1>宇宙历史</h1>
    <h2>世界历史</h2>
    <h3>亚洲历史</h3>
    <h4>中国历史</h4>
    <h5>唐朝历史</h5>
    <h6>安史之乱</h6>
</hgroup>

7. <address>标签

语义标签，表示文档作者的联系信息，表现为略微倾斜的字体，一般放在<footer>标签里面。

<address>联系站长：<a href="mailto:contact@juetan.cn">绝弹</a> </adress>

8. <nav>标签

语义标签，表示导航内容，与<ol>、<ul>标签相比，强调语义的作用。

<nav>
    <a href="/">首页</a>
    <a href="/about">关于</a>
</nav>

英语单词

p：段落(paragraph的缩写)
pre: 预定义(predefined的缩写)
header: 头部
main：主要
footer：脚部
article：文章
aside：旁白
h：大字标题(headline的缩写)
group：分组
adress：地址
nav：导航(navigation的缩写)
ul：无序列表(unorder list的缩写)
ol: 有序列表(order list的缩写)
li：列表项目(list item的缩写)
dl：定义列表(defined list的缩写)
dt:定义列表标题(defined title的缩写)
dd:定义列表数据(defined data的缩写)
nav: 导航(navigator的缩写)

原文链接:https://www.cnblogs.com/juetan/p/13027143.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有