HTML5_CSS3

1. HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签

  • HTML5是超⽂本标记语⾔的第五次重⼤修改,2014年10⽉29⽇标准规范制定完成。HTML5的设计目的是为了在移动设备上支持多媒体。
  • 新特征
    ① 语义特性
    HTML5赋予网页更好的意义和结构。比如HTML5增加了新的内容标签,这些标签带有一定的语义,使搜索引擎爬取你的网站信息更高效。比如:article、footer、header、nav、section。
    ②网页多媒体特性
    支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。
    三维、图形及特效特性。
    比如:新增 video、audio、Canvas 、SVG。
    ③离线 & 存储特性
    能够让网页在客户端本地存储数据以及更高效地离线运行(localStorage Indexed DB)
    ④连接特性
    更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。
    比如:HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
    ⑤设备兼容特性
    HTML5提供了更多的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。
    ⑥性能与集成特性
    HTML5会通过XMLHttpRequest2等技术,解决以前的跨域等问题,帮助Web应用和网站在多样化的环境中更快速的工作。
    ⑦CSS3特性
    在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。
  • 新增标签
    页面结构标签
    <article>定义页面正文内容
    <header>定义了文档的头部区域
    <footer>定义一个文档底部
    <section>定义了文档的某个区域
    <aside>定义页面内容之外的内容,比如:侧边栏
    <nav>导航
    <details>用于描述文档或文档某个部分的细节
    <dialog>定义对话框,比如提示框
    <summary>定义一个可见的标题。 当用户点击标题时会显示出详细信息,包含 details 元素的标题
    多媒体
    <canvas>定义图形标签,比如图表和其他图像。该标签基于JavaScript的绘图API
    <audio>定义音频
    <video>定义视频
    <source>定义多媒体资源<video> 和 <audio>
    <embed>定义嵌入的内容,比如插件
    <track>为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
    表单控件标签
    <calendar>、<date>、<time>、<email>、<url>、<search>,<range>,<DatePickers>
    新增的其它标签
    <mark>,<progress>,<datalist>,<keygen>,<output>,<wbr>,<menu>等
Paste_Image.png
  • 如何让低版本的 IE 支持 HTML5新标签
<head>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
</head>

这样就可以支持HTML5的新标签

2.input 有哪些新增类型?

input 新增type主要有:
email 类型用于应该包含 e-mail 地址的输入域。
url 类型用于应该包含 URL 地址的输入域。
number 类型用于应该包含数值的输入域。
range 类型显示为滑动条。
Date Pickers日期选择器

Paste_Image.png

3.浏览器本地存储中 cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据。

①储存方式不同:loaclStorage不会自动把数据发送给服务器,数据仅在客户端(即浏览器)中保存;cookie数据始终在同源的http请求中携带,即cookie在浏览器和服务器间来回传递,但如果使用cookie保存过多数据会带来性能问题。
②数据大小限制不同:存储大小限制也不同,cookie数据不能超过4k,localStorage 虽然也有存储大小的限制;但比cookie大得多,可以达到5M或更大
③数据有效期不同:一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效。cookie只在设置的cookie过期时间之前一直有效;而loaclStorage则是始终生效,除非清除缓存。

Localstorage如何操作数据:

  • 设置值:
localStorage.a=123;
localStorage["a"]=123;
localStorage.setItem("a",123)
  • 获取值
localStorage.a;
localStorage["a"];
localStorage.getItem("a")
  • 删除值
清空全部数据:localStorage.clear()
删除数据:localStorage.removeItem('a')

4.写出如下 CSS3效果的简单事例

1. 圆角, 圆形
2. div 阴影
3. 2D 转换:放大、缩小、偏移、旋转
4. 3D 转换:移动、旋转
5. 背景色渐变
6. 过渡效果
7. 动画

预览

5.实现如下全屏图加过渡色的效果(具体效果随意)

预览

6.写出如下 loading 动画效果

预览

github代码

Paste_Image.png

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,347评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,435评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,509评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,611评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,837评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,987评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,730评论 0 267
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,194评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,334评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,944评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2 349

推荐阅读更多精彩内容

  • HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签 HTML5是最新的H...
    小囧兔阅读 285评论 0 0
  • 1. 不管是招聘还是聊天经常能听到 h5开发,它指的是什么?和 HTML5有什么关系? h5指的是一系列技术做的移...
    进击的前端_风笑影阅读 309评论 0 0
  • 题目1: HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签 HTML5...
    饥人谷_Leon阅读 285评论 0 0
  • 1. HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签 HTML5是超...
    _李祺阅读 425评论 0 0
  • 周末去餐厅吃饭,因为时间尚早,餐厅里还有很多空位置,我找了一个临窗的位置坐下,在等餐的时候顺手从隐藏在墙壁的书橱里...
    铿锵小妖阅读 647评论 0 0