前端三大利器概述
学习前端，不得不学习前端中的三大利器：html + css + javascript。那么这三个组件分别起到什么作用呢？以人体为例，单单具有html属性的人，只是一个裸体的人偶(理解成充气娃娃加工的第一步也 行...好邪恶)。这个时候无疑很丑陋，因此需要给这个人偶穿上华丽的外衣，也就是CSS。通过CSS来对这个人的外貌特征、服装色彩进行装饰。装饰之 后，OK，基本上可以看了，但是还是缺少了一点人类的基本特征：灵动性。那么js就出马了。js赋予这个人偶能动的机制。比如，当你吻人偶时，它会拥抱 你。当你给人偶挠痒痒时，它会呵呵直笑。当你XXXX时，它会亚麻跌...好吧，又邪恶了......其实就是这么个意思：html是裸露的人体结 构，css是人华丽的外衣，js是人交互的灵魂。学会这三大利器，你的前端页面，就能实现各种狂拽炫酷吊炸天的特效和交互效果，完成各种需求了。
HTML概述
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标 准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户 界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等， 也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如），浏览器使用HTML标签和脚本来诠释网页内容，但不会 将它们显示在页面上。
HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其 它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素。
1.HTML基本结构
HTML代码块基本分为三大部分，外加声明部分。其中声明部分不是必须的。
<!DOCTYPE html> <!-- 声明部分 -->
<html lang="en"> <!-- 主要部分1：html根标签 -->
<head> <!-- 主要部分2：html头部标签 -->
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body> <!-- 主要部分3：html内容主体标签 -->
<!-- 内容主体 --> </body>
</html>
2.HTML标签
从上面的html基本三大部分来看，会发现好多<>的标签，这些标签就是HTML中最重要的元素：标签。
标签从写法上，可以分为：自闭合标签和闭合标签。
2.1.自闭和标签和闭合标签
自闭合标签和闭合标签的区别就是，自闭合标签不是成对出现的，本身会进行闭合。比如：<input />以"/"进行自我闭合。而闭合标签则比如:<div></div>成对出现来闭合。
常见的闭合标签：<a href=""></a>|<div></div>|<table><tr><td></td></tr></table>|<label></label>|<form></form>|<select></select>|<b></b><i></i><u></u>|<h1></h1>|<font></font>|<span></span>|<STRONG></STRONG>|<TBODY></TBODY>|<IFRAME ></IFRAME>|<BUTTON></BUTTON>|<STYLE TYPE="text/css"></STYLE>|<SCRIPT LANGUAGE="JAVASCRIPT"></SCRIPT>|<BODY></BODY>
常见的自闭合标签：<img /><br /><input /><li><p /><link />
2.2.块级标签和内联标签
HTML标签从内容上，可以分为：块级标签和内联标签(也叫行内标签)
他们的区别：
块级元素一般用来搭建网站架构、布局、承载内容
内联元素一般用来在网站内容中的某些细节或者部位，用以“强调、区分样式、上标、下标、锚点”等等。
它们可以互相转换。display:inline|block
块级元素的特点：每一个块级元素都识从一个新行开始显示，其后的元素需要另起一行。
内敛标签的特点:位置多少就占用多少,不会另起一行.
Ps:写HTML时要额外注意：不能把块元素放在行内(inline)元素中。
块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表 内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量 可变元素
<strong>可变元素为根据上下文语境决定该元素为块元素或者内联元素。</strong>
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本 常见的块级和内联标签
这里需要注意一点：当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素加上display:block这样的属性，让他也有每次都从新行开始的属性。
3.HTML语法
想了解更多HTML语法，可以参照：HTML语法英文版、HTML编码规范
3.1.HTML的代码注释
代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。
<!-- HTML中注释 -->
/* css中注释 */
// js中注释
3.2.HTML的标签组成
一个HTML的标签，通常由标签名，属性，内容三要素组成。
属性要在开始标签中指定，用来表示该标签的性质和特性。通常都是以“属性名=”值””的形式来表示，用空格隔开后，还可以指定多个属性。指定多个属性时不用区分顺序。
更多更全的属性信息，请查看：属性大全
4.HTML中常用标签之声明
使用 HTML5 的 doctype 来启用标准模式，建议使用大写的 DOCTYPE。
<!DOCTYPE html>
5.HTML中常用标签之Head头部标签
在<head></head>标签中，常用的标签主要包括：<meta /> | <title></title> | <link /> |
meta标签
meta标签定义关于 HTML 文档的元信息，主要功能包括：设置页面编码、刷新和跳转、关键词(方便被收录)、描述等功能呢
- meta 标签
- 页面编码
```html
<meta charset="UTF-8" />
<meta http-equiv=“content-type” content="text/html;charset=utf-8"/>
```
- 刷新和跳转
```html
例：2秒刷新一次 :<meta http-equiv="Refresh" Content="2"/>
例：进入网站2秒后跳转页面：<meta http-equiv="Refresh" Content="2"; Url="http://www.baidu.com" />
```
- 关键词
- name="keywords" 方便被爬虫收录
```html
例：<meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区" />
```
- 描述
- name="description" 描述信息
```html
例：<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。" />
title标签
title标签用来定义文档的标题。
<title>学而思教育</title>
link标签
link标签用来定义文档与外部资源的关系。比如：引入css文件、设置网站图标
- 引入css
< link rel="stylesheet" type="text/css" href="css/common.css"/>
- 设置网站图标
<link rel="shortcut icon" href="images/favicon.ico">
style标签
<style> 标签用于为 HTML 文档定义样式信息，即CSS设置
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{ /*设置class为c1的元素样式*/
color:red;
background-color: #3af5ff;
font-size: 32px;
height: 150px;
width: 500px; }
</style>
</head>
HTML中常用标签之Body主题标签
p标签
P标签用来标记一个段落，段落的上下会有一定的间距
<p>This is some text in a very short paragraph</p>
br标签
换行标签
我是一个<br />大头兵 实际效果： 我是一个
大头兵
a标签
该标签定义超链接，用于从一张页面链接到另一张页面，或者从页面的某个位置跳转到当前页面的指定位置
- 直接跳转
<a href="http://www.baidu.com"></a>
- 新建tab跳转
<a href="http://www.baidu.com" target="_blank"></a>
- 锚:实现页面内跳转到指定位置
<a href="#i1">第一章</a> <!--寻找页面中id=i1的标签，将其标签内容放置在页面顶部 --> <div id="i1">跳转到这里O</div>
h标签
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
input标签与form标签
<input> 标签用于搜集用户信息，主要用于同用户进行交互，经常与<form>标签一起使用。
input标签根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
- input
- type="text" 文本类型
<p>用户名：<input type="text" /></p>
- type="password" 密码类型
<p>密码：<input type="password" /></p>
- type="email" 邮箱类型,提供自动检测地址合法性功能
<p>邮箱：<input type="email" /></p>
- type="checkbox" 复选框，相同类型的复选框，需要加name来区分，且name必须相同
男1<input type="checkbox" name="gender"/>
男2<input type="checkbox" name="gender"/>
男3<input type="checkbox" name="gender"/>
男4<input type="checkbox" name="gender"/>
男5<input type="checkbox" name="gender"/>
- type="radio" 单选按钮,如果要进行提交，除了需要name来进行区分外，还需要有value属性
男<input type="radio" name="sex" value="1"/>
女<input type="radio" name="sex" value="1"/>
- type="file" 如果上传文件，需要在form属性中加enctype="multipart/form-data"
文件1：<input type="file" />
文件2：<input type="file" name="up" enctype="multipart/form-data"/>
- type="button" 按钮
普通按钮<input type="button" value="按钮" />
- type="submit" 提交当前表单
提交按钮<input type="submit" />
- type="reset" 重置表单,清空表单中内容
重置按钮<input type="reset" />
select标签
select标签用来创建单选或多选菜单。注意在需要提交至相应接口时，需要给select标签一个name属性值，方便后端程序接收。
- option 定义列表中的可用选项
<select name="city"> <!-- 单选框-->
<option value='1'>上海</option>
<option value='2'>北京</option>
<option value='3'>山西</option>
<option value='4'>重庆</option>
</select>
- multiple 规定可选择多个选项，规定下拉列表中可见选项的数目。多选提交时，后台收到的value是一个list对象，包含多个value
<select multiple size="10"> <!-- 开启多选，并默认展示10个-->
<option>上海</option>
<option>北京</option>
<option>山西</option>
<option>重庆</option>
</select>
- optgroup 分组选择 <!--分组单选 -->
<select size="10"><!--默认显示10个 -->
<optgroup label="上海">
<option>浦东</option>
<option>虹桥</option>
</optgroup>>
<optgroup label="其他地区" size="10">
<option>北京</option>
<option>山西</option>
<option>重庆</option>
</optgroup>
</select>
textarea标签
textarea标签用于定义多行的文本输入控件。可以用cols和rows属性来设计输入框
<textarea cols="7" rows="4" name="extra">多行文本输入框</textarea>
form标签
form标签用于为用户输入创建 HTML表单，与input标签来协同使用。
form标签有三个重要的属性，action、method以及enctype。
action规定当提交表单时向何处发送表单数据。
method规定用于发送 form-data 的 HTTP 方法。
enctype规定在发送表单数据之前如何对其进行编码，仅在需要上传文件数据时使用，也是一个非常重要且容易遗忘的属性。
<form action="http://192.168.11.88:8000/index/" method="get" enctype="multipart/form-data">
用户名：<input type="text" name="query"/>
密码：<input type="password" name="pwd"/>
男<input type="radio" name="gender" value="1"/>
女<input type="radio" name="gender" value="0"/>
<p>爱好：
篮球<input type="checkbox" name="favor" value="0">
足球<input type="checkbox" name="favor" value="1">
乒乓球<input type="checkbox" name="favor" value="2">
</p>
<select name="province" multiple size="10">
<option value="0">上海</option>
<option value="1">北京</option>
<option value="2">山西</option>
<option value="3">重庆</option>
</select><br/>
上传文件：<input type="file" name="up" enctype="multipart/form-data"/><br/>
<input type="submit" value="提交"/>
</form>
label标签
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性的属性值应当与相关元素的 id 属性相同。
<html>
<body> <p>请点击文本标记之一，就可以触发相关控件：</p> <form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form> </body>
</html>
ul ui标签
定义无序 HTML 列表
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ol li 标签
定义有序HTML列表，可以用type属性来规定在列表中使用的标记类型【1，A，a，I，i】，start规定有序列表的起始值。
<ol start="3" type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
dl dt dh标签
<dl> 标签定义了定义列表（definition list）。
<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。
<html>
<body>
<h2>一个定义列表：</h2>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>
最终效果：可以看到dd与dt相比， 有了缩进。
table标签
table标签用来定义HTML表格。
- <thead></thead> 用来定义标题
- tr 表示一行
- td 表示一列
- th 用来取代td，实现自动加粗功能
- <tbody></tbody> 表格主体内容写在tbody中
- <tfoot></tfoot> 表格底部，也可以不写内容
一个完整的table格式应该如下：
<table border="1">
<thead>
<th>标题1</th>
<th>标题2</th>
</thead>
<tbody>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
<tfoot><!--可有可无-->
<th>结尾1</th><!--可有可无-->
<th>结尾2</th><!--可有可无-->
</tfoot>
</table>
table中的td/th标签常用rolspan和rowspan属性来合并单元格。
fieldset标签
该标签主要用来装饰form表单。<legend> 标签为 fieldset 元素定义标题
<!DOCTYPE HTML>
<html>
<body>
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form> </body>
</html>
最终效果图：
iframe标签
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。就是在当前页面嵌套其他页面的内容。<iframe></iframe>标签内部，用来填充一些说明或者描述信息，并不会显示在页面。