### Html
HTML：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。
能够传传输声音和视屏。也就是给文本加上含有语义的标签。 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
1、Html中的标签：
a、标签：用“<>”包起来的内容。
Html标签：
作用所有html中标签的一个根节点
lang:用来设置当前页面的语言。
作用：
a.设置页面上主要使用语言的类型。
b.将来做SEO的时候在权重上起到一定的作用。
c.用于特殊设备上的设置。
b、h系列的标签(Header)：h1,h2,h3,h4,h5,h6
作用：把页面上的文字加上标题的语义
h1,h2,h3,h4,h5,h6:将文字放大，加粗.并且逐渐变小。（h1标签是最大的。）
注意：一个页面只能有一个h1标签。<因为一个文章只有一个大标题>
3、p标签(Paragraph)：段落标签
作用：给页面的上一段文字加上段落的语义
这是段落
特点：页面上的一个段落，单独占一行，并且与上下内容之间存在距离。
4、hr标签(Horizontal Rule)
作用：在页面显示一条横线。
特点：在页面显示一条横线，默认占整行。
5、br标签(break)
作用：换行。
6、b(Bold),u(Underlined),i(Italic),s(Strikethrough),strong,em,del,ins
作用：
b：加粗u: 下划线i: 倾斜s: 删除线
建议不要使用，因为这些标签没有语义。
strong:加粗 ins:下划线em:倾斜del:删除线
可以使用
7、img标签(image)：
作用：在页面显示一张图片。如果不设置宽，成比例缩放。
代码：
特点：就是显示图片.
8、a标签(Anchor)：锚
a标签的其它名称：超级链接，超链接，锚链接。
作用：可以在一个页面跳转到另一个页面
注意：在a标签之内必须要写上文字，如果没有，那么这个标签在页面上找不到。
可以不跳转（跳转到当前页面）href=”#”
可以在当前页面进行定位。
A.设置a标签的href属性为“#id名”
B.在页面的指定位置加入一个目标标签（可以是任意标签）
C.必须给这个标签设置一个id名：
这是目标
可以进行下载
属性：
href | a标签跳转的目标地址
---|---
target | _blank:保留原始页面，再进行跳转 _self:在当前页面进行跳转
base |为页面上所有的a标签设置跳转的方式（base标签一般放在titile标签下面）
锚伪类：
a:link
代码：a: link {color: red; font-size: 30px;}
作用：给a标签设置没有被访问过的样式
a:visited
代码：a:visited {color: pink; font-size: 40px;}
作用：给a标签设置访问过的样式
a:hover
代码：a:hover {color: yellow; font-size: 50px;}
作用：给a标签设置鼠标悬停时的样式。
a:active
代码：a:active{color: green; font-size: 60px;}
作用：设置a标签被激活时的样式（被点击时的样式）。
注意：
在使用的时候一定遵守这样的顺序：
a:link ,a:visited,a:hover,a:active
b. 有些锚伪类除了可以作用在a标签上还可以作用来其它标签上：
:link、:visited 只能用于a标签
:hover、:active 其它标签也可以使用这个伪类
9、pre
元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体
标签的一个常见应用就是用来表示计算机的源代码
10、Head标签
用于存放title,meta,base,style,script,link，
注意：每个head标签中都必须有一个有title标签，其它的可选
11、Body标签
作用：用于存放所有的html的结构标签：
p,h,a,b,u,i,s,em,del,ins,strong,ul,li,ol,
12、Title标签：
作用：让页面拥有一个属于自己的标题
13、meta 标签：
常用用法：
1. Description：可以描述页面，可以用来使用百度程序（网络爬虫）来收录关键信息，以此提高页面的排名。
2. Keywords：关键词，可以用来提高页面的关健词的比重（前升排名的一种方式。）
3. 字符集（编码格式）：
Charset（字符集的格式）：UTF-8
14、列表
a、无序列表：
b、有序列表：
c、自定义列表
15、表格
总结：在早期的网站开发中，表格的使用非常的泛滥。
表格：不是没你不可，而是有你更好。
作用：用来将数据以表格形式显示出来。
border-collapse: collapse;/*去掉单元格之间的间隙*/
标签 | 作用 | 特点
---|---|---
th | 起到表头的作用 | 其中的文字加粗，居中
caption | 给表格设置标题 | 在表格的最上面显示标题
thead | 用来存放当前列的表头 |如果没有加css页面默认将表头中的高度设置变小
tbody | 一般用来存放页面中的主体数据 |如果不写会自动加上
tfoot | 一般情况不会出现 |
16、表单
作用：用来收集用户的信息，将来提交到服务器
标签 属性 作用
input： type text:文本框
password：密码框
hidden:隐藏域
radio:单选框
checkbox:多选框
button:按钮
reset:重置
image:图片按钮
submit:提交
value 用于设置默认值(text,password,button)
select： option 下拉框
textarea： 文本域
如果想要多个radio或者checkbox组成一个选择集合，那么必须给每个radio以及checkbox都设置相同name属性
如何给radion,checkbox设置默认值呢？
设置另外一个属性：checked=”checked”
我需要给下拉框设置默认值？ selected="selected"
disabled 可以设置input元素是否被禁用
17、Form标签
作用：用来管理页面上的表单元素，表单元素如果要起作用，必须要放在form标签中。
属性 | 作用
---|---
action | 将所有的数据提交到action指定的页面
这样写当你点击label的时候，inpu会自动获取焦点，label的for和input中的input中的id相同
input type=resrt的按钮只能在Form之中才能起作用
jquery可以通过下列方式获取表单信息，此时它会自动获取,key为name的关键字
var params = form.serializeArray(),
options = {};
$(params).each(function (k, v) {
if (v.value) {
options[v.name] = v.value.trim();
}
});
元素js获取表单元素的值
function(formId){
var from=document.getElementById(formId);
var tagElements=from.getElementsByClassName('el-input');//这里我把所有我要获取值得属性都使用了同一个类来标识；
var json={};
for (var j = 0; j < tagElements.length; j++){
var name=tagElements[j].name;//这里就是要获取得name属性，将此name属性作为json对象得key；
var value=tagElements[j].value;
json[name] = value;//注意这里必须要使用这种方式给json赋值。如果使用json.name=value得话你会发现你所有的key都是一个字符串name，而不是name代表的值
}
return json;
}
18、Div
特点：默认占一整行，并且一行里面只能显示一个根据浏览器的显示大小
div的高度是由div中的内容来决定的。
19、span
特点：大小由内容来决定，并且一行里面可以显示多个。宽度和高度都是由内容来决定。（行内元素，块级元素。）
### 标签的分类：
双标签：有开始有结束，开始和结束之间是存在内容
,
单标签：只有一个标签，自己闭合自己。
,
,
### DOCTYPE:文档类型
DTD(Document Type Definition):文档类型定义
声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范.
### xHtml(html2.0版本，是一种相对html语法更加严谨的hmtl)
在使用DOCTYPE的时候建议使用html5的类型。每个页面都要设置一个doctype，如果不设置，
浏览器会默认开启quirks mode（怪异模式）解析（quirks mode（怪异模式）是浏览器为了兼容很早之前针对旧版本浏览器设计、
并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式）。
### Html中空格的合并现象：
特点：无论在页面有同时出现多少个空格，缩进，换行，将来浏览器在解析的时候只会当一个空格显示。
结论：html中对空格，缩进，换行不敏感，如果同时出现多个空格缩进或者执行，页面只会把它们当作一个空格来解析。
### SEO与标签的语义化：
作用：用来优化网站，使用网站在搜索引擎上的排名先前。
语义化的好处：
01对搜索引擎的友好（将来网络爬虫进入页面之后可以很方便的得到页面的重要信息。）
02提升用户体验（结构良好的文档都能向用户传达可视化的语义）
03利于代码的可读、维护、提高开发效率.
### form
请尝试在浏览文件时选取一个以上的文件。
下面的 "Last name" 字段位于 form 元素之外，但仍然是表单的一部分。
Last name: