常用块标签和列表

最新推荐文章于 2025-12-20 20:37:31 发布

原创最新推荐文章于 2025-12-20 20:37:31 发布 · 375 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

常用块标签和列表

标题标签

<开始标签>标签体</结束标签>

 h1-h6标题 语义逐步降低 字体大小也是逐渐变小

 <h1>一级标题</h1> ==>网页的logo标志常用 且 只能用一次  用h1去写logo对浏览器搜索优化比较好
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>

默认样式：加粗字体有变化上下大概有20px的外边距

语义：标题标签用来包裹内容 h1-h6语义逐步降低 h1语义最重所以一个页面只能用一次

使用场景：除了页面中是标题的部分，还有网页logo(常用h1)

段落标签

 <p>
   段落
 </p>

默认样式：上下大概有16px的外边距

语义：用段落标签包过的内容就是一个段落

注意：p标签不能包裹块标签

center标签

默认样式：居中显示

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

 一张表格放在最左边看不太舒服 可以把他居中到页面中间

 <center>
   <table>
     <tr>
       <td></td>
     </tr>
       ·
       ·
       ·
   </table>
 </center>

H5 新增的页面结构标签

header：网页头部

main：网页主体

footer：网页底部

header、main、footer 一个页面只使用一次

aside：侧边栏，与主体相关的内容

article：表示文章的区域

section：如果某个区块没有具体的特殊的语义，即可用section标签用来代替div标签的

 <body>
   <header></header> ==>网页头部
   <main>  ==>主体部分
     <aside></aside> ==>侧边栏 或 右侧导航栏
     ……
     <article></article> ==> 文章部分
     ……
   </main> 其中没有语义的部分都用div或section标签来写
   <footer></footer> ==>网页底部 如：版权信息
 </body>

div标签

语义：如果某个区块没有具体的特殊的语义就可以用

注意：有语义的地方尽量用有语义的标签 div要慎用

hgroup标签

语义：标题分组

 把标题放在一个盒子里 如古诗的古诗名和作者

 <hgroup>
   <h1>古诗名</h1>
   <h2>作者</h2>
 </hgroup>

列表标签

列表的概念

创建列表在列表中书写列表项

列表使用场景

结构、样式、语义雷的部分都可以使用列表

列表的分类

有序列表：有一定的顺序

创建有序列表

 有序列表 列表项有顺序要求 如：计划打扫卫生 先扫地 再拖地 ……

 <ol>
   <li>第一步</li>
   <li>第二步</li>
   <li>第三步</li>
 </ol>

默认样式：有上下有16px外边距左侧有40px内边距列表项默认增加1,2,3...n 项目符号

无序列表：没有顺序要求

 无序列表 列表项没有顺序要求 如：一日三餐想吃什么

 <ul>
   <li>想吃烧饼</li>
   <li>想吃水饺</li>
   <li>想吃炒饭</li>
 </ul>

默认样式：有上下有16px外边距左侧有40px内边距列表项默认增加实心黑色圆点项目符号

定义列表：有定义有内容 dt下定义(小标题) dd对定义内容的补充

 定义列表

 <dl>
   <dt>科目</dt> ==>定义科目 下面的dd标签就要与科目有关
   <dd>语文</dd> 
   <dd>数学</dd>
   <dt>成绩</dt> ==>定义成绩 下面的dd标签就要与成绩有关
   <dd>语文成绩</dd>
   <dd>数学成绩</dd>
 </dl>

默认样式：有上下有16px外边距左侧有40px外边距

列表的注意点

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

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

ul type属性值可选值：disc(默认) 实心小黑点 square：实心方块 circle：空心的圆

2、在实际开发中，一般不区分使用有序无序列表

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

4、列表和列表项都是搭配使用，一般不在列表里添加其他元素，但可以在列表项里添加其他元素
 <ul>
   <div></div>   ==>错误示范
   <li></li>
 </ul>
 正确写法
 <ul>
   <li><div></div></li>  ==>把其他标签放在li标签里
 </ul>