一、前言
从今天起，我将为大家梳理一下HTML、CSS、JavaScript的基础知识。
如果你对Web前端开发并不了解，那么这个系列文章能够让你掌握Web前端开发的基础知识，再结合练习，就可以正式入门Web前端开发啦。
如果你已是一个Web前端开发人员，那么这个系列文章能够成为你工作中的好助手，你能够在文章中查询你要用到的知识点。
同时，该系列文章中引用的文章多来自于HTML5学堂，感谢HTML5学堂老师们在我学习过程中的帮助！
如果你在阅读过程中遇到困难，或我的描述有不详尽和有错误，请指出，万分感谢。
二、网页中常见的图片格式
1．网页中常见的图片格式有哪些？
Jpg, gif, png-8, png-24
http://www.h5course.com/a/2015050298.html
2．这些不同图片格式各自有什么特点
动态支持程度：gif
图片质量：png24 > jpg > png-8 > gif
透明程度的支持：
透明程度
Gif 不支持半透明，支持全透明
Jpg 不支持半透明，不支持全透明
Png-8 不支持半透明，支持全透明
Png-24 支持半透明，全透明
兼容问题：
IE 6、7、8 PNG不兼容
三、代码注释的写法
1．html代码：
2．CSS代码：/* …….. */
3．js代码：
a.单行注释：//
b.多行注释：/* ….. */ 星号对齐；每加一行开头多加一个星号；星号后面加一个空格
/* ….
* …
* …
* … */
四、HTML5介绍
1.什么是HTML5
HTLM5 = HTML（结构 ） + CSS（样式） + JavaScript（行为）
a.HTML5：结构，内容排版
b.CSS：样式，页面布局、美化
c.HTML+CSS纯静态开发——搭载基本的页面（有样式）
d.JavaScript：行为，网页中的动作，包括自动动作与操作反馈
2.HTML基本代码模板
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>3.HTML标签规则
a.标签通常是成对出现的，一开一关
b.<标签名字> 内容区 </标签名字>
c.不成对出现的单标签包括：meta（<meta charset="utf-8">）、<link>、<img>、<input>、<br>等等
d.使用Tab键进行缩进——缩进原则为：每一个级别在当前状态下缩进一次
e.网页文档的读取顺序是由上到下
4.
<!doctype html>：文档声明，声明文档的基本类型。
5.0版本开始，只需此方式简化编写，之前版本需要定义很多内容
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
5.Html标签
包含head标签和body标签
6.Head标签
Head标签中放置的叫做文档信息以及相关文件，其中主要包含“元信息”、标题、CSS、JS的内容或文件等。
<head> 标签用于定义文档的头部。
<head> 中的元素可以引用脚本、指示浏览器在关联的样式表、提供元信息等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、编码格式等。
7.Body标签
Body标签中放置的是呈现在网页中的内容
<body> 元素定义文档的主体。
<body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。） 网页需展示的内容需嵌套在<body>标签中。
五、结构/标签 HTML —— head部分
1．head标签的定义
<head> 标签用于定义文档的头部，它是所有头部元素的容器。
<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
2．元信息Meta标签：
用于确定文件的编码格式：<meta charset="utf-8">
Meta：元信息——针对信息进行描述的信息
Charset：表示字符编码，通常我们使用utf-8的编码类型
存储的文件编码格式需要与浏览器编码一致，否则会出现乱码。
a.Meta标签：name属性
主要用于描述网页，与content属性相对应使用。主要作用：便于搜索引擎爬虫查找、分类等。
b.Meta标签：keywords关键词
<meta name="keywords" content="具体关键词内容">（content值即为网页搜索的关键词，和SEO（搜索引擎优化有关））
c.Meta标签：description关键词
<meta name="description" content="具体描述信息">（即网页搜索时，网站名称下面的简介内容）
d.Meta标签：author关键词
<meta name="author" content="姓名">
e.Meta标签：http-equiv自动跳转
<meta http-equiv="refresh" content="5">（5秒后自动刷新当前网页）
<meta http-equiv="refresh" content="5; url=http://www.baidu.com">（5秒后自动跳转到百度）
http-equiv相当于是http的文件头，用于向浏览器传递一些信息，从而正确的显示网页内容，与content属性对应。
content属性当中主要存储相应参数的值。
最典型的例子：字符编码的位置，自动刷新/跳转
f.Meta定义编码格式旧方法
<meta http-equiv="content-Type" content="text/html; charset=utf-8">（早期写法，等价于<meta charset="utf-8">）
3．link标签
标签定义文档与外部资源的关系。
标签最常见的用途是链接样式表。
<link rel="stylesheet" href="css/index.css">
4．title标签
<title> 元素可定义文档的标题。
5．style标签
<style> 标签用于为 HTML 文档定义样式信息。
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。
style 元素位于 head 部分中。
六、结构/标签 HTML —— body部分
1．具体模块开发的流程
a.选择标签的基本标准
1)元素的默认样式
2)元素/标签的样式的控制难易程度（后代选择器）
3)SEO——标签的语义性
4)代码的精简度
5)遇到图，选择背景实现还是img标签，是否需要浮动处理。
b.合理选择标签
1)标签语义性——规范
2)怎么少起名字——合理使用后代选择器
3)嵌套层数、代码量、可读性
4)一旦出现图文并茂的模块，通常第一优选dl，但是对于内容比较少，布局比较简单的图文并茂模块，考虑是否能使用更精简的
2．标签的语义性以及基本选用
以下引自百度百科
为了使我们的网站更好的被搜索引擎抓取收录，更自然的获得更高的流量，网站标签的语义化就显得尤为重要。所谓标签语义化，就是指标签的含义。
HTML为我们提供了相当丰富的标签，每个标签都有它各自的含义。
我认为在设计时，除了遵循HTML语法以外，应该充分利用并遵守各标签的“语义”。
如标题文字应该包含在h1-h6中，大段的文字内容应该由p标签进行分段而不是br标签，列表项应该放在ul或ol或dl中，表格形式的数据应该仍然用table布局。
为什么要这样做？
一个很有说服力的原因是，保证在用户去掉CSS显示的情况下，网页能够尽量有效的将内容的结构层次显示出来。
如果全部用div，当去掉CSS之后，整个网页就失去了层次，只剩下一些杂乱的文字碎片。这并不符合Web标准对低配置兼容性的要求。
3．块元素
a.块元素的种类
div h1 h2 h3 [h4]少用 (h5 h6)基本弃用 p dl dt dd ul ol
b.div
div是主要用于做布局的元素，没有任何的语义性，默认宽度是占满父级整行
c.h1~h6
h1~h6表示一级标题~六级标题，当前h4比较少用，h5 h6已经弃用
d.p
p表示段落
e.dl、dt、dd
dl 自定义列表
dt 自定义列表的标题
dd 自定义列表的内容
<dl>
<dt>自定义列表的标题</dt>
<dd>自定义列表的内容</dd>
</dl>
f.ul
ul 无序列表
<ul>
<li>ul下只能直接包含li元素</li>
</ul>
g.ol
ol 有序列表
<ol>
<li>ol下只能直接包含li元素</li>
</ol>
4．行元素
a.行元素的种类
span img(单标签元素) a em(自带斜体效果) strong(自带加粗效果) i b var del、ins、before伪元素、after伪元素
b.行元素的间隙
行元素之间的换行符（即回车），会在页面中被渲染，体现为行元素之间有一个空隙，空隙的大小各个浏览器不相同。
解决方法：
1)为行元素加上浮动属性，如：float: left;
2)利用CSS代码进行兼容处理
父级设置：
.wrap {
/*因行元素之间的换行符（即回车），会在页面中被渲染，体现为行元素之间有一个空隙，空隙的大小各个浏览器不相同。*/
/*因回车会被当做空白字符，所以可以在父级设置font-size: 0;，将字符的大小设置为0，回车即不会被显示*/
font-size: 0;
}
子级设置：
.demo * {
/*因父级设置了font-size: 0;，子级中有文字时，需要单独设置字体大小*/
font-size: 12px;
}
c.span
没有语义性，行标签，用于辅助布局
d.img
属性：alt；title；src。
注意：
控制宽高；border: 0;或border: none;；（两者均用于取消边框，但后者不会引起页面渲染）
设置float或display block;用于规避img标签下方自带3px的空隙bug；
img中alt与title辨析
http://www.h5course.com/a/20150526184.html
e.a
超链接
注意：移动端需要考虑指触区（用户可点击区域）
<a href="链接地址" title="当前标签中的内容">: 超文本链接
<a href="http://www.baidu.com" title="baidu" target="_blank">超链接内容</a>
<a href="链接的页面" target="_blank">新窗口打开</a>
<a href="链接的页面" target="_parent">原窗口打开</a> title属性：当鼠标悬停在超链接文字上时，会显示出来的提示性信息，与SEO相关。
target属性：用于定义打开超链接的位置，默认是新当前页面，可以使用_blank，在新的空白页当中打开超链接
href属性：用于书写要跳转的链接地址。特殊写法如下
如果不填写 即为刷新当前页。（扩展知识：锚链接）
不书写href属性值或者#，表示刷新。也可以利用#，实现返回顶部href属性：用于书写要跳转的链接地址，如果不填写
（扩展知识：锚链接）
填写# 实现返回顶部。
填写### 点击后不刷新页面最常用
a标签的样式：
a: link 基本状态
a: visited 访问后的状态
a: hover 鼠标悬停状态
a: active 鼠标按下状态（鼠标点击与释放之间时）
:link :visited :hover :active叫做伪类选择器（注意，不是伪元素！！！）
伪类选择器，优先级0010
书写顺序严格按照:link :visited :hover :active，因为优先级都一样，否则会互相覆盖！
f.strong/b、em/i的比较
1)strong em内容类标签，
2)b i 修饰类标签，没有含义，已弃用
3)strong、b表现为加粗显示，em i表现为倾斜样式
4)strong em具有强调语气，strong强调语气更强烈。
5)strong em在搜索引擎优化（SEO）当中比b和i重要的多
http://www.h5course.com/a/2015042740.html
g.del、ins
del、ins是行元素，但是有块元素性质，不需要设置display: block;
5．第三类元素
a.第三类元素的种类
br(单标签) li 表格类的元素 以及 部分表单的元素
b.li
表示列表项（既不属于块元素，也不属于行元素，是列表项元素，但是能够按照块元素的方式进行显示）
c.br
换行标签，有clear属性，在清浮动中应用
6．块元素和行元素的区别
http://www.h5course.com/a/20150502100.html
块属性标签独占一行、支持设置宽高、margin定义四个方向属性值。
块转行：display: inline; 可以转换成 行元素、除个别特殊元素外，可包含块状元素和行内元素。
行属性标签不独占一行、不支持设置宽高、margin只能定义左右方向属性值。
行转块：display: block; 可以转换成块元素、除ins和del外，不能包含块状元素。
a.默认状态
块元素默认独占父级一行，行元素默认内容撑开宽高
b.能否设置宽高
行元素设置宽高无效
c.margin、padding的转换
行元素纵向外边距(margin)设置无效
d.如何相互转换：通过使用display: inline和display: block实现块元素和行元素的转换
7．嵌套规则
a.body 可以直接包含块状元素、ins、del、script。不可以直接包含行内元素
b.块元素能够包含块元素，但是标题和段落类标签（h1~h6，p dt）除外，块元素能够包含行元素。
c.行元素能包含行元素，不能包含块元素（ins 、del 除外）
d.ins 和 del（行内元素）可以包含块状元素或者行内元素，其他任何行内元素 都不允许包含块状元素
e.p、h1-h6 可以直接包含行内元素和文本信息，但是不允许包含块状元素
f.dl 元素只允许包含 dt 和 dd，同时 dt 不能包含块状元素，只允许包含行内元素，对于 dd 可以包含任何元素
g.ul和ol下只能直接包含li元素，li下可以包含块元素行元素
h.form 元素不能够直接包含 input 元素。原因在于 input 元素属于行内元素， form 元素仅仅能够包含块状元素
i.table 元素只能够包含 caption、colgroup、col、thead、tbody、tfoot，不能够直接包含 tr 或者其他任何元素
8．table布局与DIV+CSS布局的区别（比较方向：语义性[搜索引擎方向]；代码量——加载速度——用户体验[用户体验方向]；灵活性、可维护性[开发者方向]）
一.div+css布局的好处：
1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。
2.布局精准，网站版面布局修改简单。
3.加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。
4.节约站点所占的空间和站点的流量。
5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。
二.table布局的好处（table布局也不是一点用的没有，这点是毋庸置疑的）
1.容易上手。
2.可以形成复杂的变化，简单快速。
3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。
9．其他布局方式：960栅格、圣杯、双飞翼、瀑布流（蘑菇街）、WIN8-Grid（网格）、自适应（移动端）、弹性布局、响应式布局（移动端）
七、HTML5移动端新增标签
1.兼容性
移动端大部分浏览器都是webkit内核，兼容IE9+，添加JS DOM后兼容IE8及其以下
2.新增结构标签
a.<header></header> 定义页眉/头部
b.<footer></footer> 定义页脚/底部
c.<nav></nav> 定义导航
d.<article></article> 定义文章
e.<aside></aside> 定义文章的侧边栏
f.<section></section> 定义文章中的区段
g.<hgroup></hgroup> 定义网页标题的组合
3.新增行元素
a.<mark> 呈现突出显示的文字，如搜索结果中高亮度显示关键词；<mark>...</mark>
b.<time> 表示日期和时间
c.<meter> 表示度量衡，用于已知最大与最小值的度量
d.<progress> 表示运行中的金城
e.<wbr> 表示软换行
4.新增其他元素
a.<video></video> 定义视频
b.<audio></audio> 定义音频
c.<details></details> 表示用户要求得到并可以得到的详细信息
d.<canvas></canvas> 定义图形，提供画布
e.<embed src="" type=""> 插入各种多媒体
八、视音频
1．视频格式
a.Theora + Vorbis = Ogg
b.H.264 + ACC = MPEG4
c.Vp8 + Vorbis = Webm
2．支持程度
3．HTML5视频的使用 —— video标签
a.video标签属性
1)src属性 —— 设置视频的链接
2)width属性 —— 设置元素宽，不好维护，推荐使用样式书写
3)height属性 —— 设置元素高，不好维护，推荐使用样式书写
b.兼容处理 —— source元素
浏览器对视音频的格式支持程度不同，使用source标签进行处理
source标签被视频标签video和音频标签audio所支持，它可以链接不同的媒体文件，浏览器将使用第一个可识别的格式
c.播放控制 ——
1)controls：控制条
2)autoplay：属性是视频就绪后自动播放自动播放
3)preload：auto值是表示页面加载后载入视频，none值表示禁用
4)loop：实现视频播放结束后进行循环播放
5)poster：将在视频文件开始播放前显示图片
6)load()方法用于在更改来源（视频地址）后对视频/应聘进行加载
7)play()方法播放加载完成的视音频文件
8)pause()方法暂停正在播放的视音频文件
9)volume属性：控制音量，范围[0-1]
10)playbackRate属性：设置视音频当前的播放速度，FF最大值为5，IE最大值为8，Chrome不确定
11)timeupdate事件
12)duration：视频可播放的总时间
13)currentTime：当前播放视频的时间，可以读写操作
d.其他属性
九、Canvas
1．Canvas是什么？
HTML5新增的一个标签，它的作用是画矢量图和位图
2．Canvas能做什么？
a.能做游戏、能做特别酷炫的效果等等，主要是为画图而生
b.注意：Canvas元素本身并没有绘制能力，必须使用JavaScript来完成实际的绘图任务
3．Canvas设置大小
Canvas有默认宽高，如果使用CSS设置Canvas画布的大小，则导致画布按比例缩放到CSS设置的值。
所以Canvas画布宽度的设置需要在标签中，使用标签的属性进行设置。
4．Canvas的基本方法
a.什么是路径
1)绘制时产生的线条成为路径。路径由一个或多个直线段或曲线段组成
b.开始和闭合路径
1)beginPath()
2)开始和闭合之间进行绘图
3)closePath()
c.移动画笔与画线
1)moveTo(x, y)
2)lineTo(x, y)
d.文本绘制
1)strokeText(text, x, y); —— 绘制文字轮廓
2)fillText(text, x, y); —— 填充文字
5．Canvas基本属性
a.设置填充与描边的颜色
1)strokeStyle = ‘red’;
2)fillStyle = ‘red’;
b.线条样式的设置
1)lineCap设置线条末端线帽的样式（round、square）
2)lineWidth设置线条粗细，不需要写单位，以像素来计算
c.文字的设置
1)font跟CSS类似：字体大小、字体
2)textAlign文字水平对齐（start、end、left、right、center）
3)textBaseline文字垂直对齐方式（文字基线是普通的字母基线）
6．Canvas快速绘制
a.矩形路径的绘制
1)rect(x, y, width, height);
参数 描述
x 矩形左上角的 x 坐标。
y 矩形左上角的 y 坐标。
width 矩形的宽度，以像素计。
height 矩形的高度，以像素计。
2)fillRect(x, y, width, height);
fillRect() 方法绘制"已填充"的矩形。默认的填充颜色是黑色。
提示：请使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。
b.圆形路径的绘制
1)arc(x, y, r, sa, ea, true/false)
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
参数 描述
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
c.贝赛尔曲线
1)quadraticCurveTo(kx, ky, ex, ey);
二次贝塞尔曲线
ex, ey：终点
2)bezierCurveTo(kx1, ky1, kx2, ky2, ex, ey)
三次贝塞尔曲线
7．Canvas绘制思路
开始绘制——属性设置——路径变化——关闭路径——填充/描边
8．Canvas图形操作
a.缩放
scale(x, y) —— 缩放当前绘图放大与缩小，x为在横坐标轴上的缩放倍数，y为纵坐标轴上的缩放倍数
b.旋转
rotate(par) —— 旋转当前绘制的图，par为旋转的量，用弧度制表示
c.平移
translate(x, y) —— 为画布水平和垂直的位移
9．Canvas动画
a.原理：绘制——清除——绘制——清除……
b.Canvas动画相关命令
1)清除画布
clearRect(x, y, width, height);
2)save与restore
保存与恢复
Canvas绘图上下文（程序之上和之下的意思）属性都是可以保存和回复，也就是说只能保存状态，不能回复所绘制的内容（图像）
save() —— 用于储存状态，如strokeStyle, fillStyle, lineWidth, lineCap, shadowOffsetX, shadowOffsetY, shadowBlur,
shadowColor, font, textAlign, textBaseline.
restore() —— 将储存的状态取出并赋予新建的图形
3)上下文和栈
save()（入栈）
restore()（出栈）
十、硬件调用
1．特殊功能
a.电话、短信、邮箱
1)取消电话号码识别
<meta name="format-detection" content="telephone=no">
2)调用电话
<a href="tel:15880200025" title="">15880200025</a>
3)调用邮箱
<a href="sms: [email protected]" title="">[email protected]</a>
b.手机相册
1)调用相册
<input type="file" accept="image/*" name="" value="" style="background: #faa">
2)调用手机摄像头
<input type="file" accept="image/*" capture="camera" name="" value="" style="background: #aaf">
c.PC端调用QQ
http://shang.qq.com/v3/widget.html
d.IP定位
