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

完整教程:常用块标签和三种列表

目录

常见的块标签:

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

我是一个一级标题

我是一个二级标题

我是一个三级标题

我是一个四级标题

我是一个五级标题
我是一个六级标题

2、p 段落标签

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

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

注意:一般只包含文字,不可以包含块标签

这里用的插件生成的假文

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

3、center 居中标签

默认样式:居中显示

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

不小者光为,天斯洪攻冷自血怒接出,的回。

说秦的就文,一中过心,仍选挟的护词感有。

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

header:网页的头部

main:网页的主体

footer:网页的底部

aside:页面的侧边栏,跟主体相关的内容

article:表示文章的区域

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

hr:分割线 

网页的头部
文章区域

我么无币命作身洪以。

罪明锐薪到落,盲耐。

网页的底部

5、div

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

注意:有语义的地方,尽量用有语义的标签,div需要慎用(其实用的挺多的,但是会增加浏览器的负担)

6、hgroup

话题分组

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

古诗一首

作者:xxxx

静夜思

作者:李白

床前明月光,疑是地上霜。

举头望明月,低头思故乡。

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

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

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

列表分类:ul 无序列表(无顺序要求),ol有序列表,dl描述列表(定义列表)

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

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

超市购物

  • 牙膏牙刷
  • 买点水果
  • 买点纸巾
  • 要话好明了使惜,狂。

  • 京因夹慨种,病疾国。

如果不需要默认样式

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

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

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

  1. 刷会手机
  2. 穿衣服
    1. 穿上衣
    2. 穿下衣
      • 穿左侧
      • 穿右侧
  3. 刷牙洗脸
  4. 吃早餐

3、定义列表:(有定义有内容)

用dl创建列表,dt表示下定义(小标题),dd表示对定义内容补充

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

热门课程

鸿蒙前端课程
html/css
js
vue框架
鸿蒙框架
大数据课程
python
数据分析
数据清洗
数据爬虫

列表的注意

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

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

     ul type属性值  可选:

                    disc,默认值,实心的圆点

                    square,实心的方块

                    circle,空心的圆

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

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

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

http://www.jsqmd.com/news/266692/

相关文章:

  • 2025年巴拿马出国移民公司权威推荐榜单:出国留学移民 /出国移民条件 /移民出国中介/出国移民流程/ 出国移民政策服务机构精选
  • Page Assist终极指南:在浏览器中轻松运行本地AI助手
  • Python+django的学生选课推荐互动社交系统(好友,关注,课程评价)
  • 多智能体协作驱动的多模态医疗大模型系统:RAG–KAG双路径知识增强与架构的设计与验证(下)
  • 热门的光伏防水连廊2026年哪家靠谱?最新测评 - 品牌宣传支持者
  • OpCore Simplify:黑苹果配置革命,小白也能轻松上手
  • Python+django的学生选课试卷成绩分析系统
  • STM32经验
  • 链动2+1模式S2B2C商城小程序在电商直播中的应用与影响研究
  • 深度测评MBA必看!8个AI论文网站对比与推荐
  • Python+django的学生阅读行为与图书借阅预定采购平台的设计
  • 炉石传说智能助手:自动化游戏操作完整指南
  • 全民电商时代下的链动2+1模式与S2B2C商城小程序:社交裂变与供应链协同的营销革命
  • Mem Reduct内存管理完整指南:3分钟让电脑性能飙升
  • 热门的BIPV安装2026年哪家靠谱?最新排行 - 品牌宣传支持者
  • 文章标题:西门子杯三部十层电梯程序设计与实现
  • TINYINT(1) 类型的字段,明明数据存的是 2,为什么查出来是 true
  • 终极Zotero插件管理解决方案:3分钟告别繁琐安装流程
  • AppSmith无代码开发:5分钟快速构建企业级Web应用
  • 5分钟搞定智能桌面助手:UI-TARS桌面版零基础配置实战
  • 2026年知名的轴流风机制造厂家哪家靠谱?深度解析 - 品牌宣传支持者
  • Python+django的信矿网——企业设备信息资讯展示网站
  • 5分钟搞定Docker Minecraft服务器:模组管理零烦恼解决方案
  • 城通网盘直连解析神器:突破下载限制的终极指南
  • 热门的光伏屋顶设计品牌哪家靠谱?2026年行业推荐 - 品牌宣传支持者
  • 测试数据生成工具评测:Synthetics与DataFactory的对比分析及企业应用策略
  • 2025年杭州公司律师权威推荐榜单:劳动纠纷/遗产继承纠纷/离婚律师及顾问团队精选
  • 2026年靠谱的越野踏板摩托车品牌哪家强?专业推荐 - 品牌宣传支持者
  • OBS Spout2插件终极指南:跨应用视频纹理共享全攻略
  • 终极指南:5分钟实现Revit模型到OBJ和GLTF格式的专业转换