html:hyperText markup language 超文本标记语言
点击链接后退页面:
<a href="javascript:history.go(-1)">回到上一个网页</a>
1.在网页中，HTML决定结构和内容，CSS设定网页的表现样式，JavaScript控制网页的行为。
2.<!DOCTYPE html>必须位于HTML文档的第一行。
3.<meta>标签:用于方便浏览器解析或搜索引擎搜索，一般放置于<head>中，用"名称/值"方式:
(1)表示文档内容类型，字符串编码信息，如:<meta charset="UTF-8">
(2)为搜索引擎定义关键词:
<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript">
(3)为网页定义描述内容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
(4)定义网页作者
<meta name="author" content="zain">
(5)每30秒中刷新当前页面
<meta http-equiv="refresh" content="30">
4.字体样式标签： <strong>字体变粗， <em>字体倾斜
5.注释
6.特殊符号:
空格
大于号>
小于号<
引号"
版权符号©
图片格式:JPG,GIF,PNG,BMP
7.图片标签，必须要有src和alt属性
<img src="图片地址" alt="图片的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" />
8.超链接标签(target指定在那个窗口打开，_self自身窗口，_blank新建窗口)
<a href="链接地址" target="目标打开窗口位置">附连接的文本或图像</a>
9.链接地址
（1）绝对路径(指向目标地址的完整描述，多指向本站点外的文件，如<a href="https://www.baidu.com">百度</a>)
(2)相对路径(一般指向本站点内的文件，如<a href="login/login.html">登陆</a>)
(3)相对路径中"../"表示当前目录的上级目录，"../../"表示上上级目录
10.超链接的应用场合
(1)页面链接:如<a href="login.html" target="_blank">为你跳转到登录页</a>
(2)锚链接:
先在目标位置B设置标记如:<a name="new">这里是目标位置</a>
然后在A位置设置超链接路径href属性值为"#标记名"如:<a href="#new">当前位置</a>
(3)功能性链接:单击时启动本机自带的应用程序如QQ,电子邮件等，如电子邮件链接:"mailto:电子邮件地址"
11.元素分类
（1）块元素:如<p><h1><div>无论内容有多少，该元素都独占一行(一块)。
块元素特点:如果没有设置自身宽度，则显示为父容器的100%。
（2）行内元素:如<strong><a>显示宽度由自己的内容决定，其他元素可以排在它后面。
12.元素类型转换
（1）块状元素转换为内联元素:display:inline;
（2）内联元素转换为块状元素:display:block;
(3)把元素设为内联块状元素:display:inline-block;
13.元素的特点:
块状元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行.
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
内联元素特点:
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变.
内联块状元素（同时具备块状元素和内联元素的特点）：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
14.常见的元素:
常用的块状元素有:（block）
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:(inline)
<a>、<span>、
、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:(inline-block)
<img>,<input>
15.三种列表:
(1)有序列表<ol><li>
(2)无序列表<ul><li>,ul中只能嵌套li，而li可以嵌套任意标签
(3)定义列表<dl><dt><dd>,是标题及列表项的结合。
16.表格基本结构:单元格，行，列
(1)<table><tr><th><td>
(2)HTML5中已经废除table的border属性，用css控制边框宽度。
(3)跨列(横跨)：<td colspan="所跨的列数">内容</td>
跨行(竖跨)：<td rowspan="所跨的行数">内容</td>
(4)表格特点:同行单元格高度一致且水平对齐，同列单元格宽度一致且垂直对齐。
17.视频元素:
(1)controls属性是否显示播放暂停和音量控制，autoplay属性自动播放，loop属性循环播放。
<video src="视频路径" controls="controls">你的浏览器不支持video标签</video>
(2)source元素链接不同的视频文件，浏览器会自动选择第一个可识别的格式:
<video controls>
<source src="video/video.webm"/>
<source src="video/video.mp4"/>你的浏览器不支持video标签
</video>
18.音频元素:使用语法和视频元素一样，只要把video换成audio即可。
19.HTML5的结构元素(先划分结构再写内容)
head(头部)，footer(脚部),
section(独立区域),article(独立文章内容),
aside(相关内容或应用，常用于侧边栏),nav(导航类辅助内容)
20.<iframe>框架：方便在页面中引用站外的页面内容。
<iframe name="此框架的标识名" src="引用的页面地址"></iframe>
21.<iframe>和锚链接的结合：使锚链接的内容在iframe框架中打开
<form name="mainFrame" src="框架引用的页面地址" />
<a href="链接路径" target="mainFrame">点击在框架中打开</a>
22.表单标签form
<form method="post" action="login.html" enctype="text/plain"/>
表单内容
</form>
(1)action="url"属性意为把表单提交到某个页面,method=get|post意为向服务器发送数据的方式。
(2)提交方法：get提交,表单数据会在地址栏url中显示；而post提交不会显示，所以post提交更安全。
(3)enctype="text/plain"指enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。text/plain 空格转换为加号+，但不对特殊字符编码。
23.表单元素:
(1)表单元素<input>标签属性:
type(默认text,其他password,email,checkbox,radio,button,submit,reset,file,image,url,hidden,number,range,search等)、name、value(可选,该元素的初始值)、size(该元素的初始宽度)、
maxlength(可输入的最大字符数)、checked(按钮被选中)
(2)列表框<select><option>标签：
<select>中至少包含一个<option>。在<option>有多行选项需滚动查看时，size属性设置可提示看到的行数，selected属性默认选中该列表项。
(3)按钮：button普通(要和事件如onclick关联使用),submit(提交表单到action指定的url并传递表单数据),reset重置。要求美观可使用图片按钮如<input type="image" src="图片路径"/>
(4)多行文本域：不能用value属性赋初始值
<textarea name="标识名" cols="显示的列数" rows="显示的行数">
自我评价
</textarea>
(5)数字number：限制输入的数据为数字，设定最大值最小值、合法的数据间隔step或默认值等
<input type="number" name="num" min="0" max="100" step="10"/>
(6)滑块range：作用和数字number一样，只是外观显示为用滑动条选择数值
<input type="range" name="range" min="0" max="100" step="10"/>
(7)search搜索框:在任意页面中用于输入搜索关键词的文本框
<input type="search" name="sousuo" />
(8)文件域：多用于文件上传
<input type="file" name="files"/>
<input type="submit" name="upfiles" value="上传"/>
(9)当表单数据包含普通数据、文件数据等多部分内容时，要设置表单的enctype编码属性为 multipart/form-data,表示把表单数据分为多部分提交。
(10)表单隐藏域hidden：数据不会页面中显示，但会随表单一同提交。
<input type="hidden" name="userid" value="20"/>
(11)表单元素 只读属性readonly、禁用disabled
(12)W3CHTML5标准中，规定对布尔类型的属性，属性值可以省略。
(13)表单元素的标注label：当鼠标单击标注的文本时，浏览器会自动对焦关联的表单元素，for属性规定label与哪个表单元素绑定。name和id属性必需。
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
24.HTML5表单新标签
<form> 供用户输入的表单
<input> 输入域
<textarea> 文本域 (多行输入)
<label> 定义 <input> 元素的标签，一般为输入标题
<fieldset> 定义一组相关的表单元素，并使用外框包含起来
<legend> 定义 <fieldset> 元素的标题
<select> 下拉选项列表
<optgroup> 选项组
<option> 下拉列表中的选项
<button> 点击按钮
<datalist> 指定一个预先定义的输入控件选项列表
<keygen> 定义了表单的密钥对生成器字段
<output> 计算结果
25.表单验证
(1)好处：减轻服务器的压力；保证数据的可行性和安全性。
(2)placeholder:为文本框提示用户输入
<input type="text" name="name" placeholder="请输入你的姓名"/>
(3)required：规定文本框不能为空
<input type="email" name="email" required/>
(4)pattern：输入的内容必须符合正则表达式自定义的规则
<input type="text" name="tel" required pattern="^1[35]\d{9}"/>规定以13、15开头的11位数字
26.utf-8和utf8的使用，只有mysql可以用“utf8”,但其他地方一律使用大写"UTF-8"
网页推荐使用长后缀名.html
有的浏览器中直接输出中文会出现中文乱码，可加声明<meta charset="UTF-8">
  //空格
