HTML5页面元素与属性详解-CSDN博客

本文链接：https://blog.csdn.net/weixin_51186210/article/details/112997540

本文介绍了HTML5中三种列表元素：ul（无序列表）、ol（有序列表）和dl（定义列表）。无序列表支持disc、circle、square和none属性；有序列表可以设置start属性调整起始编号和reversed属性进行反向排序；定义列表常用于术语解释。此外，还讲解了division（div）块级元素用于文档分区，以及表格的基本结构和样式属性，如border、width和height。最后，展示了跨行和跨列的表格实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5页面元素及属性

1.列表元素：ul（无序列表） ol（有序列表）dl（定义列表）
1.1无序列表：基本语法

 <ul>
  <li>列表项1</li>
  <li>列表项2</li>
  ...........
  </ul>

属性：disc实心圆点 circle空心圆点 squre实心方块 none无项目符号
1.2有序列表：有排列顺序的列表

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  ...........
  </ol>

属性：start:可以更改列表项的编号的起始值 reversed：表示是否对列表进行反向排序
1.3 定义列表:常用与对术语或者名词进行解释和描述。
基本语法

<dl>
<dt>名词1</dt>
  <dd>名词1 解释1</dd>
  <dd>名词1 解释2</dd>
 <dt>名词2</dt>
  <dd>名词2 解释1</dd>
  <dd>名词2 解释2</dd>
.。。。。。。。
  </dl>

<div>标记

division区域。。。块级标记
用来定义文档中的分区，把文档分割成独立的、不同的部分，是一个容器标签。其中的内容可以是任何的HTML元素。
<div>HTML元素</div> style
表格
表格的结构：行、列、单元格。
表格的基本语法:表格主要有3个标记来构成：<table> <tr> <td>分别代表表格标签、行的标记、表项标记。
Border：定义表格边框 width:表格的宽度 height:表格的高度
举例1：制作一个2行3列的表格

<html>
<head>
<title>页面中添加一个2行3列的表格</title>
</head>
<body>
<table border="2">
<tr>
<td>1行1列的单元格</td>
<td>1行2列的单元格</td>
<td>1行3列的单元格</td>
</tr>
<tr>
<td>2行1列的单元格</td>
<td>2行2列的单元格</td>
<td>2行3列的单元格</td>
</tr>
</table>
</body>
</html>

页面中添加一个2行3列的表格

1行1列的单元格	1行2列的单元格	1行3列的单元格
2行1列的单元格	2行2列的单元格	2行3列的单元格

不规则的表格： colspan和rowspan属性用于建立不规则的表格。

1.跨行

<table>
<tr>
<td rowspan=”所垮的行数”>单元格内容</td>
</tr>
</table>

跨行表格实例：

<html>
<head>
<title>页面中添加一个2行3列的表格</title>
</head>
<body>
<table width="300" border="2">
<tr>
<td rowspan="2">科技类图书</td>
<td>航天系列</td>
<td>4000</td>
</tr>
<tr>
<td>网络系列</td>
<td>3000</td>
</tr>
<tr>
<td rowspan="2">美食类图书</td>
<td>陕菜系列</td>
<td>5000</td>
</tr>
<tr>
<td>粤菜系列</td>
<td>3000</td>
</tr>
</table>
</body>
</html>

页面中添加一个2行3列的表格

科技类图书	航天系列	4000
科技类图书	网络系列	3000
美食类图书	陕菜系列	5000
美食类图书	粤菜系列	3000

跨列：跨列是指单元格在水平方向上合并

<table>
<tr>
<td colspan=”所跨的列数”>单元格内容</td>
</tr>
</table>

跨列表格实例：

<html>
<head>
<title>页面中添加一个2行3列的表格</title>
</head>
<body>
<table width="300" border="2">
<tr>
<td colspan="2">图书分类销量</td>
</tr>
<tr>
<td>科技类图书</td>
<td>7000</td>
</tr>
<tr>
<td>美食类图书</td>
<td>4000</td>
</tr>
</table>
</body>
</html>

页面中添加一个2行3列的表格

图书分类销量
科技类图书	7000
美食类图书	4000

表格数据的分组标签： thead tbody tfoot主要用于表格进行逻辑分组。如果使用以上三个元素，就必须全部使用。例：制作图书季度销量数据报表

<html>
<head>
<title>图书季度销售数据报表</title>
</head>
<body>
<table width="500" border="8">
  <caption>图书季度销售数据报表</caption>
  <thead style="background:#0af">
    <tr>
      <td>季度</td>
      <td>销量</td>
    </tr>
  </thead>
  <tbody style="background:#6cc">
    <tr>
      <td>一季度</td>
      <td>16000</td>
    </tr>
      <td>二季度</td>
      <td>14600</td>
    <tr>
      <td>三季度</td>
      <td>18800</td>
    </tr>
    <tr>
      <td>四季度</td>
      <td>14500</td>
    </tr>
    <tr>
    </tr>
  </tbody>
  <tfoot style="background:#ff6">
    <tr>
      <td>季度平均销量</td>
      <td>15700</td>
    </tr>
      <td>总计</td>
      <td>68800</td>
    <tr>
    </tr>
  </tfoot>
</table>
</body>
</html>