### HTML
#### HTML 语言书写格式
##### HTML 主要由内容和标签组成
+ 内容 : 位于页面上显示的数据
+ 标签 : 通用格式 `<特定字母>`
1. 双标签 : `<特定字母><特定字母>` 或者 `<特定字母>`
2. 单标签 : `<特定字母>` 或者 `<特定字母/>`
+ 标签属性 : `<特定字母 key1='value1' key2='value2'>` (一般不用,使用 CSS 代替负责控制标签样式)
+ 元素 : 标签 + 内容
#### HTML 基本结构
##### DOCTYPE 声明
+ `` : 声明是 HTML 5 页面
##### html 标签
+ 根标签
+ `` : 针对浏览器语言的辅助
##### head 标签
+ 主要编写页面的设置信息
+ 引入其他语言文件
+ 一般 head 中编写的内容不会显示在页面
+ ` ` : 定义页面编码格式
+ `页面标题` : 设置标题内容
##### body 标签
+ 主体标签
+ 在页面上显示所写的内容
#### 文档书写规范
##### 后缀名
+ 文档后缀名为 .html .htm(旧式写法)
+ .HTML 不区分大小写,建议使用小写 .html
##### 标签
+ 标签 不区分大小写,建议使用小写
+ 双标签必须要有闭合标签
+ 标签中属性值使用 "" 包裹 (不使用也可以,但是尽量使用)
#### HTML 常用标签
##### 标题标签
+ h1 - h6 : 字体大小逐级递减
+ 标题标签默认是有样式的(字体样色,大小,是否加粗...)
+ 标题标签默认独占一行
##### 段落标签
+ `内容
` : 没有默认的样式，需要自己动手设置
+ 默认有间距,独占一行
+ 方便代码阅读
##### HTML 常用占位符
| 符号 | 表示 |
| :-------------: | :----------------------------------------------------------: |
| ` ` | 英文半角空格不换行 |
| ` ` | 中文全角空格 |
| ` #8194;` | 半角空格(半个中文宽度，不受字体影响)**en**是字体排印学的计量单位，为em宽度的一半 |
| ` #8195;` | 全角空格(一个中文宽度，不受字体影响)**em**是字体排印学的计量单位 |
| ` ` | 四分之一全角空格 |
| ` ` | 英文半角空格 |
+ 注意 : 源码中多个空格、换行 会解析成一个空格
##### 实体标签
| 符号 | 表示 |
| :------------: | :-----------: |
| `<`或`<` | "<" 小于 |
| `>` | ">" 大于 |
| `&` | "&" 和 |
| `"` | " 引号 |
| `'` | ' 撇 (单引号) |
| `×` | "X" 乘 |
| `÷` | "÷" 除 |
| `™` | ™ |
| `¥` | 元 |
+ 使用实体标签代替会与 HTML 代码冲突的内容
+ 表示层级关系，可以使用
##### 换行标签
+ `
` 或 `` : 换行,单标签
+ `
` 或 `
` : 独立的一行线,水平线
+ 实际开发时为标签设置边框来替代水平线效果
##### 文本修饰标签
| 标签 | 描述 | 特点 |
| :-----------------: | :----------: | :----------------------------------------------------------: |
| `` | 斜体标签 | 不同语态或语气的一段文本, eg: "斜体" |
| `` | 强调斜体标签 | 对内容文本进行突出强调, eg: "斜体" |
| `` | 粗体标签 | 突出显示关键字,侧重使用目的,不带任何感情色彩, eg: "粗体" |
| `` | 强调粗体标签 | 代表内容强烈的重要性、严重性、紧急性, eg: "强调粗体" |
| `` | 下划线 | eg: "下划线" |
| `![]()
` : 引入本地图片或者网络图片,单标签
```html
```
| 属性 | 介绍 | 说明 |
| ------------------------ | ----------------------------------------------- | ------------------------------------------------------------ |
| scr="图片路径" | 图片的链接地址,可以为**绝对路径**、**相对路径** | 绝对路径: 当前文件位置
相对路径: 图片在本地磁盘相对于代码位置的位置
1. "/" : 根目录
2. "./" : 当前路径
3. "../" : 上一级路径 |
| alt="描述信息" | 图片的描述信息 | 图片加载失败时作为替代内容出现 |
| title="提示信息" | 提示信息/文件标题 | 鼠标在文件悬浮时显示的信息 |
| height="" weight="" | 图片高宽 | 1. **单独**设置文件高度或宽度时,HTML会对图片**等比缩放**,图片不会变形
2. 高度和宽度的设置单位通常是**像素**(px),也可以使用**百分比**,需要借助 样式 |
##### 链接标签
+ `` : 链接格式
```html
```
| 属性 | 介绍 | 描述 |
| --------------- | -------------- | ------------------------------------------------------------ |
| href="跳转地址" | 超链接跳转地址 | 1.href="./2.html" 或 href="#" : 跳转到本地其他页面 或 锚点跳转回本页面
2.href="url链接" : 跳转到其他网页页面 |
| target="" | 打开链接方式 | 1. 不写,默认当前页面打开跳转的新页面
2. _blank , 新窗口加载跳转页面 |
+ 页面内 **锚点** 跳转
+ 锚点 : 定位,通过 a 标签的 href 属性关联元素的 id 属性值
```html
跳转id="item1"的位置
一楼
```
+ 跳转至指定页面指定位置
```html
2.html 页面的id="item1"的位置
指定 URL 页面的id="item1"的位置
```
##### 列表标签
1. 无序列表 : `` 标签定义
+ `` 列表项
| type 属性 | 显示样式 |
| :-----------: | :------: |
| type="disc" | 实心圆点 |
| type="circle" | 空心圆点 |
| type="square" | 实心方块 |
2. 有序列表 : `
` 标签定义
+ `` 列表项,type：修改列表开头默认标识
| type 属性 | 显示样式 |
| :-------: | :--------------: |
| type="a" | 代表小写字母 |
| type="i" | 代表小写罗马数字 |
| type="A" | 代表大写字母 |
| type="l" | 代表大写罗马数字 |
| type="1" | 代表数字,默认 |
+ start : 指定从第几个标识符开始
3. 自定义列表
| 标签 | 说明 |
| :---------: | :------------: |
| `
` | 定义列表 |
| `` | 定义列表中项目 |
| `` | 描述列表中项目 |
##### 表格标签
+ **``** : 声明一个表格,表格属性
1. **cellspacing** : 设置单元格与单元格之间的间距
2. **cellpadding** : 设置表格边框与内容之间的间距
3. **width** : 设置整个表格的宽度
4. **heigth** : 设置整个单元格宽度
5. **caption** : 定义表格标题,必需在 table 声明后,只可以跟一个 (实际: 表格上边定义一行居中文字)
+ **`|
`** : 声明行
1. **align** : 设置水平对齐方式,默认靠左对齐 (left, right, center)
2. **valign** : 设置垂直对齐方式,默认处于居中 (middle, top, bottom)
+ **` | `** 与 **` | `** : 声明列
1. **align** : 设置水平对齐方式,默认靠左对齐 (left, right, center)
2. **valign** : 设置垂直对齐方式,默认处于居中 (middle, top, bottom)
3. th 是一类特殊的 td,通常用来写字段名称,对文字自动居中加粗
+ 单元格合并
1. **colspan** : 跨列合并 (水平合并) 设置当前列占几个列宽度
2. **rowspan** : 跨行合并 (垂直合并) 设置当前列占几个行的高度
+ 注意
1. 如果给某一列设置了高度,那么当前行所有的高度都会发生变化
2. 如果给某一列设置了宽度,那么当前列所有的宽度都会发生变化
##### 表单标签
1. `` 表单域
| 属性 | 描述 |
| :--------: | ----------------------------------------------- |
| action="" | 指定表单域中数据的提交地址,不填写默认为当前地址 |
| method="" | 指定数据的提交方式,常用的有**get**和**put**两种 |
| enctype="" | 提交数据格式,对标单数据进行编码 |
2. `` : 默认是一个文本框,但可以通过 type 属性指定输入控件类型
| type 参数 | 描述 |
| :-------------: | :----------------------------------------------------------: |
| type="text" | 默认,普通文本输入框 |
| type="password" | 密码输入框,输入内容以·代替,不可见 |
| type="radio" | 单选框,同一组单选 name 属性的值必须相同,必须设置默认值 |
| type="checkbos" | 复选框,同一组复选 name 属性的值必须相同,必须设置默认值 |
| type="file" | 文件框,用于上传文件 |
| type="hidden" | 隐藏域,不显示,可以提交,多用于后台校验 |
| type="submit" | 提交按钮,自动提交表单里的数据,没有后台没有效果,需要 value 参数来定义按钮上的内容 |
| type="button" | 按钮 |
| type="reset" | 重置按钮,清空当前表单所有输入 |
2. `` : 向后台提交数据时以键值对方式提交
+ name 属性的值作为键,用户输入的内容作为值,name 属性必须存在
3. `