前端知识体系(5)-html篇1. html5新增特性？拖拽释放(Drag and drop) API；语义化更好的

1. html5新增特性？

拖拽释放(Drag and drop) API；
语义化更好的内容标签（header, nav, footer, aside, article, section）;
音频、视频API(audio, video);
画布(Canvas) API;
地理(Geolocation) API;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除;
表单控件:calendar、date、time、email、url、search ;
新的技术webworker, websocket, Geolocation等；

奇淫技巧：画布存储音频，拖拽表单语义

2. input type 都有哪些类型

有哪些属性 attrs ： maxlength, disabled, readonly

<input type="text" readonly="readonly">    //只读
<input type="text" disabled="disabled" />   //禁用
<input type="file" accept="video/*" capture="camcorder">   //支持视频

2.行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素： a, b, span, img, input, select, strong;
块级元素： div, ul, li, dl, dt, dd, h1-5, p等；
空元素： <br>, <hr>, <img>, <link>, <meta>;

什么是空元素呢？

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

它是 HTML 里的一个不可能存在子节点（例如内嵌的元素或者元素内的文本）的element。

<br> 就是没有关闭标签的空元素（
标签定义换行）。
<hr>
<img>
<input>

3.标签上title属性与alt属性的区别是什么

alt是为了在图片未能正常显示时（屏幕阅读器）给予文字说明，且长度必须少于100个英文字符。
title属性为设置该属性的元素提供建议性的信息，鼠标悬浮时会显示标题

4. 语义化标签

概念:语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。

语义化的好处:

用正确的标签做正确的事情；
去掉或者丢失样式的时候能够让页面呈现出清晰的结构；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

5. iframe有哪些优缺点

优点：

还原性iframe 能够原封不动的把嵌入的网页展现出来。
模块化如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
可复用网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌套，可以增加代码的可重用。
iframe可以跨域通信；
解决了加载缓慢的第三方内容如图标和广告等的加载问题。

缺点：

iframe和主页面共享链接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载;
会产生很多页面，不容易管理。
框架结构中出现各种滚动条
iframe 会阻塞主页面的 Onload 事件
搜索引擎的检索程序无法解读这种页面，不利于 SEO

6. src与href有什么区别

src用于替换当前元素；href用于在当前文档和引用资源之间确立联系；
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；而href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。

7. property和attribute的区别是什么

attribute是HTML标签上的特性，它的值只能够是字符串;
property是DOM中的属性，是JavaScript里的对象;

简单的理解就是：

Attribute就是DOM节点自带的属性，例如html中常用的id、class、title、align等；
而Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等。

奇淫技巧： Property可以联想一下原型，原型本质上就是对象

8. HTML5的Web storage的存储方式有两种：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话中的数据，当会话结束后就会销毁；
和sessionStorage不同，localStorage用于持久化的本地存储，除非用户主动删除数据，否则数据永远不会过期；
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。

区别：

从浏览器和服务器间的传递看： cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
从大小看：存储大小限制不同，cookie数据不能超过4k，只适合保存很小的数据；而sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
从数据有效期看： sessionStorage在会话关闭会立刻关闭，因此持续性不久；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。而localStorage始终有效。
从作用域看： sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；而localStorage和cookie都是可以在所有的同源窗口中共享的。

9. 常见的浏览器内核有哪些

Trident内核：IE最先开发或使用的， 360浏览器；
Gecko内核： Mozilla FireFox (火狐浏览器) ，K-Meleon浏览器；
Presto内核：Opera浏览器；
Webkit内核：Google Chrome，Safari，搜狗浏览器，360极速浏览器，阿里云浏览器等；

奇淫技巧--记住内核和浏览器的对应：ti,gm,po,wg(踢积木，破挖机) (Trident-IE,Gecko-Mozilla,Presto-Opera,Webkit-Google Chrome)

10. Canvas

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成；标签只是图形容器，您必须使用脚本来绘制图形。

案例1-画矩形

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas">your browser does not support the canvas tag </canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

</script>

</body>
</html>

解析：

首先，找到 <canvas> 元素:
var c=document.getElementById("myCanvas");

然后，创建 context 对象：
var ctx=c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。

fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

效果：

案例2-画线

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

</script>

</body>
</html>

解析：

移动位置，开始的坐标点
ctx.moveTo(0,0);

开始画线，结束的做标点
ctx.lineTo(200,100);

触发画线
ctx.stroke();

案例3-画圆

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

</script>

案例4-画文字

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

</script>

11. 页面导入样式时，使用link和@import有什么区别

link属于HTML标签，而@import是css提供的；
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；
link是XHTML标签，无兼容问题,而@import只在IE5以上才能识别，；
link方式的样式的权重高于@import的权重。

前端知识体系(5)-html篇