我奋斗，所以我快乐
- 下面是对HTML的知识点做一个总结（这是一个艰辛的过程，不过还是很happy）。
一、基本概念
对于没有任何计算机基础知识的小伙伴来说，可能在学习HTML之前，需要去了解一些基本概念，这样方便对后面知识点的学习、理解与掌握。
二、HTML的基础知识
- 什么是HTML？
HTML是超文本标记语言（全称：Hypertext Markup Language），主要是用来给文本添加语义的，它利用各种标签来标识文档的结构以及标识超链接的信息。
- HTML基本结构及说明
<!DOCTYPE html> <!-- 文档声明，告诉浏览器以html5的标准渲染页面 -->
<html> <!-- 告诉浏览器这是一个html文档 -->
<head> <!-- 用于给网站添加一些配置信息 -->
<title></title> <!-- 用于指定网站的标题 -->
</head>
<body>
<!-- 用于定义html文档中需要显示给用户查看的内容（文字/图片/音频/视频等） -->
</body>
</html>
-
head内部标签
-
meta标签
作用：指定字符集
格式：
<meta charset="GBK" /> <meta charset="UTF-8" />-
GBK(GB2312)和UTF-8区别
1、GBK(GB2312)里面存储的字符比较少, 仅仅存储了汉字和一些常用外 文，体积比较小。
2、UTF-8里面存储的世界上所有的文字，体积比较大。
-
-
常见的DOCTYPE有如下几种
-
XHTML1.0
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
HTML4.0.1
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
HTML5
- <!DOCTYPE html>
-
-
HTML标签分类
- 单标签：只有开始标签没有结束标签, 也就是由一个<>组成的
如：<hr>、<br> 等- 双标签：有开始标签和结束标签, 也就是由一个<>和一个组成的
如：<html></html> -
HTML标签关系分类
-
并列关系(兄弟/平级)
<head></head> <body></body> -
嵌套关系(父子/上下级)
<head> <meta charset="UTF-8" /> <title>百度一下,你就知道123</title> </head>
-
-
常用开发工具
- Sublime、WebStorm、Dreamwaver
三、HTML的基础标签
-
H系列标签
作用：给文本添加标题语义
语法：<h#>标题文字</h#>，其中“#”代表数字1-6中的任意一个，从数字1到数字6，标题大小排列由大到小(数字越大，标题字号就越小)。
-
段落标签
<p>这里表示段落</p> -
分割线标签：
<hr> -
强制换行标签：
<br> -
span标签：
- 作用：用来组合文档中的行内元素。
-
img标签
作用：插入图片
格式：
-
img标签的其他属性：
alt：图片无法显示时的提示信息（文字/图片）
title：当鼠标移动到图片上时显示的文本
width：设置图片的宽度
height：设置图片的高度
注意点：
img标签插入的图片默认不是占一整行的空间；如果想让图片等比拉伸，只设置图片的高度或者宽度即可。
-
相对路径和绝对路径
绝对路径：从电脑的具体盘符开始寻找资源
格式：
相对路径：一个文件相对于另一个文件的位置寻找需要的资源
-
相对路径设置规则：
-
相对路径同级：
；意思是在.html文件所在的文件夹下，找到名为pic的这一张图片（pic.png和.html文件在同一文件夹内）。
-
相对路径下级：
；意思是在.html文件所在的文件夹下，找到名为images的文件夹,然后再从images文件夹下找到名为pic的这一张图片（images文件夹和.html文件在同一文件夹内）。
-
相对路径上级：
；意思是在放.html文件的文件夹下，找到名为pic的图片（pic.png和.html文件所在的文件夹在同一文件夹内）。
-
相对路径同级：
-
a标签（超链接）
- 格式：
<a href="https://www.baidu.com">xxxxxxxxx</a> -
a标签中的属性：
href：指定跳转的目标地址（可以是网络地址，可以是本地地址）
target：是否保留原始界面 取值：_blank（保留，即在新窗口打开目标地址）； _self（不保留，即在当前界面打开目标地址）
title：悬停文本（只有当鼠标移动到超链接上时才会显示）
-
a标签的其他用法：
-
假链接
- 格式1：
<a href="#">xxxxxxxxxxxxx</a> 点击之后会自动回到浏览器顶部- 格式2：
<a href="javascript:">xxxxxxxxxxxx</a> 点击之后不会自动回到浏览器顶部锚点链接（跳转到当前页面指定的位置）
格式：
<a href="#location">跳转到指定的位置</a>-
在页面的指定位置给任意一个标签添加一个id属性
例如：
<p id="location">这个是最终跳转到的目标</p>
-
base标签和a标签结合使用
格式：
```
<base target="_blank" />
```
- 注意点：
>
1、base标签必须嵌套在head标签里面
2、 如果a标签中指定了target，base标签中也指定了target，那么会按照a标签中指定的来执行
-
列表标签
-
无序列表（unordered list）
- 格式：
<ul> <li></li> <li></li> <li></li> </ul>- 应用场景：导航条、新闻列表、商品列表等。
-
有序列表（ordered list）
- 格式：
<ol> <li></li> <li></li> <li></li> </ol>- 应用场景：排行榜
-
定义列表（definition list）
-
格式：
<dl> <dt>pc网页制作</dt> <dd>学习DIV+CSS JS JQ 项目实战</dd> </dl> 应用场景：图文混排、网站底部相关信息
-
-
-
表格标签
-
格式：
<table border="1"> <tr> <td>姓名</td> <td>性别</td> </tr> </table> -
表格中的属性：
border：指定边框的宽度，默认情况下表格的边框宽度为0，看不到
cellspacing：指定表格之间的间隙，默认值是2个像素
cellpadding：指定单元格边缘和内容之间的内边距，默认值是1个像素
width：指定表格的宽度，默认情况下表格的宽度是由内容自动计算出来的
height：指定表格的高度，默认情况下表格的高度是由内容自动计算出来的
align：规定水平方向对齐方式，它的取值有：center、left、right
valign：规定垂直方向对齐方式，它的取值有：center、top、bottom
bgcolor：设置表格/行/单元格的背景颜色
-
注意：
因为HTML仅仅是用来添加语义的，所以这些属性仅作为了解，企业开发中用css代替
-
表格中的其他标签：
caption标签：给整个表格设置标题
注意：
一定要嵌套在table标签内部才有效
一定要紧跟在table标签后面 -
单元格标题标签
- th标签：给每一列设置标题
-
表格的结构
thead标签：用来存放每一列的表头
tbody标签：用来存放页面中的主体数据，如果不写会自动加上
tfoot标签：用来存放表格的页脚
注意：
由于部分浏览器对table的这种结构支持不是很好，所以在企业开发中一般都不用严格的按照这种结构来编写
-
合并单元格
-
横向合并：
colspan：合并当前列的哪几个单元格
-
纵向合并：
rowspan：合并当前行的哪几个单元格
-
-
-
表单标签
作用：用于收集用户信息, 让用户填写、选择相关信息
格式：
<form> 所有的表单内容，都要写在form标签里面 </form> input标签
这个标签有很多type的取值，取值的不同就决定了input标签的功能和外观不同
-
常用type类型：
<input type="" name="" value="" /> 明文输入框
type="text" 单行文本输入框
type="password" 密码（maxlength=""）
type="radio" 单项选择（checked="checked"）
type="checkbox" 多项选择
type="button" 按钮
type="submit" 提交
type="image" 图片提交
type="file" 上传文件
type="reset" 重置
type="hidden" 隐藏
type="color" 定义取色板
type="date" 定义日期选择器
type="email" 邮箱验证
type="url" URL验证
给单选设置默认值：
<input type="radio" name="age" checked="checked" /> 年龄
- 注意：给单选、多选设置默认值，前提是同一组内容必须设置相同name属性
-
label标签
作用： label标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性
注意：
表单元素要有一个id，然后label标签就有一个for属性，for属性和id相同就表示绑定了
所有表单元素都可以通过label绑定
-
数据列表
datalist标签（输入datalist存放的数据，会有提示功能）
作用：给输入框绑定待选项
格式：
<datalist> <option>待选项内容</option> </datalist> -
多行文本框(文本域)
textarea标签
作用： 用于在表单中定义多行的文本输入控件
格式：
<textarea cols="30" rows="10">内容</textarea>-
注意点：
cols属性表示columns“列”, 规定文本区内的可见宽度
ows属性表示rows“行”, 规定文本区内的可见行数
默认情况下输入框是可以手动拉伸的，可以利用css禁止缩放
格式：
<style type="text/css"> textarea{ resize: none; } </style>
-
下拉列表
select标签（只能选择，不能输入）
-
格式：
<select> <option>北京</option> <option>河北</option> <option>河南</option> <option>山东</option> <option>山西</option> <option>湖北</option> <option>贵州</option> </select> -
给下拉列表设置默认值
<select> <option>北京</option> <option>河北</option> <option>河南</option> <option>山东</option> <option>山西</option> <option>湖北</option> <option selected="selected">贵州</option>
</select>
- 给下拉列表添加分组<select>
<optgroup label="北京市">
<option>海淀区</option>
<option>昌平区</option>
<option>朝阳区</option>
</optgroup><optgroup label="广州市"> <option>天河区</option> <option>白云区</option> </optgroup></select>
-
多媒体标签
-
video标签
作用：播放视频
格式1：
<video src=""></video>- 格式2：(为了解决浏览器的适配问题而存在)
<video> <source src="" type=""> </video> -
video标签的属性
src：告诉video标签需要播放的视频地址
autoplay：告诉video标签是否需要自动播放视频
controls：告诉video标签是否需要显示控制条
poster：告诉video标签视频没有播放之前显示的占位图片
loop： 告诉video标签循环播放视频，一般用于做广告视频
preload：告诉video标签预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
muted：告诉video标签视频静音
width/height： 和img标签中的一模一样
注意点：
video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 可以通过JS框架中的html5media来实现
-
audio标签
作用： 播放音频
格式1：
<audio src=""></audio>- 格式2：
<audio> <source src="" type=""> </audio>- 注意点：
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样. 只不过有3个属性不能用, height/width/poster
-
详情和概要标签（details标签/summary标签）
作用：利用summary标签来描述概要信息, 利用details标签来描述详情信息默认情况下是折叠展示, 想看见详情必须点击
格式：
<details> <summary>概要信息</summary> 详情信息 </details>
-
-
marquee标签（移动的字体和图片）
作用：跑马灯效果
格式：
<marquee>移动文字或图片</marquee>-
marquee标签中的属性
direction：设置滚动方向 left/right/up/down（默认是向左循环移动，移动范围在 其父对象的有效区域内。）
scrollamount： 设置滚动速度, 值越大就越快
loop： 设置滚动次数, 默认是-1, 也就是无限滚动
behavior：设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
scrolldelay：移动对象的延时<marquee scrolldelay=”1000”>走走停
</marquee> scrolldelay以时间为单位，用毫秒表示。移动的区域和背景：<marquee width=”100” height=”100” bgcolor=”pink”></marquee>
注意点：
marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好
- W3C推出的新的标签
<strong>着重内容</strong>
<ins>新插入的文本</ins> ins是Inserted的缩写
<em>强调内容</em> em是Emphasized的缩写
<del>已删除的文本</del> del是Deleted的缩写
发现HTML的标签不是一般的多，要是全部记住，这得多烧脑啊。别担心：记不住的话可以去这里查看。
