1.从规范的角度理解HTML，从分类和语义的角度使用标签
语义化:html5的主要进步之一就是引入了语义化：
header
footer
section
aside
main
nav
address
它通常在主页<footer>中用于标记企业的邮寄地址，电话号码，客户服务邮箱地址等等
2.常用页面标签的默认样式、自带属性、不同浏览器的差异、处理浏览器兼容问题的方式
浏览器兼容:在各大浏览器厂商的发展过程中，它们对web的标准各有不同的实现，标准不同存在差异所以产生兼容性的问题
-
浏览器内核:
Trident: IE、Maxthon（遨游）、Theworld（世界之窗） Gecko: Mozilla Firefox Webkit: Safari、Chrome Presto: Opera Blink: 由Google和Opera Softwase开发的浏览器排版引擎 -
一些概念
CSS BUGCss样式在各浏览器中解析不一致的情况，或者说Css样式在浏览器中不能正确显示的问题称为CSS BugCSS hack
CSS中，hack是指一种兼容css在不同浏览器中正确显示的技巧方法，因为他们都属于个人对css代码的非官方的修改， 或非官方的补丁。有些人更喜欢使用patch（补丁）来描述这种行为。
Filter
它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，filter是一种用来
过滤不同浏览器的hack类型。
-
过滤器(filter)
_下划线过滤器：当一个属性前面增加一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明。 但是ie6及更低版本浏览器会继续解析。 语法：选择器{_属性：属性值；} 此方法是区分ie6浏览器和其他浏览器的方法 ！important关键字过滤器 它表示所附加的声明具有最高优先级的意思，被浏览器优先显示（ie6不识别此写法） 语法：选择符{属性：属性值！important；} *属性过滤器 当一个属性前面加了*后，该属性能被ie7及以下浏览器识别，其他浏览器忽略该属性的作用 语法：选择器{*属性：属性值；} +属性过滤器 当一个属性前面加了+后，该属性能被ie7及以下浏览器识别，其他浏览器忽略该属性的作用 语法：选择器{+属性：属性值；} *+属性过滤器 当一个属性前面加了*+后，该属性能被ie7浏览器识别，其他浏览器忽略该属性的作用 语法：选择器{*+属性：属性值；} \9 ie版本识别，其他浏览器不识别 **语法：选择符{属性：属性值\9;} ** \0 ie8及以上浏览器识别，其他浏览器不识别 语法：选择符{属性：属性值\0;} -moz- Firefox浏览器识别，其他浏览器不识别 -webkit- webkit内核浏览器识别，其他浏览器不识别 -o- Opera浏览器识别，其他浏览器不识别 -ms- ie浏览器识别，其他浏览器不识别
常见的浏览器兼容问题以及解决方法
1）、图片有边框bug:当图片加在ie上会出现边框
hack:给图片加border：0；或者border：0 none；
2）图片间隙:div中的图片间隙bug,在div中插入图片时图片将div下方撑大大约三像素
hack1：将与写在一行上； hack2：将转换为块级元素，给添加声明display：block；
3）双倍浮向（双倍边距）（只有ie6出现）:当ie6及更低版本浏览器在解析浮动元素时会错误的把浮动边边距（margin）加倍显示。
hack：给浮动元素添加声明：display:inline;
4）默认高度（ie6 ie7）:在ie6及以下版本中，部分块元素拥有默认高度（在16px左右）
hack1：给元素添加声明：font-size：0； hack2:给元素添加声明：overflow：hidden；
5）表单元素行高对齐不一致:表单元素行高对齐方式不一致
hack：给表单元素添加声明：float：left；
6）按钮元素默认大小不一:各浏览器中按钮大小不一致
hack1：统一大小/（用a标记模拟）
hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉
hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。
7）百分比bug:在ie6以及以下版本中解析百分比时会四舍五入方式计算从而导致50%加50%大于100%的情况。（也会受系统影响）
hack：给右边的浮动元素添加声明
8）li列表的bug
（1）当父元素li有float：left；子元素a没设置浮动的情况下会出现垂直bug；
hack：给父元素li和子元素a都设置浮动
2）当li中的a转成block；并且有height 并有float的li没设置浮动会出现阶梯显示
hack：同时给li加float
9）当前元素（父元素里面的第一个子元素）与父元素没有设置任何浮动的情况下，设置margin-top后 会错误的把margin-top加在父元素上
hack1：给父元素添加声明overflow：hidden；
hack1：:给父元素的子元素添加浮动
当两个上下排列的元素，上元素有margin-bottom下面元素有margin-top：他们的中间间距不会叠加而是设置为较大值
10）鼠标指针bug:cursor属性的hand属性值只有ie9以下的浏览器识别，其他浏览器不识别该声明cursor属性pointer属性值ie6以上版本及其他内核浏览器都识别该声明
hack：如统一某元素鼠标指针形状为手型，应添加声明cursor：pointer；
11）透明属性
兼容其它浏览器写法：opacity：value；（value取值0-1）
ie浏览器写法：filter：alpha（opacity=value）；取值1-100（整数）
12）Html对象获取问题
FireFox：document.getElementById("idName");
ie：document.idname 或者 document.getElementById("idName").
解决办法：统一使用document.getElementById("idName");
13） event.x与event.y问题
描述: IE下event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下event对象有pageX,pageY属性,但是没有x,y属性.
解决方法：使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
14）window.location.href问题
IE或者Firefox2.0.x下，可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location。
解决方法：使用window.location来代替window.location.href。
15）frame问题
<frame src="xxx.html" id="frameId" name="frameName" />
(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象, frameId和frameName可以同名。
Firefox:只能使用window.frameName来访问这个frame对象.
在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.
(2)切换frame内容:
在 IE和Firefox中都可以使用
window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"
来切换frame的内容.
如果需要将frame中的参数传回父窗口(注意不是opener,而是parentframe)，
可以在frame中使用parent来访问父窗口。例如：parent.document.form1.filename.value="Aqing";
16）模态和非模态窗口问题
IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法：直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口.
var parWin = window.opener;
parWin.document.getElementById("Aqing").value = "Aqing";
3.元信息类标签(head、title、meta)的使用目的和配置方法
-
Head中的全局属性
base:
base标签指定了一个url地址作为基准，那么当前文档中的所有超链接都遵循这一规则，在a中设置访问目标的相对地址，浏览器会自动解析出一个完整的链接地址，若a的href为空，浏览器也会根据base所给的url进行访问。
注意：base标签需放在包含url地址的语句前面<head> <base href="https://cloud.baidu.com/" target="_blank"> </head> <body> <a href="solution/marketing.html">可以跳到百度云数字营销解决方案</a> </body>
Link:
link 标签：用于引入外部的文档，常用到引用css样式或icon图标
其中：rel属性是link标签的核心
注意：在 HTML 中， 标签没有结束标签
在 XHTML 中， 标签必须被正确地关闭
charset 属性规定被链接文档的字符编码方式。
//charset 属性指示被链接文档是用英文编写的：
<head>
<link href="shanghai.htm" rel="parent" charset="en" />
</head> //HTML5 中不支持
href 属性规定被链接文档的位置（URL）
//href 属性指向了一个外部样式表的位置：
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
reflang 属性规定被链接文档中文本的语言
//hreflang 属性指示被链接文档是用简体中文编写的
<head>
<link href="shanghai.htm" rel="parent" charset="UTF-8" hreflang="zh-Hans" />
</head>
media 属性规定被链接文档将显示在什么设备上
//针对两种不同的媒介类型（计算机屏幕和打印）：
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
</head>
//只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持
//rel 属性指示被链接的文档是一个样式表：
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
1.stylesheet 外部样式表 2.icon 网站图标
<link rel="shortcut icon" href="favicon.ico" type="images/x-icon"></link>
3.canonical 指明网址的规范版本
canonical属性用于让搜索引擎知道当前网站中的重复或相似网页中，哪一个页面才是站长想让其抓取与收录的。
-
title
浏览器会以特殊的方式来使用标题，当把文档加入链接列表或收藏夹时，文档标题将成为该链接的默认名称 <title> 标签是 <head> 标签中唯一要求包含的东西
1.dir
属性为rtl和ltr规定元素中内容的文本方向-正向和反向。
2.lang
规定元素中内容的语言代码
3.xml:lang
规定 XHTML 文档中元素内容的语言代码
- meta
meta是html文档在head标签里定义的一个对文档进行描述的功能性标签
1.搜索引擎优化（SEO）
2.定义页面使用语言
3.自动刷新并指向新的页面
4.实现网页转换时的动态效果
5.控制页面缓冲
6.网页定级评价
7.控制网页显示的窗口
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1、name属性:
name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="参数"content="具体的参数值">
A、Keywords(关键字)
//keywords用来告诉搜索引擎你网页的关键字是什么。
<meta name="keywords"content="science,education,culture,politics,ecnomics，relationships,entertaiment,human">
B、description(网站内容描述)
//description用来告诉搜索引擎你的网站主要内容。
<meta name="description"content="Thispageisaboutthemeaningofscience,education,culture.">
C、robots(机器人向导)
//robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
//content的参数有all,none,index,noindex,follow,nofollow。默认是all。
<meta name="robots"content="none">
D、author(作者)
//标注网页的作者
<meta name="author" content="root,root@xxxx.com">
E:renderer(渲染)
//告诉浏览器你的渲染模式
<meta name="renderer" content="webkit">
F：viewport(视图模式）
<meta name="viewport" content="width=device-width,initial-scale=1"/>
-
http-equiv属性
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。//meta标签的http-equiv属性语法格式是： <meta http-equiv="参数"content="参数变量值"> 常用项：X-UA-Compatible（浏览模式） <meta http-equiv="X-UA-Compatible" content="IE=edge">
A、Expires(期限)
//可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输.
<meta http-equiv="expires"content="Fri,01Jan201618:18:18GMT">
注意：必须使用GMT的时间格式。
B、Pragma(cache模式)
//禁止浏览器从本地计算机的缓存中访问页面内容。
<meta http-equiv="Pragma" content="no-cache">
注意：这样设定，访问者将无法脱机浏览。
C、Refresh(刷新)
//自动刷新并指向新页面。
<meta http-equiv="Refresh" content="2;URL=http://www.jb51.net">
注意：其中的2是指停留2秒钟后自动刷新到URL网址。
D、Set-Cookie(cookie设定)
//如果网页过期，那么存盘的cookie将被删除。
<meta http-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">
注意：必须使用GMT的时间格式。
E、Window-target(显示窗口的设定)
//强制页面在当前窗口以独立页面显示。
<meta http-equiv="Window-target" content="_blank">
注意：用来防止别人在框架里调用自己的页面。
F、content-Type(显示字符集的设定)
//设定页面使用的字符集。
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
G、content-Language（显示语言的设定）
<meta http-equiv="Content-Language" content="zh-cn"/>
4.HTML5离线缓存原理
HTML5引入了应用程序缓存,有点：
离线浏览 – 用户可在应用离线时使用它们
速度 – 已缓存资源加载得更快
减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。
- 原理和环境
HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
注意事项
站点离线存储的容量限制是5M
如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
引用manifest的html必须与manifest文件同源，在同一个域下
在manifest中使用的相对路径，相对参照物为manifest文件
CACHE MANIFEST字符串应在第一行，且必不可少
系统会自动缓存引用清单文件的 HTML 文件
manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
FALLBACK中的资源必须和manifest文件同源
当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
当manifest文件发生改变时，资源请求本身也会触发更新
5.可以使用Canvas API、SVG等绘制高性能的动画
-
Canvas基本用法：
在HTML中添加 canvas 标签，即在html中创建了一个画布容器:<canvas id="myCanvas" width="200" height="100"></canvas>
JS脚本中获取canvas DOM对象，创建context对象即可开始使用其API方法在canvas创建的画布上进行绘制了：
<script>
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="#FF0000";
context.fillRect(0,0,150,75);
</script>
canvas API简单介绍
1)坐标
context.fill() 和 context.stroke(),其中fill()为填充方法，stroke()为绘制轮廓的方法
context.fillStyle="#FF0000"; //设置填充样式
context.strokeStyle="rgb(0,165,255)"; //设置轮廓样式
context.lineWidth=4; //设置绘制线宽
context.rect(0,0,150,75); //创建矩形形状(x,y,width,height)
context.fill(); //填充矩形
context.stroke(); //绘制矩形轮廓
-
SVG基本用法
在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中，Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持内联SVG。<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> </body> </html>
svg主要有以下元素：
矩形 < rect >
圆形 < circle >
椭圆 < ellipse >
线 < line >
折线 < polyline >
多边形 < polygon >
路径 < path >
文本 < text >
