@TOC
3 网页开发
3.1 文档类型声明标签
<!DOCTYPE>==`文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页
<!DOCTYPE html>这句话的意思是：当前页面采取的是HTML5版本来显示网页。
注意：
<!DOCTYPE>声明位于文档种的最前面的位置，处于<html>之前<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。
3.2 lang 语言种类
<html lang="en">
用来定义当前文档显示的语言
- en定义语言为英语
- zh-CN定义语言为中文
定义为中文还是英文网页只是让浏览器和搜索引擎识别，然后会提醒你是否需要翻译
3.3 字符集
字符集（character set）是多个字符的集合，以便计算机能够识别和存储各种文字。
在<head>标签中，可以通过<meta>标签的==charset==属性来规定HTML文档应该使用哪种字符编码
<meta charset="UTF-8" />4.HTML 常用标签
4.1 标签语义
学习标签是记住每个标签的语义，根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。
4.2 标题标签
<h1>
111
</h1>
<h2>
222
</h2>
<h3>
333
</h3>4.3 段落和换行标签
<p>
hhhhh
</p>
<br /> <!-- break的缩写 -->4.4 文本格式化标签
<body>
我是<strong>加粗</strong>的文字
<br />
我是<b>加粗</b>的文字
<br />
我是<em>倾斜</em>的文字
<br />
我是<i>倾斜</i>的文字
<br />
我是<del>删除线</del>的文字
<br />
我是<s>删除线</s>的文字
<br />
我是<ins>下划线</ins>的文字
<br />
我是<u>下划线</u>的文字
</body>4.5 div和span标签
标签定义 HTML 文档中的一个分隔区块或者一个区域部分。 `
`标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。 **提示：**
元素经常与 CSS 一起使用，用来布局网页。 **注释：**默认情况下，浏览器通常会在
元素前后放置一个换行符。然而，您可以通过使用 CSS 改变这种情况。 ```html
密码:
性别:男女
爱好: 篮球 网球
上传头像:
这是一个在 div 元素中的标题。
这是一个在 div 元素中的文本。
<span> 用于对文档中的行内元素进行组合。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
我的母亲有 蓝色 的眼睛。
- `<div>`标签用来布局，但是一行只能放一个`<div>`。大盒子
- `<span>`标签用来布局，一行上可以多个`<span>`。小盒子
### 4.6 图像标签和路径
#### 图像标签
在HTML标签中，`<img>`标签用于定义HTML页面中的图像。
==src==是`<img>`标签的必须属性，它用了指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。
图像标签的其他属性：
| 属性 | 属性值 | 说明 |
| ------ | -------- | ------------------------------------ |
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像不能显示的文字 |
| title | 文本 | 提示文本，鼠标放到图像上，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
图像标签的使用:
<img src="img.jpg" />
<h4> alt 替换文本 图像显示不出来的时候用文字替换:</h4>
<img src="img1.jpg" alt="我是pink老师" />
<h4> title 提示文本 鼠标放到图像上,提示的文字:</h4>
<img src="img.jpg" title="我是pink老师思密达" alt="我是pink老师" />
<h4> width 给图像设定宽度:</h4>
<img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达" width="500" />
<h4> height 给图像设定高度:</h4>
<img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达" height="100" />
<h4> border 给图像设定边框:</h4>
<img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达" width="500" border="15" />
**图像标签属性注意点：**
1. 图像标签可以拥有多个属性，必须写在标签名的后面。
2. 属性之前不区分先后顺序，标签名与属性、属性与属性之前均以空格分开。
3. 属性采取键值对的格式，即==key="value"==的格式，属性=“属性值”
#### 路径
==目录文件夹==：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材。
==根目录==：打开目录文件夹的第一层就是根目录
**相对路径**
| 相对路径分类 | 符号 | 说明 |
| ------------ | ---- | ----------------------------------------------------------- |
| 同一级路径 | | 图像文件位于HTNL文件同一级 如`<img src="baidu.jpg">` |
| 下一级路径 | / | 图像文件位于HTNL文件下一级 如`<img src="images/baidu.jpg">` |
| 上一级路径 | ../ | 图像文件位于HTNL文件同一级 如`<img src="../baidu.jpg">` |
**绝对路径**
### 4.7 超链接标签
在HTML标签中，`<a>`标签用于定义超链接，作用是从一个页面链接到另一个页面
#### 链接的语法格式
| 属性 | 作用 |
| ------ | ------------------------------------------------------------ |
| href | 用于指定链接目标的url地址，（必须属性）党委标签应用href属性时，它就具有了超链接的功能能 |
| target | 用于指定链接页面的打开方式，其中`_self `为默认值（在当前页面打开），`_blank`为在新窗口中打开方式 |
#### 链接的分类
1. **外部链接**
2. **内部链接**
网站内部页面之间的相互链接
3. **空链接**
4. **下载链接**
如果href里面地址是一个文件或者压缩包，会下载这个文件
5. **网页元素链接**
在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
6. 锚点链接
点击链接可以快速定位到页面中的某个位置
- 在连接文本的href属性中，设置属性值为`#名字`的形式，如`<a href="#two">第二集</a>`
- 找到目标位置标签，里面添加一个 id 属性=刚才的名字，如：`<h3 id="two">第二集介绍</a>`
## 5 HTML 中的注释和特殊字符
### 5.1 注释
快捷键： ctrl + /
### 5.2 特殊字符
在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来代替
| 特殊字符 | 描述 | 代码 |
| -------- | ------ | -------- |
| | 空格符 | ` ` |
| < | 小于号 | `<` |
| > | 大于号 | `>` |
## 6 表格标签
### 6.1 表格的主要作用
表格不是用来布局页面的，而是用来展示数据的。
| 姓名 |
|---|
| 小新 |
1. `<table></table>`是用于定义表格的标签
2. `<tr></tr>`标签用了定义表格中的行，必须嵌套在`<table></table>`标签中。
3. `<td></td>`用了定义表格中的单元格，必须嵌套在`<tr></tr>`标签中。
4. 字符td指表格数据(table data),即数据单元格的内容
5. `<th>`标签表示HTML表格的表头部分（table head），表头单元格里面的文本内容加粗居中显示。
### 6.2 表格属性
这些属性主要在CSS中使用，先写结构，再写属性
| 属性名 | 属性值 | 描述 |
| ----------- | ------------------- | ------------------------------------------------ |
| align | left、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1或"" | 规定表格单元是否拥有边框，默认为""，表示没有裱框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认为1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="250">
<tr>
<th>姓名</th>
</tr>
<tr>
<td>小新</td>
</tr>
</table>
### 6.3 表格结构标签
使用场景：因为表格可能很长，为了更好的表示表格的语义，可以讲表格分割成表格头部和表格主题两大部分
在表格标签中，分别用：`<thead>`标签表示表格的头部区域，`<tbody>`标签表示表格的主题区域，这样可以更好的区分表格结构。
| 姓名 |
|---|
| 小新 |
### 6.4 合并单元格
1. **合并单元格方式**
- 跨行合并：rowspan="合并单元格的个数"
- 跨列合并：colspan="合并单元格的个数"
2. **目标单元格**
- 跨行：最上侧单元格为目标单元格，写合并代码
- 跨列：最左侧单元格为目标单元格，写合并代码
3. 合并单元格三部曲
- 先确定是跨行还是跨列合并
- 找到目标单元格，写上合并方式=合并的单元格时胡亮。比如`<td olspan="2"></td>`。
- 删除多余的单元格
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="250">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
## 7 列表标签
### 7.1 无序列表
`<ul>`标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用`<li>`标签定义。
1. 无序列表的各个列表项没有顺序级别之分，是并列的。
2. `<ul></ul>`中只能嵌套`<li></li>`,不能嵌套其他标签或者文字
3. `<li>`与`</li>`之间相当于一个容器，可以容纳所有元素
4. 无序列表会带有自己的样式属性，但在实际使用中，我们用CSS设置。
### 7.2 有序列表
### 7.3 自定义列表
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
`<dl>`标签用了定义描述列表，改标签会与`<dt>`（定义项目/名字）和`<dd>`(描述每一个项目/名字)一起使用。
- 名词1
- 名词1解释
- 名词1解释2
## 8 表单标签
### 8.1 为什么需要表单
使用表单目的是为了收集用户信息
在网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。
### 8.2 表单的组成
在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息3个部分构成
### 8.3 表单域
表单域是一个包含表单元素的区域。
在HTML标签中，`<form>`标签用于定义表单域，以实现用户信息的收集和传递。
`<form>`会把它范围内的表单元素信息提交给服务器
**常见属性**
| 属性 | 属性值 | 作用 |
| ------ | -------- | -------------------------------------------------- |
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式，其取值为 get 或 post |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
### 8.4 表单空间(表单元素)
1. **`<input>`表单元素**
`<input>`标签用了收集用户信息。
在`<input>`标签中，包含一个`type`属性，根据不同的type属性值，输入字段又多种形式（可以是文本字段、复选框、掩码后的文本空间、单选按钮、按钮等）
- `<input>`标签为单标签
- type属性设置不同的属性值用来指定不同的控件类型
| 标签 | 描述 |
| :-------- | :----------------------------------------------------------- |
| `<form>` | 定义供用户输入的表单 |
| `<input>` | 定义输入域 |
| text | 当用户要在表单中键入字母、数字等内容时，就会用到文本域 |
| checkbox | 用户需要从若干给定的选择中选取一个或若干选项 |
| text | 定义单行的输入字段，用户可在其中输入文本，默认款段为20个字符 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 单选按钮 |
| button | 可点击按钮，结合JavaScript使用 |
| submit | 提交按钮，会把表单数据发送到服务器 |
| 标签 | 描述 |
| ----- | ------------------------------------ |
| reset | 重置按钮，会清楚表单种的所有数据 |
| file | 定义输入字段和"浏览"按钮，供文件上传 |
| | |
| 属性 | 属性值 | 描述 |
| --------- | ------------ | ----------------------------------- |
| name | 由用户自定义 | 定义input元素的名称 |
| value | 由用户自定义 | 规定input元素的值，传到后台的数据 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
1. name和value时每个表单元素都有的属性值，主要给后台人员使用
2. name 表单元素的名字，要求单选按钮和复选框要由同样的name值
3. checked属性主要针对了单选框和复选框，主要作用一打开界面，就要可以默认选中某个表单
密码:
性别:男女
爱好: 篮球 网球
上传头像:
2. **`<label>`标签**
`<label>`标签为input元素定义标注标签
此标签用了绑定一个表单元素，当点击`<label>`标签内的文本时，浏览器就会自动讲焦点（光标）转转到或者选择对应的表单元素上，用来增加用户体验。
男
`<label>`标签的for属性应当与相关元素的id属性相同。
3. **select下拉表单元素**
在页面种，如果有多个选项让用户选择，并且想要节约页面空间时，我们就可以是用`<select>`标签空间定义下拉列表
<form action="url地址" method="提交方式" name="表单域名称">
籍贯：
<select name="" id="">
<option value="河南">河南</option>
<option value="山东" selected="selected">山东</option>
<option value="河北">河北</option>
</select>
</form>
- `<select>`种至少包含一堆`<option>`
- 在`<option>`中定义 `select="selected"`时，当前项即默认选中项。
4. **textarea文本域元素**
在表单元素中，`<textarea>`标签时用于定义多行文本输入的控件。
<form action="url地址" method="get/post" name="表单域名称">
发送内容： <textarea name="send" id="" cols="30" rows="10" value="">请输入内容</textarea>
</form>
- 通过`<textarea>`标签可以轻松地创建多行文本输入框。