前端知识点集锦-html5篇
一.HTML5篇
1.元素、属性、事件
新元素
画布canvas：HTML5元素用于图形绘制，配合JavaScript完成绘制图形；
<canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。canvas>
<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,100,100);
script>音频audio；
<audio controls>
<source src="horse.ogg" >
<source src="horse.mp3" >
您的浏览器不支持 audio 元素。
audio>视频video；
语义性：artical,nav,footer,header,aside,hgroup等；
时间time；
<p>我们在每天早上 <time>9:00time> 开始营业。p>
<p>我在 <time datetime="2018-02-14">情人节time> 有个约会。p>进度progress；
下载进度：
<progress value="22" max="100">
progress>新属性
拖放：draggable
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
script>
head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">div>
<br />
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。p>
body>可编辑：contenteditable
<p contenteditable="true">这是一个可编辑的段落.p>自定义数据：data-*,用于存储私有页面后应用的自定义数据，可以在所有的html元素中嵌入数据
<script>
function showDetails(animal)
{
var animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
script>
head>
<body>
<h1>物种h1>
<p>点击一个物种，看看它是什么类型：p>
<ul>
<li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owlli>
<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmonli>
<li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantulali>
ul>
body>新事件
拖放事件：ondrag、ondrop；
关闭页面：onunload；
窗口大小改变：onresize；
所有的多媒体事件；
2.前端做seo可以做到哪些？
1）.title标题：尽量把重要关键词放在前面，尽量做到每个页面的标题中不要设置相同的内容；
2）.meta keywords标签：列出几个关键词；
3）.meta description：高度概括网页内容，每个页面要有所不同，不要太长；
4）.body：尽量让标签语义化，用正确的标签做正确的事；
5）.a标签加上title和alt；
6）.h1用于正文标题，h2用户副标题；
7）.br只用于文本内容换行；
8）.表格中应该使用caption表格标题；
9）.文本缩进时不要使用 ，应当用css进行设置；
10）.重要的内容不用js输出，“蜘蛛不认识”；
11）.少用iframe框架，“蜘蛛”一般不会提取iframe中的内容；
12）.搜索引擎会过滤掉display:none中的内容，所以要谨慎使用；
13）.js如果是dom操作，应尽量放在body结束之前，html代码之后；
3.!DOCTYPE html标签
指示web浏览器关于页面使用哪个html版本进行编写的指令
4.HTML5离线储存怎么使用，工作原理？
localStorage长期存储数据，浏览器关闭后数据不丢失；
sessionStorage数据在浏览器关闭后自动删除；
5.常见兼容性问题？
1）png24位的图片在IE6浏览器上出现背景：
做成png8；
2）浏览器默认的margin和padding不同：
*{margin:0;padding:0};
3）IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大，浮动ie产生的双倍距离：
加上_display:inline，使浮动忽略；
4）IE下，可以使用获取常规属性方法和getAttribute()获取自定义属性。Firefox，只能使用getAttribute()获取自定义属性：
统一通过getAttribute()获取自定义属性；
5）Chrome中文界面下默认会将小于12px的文本强制按照12px显示：
可通过加入css属性-webkit-text-size-adjus:none解决；
6）超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不在具有hover和active：
改变css属性的排列顺序：L-V-H-A，a:link{},a:visited{},a:hover{},a:active{}