当前位置：首页 > news >正文

常用块标签和三种列表

news 2026/3/27 2:15:01

常见的块标签：

1、h1-h6 标题标签

2、p 段落标签

3、center 居中标签

4、header、main、footer、aside、article、section

5、div

6、hgroup

7、列表标签：ul,ol,li,dl,dt,dd

列表的注意

块标签：主要用来搭建网页结构框架

特点：1、独占一行 2、可以设置宽高 3、如果宽度未设置则是其父元素100% ；如果高度没设置，则高度由内容撑开

常见的块标签：

h1-h6,p,center,header,main,footer,aside,article,section,hgroup,div,ul,li,ol,dl,dt,dd

1、h1-h6 标题标签

默认样式：字体加粗，大小有变化，从h1-h6字体会不断变小，标签上下有20px左右的外边距

语义：对浏览器来说被标题标签包裹的内容就是标题，语义从h1-h6逐步降低，其中h1语义最重一般一个页面只用一次h1，比如logo

<h1>我是一个一级标题</h1> <h2>我是一个二级标题</h2> <h3>我是一个三级标题</h3> <h4>我是一个四级标题</h4> <h5>我是一个五级标题</h5> <h6>我是一个六级标题</h6>

2、p 段落标签

默认样式：上下有16像素的外边距

语义：p标签包裹的内容就是一个段落

注意：一般只包含文字，不可以包含块标签

这里用的插件生成的假文

jw+数字和lorem+数字，生成对应数字的中英假文

3、center 居中标签

默认样式：居中显示

语义：凡是要居中的内容，都可以写在center里面

<center> <p>不小者光为，天斯洪攻冷自血怒接出，的回。</p> <p>说秦的就文，一中过心，仍选挟的护词感有。</p> </center>

4、header、main、footer、aside、article、section

header：网页的头部

main：网页的主体

footer：网页的底部

aside：页面的侧边栏，跟主体相关的内容

article：表示文章的区域

section：如果某个区块没有特殊的语义，则可以使用section，同样也可使用div

<header style="height:200px;background-color:#FAEBD7;"> 网页的头部 </header> <main style="height:400px;background-color:#7FFFD4;"> <aside style="height:50px;background-color:#A52A2A;"> 侧边栏 </aside> <article style="height:200px;background-color:#6495ED;"> 文章区域 <p>我么无币命作身洪以。</p> <p>罪明锐薪到落，盲耐。</p> </article> </main> <footer style="height:200px;background-color:#7FFF00;"> 网页的底部 </footer>

5、div

div 如果某个区块没有具体的特殊的语义，我们就可以用

注意：有语义的地方，尽量用有语义的标签，div需要慎用（其实用的挺多的，但是会增加浏览器的负担）

6、hgroup

话题分组

下面h1的内容和h3的内容如果不加hgroup,他俩依旧是兄弟元素，但是并没有直接联系，加了hgroup之后就有了逻辑关联。

<hgroup> <h1>古诗一首</h1> <h3>作者：xxxx</h3> </hgroup>

<hgroup> <h1>静夜思</h1> <h3>作者：李白</h3> </hgroup> <article> <p>床前明月光，疑是地上霜。</p> <p>举头望明月，低头思故乡。</p> </article>

7、列表标签：ul,ol,li,dl,dt,dd

列表定义：使用ul,ol,dl,创建列表，然后在列表中写列表项

列表使用场景：如果结构、样式、语义存在高度相同的部分就可以使用列表

列表分类：ul 无序列表（无顺序要求），ol有序列表，dl描述列表（定义列表）

1、使用ul创建列表时使用li表示列表项

默认样式：ul上下有16像素的外边距，左侧有40像素的内边距 li列表项默认新增实心黑色圆点项目符号

<h3>超市购物</h3> <ul> <li>牙膏牙刷</li> <li>买点水果</li> <li>买点纸巾</li> <li> <p>要话好明了使惜，狂。</p> </li> <li> <div>京因夹慨种，病疾国。</div> </li> </ul>

如果不需要默认样式

<ul style="list-style: none">

2、用ol创建列表，li表示列表项

默认样式：ol上下有16像素的外边距，左侧有40像素的内边距

li列表项默认新增1，2，3···的项目符号

<ol> <li>刷会手机</li> <li> 穿衣服 <ol> <li>穿上衣</li> <li>穿下衣</li> <li> <ul> <li>穿左侧</li> <li>穿右侧</li> </ul> </li> </ol> </li> <li>刷牙洗脸</li> <li>吃早餐</li> </ol>

3、定义列表：（有定义有内容）

用dl创建列表，dt表示下定义（小标题），dd表示对定义内容补充

默认样式：dl上下有16像素的外边距 dd左侧有40像素的外边距

<h3>热门课程</h3> <dl> <!-- 小标题 --> <dt>鸿蒙前端课程</dt> <dd>html/css</dd> <dd>js</dd> <dd>vue框架</dd> <dd>鸿蒙框架</dd> <dt>大数据课程</dt> <dd>python</dd> <dd>数据分析</dd> <dd>数据清洗</dd> <dd>数据爬虫</dd> </dl>