一、了解几个概念
1、HTML定义
HTML是（Hyper Text Markup Language）超文本标记语言，超文本包含：文字、图片、音频、视频、动画等。
2、W3C 是什么？
W3C 即（World Wide Web Consortium） 万维网联盟。W3C标准包括：结构化标准语言、表现标准语言
行为标准。
二、HTML结构和 语法
1、HTML基本结构
由头部和主体部分组成，即head 和 body 成对的标签。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
2、HTML的基本信息
<title>标签 <meta> 标签
（1）、title标签
TITLE标签主要的作用有两点，一是告诉访客该篇文章的主题是什么， 二就是给搜索引擎索引，告诉搜索引擎蜘蛛该篇文章是以什么内容为主题。
（2）、META标签
META标签是HTML标记HEAD区的一个关键标签，它位于HTML文档的head和title之间（有些也不是在head和title之间）。 它提供的信息虽然用户不可见，但却是文档的最基本的元信息。 meta除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定。
例如：
<meta name="keywords" content="HTML,ASP,PHP,SQL">
必需属性content
meta的必需属性是content，当然并不是说meta标签里一定要有content，而是当有http-equiv或name属性的时候，一定要有content属性对其进行说明。
例如：
<meta name="keywords" content="HTML,ASP,PHP,SQL">
可选属性
对于meta的可选属性说到了三个，分别是http-equiv、name和scheme。
http-equiv
http-equiv属性是添加http头部内容，对一些自定义的，或者需要额外添加的http头部内容，需要发送到浏览器中，我们就可以是使用这个属性。例如我们不想使用js来重定向，用http头部内容控制，那么就可以这样控制：
<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />
在页面中加入这个后，5秒钟后就会跳转到指定页面啦，
name
第二个可选属性是name，这个属性是供浏览器进行解析，对于一些浏览器兼容性问题，name属性是最常用的，当然有个前提就是浏览器能够解析你写进去的name属性才可以，不然就是没有意义的。
<meta name="renderer" content="webkit">
charset
charset是声明文档使用的字符编码，解决乱码问题主要用的就是它，值得一提的是，这个charset一定要写第一行，不然就可能会产生乱码了。
charset有两种写法
<meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
禁止百度转码
百度会自动对网页进行转码，这个标签是禁止百度的自动转码
<meta http-equiv="Cache-Control" content="no-siteapp" />
SEO 优化部分
<!-- 页面标题<title>标签(head 头部必须) --> <title>your title</title> <!-- 页面关键词 keywords --> <meta name="keywords" content="your keywords"> <!-- 页面描述内容 description --> <meta name="description" content="your description"> <!-- 定义网页作者 author --> <meta name="author" content="author,email address"> <!-- 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 --> <meta name="robots" content="index,follow">
viewport
viewport主要是影响移动端页面布局的，例如：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
content 参数：
- width viewport 宽度(数值/device-width)
- height viewport 高度(数值/device-height)
- initial-scale 初始缩放比例
- maximum-scale 最大缩放比例
- minimum-scale 最小缩放比例
- user-scalable 是否允许用户缩放(yes/no)
3、标题（H1-H6）标签
- 标题（H1-H6）标签是指网页html 中对文本标题所进行的着重强调的一种标签，以标签h1、h2、h3到h6依次显示重要性的递减，制作标签的主要意义是告诉搜索引擎这个是一段文字的标题，起强调作用。
- 标题标签数字越大，字体越小
<h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6>
4、段落标签
- 段落标签间隔相对换行标签要大一些
<p>段落标签</p> <p>段落标签</p>
5、换行标签
- 换行标签是单标签
- 换行标签相对段落标签的间隔要小的多，更加的紧凑
这是换行标签，单标签<br/> 这是换行标签，单标签<br/>
6、水平线标签
<!--水平线标签--> <hr/>
7、字体样式标签
<strong>粗体</strong> <em>斜体</em>
8、注释和特殊符号
<!--注释--> 快捷键（ Ctrl + /） <!--空格--> > <!-- > --> < <!- < --> © <!-- © -->
9、图像
<!--img标签 src：图片地址，相对地址（推荐使用）和绝对地址 ../ 表示上一级目录 --> <img src="../resources/image/2.jpg" alt="text" title="这是一张图" width="200" height="200"> </body> </html>
10、链接标签
<a href="" target=""></a>
11、无序列表标签
<ul> <li>3</li> <li>2</li> <li>5</li> <li>4</li> <li>1</li> </ul>
12、有序列表标签
<ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ol>
13、定义列表标签
<dl> <dt>姓名</dt> <dd>年龄</dd> <dd>昵称</dd> </dl>
14、表格标签
<table border="1px"> <tr> <td colspan="5" align="center">成绩</td> </tr> <tr> <td rowspan="3">统计</td> <td>姓名</td> <td>语文</td> <td>数学</td> <td>英语</td> </tr> <tr> <td>小明</td> <td>20</td> <td>10</td> <td>30</td> </tr> <tr> <td>小红</td> <td>80</td> <td>90</td> <td>96</td> </tr> </table>
15、视频元素 video标签
<video src="../resources/video/1234.mp4" controls></video>
16、音频元素 audio标签
<video src="../resources/video/1234.mp3" controls></video>
17、页面结构
head： 标题头部区域的内容（用于页面或页面中的一块区域）
<head> <meta charset="UTF-8"> <title>页面结构</title> </head>
footer： 标记脚部区域的内容（用于整个页面或页面的一块区域）
<footer> <h2>网页脚部</h2> </footer>
section： Web页面中的一块独立区域
<section> <h2>网页主体</h2> </section>
article： 独立的文章内容
aside： 相关内容或应用（常用于侧边栏）
nav ：导航类辅助内容
18、iframe 内联框架
<iframe src="" name="hello" frameborder="0" width="500" height="500"></iframe>
三、表单及表单标签的应用
1、form 表单标签
<!-- action ：表单提交的位置 可以是网站也可以是一个请求处理的地址 method：post-get 提交方式 get 方式不安全可以在url看到提交的信息 不安全但是高效 不能传输大文件 post 比较安全 可以传输大文件 --> <form action="1.html" method="post"> <!-- 文本输入框 input type="text"--> <p>名字：<input type="text" name="username"></p> <!-- 密码框 input type="password"--> <p>密码：<input type="password" name="pwd"></p> <p> <input type="submit"> <input type="reset"> </p> </form>
2、下拉框
<p>下拉框： <select name="列表名称"> <option value="ZH">中国</option> <option value="JA">日本</option> <option value="AM">美国</option> <option value="RS" selected>瑞士</option> </select> </p>
3、多行文本输入框
<p>多行文本输入框： <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea> </p>
4、文件
<p> <input type="file" name="files"> <input type="button" name="update" value="上传"> </p>
5、邮箱
<p>邮箱： <input type="email" name="email"> </p>
6、url
<p>url： <input type="url" name="url"> </p>
7、number 数字输入
<p>商品数量： <input type="number" name="number" max="100" min="0" step="10"> </p>
8、range 滑块
<p>音量 <input type="range" name="voice" max="100" min="0" step="1"> </p>
9、搜索框
<p>搜索框： <input type="search" name="search"> </p>
10、隐藏域 ，存在仅仅是隐藏
<input type="text" value="" name="" hidden>
11、只读
<input type="text" value="" name="" readonly>
12、禁用
<input type="text" value="" name="" disabled>
13、表单验证
为什么要进行表单验证？
- 减轻服务器的压力
- 保证数据的安全性
常用方式：
placeholder 文本框添加提示信息
required 非空判断
pattern 正则表达式
<!-- 文本框添加提示信息 + 非空判断--> <p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>
<!-- 邮箱正则表达式 --> <p>邮箱： <input type="email" name="email" pattern="[1-9]\d{7,10}@qq\.com"> </p>
