1 HTML介绍&规范
1.1 介绍
HTML指的是超文本标记/标签语言(Hyper Text Markup Language)
专门制作网页的计算机语言
普通的文本就是英文单词，英文字母一样的存在
超文本的意思是有一些单词或字母，在网页浏览器中被赋予了特殊的权利
1.2 使用记事本开发第一个网页
注意：
1 < html >标签代表当前页面是一个HTML
2 < head >标签中可以声明HTML页面的相关信息
3 < body >标签中它主要是用于显示页面信息
4 标签要有开始，有结束，成双成对
5 开始标签与结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自关闭
6 大多数标签它具有属性，属性值要使用引号引起来
7 HTML它本身是不区分大小写的
1.3 VSCode
2 HTML的使用
2.1 文件标签
< html >标签：代表当前书写的是一个HTML文档
< head >标签：存储的本页面的一些重要的信息，它不会显示
< head >标签：有一个子标签< title >，它是用于定义页面的标题的
< body >标签：书写的内容会显示出来
< body >标签的属性
(1)text用于设置文字颜色–属性的值单引双引皆可
(2)bgcolor用于设置页面的背景色
(3)backgroud用于设置页面的背景图片
2.2 排版标签
2.2.1 HTML注释
运行结果不会显示注释
2.2.2 换行标签
br标签就是一个换行(回车)功能标签
有斜杠/是html语言的标准化，到那时html不是一个那么严谨的语言
2.2.3 段落标签
在< p >标签中的内容，会在开始与结束之间产生一个空白行，并且它会自动换行。
常用属性align 它的作用是设置段落中的内容对齐方式 可取值有left right center
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>我爱你中国！</p>
<p>我爱你中国！</p>
<p>我爱你中国！</p>
</body>
</html>运行结果为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>我爱你中国！</p>
<p align="center">我爱你中国！</p>
<p align="right">我爱你中国！</p>
</body>
</html>
2.2.4 水平线标签
< hr >标签会在页面上产生一个水平线
对于hr标签它有常用属性：
algn：可取值有left right center代表水平线位置
size：代表水平线厚度（粗细）
width：代表水平线宽度
color：水平线的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
拉
<hr color="red" width="50%">
狗
<hr color="blue" size="10px"> <!--px像素-->
网
<hr width="30%" align="left">
</body>
</html>
2.2.5 分区标签
div是一个块标签，用来进行布局的
普通的div并没有什么效果，肉眼也看不见，但div与CSS结合，就会更好对页面进行排版
div与span都是容器的作用，具体区别：
（1）div会自动换行，我们也叫这样的标签为块级元素
（2）span标签它不会自动换行，我们也叫它行内元素
（4）div：整体划分区块
（5）span：局部划分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div style="width:100px; height:100px; background:pink">hello</div>
<div style="width:100px; height:100px; background:blue">hello</div>
</body>
</html>运行结果为：
2.3 字体标签
2.3.1 字体标签
< font >标签可以设置字体，字的大小及颜色，常用属性：
face：用于设置字体，例如 宋体 隶书 楷体
size：用于设置字的大小（大小默认设置1-7,7最大，想更大，往后学css即可）
color：用于设置字的颜色
注：
我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。
每一种颜色的 饱和度和透明度都是可以变化的，用0～255的数值来表示。如纯红色表示为（255，0， 0），十六进制表示为#FF0000。按这种表达方式，理论上我们可以得到256 * 256 * 256=16777216种颜色。
颜色的划分：
（1）使用十六进制方式，取值范围#000000~#FFFFFF(黑色到白色)，当颜色值为#cc3300时，可简化为#c30这种方式
<body bgcolor="#666">（2）RGB颜色表示法：RGB（x,y,z），x、y、z是0~255之间的整数，rgb字母大小写无所谓
<body bgcolor="rgb(11,11,11)">在线颜色选择器：http://www.86y.org/code/colorpicker/color.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<font face="隶书" size="7" color="red">就让鲜血染红最美的花</font>
<hr>
<font face="楷体" size="7" color="666fff">洒在我的胸膛上</font>
</body>
</html>效果为：
2.3.2 标题标记
给一段文字起一个标题
< h1 >=》< h6 >
h1最大，h6最小，他们代表的是标题
自动换行，字体加粗，标题与标题之间产生一定的距离
注意：在HTML中允许进行标签进行嵌套的，但是一般都是包裹嵌套，而不可以进行交叉嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
</body>
</html>
2.3.3 格式化标签
< b >：字体加粗
< i >：字体倾斜
< del >：删除线
< u >：下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
拉勾网！<br>
<b>拉勾网！</b><br>
<i>拉勾网！</i><br>
<del>拉勾网！</del><br>
<u>拉勾网！</u><br>
</body>
</html>
2.4 列表标记
ol：有序列表
type=“A”：字母排序
type=“I”：罗马排序
start="3"序列从几开始
ul：无序列表
type=“disc”：默认，实心圆
type=“square”：方块
type=“circle”：空心圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>有序列表</h2>
<ol>
<li>辣子鸡丁</li>
<li>打卤面</li>
<li>山西油泼面</li>
<li>锅包肉</li>
</ol>
<ol type="A">
<li>辣子鸡丁</li>
<li>打卤面</li>
<li>山西油泼面</li>
<li>锅包肉</li>
</ol>
<ol type="I">
<li>辣子鸡丁</li>
<li>打卤面</li>
<li>山西油泼面</li>
<li>锅包肉</li>
</ol>
<ol start="2">
<li>辣子鸡丁</li>
<li>打卤面</li>
<li>山西油泼面</li>
<li>锅包肉</li>
</ol>
<hr>
<h2>无序列表</h2>
<ul>
<li>西红柿鸡蛋</li>
<li>西红柿鸡蛋</li>
<li>西红柿鸡蛋</li>
</ul>
<ul type="circle">
<li>西红柿鸡蛋</li>
<li>西红柿鸡蛋</li>
<li>西红柿鸡蛋</li>
</ul>
<ul type="square">
<li>西红柿鸡蛋</li>
<li>西红柿鸡蛋</li>
<li>西红柿鸡蛋</li>
</ul>
</body>
</html>
2.5 图形标签
< img >它可以让我们在网页引入一张图片，常用属性：
1 src代表的图片的路径
2 width图片的宽度
3 height图片的高度
4 border用于设置图片的边框
5 alt如果图片不可以显示时，默认显示的文本
6 title鼠标悬停图片上，默认显示的文本信息
7 align图片附件文字的对齐方式，可取值有
=》left：把图像对齐到左边
=》right：把图像对齐到右边
=》middle：把图像与中央对齐
=》top：把图像与顶部对齐
=》bottom：把图像与底部对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
多甜蜜！
<img src="img/1.jpg" width="400px" height="300px" border="10px">
</body>
</html>2.6 超链接标签
< a >标签，可以实现跳转到其他页面操作
超链接内容不仅可以是文本，也可以是图片等信息
常用属性：
1 href代表的我们要跳转的路径
2 target这个属性规定在何处打开这个链接文档，可取值：
-----_blank 在新窗口中打开页面
-----_self默认，在本窗口打开页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--跳转到互联网上的资源 需要补全http://，这是协议部分-->
<a href="http://lagou.com" target="_blank">去求职</a>
<!--跳转到本地资源文件-->
<a href="图片标签.html" target="_blank">去第一个页面</a>
</body>
</html>2.7 表格
< table >：定义一个表格
=》border：边框，取值是以像素为单位
=》width：代表的是表格的宽度
=》align：代表表格的对齐方式：取值
（1）left：左对齐表格
（2）right：右对齐表格
（3）center：居中对齐表格
=》cellspacing：单元格间距（通常设置0表示单线表格）
< tr >：表格中的行（Table Row）
=》align代表表格的对齐方式：取值
（1）left：左对齐内容（默认）
（2）right：右对齐内容
（3）center：居中对齐内容（th元素的默认值）
< td >：表格中的数据单元格（Table DataCell）
=》colspan 指示列的合并
=》rowspan指示行的合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>4行三列的表格</title>
</head>
<body>
<table border="1" width="400px" align="center" cellspacing="0">
<tr align="center">
<td colspan="3">粘度流体特性</td>
</tr>
<tr>
<td rowspan="3">4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
</body>
</html>
2.8 表单标签
表单可以让我们将录入信息携带到服务器端
简单说，通过表单可以将要提交的数据提交到指定的位置
但一个一个的提交，不方便，表单正好解决了这个问题，将所有的数据形成一个整体，一起提交给服务器。
常见的登录页面、注册页面 都离不开表单的应用
2.8.1 form属性
action：整个表单提交的目的地
method：表单提交的方式
=》get：提交时，传输数据量少（传递普通文字信息，传递照片会失败），明文提交（在浏览器的url后面会显示提交的数据，不适合用于登录）
=》post：提交时，传输数据量大（传递文字和图片都行），密文提交（浏览器的url后面看不到提交的数据）
2.8.2 表单中的元素（控件）
< input >元素的type属性
=》text：默认值，普通的文本输入框
（1）placeholder属性：提示文本
（2）maxlength属性：最多能输入字符数量
=》password：密码输入框
=》checkbox：多选框/复选框
（1）checked：被选中
=》radio：单选按钮
=》file：上传文件
=》reset：重置按钮
=》submit：提交按钮
=》button：普通按钮
< select >：下拉列表/下拉框
=》< option>：列表中的项
==》selected：被选中
< textarea >：文本域（多行文本框）
=》可以通过cols和rows属性来规定textarea 的尺寸，不过更好的办法是使用CSS的height和width属性。
< button >：按钮
=》在form表单中，作用和submit一样
=》不在form表单中，就是普通按钮（配合后期的javascript，可扩展性更高）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="http://www.baidu.com">
<p>账号：<input type="text" placeholder="请输入账号"></p>
<p>密码：<input type="password" placeholder="请输入密码"></p>
<p>爱好：
<input type="checkbox">抽烟
<input type="checkbox" checked="checked">喝酒
<input type="checkbox">烫头
<input type="checkbox">泡澡
</p>
<p>性别：
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</p>
<p>身份：
<input type="radio" name="role">ceo
<input type="radio" name="role">cto
<input type="radio" name="role">coo
<input type="radio" name="role">ufo
</p>
<p>头像：
<input type="file">
</p>
<p>个人简介：
<textarea cols="10"></textarea>
</p>
<p>
<select>
<option>A型</option>
<option>B型</option>
<option>C型</option>
<option selected="selected">O型</option>
</select>
</p>
<p>
<input type="reset" value="清空">
<input type="submit" value="提交">
<input type="button" value="取消">
<button>保存</button>
</p>
</form>
</body>
</html>
注意事项：
（1）所有表单中的元素都要具有名称（否则提交到服务器之后，服务器无法去识别多个元素之间的不同）
（2）单选框要想可以一次选择一个，要具有相同的name值
（3）所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值
2.9 框架标签
通过< frameset >和< frame >框架标签可以定制HTML页面布局，可以理解为：用多个页面拼装成一个页面
注意，框架标签和body标签不共存，“有你没有，有我没你”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<frameset rows="10%,*,13%">
<frame src="top.html"></frame>
<frameset cols="15%,*">
<frame src="left.html"></frame>
<frame src="right.html"></frame>
</frameset>
<frame src="foot.html"></frame>
</frameset>
</html>top.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>顶部奋斗区</h1>
</body>
</html>2.10 其他标签和特殊字符
2.10.1< meta >标签
< meta >标签必须写在< head >标签之间
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">（1）当前页面的字符编码 gbk：中文简体
（2）这里的名字是viewport（显示窗口）
数据是文本内容content=“width=device-width, initial-scale=1.0”
也就是显示窗口宽度是客户端的屏幕宽度（就是满屏！），显示的文字和图形的初始比例是1.0
（3）每个电脑内置的IE版本是不一样的，为了兼容所有的版本以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染
通过设置meta标签来设置页面加载后在指定的时间后跳转到指定的页面
<meta http-equiv="refresh" content="5;url=http://www.lagou.com">注意：在html中如果跳转的互联网上的网站资源，那么我们在书写路径时，一定要带协议的路径
2.10.2 < link >标签
后面我们会使用link标签来导入css
注意：link标签也必须写在< head >标签中
2.10.3 特殊字符
3 HTML5新特性
3.1 HTML4与HTML5的区别
H5包含H4
1 大小写不敏感
（1）标签
（2）属性
（3）属性的值
<inPUT tYPe="pasSWord"/>2 引号可以省略
<input type="password">
<input type=password>3 省略了结尾标签（帮你补全）
<p>哈哈哈3.2 新增语义化标签（让大家见名知意）
html4中，所有的容器标签95%都会使用div，div过多的话，很难区分彼此
=》section标签：表示页面中的内容区域，部分，地区
=》article标签：文章
=》aside标签：文章内容之外的 标题
=》header标签：头部，页眉，页面的顶部
=》hgroup标签：内容与标题的组合
=》nav标签：导航
=》figure标签：图文并茂
=》foot：页脚，页面的底部
3.3 媒体标签
想在网页上播放视频，就要使用< video >，属性有：
src：媒体资源文件的位置
controls：控制面板
autoplay：自动播放
loop：循环播放
3.4 新增表单控件
表单的控件更丰富了
< input >：修改type属性；
=》color：调色板
=》date：日历
=》month：月历
=》week：周历
=》number：数值域
==》min：最小值（默认值是1）
==》max：最大值（默认值无上限）
==》step：递增量
=》range：滑块
=》search：搜索框
进度条< progress/ >
高亮< mark >
联想输入框< datalist >（模糊查询）
=》选项< option >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form>
<h1>我<mark>爱你</mark></h1>
<input list="citys">
<datalist id="citys">
<option value="北京"></option>
<option value="南京"></option>
<option value="上海"></option>
</datalist>
<input type="color">
<br>
<input type="date">
<br>
<input type="month">
<br>
<input type="week">
<br>
<input type="number" min="10" max="20" step="2">
<br>
<input type="range">
<br>
<input type="search">
<br>
<progress></progress>
</form>
</body>
</html>