> //大于号
< //小于号
" //双引号
© //版本符号
<em></em>斜体
<img src="地址" alt="图片代替文字" title="鼠标悬停提示" width="" height=""/>
<a href="链接网址" target="目标">页面间链接</a>
<a name="wo"></a>
<a href="#wo">锚链接</a>
<a href="mailto:bdqnWebmaster@bdqn.cn" target="_blank">功能性链接</a>
27.表格类
1、<table>：整个表格以<table>标记开始、</table>标记结束，table在没有添加css样式之前，在浏览器中显示是没有表格线的。
2、<tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，
不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不用等整个表格加载完后显示。）
3、<tr>：表格的一行，所以有几对tr 表格就有几行。
4、<th>：表格的头部的一个单元格，表格表头，文本默认粗体且居中显示。
5、<td>：表格的一个单元格，一行中包含几对<td>这行中就有几个单元格。
6、表格中列的个数，取决于一行中数据单元格的个数。
7.设置样式border-collapse:collapse;可以把双线边框线合并为一条线边框。
<table border="边距宽度">
<tr>
<td rowspan="跨行数量" colspan="跨列数量" align="文本状态"></td>
</tr>
</table>
表格可以添加标题和摘要标签进行优化。
(1)摘要：
摘要的内容不会在浏览器中显示。作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：<table summary="表格简介文本">
(2)标题：
描述表格内容，标题的显示位置：表格上方。
语法：
<table summary="表格简介">
<caption>标题文本</caption>
<tr>
<td>…</td>
</tr>
</table>
28.<iframe></iframe>
内联框架iframe src="引用页面地址" name="框架标识名" frameborder="边框" scrolling="是否出现滚动条" noresize="noresize"更改页面大小
配合<a>标签的targer属性及<iframe>标签的name属性，可实现窗口间的关联
29.表单
文件域，ps：需要在表单中写入enctype="multipart/form=data" 属性
<form method="提交方式" action="提交地址">
隐藏域：type="hidden"
只读：readonly="readonly"
禁用：disabled="disabled"
<input type="text" name="名称" size="长度" maxlength="最大长度"/>
//password 密码
//radio单选按钮
<input type="radio" name="sex" value="男" id="nan"/>
<label for="nan">男</label>
<input type="radio" name="sex" value="女" id="nv"/>
<label for="nv">女</label>
checkbox多选按钮
<input type="checkbox" name="n" value="1"/>
30.下拉列表
<select name="名称">
<optoin value="值">1</option>
</select>
31.文本域textarea
<textarea name="名称" rows="行高" cols="宽度"><textarea>
<a>标签可以链接Email地址，使用mailto能发送电子邮件。
如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
mailto写法：
<a href="mailto:yy@imooc.com?subject=主题名称 &body=邮件内容">
33.文本格式化标签：
<b> 文本加粗
<strong>文本加粗(加重语气)
<i> 斜体字
<em> 斜体(强调文字)
<big> 字体放大
<small> 字体缩小
定义下标字
定义上标字
<ins> 插入字(字体下划线)
<del> 字体删除线
"计算机输出" 标签：
<code> 定义计算机代码
<kbd> 键盘输入
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 预格式化文本(会保留文本的多个空格)
引文、引用、及标签定义：
<abbr> 缩写
<address> 地址联系信息
<bdo> 文字方向(设置dir="rtl"为从右到左显示)
<blockquote> 长文本引用(不会自带双引号，但会两边自动缩进)
<q> 短句引用语(自带双引号)
<cite> 定义引用、引证
<dfn> 定义一个定义项目。
