HTML总结 - 《前端技术》

## img标签中alt属性和title属性的区别
+ alt是图片加载失败时的提示文本，只能用于img标签
+ title是鼠标浮于图片上时显示的文本，可用于其他标签

## 标签分类和特点
+ 块元素（代表元素:h1-h6,p,div,ul,ol,li）
特点：独占一行，没有设置宽度的情况下，默认宽度为父元素宽度的百分百，可以设置宽高
+ 行内元素（代表元素：span，格式化标签）
特点：一行多个，宽度为文本内容的宽度，不可以设置宽高
+ 行内块元素（代表元素：img，input）
特点：一行多个，宽度为内容的宽度，可以设置宽高

## 超链接的四种状态
注意:必须按照爱恨原则（lvha）的顺序：:link,:visited,hover,active
+ :link 未被访问的状态，蓝色，a标签私有
+ :visited 访问后的状态，紫色，a标签私有
+ :hover 表示鼠标浮上的一种状态，适用于所有标签
+ :active 被激活的状态，红色，a标签私有

## 锚链接
+ 使用a标签的href属性和其他标签的id属性相结合，给a标签的href属性加‘#名称’，给要跳转到的目标标签添加id属性，值为a标签href属性值的#后的名称<a href ="#first">概述</a> <h2 id="first">概述</h2>
+ 使用a href和a name
<a href="#名称">概述</a> <a name="名称"></a> <h2>概述</h2>

## name和value在网络传输中的作用
+ name（给input框取一个名i）：传输数据的载体
+ value（给表单元素一个默认值）：传输的数据值，当没有设置value默认值时，则输入的值就是value值，单选框和复选框的值是on

## post和get请求的区别
+ get请求的数据拼接在地址后面post请求的数据页面不可见，需要通过F12-network-点击服务器地址-headers-from data中查看到post请求发送的数据
+ get请求数据不安全，poat比较安全
+ get传输的数据长度有限，而post不限制长度

## label标签的作用
label标签用来与input表单元素产生关联，发生聚焦
+ 把要聚焦的内容放在label中<label><输入框的内容></label>
+ 使用label的for属性和input的id属性,for属性值和id属性值保持一致
<label for="user">用户名：</label> <input id="user" 其他属性>
第二种方式：使用嵌套关系进行绑定，label标签嵌套表单元素；注意label标签不能添加for属性，因为添加上后效果不显示不推荐使用
密码：

## input标签常用的type属性的取值
+ text：单行文本框
+ password：密码框
+ radio：单选框（互斥用相同的name属性）
+ checkbox：复选框（产生关联用相同的name属性）
+ file：文件域
+ hidden：隐藏域
+ image：图片域（必须加src属性，点击提交数据时，值为鼠标点击时的坐标值）
+ button：普通按钮（不提交数据）
+ submit：提交按钮
+ reset：重置按钮

form表单元素：
input标签
type属性值不同，实现不同的功能
text:单行文本域
password:密码域
radio：单选按钮
checkbox:多选框
button:普通按钮
reset:重置按钮
submit：提交按钮
file：文件域
image:图片域
hidden：隐藏域

重要属性： name属性 value属性 action属性 method属性

1、 name属性和vale属性在数据传入过程中，作为数据传输的载体

2、 action属性：规定向何处提交表单数据，属性值是提交的URL地址

3、method属性：规定提交的方式 get方式和post方式
## 语义化标签
+ 语义更明确
+ 浏览器更快识别
语义化标签：标签自身带有含义，看到这个标签，你就知道这个标签是干嘛用的
p标签：段落标签 dl>dt+dd标签：自定义列表
h1标签：标题标签 ol>li 标签：有序列表
ul>li 标签: 无序列表 form标签：表单元素
table标签：表格

没有语义的标签：
div标签：容器作用就是用来进行页面布局
span标签：放小段文本

标签的选择：开发页面中，尽量选择使用有语义的标签，少使用没有语义的标签；
举例：页面中某个效果可以使用p标签，div标签，span标签完成，那么优先选择使用p标签

如何判断一个页面的语义是否良好，去掉所有的css样式

### web前端必备技术
1. HTML：超文本标记语言；网页的骨架；所有展示给客户浏览的信息都放到HTML页面中
2. CSS：层叠样式表；网页的外衣；使用css样式统一控制页面的展示效果
3. JavaScript：网页的特效；网页中的交互和动画效果是js控制实现的

