HTML 超文本标记语言，非编程语言
部分熟悉内容不再赘述，比如表单类型等。
头部
可以添加在头部区域<head> </head>的元素标签为:
<title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>。
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接：
<base href="http://https://blog.csdn.net/skisqibao/" target="_blank">
<link> 标签通常用于链接到样式表：
<link rel="stylesheet" type="text/css" href="mystyle.css">
<meta> 标签提供了元数据。元数据不显示在页面上，但会被浏览器解析。
META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据,定时刷新页面。
作用:搜索引擎优化 SEO
<meta charset="utf-8">
<!--搜索关键字,通过content存储的关键字可以搜索到本页面-->
<meta name="keywords" content="HTML,CSS,JavaScript,JQuery,Echarts"/>
<!--网页作者-->
<meta name="author" content="Qibao" />
<!--描述网站信息-->
<meta name="description" content="前端技术" />
<!--每五秒刷新页面-->
<meta http-equiv="refresh" content="5" />
标签
内部样式 px:像素 pt:点 3pt=4px
<a href="#" ></a> 引入链接
<img src="#"></img> 引入图片
alt和title分别定义元素的替换文本和提示文本。
<img src=”URL” alt=”替换文本” title=”提示文本” />
alt属性只能用在img、area和input元素中。
对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
<pre></pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
HTML区块
1.块级元素：以新行来开始和结束，自动换行，每个元素都会独占一行
实例:h1 p ul table div
2.内联元素: 不会以新行开始，不自动换行，在一行显示，除非文字太多，折行显示
实例:b td a img span
内联元素设置宽度无效
<style>
/* 将内敛元素转成块级元素*/
span{display: block;}
/* 将块级元素转成内敛元素*/
ul li{display: inline;}
</style>
HTML表格
在缺省情况下，如果不设置表格的边界，表格是不显示边界的。
<table border="1"></table>加边框
<caption >表格标题</caption>
表格居中: margin: 0px auto; 上下外边距为0,左右自动
边框上色: border:1px solid red;
合并边框: border-collapse: collapse
合并行: rowspan="n"
合并列: colspan ="n"
cellpadding属性设置单元格内容与边界之间的距离。
cellspacing属性设置单元格之间的距离。
框架
<iframe src="demo.html" width="200" height="200"></iframe>
移除边框
<iframe src="demo.html" frameborder="0"></iframe>
HTML中取消了<frameset>标签对
表单
get方法 默认传递数据的方法
1.通过地址来传递表单中的数据
2.不能传递敏感的数据，如密码
3.不能传递大量的数据，每次最多只能传递1024字节
4.不能上传附件(原因:数据量小,不安全,编码问题)
post 方法
1.不通过地址栏传递数据，数据传给文件处理程序
2.相对安全
3.可以传递海量的数据
4.能上传附件。
何时使用get？
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当使用 GET 时，表单数据在页面地址栏中是可见的：
search.aspx?name=join&age=25
注释：GET 最适合少量数据的提交。浏览器会设定容量限制。
何时使用POST?
如果表单正在更新数据，或者包含敏感信息（例如密码）。
POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。
enctype属性
form表单中enctype属性用来控制对表单数据发送前的编码
form表单中enctype属性的三种类型:
1.application/x-www-form-urlencoded 默认类型
发送前会编码所有字符，即在发送到服务器之前，所有字符都会进行编码
不能用于上传附件
2.multipart/form-data不对字符编码，用于发送二进制的文件，能用于发送文件
3.text/plain用于发送纯文本内容，空格转换为 "+" 加号，不对特殊字符进行编码，
一般用于email之类的
fieldset:分组标签,自带框,容器
legend:设置fieldset分组的标识
pattern:写正则表达式
“图片提交”作用和“提交按钮”相同，不同的是“图片提交”以一个图片作为表单的提交按钮，其中src属性表示图片的路径。
<input type="image" src="图片路径" name="名称" alt="替代文本" width="宽度" height="高度"/>
HTML5
新的语义元素，比如 <header>, <footer>, <article>, and <section>。
新的表单控件，比如数字、日期、时间、日历和滑块。
强大的图像支持（借由 <canvas> 和 <svg>）
强大的多媒体支持（借由 <video> 和 <audio>）
强大的新 API，比如用本地存储取代 cookie。
<section>:定义文档中的节
<article>：定义页面独立的内容区域。
<aside>：定义页面的侧边栏内容。
<header>:定义了文档的头部区域，可以有多个
<footer>:定义 section 或 document 的页脚。
<nav>:定义导航链接的部分
_____________________
| <header>头部 |
|——————————— |
| <nav>导航栏 |
|——————————— |
| <section> | |
|——————| <aside> |
| <section> | 侧边栏 |
|___________|________ |
| <footer>页脚 |
|____________________|
HTML5表单
取色器
<input type="color" />
日期选择器
<input type="date" min="2000-01-01" max=""/>
dataList
<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项
需要将input与datalist绑定
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
pattern属性匹配正则
<input type="text" name="country" pattern="[A-Z]{3}" title="例如：中国(CHN)"/>
Web存储
localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
