HTML列表标签及表格语法

1、HTML列表标签

### 1、无序列表

各列表项之间没有次序，各项之间为并列关系

- 语法

```

<ul><!-- 列表容器 -->

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

</ul>

```

- 特性

- 宽度默认撑满整个父元素

- 高度默认由内容撑开

- 独立成行

- 自带外间距

- 自带内填充(内间距)

- 自带列表符，去掉自带列表符 li{ list-style: none; }

- css属性

- list-style-type属性：列表符类型

- circle空心圆|disc实心圆，默认值|square实心正方形|none去掉列表符

* 应用场景 : 新闻列表 、导航 、商品列表

* 注意：ul的直接子元素只能是li

### 2、有序列表

有排列次序

- 语法

```html

<ol><!-- 列表容器 -->

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

</ol>

<ol start="6" reversed type="I">

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

</ol>

strat属性:开始值 写在 <ol start="6"></ol>开始标签中

reversed属性：倒叙 写在 <ol start="6" reversed></ol>开始标签中

type属性（了解）

- `a`: 小写字母

- `A`: 大写字母

- `i`: 小写罗马数字

- `I`: 大写罗马数字

- `1`: 数字 默认值

```

- 特性

与无序列表基本一致

- 应用场景: 有序的列表

### 3、自定义列表

```html

自定义列表

语法：

<dl>

列表容器

<dt>词专业名</dt>

<dd>对专业名次的解释</dd>

</dl>

在浏览器中，dd标签的内容会缩进显示

<dl>

<dt>词专业名</dt>

<dd>对专业名次的解释</dd>

<dt>web大前端</dt>

<dd>HTML、CSS、JAVASCRIPT</dd>

</dl>

> 浏览器显示，dd标签的内容会缩进显示

- 特性

- 宽度默认撑满整个父元素

- 高度默认由内容撑开

- 独立成行

-dl dt dd都是块级标签

dl标签自带外间距

dd标签自带外间距

浏览器显示，dd标签的内容会缩进显示

典型应用

- 名词解释、分类（大分类-细节的类别）

```

## 2、语义化

### 1、什么是HTML语义化？

用合适的标签去匹配相应的内。（例如标题用 h1-h6、段落用 p 标签，合理得给图片添加alt属性等）

### 2、语义化的好处有哪些？

- 在没有 CSS 的情况下，页面也能呈现出很好地内容结构。

- 使代码更具【可读性】，便于团队开发和维护。

- 有利于SEO搜索引擎优化（在搜索框搜索内容的时候更好更快的搜到）

- 有利于【用户体验】（例如：title、label 标签、alt属性的灵活运用）

# 3、表格

## 1、表格简介

表格由 table 标签来定义。每个表格均有若干行（由tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。

类比：excel表格&网页中的表格

## 2、表格的作用

- 之前：web开发人员过去也常常使用表格来完成整个网页布局，结构嵌套复杂修改维护困难被DIV+CSS取代


- 现在：用于显示、展示数据,(能够简捷迅速地查找或呈现不同类型的数据及它们之间的关系)


- 注意：现在HTML 表格应该用于表格数据，而不是来实现网页布局

## 表格基本标签

## 3、表格基本标签

- table

- 语法: <table></table>

- 作用:定义表格

- tr

- 语法: <tr></tr>

- 作用:定义表格中的行

- td

- 语法: <td></td>

- 作用：普通单元格，定义表格数据（table data）

单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

- 默认样式:内容水平居左，垂直居中

- th

- 语法:<th></th>

- 作用:表示表头单元格，通常在行或列的开始处，定义行或列包含的数据类型

- 默认样式：字体加粗，内容水平居中，垂直居中

```html

<table>

<tr>

<td>姓名</td>

<td>年龄</td>

</tr>

<tr>

<td>张三</td>

<td>18岁</td>

</tr>

<tr>

<td>王五</td>

<td>12岁</td>

</tr>

</table>

表包含三部分：table tr 单元格（th td）

table:表格的容器

tr:表格的行

th:表头单元格,默认文字加粗，水平方向和垂直方向居中显示

td:普通单元格,默认水平居左，垂直方向居中

注意：1.表格必须嵌套在table中

2.单元格必须嵌套在tr行标签中

3.在单元格内可以添加任意的标签和内容

```

## 4、表格常用属性

### table属性

- width\height

- 语法

```

<table width="1000" height="500" border="1" cellpadding="0" cellspacing="0">

```

- 作用：定义表格的宽或高

- 注：省略单位 默认px

- border

- 作用 ：使用表格的边框属性可以显示一个带有边框的表格。

- 注意：如果不定义边框属性，表格将不显示边框。

- cellpadding

- 作用：定义单元格中内容和边框之间的间距,单位是像素，可以省略

- cellspacing

- 作用：单元格和单元格之间的间距,默认值为2，单位是像素，可以省略

cellspacing='0',单元格之间的距离为0

- borderColor：

* 改变边框的颜色

```html

<table border="1" borderColor="#ffa500"></table>

```

### td,th属性

语法：

```

<td width="100" height="100" align="center" valign="middle">

```

- width\height

- 作用：定义单元格宽度、高度

- 注意：省略单位 默认px

- align

- 作用：单元格水平方向的对齐方式

- 取值

- left左对齐

- center 居中对齐

- right 右对齐

- valign

- 作用：单元格垂直方向的对齐方式

- 取值

- top顶部对齐

- middle居中对齐

- bottom底部对齐

## 5、合并单元格

- rowspan

- 作用：跨行合并

语法：<td rowspan="2"> 电话 </td>

- colspan

- 作用：跨列合并

语法：<td rowspan="2"> 电话 </td>

- 操作步骤

- 1.确定是合并行还是合并列

- 2.找到目标单元格，添加合并属性及合并单元格的数量如：<td rowspan="2"> 电话 </td>

- 3.删除多余单元格