### HTML学习
#### HTML的语法
- 标签语法：使用一对 <> 和标签名组成
- 标签都有自己的特有的属性和功能; 标签的属性之间使用空格隔开；属性值必须添加引号
- 标签分为单标签和双标签：单标签没有结束标签，双标签有开始和结束标签，结束标签比开始标签多了一个/
- 代码展示
<br />// 双标签语法<br /><标签名属性1="属性值1" 属性2="属性值2"></标签名><br /> <br />// 单标签的语法<br /><标签名属性1="属性值1" 属性2="属性值2"><br />
#### HTML骨架（基础结构）分析
<br />// 定义文档类型，告诉浏览器如何解析页面；他不属于HTML标签<br /><!DOCTYPE html><br />// html标签：页面的根标签；所有的结构和内容都放到这里；属性lang="en"定义使用的语言<br /><html lang="en"><br />// head标签：页面的头部标签；定义页面的编码格式；网页的关键字，描述，移动端适配，网页标题，引入外部css文件和js文件等<br /><head><br /> // 定义网站的编码格式 UTF-8 必须的<br /> <meta charset="UTF-8"><br /> // 定义移动端适配<br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br /> // 定义网页的标题必须的<br /> <title>Document</title><br /></head><br /><body><br /> // body标签：页面的主体标签。所有展示给客户浏览的信息，包括文本，图片，音视频等都放到body标签内部<br /></body><br /></html><br />
#### HMLT常用标签分类
1. 分类一：按照单双标签分类
> 按照单双标签分类
>> 单标签：
>>> 代表标签
(1)img标签 (2) input标签 (3) br标签 (4)hr标签
>
>> 双标签：
>>> 代表标签
(1) p标签 (2)h1-h6 (3)div (4)span (5)ul>li (6)ol>li (7)dl>dt+dd (8)table (9)a (10)form

2. 分类二：按照标签的类型分类
> 按照标签的类型分类
>> 块元素：特征1：独占一行；特征2：可以直接设置宽高
>>> 代表标签
div; p ;ul>li ; ol>li ; dl>dt+dd; h1-h6 ; table
>
>> 行内元素：特征1：一行可以放多个；特征2：不能直接设置宽高，需要进行转换
>>> 代表标签
span ; strong ; b; em; i ; sub ; sup
>
>> 行内块元素：特征1：一行可以放多个；特征2：可以直接设置宽高
>>> 代表标签
img ; input

3. 分类三：按照语义化分类
> 按照语义化分类
>> 语义化标签
>>> 代表标签
p ; strong ; em; h1-h6 ; ul>li ; ol>li ; dl>dt+dd ; table ; form

>
>> 没有语义化标签
>>> 代表标签
span ; b ; div; big; del ; i

#### HTML常用标签特性
1. 段落标签p：用来盛放段落，或者一段文字
2. 标题标签： h1-h6: h1 h2 h3 h4 h5 h6
- 特殊h1标签：页面中只能出现一次
- 应用场景：用于商城类网站的logo 或者用于新闻类网站的新闻辩题
3. div标签：容器标签，主要用来进行页面布局
4. 格式化标签：
- b标签和strong标签区别：都是加粗显示，但是strong标签带有强调语义
- i标签和em标签区别：都是倾斜显示，但是em标签带有强调语义
- big标签和small标签区别： big显示大号字体，small显示小号字体
- sub标签和sup标签区别：sub是下标， sup是上标
- del标签：删除线
5. span标签：用来放一小段文本
6. 无序列表标签ul>li :
- ul标签内只能是li标签
- li标签内可以放任何内容和标签
- 可以自身嵌套，但是要保证标签结构的完整性
7. 有序列表标签ol>li:
- ol标签内只能是li标签
- li标签内可以放任何内容和标签
- 可以自身嵌套，但是要保证标签结构的完整性
8. 自定义列表标签dl>dt+dd:
- dl标签内只能是dt标签和dd标签
- dt标签和dd标签是并列关系（兄弟关系），不能嵌套
- dt标签和dd标签内可以放任何的内容和标签
9. 表格标签table
- 表格的基本结构： table标签和 tr标签， td标签组成：

<br /> <table><br /> <tr><br /> <td></td><br /> <td></td><br /> <td></td><br /> </tr><br /> <tr><br /> <td></td><br /> <td></td><br /> <td></td><br /> </tr><br /> </table><br />
- 对表格进行结构性划分：使用thead标签和 tbody标签进行结构划分； th标签是表格的标题
<br /> <table><br /> <thead><br /> <tr><br /> <th></th><br /> <th></th><br /> <th></th><br /> </tr><br /> </thead><br /> <tbody><br /> <tr><br /> <td></td><br /> <td></td><br /> <td></td><br /> </tr><br /> </tbody><br /> </table><br /> <br />
- 表格的属性：
border:边框属性； border=”1”
cellpadding:单元格内容和单元格边界之间的距离； cellpadding=”10”
cellspacing:单元格之间的间距； cellspacing=”20”
width : 表格的宽度
height : 表格的高度
colspan: 跨列操作
rowspan：跨行操作
- 表格的完整结构
<br /> <table border="1" cellpadding="10" cellspacing="0" width="500" height="300"><br /> <thead><br /> <tr><br /> <th colspan="3"></th><br /> </tr><br /> </thead><br /> <tbody><br /> <tr><br /> <td rowspan="2"></td><br /> <td></td><br /> <td></td><br /> </tr><br /> <tr><br /> <td></td><br /> <td></td><br /> </tr><br /> </tbody><br /> </table><br />

