美文网首页
Web41.HTML5 CSS3

Web41.HTML5 CSS3

作者: FiredEarthMusic | 来源:发表于2017-12-20 17:13 被阅读21次

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

demo2: http://js.jirengu.com/zowinuyuqa/1/edit

相关文章

  • Web41.HTML5 CSS3

    HTML5是超文本标记语言的第五次重大修改,2014年10月29日标准规范制定完成 HTML5的设计目的是为了在移...

  • 网页高级知识点(三)

    CSS3 transition动画 CSS3 transform变换 CSS3 animation动画

  • CSS3-目录

    1 CSS3 兼容性 2 CSS3 选择器 3 CSS3 新加属性 4 CSS3 过渡动画 5 CSS3 变型 6...

  • CSS3 背景

    知识点: CSS3 背景图像区域CSS3 背景图像定位CSS3 背景图像大小CSS3 多重背景图像CSS3 背景属...

  • css3渐变:线性和径向

    知识点: CSS3 渐变CSS3 线性渐变CSS3 径向渐变 CSS3 渐变 渐变(gradients)可以在两个...

  • CSS3设置圆角边框 圆角特效代码 CSS3的圆角border-

    CSS3设置圆角边框 css3圆角特效代码 CSS3 border-radius 属性 使用 CSS3 borde...

  • 07day

    CSS3动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes ...

  • css3 基础

    1. css3 起步 (图形2D旋转) 2. CSS3 模块 CSS3 被划分为模块。其中最重要的 CSS3 ...

  • CSS3:边框与圆角

    知识点: CSS3圆角CSS3盒阴影CSS3边界图片 一、CSS3圆角 border-radius属性 一个最多可...

  • css3圆角

    css3 圆角使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。CSS3 bord...

网友评论

      本文标题:Web41.HTML5 CSS3

      本文链接:https://www.haomeiwen.com/subject/hbagwxtx.html