什么是块级标签?
块级标签:在网页中显示为块。一般独占一行,新的块级标签将从新的一行开始排列。它可容纳内联元素和其他块级元素。
1.
…
:标题标签
设置了段落标题的大小,共6级。
最大
最小
基础用法:
<h1>标题文字</h1>
示例:
<body> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> </body>
2.
:水平标签
添加水平分隔线,让页面更容易区分段落。⬇️就像下方的这条线。
3.
:换行标签
可以控制段落中文字的换行显示。一般的浏览器会根据窗口的宽度自动将文本进行换行显示。
示例:
<body> <p>欢迎您的来访<br/> 感谢您的支持<br/> GUIDM</p> </body>
4.
:段落标签可以区分段落,不同的段落间会自动增加换行符,段落上下方会有一个空行的间隔。
基础用法:
<p>段落标签</p>
示例:
<body> <p>欢迎您的来访</p> <p>感谢您的支持</p> <p>GUIDM</p> </body>
5. :引用标签
使用引用标签来表示引用的文字,同时会将标签内的文字缩进显示。
cite属性:表明引用的来源,一般表明引用网址。
基础用法:
<blockquote cite="http://www.baidu.com"></blockquote>
示例:
<body> GUIDM <blockquote>欢迎你的来访,感谢您的支持</blockquote> GUIDM </body>
6.:预格式标签
预格式标签可以将文字按原始的排列方式进行显示。
基础用法:
<pre>按原格式显示的文字</pre>
示例:
<body> <pre> GUIDM GUIDM GUIDM GUIDM GUIDM GUIDM GUIDM GUIDM GUIDM GUIDM </pre> </body>
7.
:无序列表标签
将文字段落向内缩进,并在每个列表项前加上:实心圆形(disc)、空心圆形(circle)、方形(square)。
基础用法:
<ul> <li>第一项</li> <li>第二项</li> </ul>
示例:
<body> <ul type="disc"> <li>欢迎您的来访</li> <li>感谢您的支持</li> </ul> <ul type="circle"> <li>欢迎您的来访</li> <li>感谢您的支持</li> </ul> <ul type="square"> <li>欢迎您的来访</li> <li>感谢您的支持</li> </ul> </body>
8.
:有序列表标签
-
标签的属性:
属性 | 属性值 | 注意 |
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> <dt>定义列表的标题</dt> <dd>描述第一项</dd> <dd>描述第二项</dd> …… </dl>
示例:
<body> <dl> <dt>GUIDM简介</dt> <dd>计算机专业在读生</dd> <dd>从网络安全转向web前端</dd> <dd>我希望我可以永远年轻永远充满活力</dd> </dl> </body>
10.
:分区标签可以定义文档中的分区或节,将文档分隔为独立的,不同的部分。
它是可用与于组合其他HTML5标签的容器。
由于它属于块级标签,浏览器会在其前后换行显示。
标签的一个常见用途是文档布局。
如果与CSS样式一起使用,可以用于对大的内容块设置样式属性。
基础用法:
<div>这是一个div</div>
示例:
<body> <div style=" width: 100px; height: 100px; background-color: aqua;" >这是一个div</div> </body>