10. 图片标签img：
- src属性：引入图片的URL地址
- alt属性：图片加载失败的替换文本
- title属性：鼠标停留显示的提示信息

11. 路径的概念
- 相对路径：相对于你当前操作的文件而言，从自身出发去查找目标对象
同级目录：直接写文件名，带上扩展名
下一级目录：使用 / 代表下一级；文件夹名/文件名.扩展名
上一级目录：使用../ 代表上一级； ../文件夹/文件名.扩展名
当前目录：使用 ./ 代表当前所在目录

- 绝对路径：以http 或者https开头的路径称之为绝对路径（推荐使用这种）或者以电脑的盘符开始的路径

12. 超链接标签a:
1. a标签的重要属性：
- href属性：链接的文件的URL地址
- target属性：规定在何处打开链接的文件
_self: 在当前窗口打开
_blank: 在新窗口中打开
- 可以链接任何类型的文档
2. 链接的形式
- 文本链接：
<a href="index.html">打开文件</a>
- 图片链接：
<br /> <a href="index.html"><br /> <img src='a.jpg'><br /> </a><br />
- 空链接：
<br /> <a href="#></a> // 点击会返回顶部<br /> <a href="javascript:;></a> // 点击不会返回顶部<br /> <a href="javascript:void(0);></a><br />
- 锚链接：同一个页面进行操作，直接跳转到页面的指定位置
1. 做标记：可以使用a标签的name属性或者是任何一个标签的id属性，在页面需要的地方添加标记; name属性或者id属性值就是标记名
<br /> // name属性<br /> <a name="mark"></a><br /> //id属性<br /> <p id="mark">内容可有可无</p><br />
2. 查找标记：通过a标签的href属性查找 href=”#标记名”
<br /> <a href="#mark">找标记</a><br />

13. form表单元素
> form表单元素
- input标签的type属性
1. 单行文本域： type=”text”
2. 密码域： type=”password”
3. 普通按钮： type=’button’
4. 重置按钮： type=’reset’
5. 提交按钮： type=’submit’
6. 文件域： type=’file’
7. 图片域： type=’image’,需要借助于src属性，
8. 隐藏域： type=’hidden’
9. 单选按钮： type=’radio’
10. 多选框： type=’checkbox’
- 下拉列表： select标签和 option标签
- 分组标签： fieldset标签和legend标签
> form表单的属性
- 单选按钮效果实现：通过name属性实现；name属性取值一样
<br /> <p><br /> 性别：<br /> <input type="radio" name="sex">男<br /> <input type="radio" name="sex">女<br /> </p><br />
- 默认选中项 checked属性和selected属性
**针对checkbox 和 radio 实现默认选中项使用 checked属性
<br /> <p><br /> 爱好：<br /> <input type="checkbox" checked>羽毛球 <br /> <input type="checkbox">乒乓球<br /> <input type="checkbox">足球<br /> </p><br /> <p><br /> 性别：<br /> <input type="radio" checked name="sex">男<br /> <input type="radio" name="sex">女<br /> </p><br />
下拉列表的默认选中项使用 selected属性 , 如果是多选效果，需要使用multiple=”multiple”*
```

```
- value属性：表单元素的值或者是用户输入的信息
- name属性：在单选效果和多选效果中，name属性可以用于分组
- name属性和value属性在数据传输过程中，作为数据传输的载体
- action属性： form标签的属性；规定向何处提交表单数据； action=’url(表单提交的地址)’
- method属性： form标签的属性；规定使用何种方式提交表单数据； method=’get / post’
> get方式和post方式的区别：
1. get方式提交的特性：提交的数据拼接在URL地址后边，以?进行连接；多个数据之间使用&符号进行拼接
2. post方式提交特性：提交的数据被放到请求头中；不会拼接在URL地址后边
3. 安全性： get方式不安全，post方式安全
4. get方式提交的数据长度受限， post方式提交的数据长度不受限

#### 语义化标签
物尽其用，人尽其力，在合适的地方使用合适的标签**