半小时学会HTML5
一、了解几个概念
1、HTML定义
HTML是（Hyper Text Markup Language）超文本标记语言，超文本包含：文字、图片、音频、视频、动画等。
2、W3C 是什么？
W3C 即（World Wide Web Consortium） 万维网联盟。W3C标准包括：结构化标准语言、表现标准语言
行为标准。
二、HTML结构和 语法
1、HTML基本结构
由头部和主体部分组成，即 和 成对的标签。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>2、HTML的基本信息
<title>标签<meta> 标签
（1）、title标签
TITLE标签主要的作用有两点，一是告诉访客该篇文章的主题是什么，网站的TITLE标签则告诉该网站的主题是什么。 二就是给搜索引擎索引，告诉搜索引擎蜘蛛该篇文章是以什么内容为主题。
（2）、META标签
META标签是HTML标记HEAD区的一个关键标签，它位于HTML文档的和
例如：
<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>
