什么是HTML
英文全称Hyper Text Markup Language，
中文全称为超文本标记语言。
超文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。（来自百度百科）
如何创建网页
推荐大家使用的前端工具：
VSCode
Hbuilder
Sublime_text
创建网页之前，新建一个名为Code的文件夹，用于存放HTML代码文件，在Code文件夹下新建如下几个基本的文件夹：
css 存放css文件
image 存放图像资源文件
js 存放JavaScript脚本文件
music 存放音频资源文件
video 存放视频资源文件
打开Sublime_text，此时会默认生成一个空的未定义名称的文件untitled。
此时按下快捷键Ctrl+S保存（MacOS下为command+s），弹出保存对话框，将网页名称更改为想要的网页名字加后缀.html，然后把创建好的.html文件保存在刚刚创建的Code文件夹内。
使用快捷键!+TAB（英文感叹号）即可自动生成HTML文档模版。
HTML文档结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
正文
</body>
</html>
<!DOCTYPE html>
定义了文档类型为html，是一种MIME类型
MIME类型：所有的文件在网络上无论用于显示还是用于下载，都存在自己响应的类型。例如gif、jpeg都存在自己的MIME类型， 用于给文档做一些自己的相关标识。
<html lang="en">
lang属性规定了元素内容的语言。
<head>
</head>
head元素包含了所有的头部标签元素。在head元素中可以插入JavaScript脚本、CSS样式表。
<meta charset="UTF-8">
meta元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。
charset为编码字符集，UTF-8为编码格式。部分页面会出现乱码问题，这是字符集不统一导致的。我们在国内打开的浏览器的默认的编码格式都是GBK，需要把原有的GBK的格式修改成全球统一的格式UTF-8。
<meta charset=“UTF-8”>的作用是把字符集设置为UTF-8，防止可能出现的乱码问题。
<title>
可定义文章的标题。
<body>
</body>
包含文档的所有内容，网页的主题就写在这里。
HTML属性
HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现
<p name="p1"></p>
其中p标签中的name就是给p标签的name属性，值为p1。
基本常用标签
基本常用标签—-标题<hn></hn>
表示的是网页或文章标题，n=1-6，字体从大到小，默认加粗。
<h1>我是标题</h1>
<h2>我是标题</h2>
.
.
.
<h6>我是标题</h6>
基本常用标签—-标尺线<hr>
划出一条标尺线。
<hr>
基本常用标签—-段落<p></p>
划分段落，p标签结束处自动换行。
<p>
我是段落内容
</p>
基本常用标签—-区域划分<div></div>
使用div标签可以把文档划分为不同的部分，以便可以给不同的区域使用不同的样式。
<div id="div1">
<p>区域1</p>
</div>
<div id="div2">
<p>区域2</p>
</div>
基本常用标签—-超链接<a></a>
定义超链接，用于从一张页面链接到另一张页面（页面跳转）。
最重要的属性：
href 指示链接的目标
HTML的页面跳转方式：
使用a标签跳转，属于GET请求方式
form表单GET请求
form表单POST请求
使用方式1：
外链接
，进行外部跳转，href属性值为需要跳转到的页面地址。
<a href="http://www.baidu.com">百度</a>
使用方式2:：
锚点
，进行页面的内部跳转，添加id属性，href属性值为#+需要跳转到的a标签的id属性值。
<a href="#anchor">点我跳转</a>
<a id="anchor"></a>
基本常用标签—-图像<img>
用于在页面引入图片，它有两个必须属性：
src 引用图像的路径
alt 图像无法显示时的替代文本
<img src="./image/sky.jpg" alt="天空"/>
关于HTML图像的位图
<img>
的位图属性：
usemap 属性将图像定义为客户端图像映射
该属性需要与
<map>
标签和
<area>
标签搭配使用，属性值为#+位图map的id值。
<map>
定义一个图像映射。常用属性：
id 唯一的名称
name 唯一的名称
<area>
定义图像映射中的区域，总是嵌套在<map>标签中。必须属性：
alt 图像无法显示时的替换文本
常用属性：
coords 定义可点击的坐标
href 此区域跳转的目标地址
shape 定义可点击区域的形状
<img src="./image/sky.jpg" alt="天空" usemap="#first"/>
<map id="first" name="first">
<area
shape="circle"
coords="230,280,50"
href="http://www.baidu.com/">
</area>
</map>
基本常用标签—-表格<table></table>
表格布局，生成一个表格，拥有三个子标签：
<tr></tr>
表示表行
<td></td>
表示表元（单元格）
<th></th>
表示表头（默认加粗）
<table id="nav">
<tr>
<td>Phones</td>
<td\>Mi Pad</td>
<td>Mi TV</td>
<td>Mi Band</td>
<td>Mi PowerBank</td>
<td>Headphones</td>
<td>Store</td>
</tr>
</table>
基本常用标签—-视频<video>和音频<audio>
<video>
可以为页面添加视频资源。
<audio>
可以为页面添加音频资源。
基本属性：
src 引入的资源的路径
controls 显示控制器
<video src="./video/陈奕迅 - 浮夸 2014MAMA.mp4" controls="controls">
</video>
<audio src="./music/陈奕迅 - 浮城.mp3" controls="controls">
</audio>
列表
一般指一个项目的列表，HTML中的列表分为无序列表
<ul>
、有序列表
<ol>
、定义列表
<dl>
三种。
无序列表和有序列表的共同子标签都为
<li>
，表示列表项。
列表—-无序列表<ul>
无序列表项目默认使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表
<ul>
用于定义一个无序列表，应用场景有导航、侧边栏、商品栏等。
<ul>
<li>无人之境</li>
<li>与我常在</li>
<li>七百年后</li>
<li>黄金时代</li>
</ul>
列表—-有序列表<ol>
有序列表项目使用数字进行标记，有排序方式。有序列表<ol>用于定义一个无序列表，应用场景有微博热搜等。
<ol>
<li>黑暗中漫舞</li>
<li>天使的礼物</li>
<li>遗失的国度</li>
<li>不来也不去</li>
</ol>
列表—-定义列表<dl>
自定义列表
<dl>
不仅仅是一列项目，而是项目及其注释的组合，拥有两个子标签：
<dt>
定义的项目
<dd>
定义项目的描述
<dl>
<dt>一</dt>
<dd>陈奕迅的歌</dd>
<dt>沙龙</dt>
<dd>陈奕迅的歌</dd>
<dt>黑择明</dt>
<dd>陈奕迅的歌</dd>
<dt>告别娑婆</dt>
<dd>陈奕迅的歌</dd>
</dl>
多窗口框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
多窗口框架—-框架<frameset>
用于定义多窗口框架，与子标签
<frame>
搭配使用，里面的每一个窗口都是一个frame。
<frameset>
不能和标签
<body>
连用。
<frameset rows="10%,80%,10%">
<frame src="1.html" name="header" />
<frameset cols="10%,90%">
<frame name="menu" />
<frame name="center" />
</frameset>
<frame name="footer" />
</frameset>
关于多窗口框架的页面间跳转
为
<frame>
标签的name属性设置一个值，在
<a>
标签的属性target中设置等同的值，通过
<a>
标签即可实现页面页面间跳转。
<frameset rows="10%,80%,10%">
<frame src="1.html" name="header" />
<frameset cols="10%,90%">
<frame name="menu" />
<frame name="center" />
</frameset>
<frame name="footer" />
</frameset>
<body>
<a href="B.html" target="menu">A</a>
</body>
关于HTML中颜色的表示方式
1.以函数的方式表示
rgb(255,255,255)
取值范围是0-255。
2.以十六进制的方式去表示
#000000-#FFFFFF。
3.使用颜色的英文单词，如pink orange yellow black white gold等。
关于绝对路径和相对路径
绝对路径：是从盘符开始的路径，如：
C:\windows\system32\cmd.exe
相对路径：是从当前路径开始的路径，
./
表示当前位置，
. ./
表示当前位置的上一级，如：
…/windows/system32/cmd.exe
表单
表单用于搜集用户数据，在登陆、注册等需要提交的场景都需要用到表单。
表单—-表单<form></form>
用于为用户输入创建 HTML 表单，其中有两个基本属性：
action 规定表单的提交路径（跳转的方式）
method 规定表单提交的方式
<form action="../1.html" method="post">
用户名：<input type="text">
</form>
关于HTML的请求方法
有7种请求方法，其中最常用的是GET和POST。
GET
POST
PUT
HEAD
DELETE
PATCH
OPTIONS
关于POST和GET之间的区别
表单提交时，什么情况下是GET请求，什么情况下是POST请求？
表单提交时，默认情况是GET请求，当method属性值为post时为POST请求。
GET请求和POST请求有什么区别？
POST请求提交时路径上没有属性的信息，相对安全；
GET请求提交路径上存在属性的信息，不安全；
GET请求在路径的地址上存在属性值，url的地址是有限制的，最大为64kb。
什么时候使用这两种请求：
要根据数据性质，如果是热数据、安全度不重要的数据则使用get和post都可以；
如果数据的性质需要安全性比较高时，一定要使用post请求；
在写文件上传的功能时，请求必须是post的提交方式。
表单—-输入<input>
用于搜集用户信息，根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
<form action="1.html" method="post">
请输入用户名：<input type="text">
</form>
表单—-文本text
把<input>的属性type的值设置为text，显示一个输入文本框。
<form action="1.html" method="post">
请输入用户名：<input type="text"/>
</form>
表单—-密码password
把<input>的属性type的值设置为password，显示一个输入文本密码框。
<form action="1.html" method="post">
请输入用户名：<input type="password"/>
</form>
表单—-多选checkbox
把<input>的属性type的值设置为checkbox，设置一个复选框。多个分为一组的复选框需要在<input>标签中设置一个值相同的name属性。
<form action="1.html" method="post">
爱好：<br>
吃饭
<input type="checkbox" name="hobby"/>
睡觉
<input type="checkbox" name="hobby"/>
游戏
<input type="checkbox" name="hobby"/>
</form>
表单—-单选radio
把<input>的属性type的值设置为radio，设置一个单选框。多个分为一组的单选框需要在<input>标签中设置一个值相同的name属性才会有单选的效果。
<form action="1.html" method="post">
性别：<br>
男
<input type="radio" name="sex"/>
女
<input type="radio" name="sex"/>
</form>
表单—-提交submit
把<input>的属性type的值设置为submit，定义提交按钮。提交按钮会把表单数据发送到服务器。
<form action="1.html" method="post">
<input type="submit" value="提交"/>
</fomr>
表单—-重置reset
把<input>的属性type的值设置为reset，定义重置按钮。重置按钮会清除表单中的所有数据。
<form action="1.html" method="post">
<input type="reset" value="重置"/>
</fomr>
表单—-文件上传file
把<input>的属性type的值设置为file，用于文件上传。
<form action="1.html" method="post">
<input type="file"/>
</fomr>
表单—-下拉选择框<select></select>
用于建立下拉选择框，需与<option>搭配使用。
<form action="1.html" method="post">
请选择你的城市：
<select name="city">
<option>---请选择---</option>
<option>北京</option>
<option>广西</option>
<option>上海</option>
</select>
</form>
表单—-文本域<textarea></textarea>
用于建立一个可以输入多行文本的文本域，其中常用两个属性：
cols 规定文本区内的可见宽度。
rows 规定文本区内的可见行数。
<form action="1.html" method="post">
更多：
<textarea rows="5" cols="20" name="more">
这家伙很懒，什么都没有留下。。。
</textarea>
</form>
表单综合应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div align="center" style="border: 2px solid; width:500px;height: 400px;margin: auto;">
<form action="" method="post">
<p>用户名：
<input type="text" name="username"/>
</p>
<p>
密 码：
<input type="password" name="password"/>
</p>
<p>
男
<input type="radio" name="sex"/>
女
<input type="radio" name="sex"/>
</p>
<p>
爱好：
吃饭
<input type="checkbox" name="hobby"/>
睡觉
<input type="checkbox" name="hobby"/>
游戏
<input type="checkbox" name="hobby"/>
</p>
<p>
请选择你的城市：
<select name="city">
<option>---请选择---</option>
<option>北京</option>
<option>广西</option>
<option>上海</option>
</select>
</p>
<p>
更多：
<textarea rows="5" cols="20" name="more">
这家伙很懒，什么都没有留下。。。
</textarea>
</p>
<p>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</p>
</form>
</div>
</body>
</html>
