HTML-块级元素
【摘要】 什么是块级标签？块级标签：在网页中显示为块。一般独占一行，新的块级标签将从新的一行开始排列。它可容纳内联元素和其他块级元素。1.<h1></h1>…<h6></h6>：标题标签设置了段落标题的大小，共6级。<h1>最大 <h6>最小基础用法：<h1>标题文字</h1>示例：<body> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> ...
什么是块级标签？
块级标签：在网页中显示为块。一般独占一行，新的块级标签将从新的一行开始排列。它可容纳内联元素和其他块级元素。
1.<h1></h1>…<h6></h6>：标题标签
设置了段落标题的大小，共6级。<h1>最大 <h6>最小
基础用法：
<h1>标题文字</h1>
示例：
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>2.<hr/>：水平标签
添加水平分隔线，让页面更容易区分段落。⬇️就像下方的这条线。
3.<br/>：换行标签
可以控制段落中文字的换行显示。一般的浏览器会根据窗口的宽度自动将文本进行换行显示。
示例：
<body>
<p>欢迎您的来访<br/>
感谢您的支持<br/>
GUIDM</p>
</body>4.<p></p>：段落标签
可以区分段落，不同的段落间会自动增加换行符，段落上下方会有一个空行的间隔。
基础用法：
<p>段落标签</p>示例：
<body>
<p>欢迎您的来访</p>
<p>感谢您的支持</p>
<p>GUIDM</p>
</body>5.<blockquote></blockquote>：引用标签
使用引用标签来表示引用的文字，同时会将标签内的文字缩进显示。
cite属性：表明引用的来源，一般表明引用网址。
基础用法：
<blockquote cite="http://www.baidu.com"></blockquote>示例：
<body>
GUIDM
<blockquote>欢迎你的来访，感谢您的支持</blockquote>
GUIDM
</body>6.<pre></pre>：预格式标签
预格式标签可以将文字按原始的排列方式进行显示。
基础用法：
<pre>按原格式显示的文字</pre>7.<ul><li></li></ul>：无序列表标签
将文字段落向内缩进，并在每个列表项前加上：实心圆形（disc）、空心圆形（circle）、方形（square）。
基础用法：
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>示例：
8.<ol><li></li></ol>：有序列表标签
<ol>标签的属性：
| 属性 | 属性值 | 注意 |
| type | 1、A、a、I、i | 设置编号样式，默认值tpye=1 |
| start | 1、2、3等整数 | 设置编号起始值 |
| reversed | reversed | 反向排序 |
编号样式的属性值 ：
| 编号样式的属性值 | 编号样式 | 备注 |
| 1 | 1,2,3,… | 阿拉伯数字 |
| A | A,B,C,… | 大写英文字母 |
| a | a,b,c,… | 小写英文字母 |
| I | I,II，III,… | 大写罗马数字 |
| i |
i,ii,iii… | 小写罗马数字 |
基础用法：
<ol type="1">
<li>第一项</li>
<li>第二项</li>
……
</ol>示例：
<body>
<ol type="1">
<li>欢迎您的来访</li>
<li>感谢您的支持</li>
</ol>
<ol type="A">
<li>欢迎您的来访</li>
<li>感谢您的支持</li>
</ol>
<ol type="a">
<li>欢迎您的来访</li>
<li>感谢您的支持</li>
</ol>
<ol type="I">
<li>欢迎您的来访</li>
<li>感谢您的支持</li>
</ol>
<ol type="i">
<li>欢迎您的来访</li>
<li>感谢您的支持</li>
</ol>9.<dl></dl>：定义列表标签
适用于对名词、概念、主题的定义
- 第一部分是名词、概念、主题，通常只有一项。
- 第二部分是相应的解释和描述，可以有多项。
基础用法：
示例：
10.<div></div>：分区标签
<div>可以定义文档中的分区或节，将文档分隔为独立的，不同的部分。
它是可用与于组合其他HTML5标签的容器。
由于它属于块级标签，浏览器会在其前后换行显示。
<div>标签的一个常见用途是文档布局。
如果与CSS样式一起使用，可以用于对大的内容块设置样式属性。
基础用法：
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）