1.不管是招聘还是聊天经常能听到 h5开发,它指的是什么?和 HTML5有什么关系?
H5 !=HTML5,H5是一个产品名词,HTML5是一个技术名词。
HTML5是下一代HTML标准,相当于是HTML4的升级版。而H5则是指移动端上比较酷炫的的页面效果,当然这离不开HTML5的标签、API,以及css3等。
2.HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签?
HTML5是对HTML标准的第五次修订,是下一代HTML标准。增加了语义化的标签、新的属性、支持视频音频的嵌入、可以使用<canvas>绘图等。
新增了那些标签?
新增的结构标签:
<section>
,<article>
,<aside>
,<header>
,<footer>
,<nav>
,<hgroup>
等。
新增的媒体标签:
<video>
,<audio>
,<embed>
,<source>
等。
新增表单控件标签:
<email>
,<url>
,<number>
,<range>
,<DatePickers>
,<search>
,<color>
等
新增的其它标签:
<mark>
,<progress>
,<details>
,<time>
,<datalist>
,<keygen>
,<output>
,<wbr>
,<canvas>
,<menu>
等
如何让低版本的 IE 支持 HTML5新标签
在<header>
中引入html5shiv.js 文件
<head>
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
3.input 有哪些新增类型?
<input type="color" name="favcolor">
调出浏览器的调色板
<input type="date" name="bday">
出现一个日期选择器选择一个日期
<input type="datetime" name="bdaytime">
datetime 类型允许你选择一个日期(UTC 时间)
<input type="datetime-local" name="bdaytime">
datetime-local 类型允许你选择一个日期和时间 (无时区)
<input type="email" name="email">
提交的时候会自动验证email输入正不正确,相当于自动帮我们做了个正则
<input type="month" name="bdaymonth">
month 类型允许你选择一个月份
<input type="number" name="quantity" min="1" max="5">
提供一个列表选择数字,可以设定对所接受的数字的限定
<input type="range" name="points" min="1" max="10">
range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
<input type="search" name="googlesearch">
search 类型用于搜索域,比如站点搜索或 Google 搜索
<input type="tel" name="usrtel">
定义输入电话号码字段
<input type="time" name="usr_time">
定义可输入时间控制器(无时区)
<input type="url" name="homepage">
url 类型用于应该包含 URL 地址的输入域。在提交表单时,会自动验证 url 域的值。
<input type="week" name="week_year">
week 类型允许你选择周和年。
4.浏览器本地存储中 cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据
cookie
- 存储在用户本地终端上的数据,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站。
- 一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效
- 存放数据大小只有4KB左右
- 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题
localStorage - 除非自己手动清除,否则永久保存
- 存放数据大小5MB左右
- 数据仅在客户端(即浏览器)中保存,不参与和服务器的通信
下面的例子对用户访问页面的次数进行计数:
<script type="text/javascript">
if (localStorage.pagecount){
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
1. 写出如下 CSS3效果的简单事例
1. 圆角, 圆形
2. div 阴影
3. 2D 转换:放大、缩小、偏移、旋转
4. 3D 转换:移动、旋转
5. 背景色渐变
6. 过渡效果
7. 动画