1.什么是HTML5
HTML5是HTML的最新标准,他的主要没目标是提供全部内容而不需要想flash,silverlight等额外的插件,这些内容来自于视频,动画,富GUI等。
2.HTML5 为什么只需要写 ?
因为HTML5不基于SGML,所以一不需要多DTD(文档类型定义Document Type Definition)进行引用,但是需要DOCTYPE来规范浏览器的行为,而HTML4.01是基于SGML的所以需要对DTD进行引用才能告知浏览器文档所使用的文档类型。
3.HTML5的页面结构同HTML4或者更前的HTML有什么区别?
一个典型的WEB包含头部,脚步,导航,中心区域,侧边栏。如果想要在HTML4中实现用到的基本是div标签,在H5中则不是。
HTML5中用到的标签:
<header>
:代表头部区域<footer>
:代表脚部区域<nav>
:页面导航内容<article>
:自包含的内容<section>
:使用内部article去定义区域或者把分组内容放到区域里<aside>
:代表页面的侧边栏内容
4.HTML5中的datalist是什么?
HTML5中的Datalist元素有助于提供文本框自动完成特性。如下图:
Datalist代码的使用(切记要和input元素配合使用)
<input list="cars" />
<datalist id="cars">
<option value="宝马">
<option value="奔驰">
<option value="玛莎拉蒂">
</datalist>
5.HTML5中有哪些新的表单元素类型?
这里有几个重要的新的表单元素在HTML5中被介绍
显示颜色对话框
- Color 如:
<input type="color" name="newel">
其作用是显示颜色对话框并选择颜色。 - Date 如:
<input type="date" name="newel">
其作用是显示日历对话框并选择时间。 - Datetime-local 如:
<input type="datetime-local" name="newel">
其作用是显示含有本地时间的日历对话框并选择选择时间。 - Email 如:
<input type="email" name="newel">
其作用是创建一个含有email校验的HTML文本框。 - Url 如:
<input type="url" name="newel">
其作用是创建一个含有url校验的HTML文本框。 - Number 如:
<input type="number" name="newel" min="1" max="100">
其作用是展示一个数字范围以供选择。 - Range 如:
<input type="range" name="newel" min="1" max="100">
其作用也是展示一个数字范围以供选择,不过显示的是滑条。.
6.什么是SVG(可缩放矢量图形Scalable Vector Graphics)?
SVG(可缩放矢量图形 Scalable Vector Graphics)表示的是可以缩放的矢量图形。它是基于文本的图形语言,使用文本,线条,点等进行图像绘制,这使得它更轻便,显示更加迅速。
例如想使用SVG去展示一段线条,我们可以这么写:
<svg width="100%" height="100%">
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg">
其中:
x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束
7.HTML5中canvas是什么?
canvas是HTML中可以绘制图形的区域。
例如想使用canvas去展示一段线条,我们可以这么写:
- 定义Canvas区域
<canvas id="myCanvas" width="200" height="100"></canvas>
- 获取访问canvas上下文区域
var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d");
- 绘制图形
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.stroke();
全部代码:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
对不起,您的浏览器不支持canvas元素!
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.stroke();
</script>
8.Canvas和SVG图形的区别是什么?
SVG | Canvas |
---|---|
不依赖分辨率 | 依赖分辨率 |
支持事件处理器 | s不支持时间处理器 |
最适合带有大型渲染区域的应用程序(如百度地图) | 较弱的文本渲染能力 |
复杂度高会减慢渲染速度 | 能够以.png或.jpg格式保存结果对象 |
最适合图像密集型的游戏,其中许多对象会被频繁重绘 | 不适合游戏应用 |
9.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?他们有哪些特点?
行内元素:span,input,img,a,b,select,strong,lable,select,textarea
块级元素:p,div,h1~h6,form,ul,li,ol,table
空元素:br,img,input,hr,link,meta
特点:
-
块元素
①、总是在新行上开始;
②、高度,行高以及外边距和内边距都可控制;
③、宽度缺省是它的容器的100%,除非设定一个宽度。
④、它可以容纳内联元素和其他块元素
⑤、display属性为block
*块级元素的垂直相连外边距margin会合并 -
行内元素
①、和其他元素在一行上
②、高,行高及内边距外边距不可改变
③、宽度就是它文字或图片的宽度,不可改变
④、内联元素只能容纳文本或者其他内联元素
⑤、display属性为inline
水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果,,宽度却不行,行内元素设置的外边界只对上下起作用,不对左右起作用。 -
空元素
-
没有内容的HTML元素被称为空元素。空元素实在开始标签中关闭的,如
<br/>
10.浏览器的内核分别是什么?
IE:trident内核
Firefox:gecko内核
Safari:webkit内核
Opera:以前是presto内核,现已改用chrome的Blink内核
Chrome:Blink内核(基于webkit,Google与Opera Software共同开发)