HTML5是超文本标记语言的第五次重大修改,2014年10月29日标准规范制定完成
HTML5的设计目的是为了在移动设备上支持多媒体,引进了新的语法特征,如video audio canvas标记,还引进了新的功能,可以真正改变用户与文档的交互方式。
包括:
新的解析规则增强了灵活性
新属性
淘汰过时的或冗余的属性
一个HTML5文档到另一个文档间的拖放功能
离线编辑
信息传递的增强
详细的解析规则
多用途互联网邮件扩展(MIME)和协议处理程序注册
在SQL数据库中存储数据的通用标准(Web SQL)
特性:
语义特性
本地存储特性
设备兼容特性
连接特性
网页多媒体特性
性能与集成特性
常见的input
<input type="text" name="">
<input type="password" name="">
<input type="submit" name="">
<input type="checkbox" name="">
<input type="radio" name="">
<input type="hidden" name="">
CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的,以前的规范作为一个模块过于庞大和复杂,所以把它分解为一些小的模块,更多新的模块也被加入进来.这些模块包括: 盒子模块 列表模块 超链接方式 语言模块 背景和边框 文字特效 多栏布局等
CSS3是在CSS的基础上增加了很多新特性,与低版本的CSS并不冲突.
题目1: HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签
HTML5是HTML语言经过第五次修改后的规范标准
新特性: 语义特性
本地存储特性
设备兼容特性
连接特性
网页多媒体特性
性能与集成特性
CSS特性
新增元素: canvas audio video source embed track
datalist keygen output article aside bdi
command details dialog summary figure
figcaption footer header mark meter
nav progress ruby rt rp section time
wbr
低版本IE支持HTML5新标签的方法:
使用html5shiv 库
<!--[if lt IE 9]>
<script type="text/javascript" src="scripts/html5shiv.js"></script>
<![endif]-->
题目2: input 有哪些新增类型?
email
url
number
range
Date Picker
Date
month
week
time
datatime
题目3: 浏览器本地存储中 cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据。
cookie:
1.cookie是存储在浏览器上的一小段数据,用来记录某些当页面关闭或者刷新后仍然需要记录的信息。在控制台用 「document.cookie」查看你当前正在浏览的网站的cookie。
2.cookie可以使用 js 在浏览器直接设置(用于记录不敏感信息,如用户名), 也可以在服务端通使用 HTTP 协议规定的 set-cookie 来让浏览器种下cookie,这是最常见的做法。
3.每次网络请求 Request headers 中都会带上cookie。所以如果 cookie 太多太大对传输效率会有影响。
4.一般浏览器存储cookie 最大容量为4k,所以大量数据不要存到cookie。
5.设置cookie时的参数:path:表示 cookie 影响到的路径,匹配该路径才发送这个 cookie。expires 和 maxAge:告诉浏览器 cookie 时候过期,maxAge 是 cookie 多久后过期的相对时间。不设置这两个选项时会产生 session cookie,session cookie 是 transient 的,当用户关闭浏览器时,就被清除。一般用来保存 session 的 session_id。 secure:当 secure 值为 true 时,cookie 在 HTTP 中是无效,在 HTTPS 中才有效
httpOnly:浏览器不允许脚本操作 document.cookie 去更改 cookie。一般情况下都应该设置这个为 true,这样可以避免被 xss 攻击拿到 cookie。
localStorage:
1.localStorage HTML5本地存储web storage特性的API之一,用于将大量数据(最大5M)保存在浏览器中,保存后数据永远存在不会失效过期,除非用 js手动清除。
2.不参与网络传输
3.一般用于性能优化,可以保存图片 js css html模版 大量数据
localStorage.removeItem(key):清除键值为key的数据 localStorage.clear():清除所有数据
题目4: 写出如下 CSS3效果的简单事例
F48D3255-C80C-42E6-9ED0-8880A95A6096.png
http://js.jirengu.com/worigikodo/1/edit?html,css
题目5: 实现如下全屏图加过渡色的效果(具体效果随意)
demo: http://js.jirengu.com/jajofaqaki/1/edit?html,css
题目6: 写出如下 loading 动画效果
demo1: http://js.jirengu.com/vogalikini/1/edit?html,css,output
网友评论