html标记双边标记,前端知识点集锦-html5篇

一.HTML5篇

1.元素、属性、事件

新元素

画布canvas：HTML5元素用于图形绘制，配合JavaScript完成绘制图形；

你的浏览器不支持 HTML5 canvas 标签。canvas>

var c=document.getElementById('myCanvas');

var ctx=c.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,100,100);script>

音频audio；

您的浏览器不支持 audio 元素。

audio>

视频video；

"320" height="240" controls>

您的浏览器不支持 HTML5 video 标签。

语义性：artical,nav,footer,header,aside,hgroup等；

时间time；

我们在每天早上 9:00time> 开始营业。p>

我在 情人节time> 有个约会。p>

进度progress；

下载进度：

progress>

新属性

拖放：draggable

{

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>

div>

这是一段可移动的段落。请把该段落拖入上面的矩形。p>

body>

可编辑：contenteditable

这是一个可编辑的段落.p>

自定义数据：data-*,用于存储私有页面后应用的自定义数据，可以在所有的html元素中嵌入数据

function showDetails(animal)

{

var animalType = animal.getAttribute("data-animal-type");

alert("The " + animal.innerHTML + " is a " + animalType + ".");

}script>

head>

物种h1>

点击一个物种，看看它是什么类型：p>

Owlli>

Salmonli>

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).文本缩进时不要使用&nbsp，应当用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{}