news 2026/6/10 0:03:26

常用块标签和三种列表

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
常用块标签和三种列表

目录

常见的块标签:

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>

列表的注意

1、给列表增加type属性,可以修改项目符号,但一般我们不用列表的默认的项目符号

ol type属性值 可选:1(默认值),A,a,I,i

ul type属性值 可选:

disc,默认值,实心的圆点

square,实心的方块

circle,空心的圆

2、在实际开发过程中,一般不会具体区分有序列表还是无序列表,都可以使用

3、列表之间可以嵌套使用

4、列表和列表项是搭配使用,一般列表内不添加其他直接的子标签

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/10 17:05:23

Wan2.2-T2V-A14B:16倍压缩与双专家架构突破

Wan2.2-T2V-A14B&#xff1a;16倍压缩与双专家架构突破 你是否曾因视频生成模型的“三高”门槛而望而却步&#xff1f;——高参数量&#xff08;百亿级起步&#xff09;、高显存消耗&#xff08;>20GB&#xff09;、高推理延迟&#xff08;分钟级输出&#xff09;。如今&…

作者头像 李华
网站建设 2026/6/10 6:50:22

Thread类中run()和start()的区别

在Java中, run() 和 start() 方法是Thread类的两个关键方法&#xff0c;它们有本质区别&#xff1a;1.run()方法&#xff1a;run()方法是线程要执行的任务代码所在的方法。直接调用run()方法&#xff0c;它会在当前线程中执行&#xff0c;而不会启动新的线程。也就是说&#xf…

作者头像 李华
网站建设 2026/6/10 1:14:47

InstantX/FLUX.1-dev-IP-Adapter 效果实测

InstantX/FLUX.1-dev-IP-Adapter 效果实测 在生成式 AI 领域&#xff0c;我们正经历一场从“文生图”到“以图塑意、以文点睛”的深刻转变。过去&#xff0c;文本提示是图像生成的唯一指挥棒&#xff1b;如今&#xff0c;像 InstantX/FLUX.1-dev-IP-Adapter 这样的技术组合&am…

作者头像 李华
网站建设 2026/6/10 15:34:40

LobeChat能否合作高校?产学研结合新模式

LobeChat能否合作高校&#xff1f;产学研结合新模式 在人工智能技术加速渗透教育领域的今天&#xff0c;越来越多的高校开始探索如何将大语言模型&#xff08;LLM&#xff09;融入教学与科研。然而&#xff0c;一个现实问题摆在面前&#xff1a;主流闭源AI服务虽然功能强大&…

作者头像 李华
网站建设 2026/6/10 20:10:09

Windows部署GPT-SoVITS语音克隆与远程访问

Windows部署GPT-SoVITS语音克隆与远程访问 在内容创作日益个性化的今天&#xff0c;越来越多的创作者开始尝试用AI生成专属声音——无论是为短视频配音、制作有声书&#xff0c;还是打造虚拟主播形象。而在这股“声音定制”热潮中&#xff0c;GPT-SoVITS 凭借其极低的数据门槛和…

作者头像 李华
网站建设 2026/6/10 16:52:12

Playwright元素定位详解:8种定位策略实战指南

想象一下这样的场景&#xff1a;你正在编写一个自动化测试脚本&#xff0c;需要测试电商网站的购物流程。脚本运行得很顺利&#xff0c;直到某个元素突然无法定位——可能是因为开发人员修改了按钮的ID&#xff0c;或者页面结构发生了变化。这时&#xff0c;你会深刻体会到选择…

作者头像 李华