day02

a标签 利用锚点来跳转指定锚点处```html 定义锚点 <div id='锚点名称'></div> 引用锚点 <a href="#锚点名称">内容</a>

```## 1、HTML列表

#### 1、无序列表各列表项之间没有次序，各项之间为并列关系- 语法

``` <ul><!-- 列表容器 --> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul>

```- 特性 - ul 和 li 标签都是块级标签 - 宽度默认撑满整个父元素 - 高度默认由内容撑开 - 独立成行 - 自带外间距 - 自带内填充 - 自带列表符，去掉自带列表符 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 reversed></ol>开始标签中type属性（了解）- `a`: 小写字母- `A`: 大写字母- `i`: 小写罗马数字- `I`: 大写罗马数字- `1`: 数字 默认值 <!-- 倒序和开始值 --> <!-- 从10开始进行倒序 10 9 ... --> <ol start="10" reversed> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol>

```- 特性 与无序列表基本一致- 应用场景: 有序的列表

#### 3、自定义列表```html自定义列表 语法： <dl> 列表容器 <dt>词专业名</dt> <dd>对专业名次的解释</dd> </dl> dl自定义列表、dt 自定义列表项、dd自定义列表项的注释（描述） 在浏览器中，dd标签的内容会缩进显示<dl> <dt>词专业名</dt> <dd>对专业名次的解释</dd> <dt>web大前端</dt> <dd>HTML、CSS、JAVASCRIPT</dd> </dl>> 浏览器显示，dd标签的内容会缩进显示

- 特性 - 宽度默认撑满整个父元素 - 高度默认由内容撑开 - 独立成行 -dl，dd默认自带外间距典型应用- 名词解释、分类（大分类-细节的类别）

```## 2、语义化

### 1、什么是HTML语义化？ 语义化是指用合理的HTML标记以及其特有的属性去格式化文档内容。（例如标题用 h1-h6、段落用 p 标签，合理得给图片添加alt属性等）

### 2、语义化的好处有哪些？- 在没有 CSS 的情况下，页面也能呈现出很好地内容结构。 - 使代码更具【可读性】，便于团队开发和维护。 - 有利于SEO搜索引擎优化 - 有利于【用户体验】（例如：title、label 标签、alt属性的灵活运用）## 3、HTML特殊字符```html代码 效果 描述&lt; < 小于号或显示标记&gt; > 大于号或显示标记&amp; & 可用于显示其它特殊字符&reg; ® 已注册&copy; © 版权&trade; ™ 商标&nbsp; 不断行的空白&yen; ￥ 人民币```# 一、HTML表格## 学习目标- 能够说出表格的作用- 了解表格常用标签、属性的使用- 能够使用表格完成网页中数据表格的布局

## 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、表格结构标签- caption - 语法：<caption></caption>

- 作用：定义表格的标题 - 默认样式：居中于表格之上 - 注意： caption 标签必须紧随 table 标签之后- thead - 语法:<thead></thead> - 作用:用于组合 HTML 表格的表头内容- tbody - 语法:<tbody></tbody> - 作用:用于组合 HTML 表格的主体内容 - 提示：一个表格允许包含多个<tbody>- tfoot - 语法：<tfoot></tfoot> - 作用：用于组合 HTML 表格的页脚内容- 总结 - 每个表格只能定义一个标题<caption> - thead,tbody，tfoot通常配合适用,用于划分表格语义，实现长表格分步加载 - 注意：在一个表格中只能有一组thead/tfoot标签，可以有多个tbody标签```html<table border="1"> <caption>人口普查表</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>爱好</th> <th>年龄</th> <th>联系方式</th> </tr> </thead> <tbody> <tr> <td>白云</td> <td>女</td> <td>种地</td> <td>57</td> <td>3456</td> </tr> <tr> <td>黑土</td> <td>男</td> <td>吹牛</td> <td>58</td> <td>6543</td> </tr> </tbody> <tfoot> <tr> <td>人数总计：</td> </tr> </tfoot> </table>

```## 6、合并单元格- rowspan

- 作用：跨行合并 语法：<td rowspan="2"> 电话 </td>- colspan - 作用：跨列合并 语法：<td colspan="2"> 电话 </td>- 操作步骤 - 1.确定是合并行还是合并列 - 2.找到目标单元格，添加合并属性及合并单元格的数量如：<td rowspan="2"> 电话 </td> - 3.删除多余单元格## 7、表格特性- 未定宽度的表格、单元格适应内容(单元格的宽高由内容撑开)- 同一行的单元格，高度只会识别一个，取高度最大值- 同一列的单元格，宽度只会识别一个，取宽度最大值

 

---

- 表格可以包含其他HTML标签以及表格