HTML5_CSS3

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

HTML5是最新的HTML标准,2014年10月29日标准规范制定完成。
新特性:

  • 语义特性
    HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。

  • 本地存储特性
    基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一)和API说明文档。

  • 设备兼容特性
    从Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。

  • 连接特性
    更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

  • 网页多媒体特性
    支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。
    三维、图形及特效特性(Class: 3D, Graphics & Effects)
    基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。

  • 性能与集成特性
    没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术,解决以前的跨域等问题,帮助您的Web应用和网站在多样化的环境中更快速的工作。

  • CSS3特性
    在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。

新增的标签:

  • <article></article>
    标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。
  • <aside></aside>
    标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关
  • <audio></audio>
    标签定义声音,比如音乐或其他音频流
  • <canvas></canvas>
    标签定义图形,比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
  • <command>
    标签定义命令按钮,比如单选按钮、复选框或按钮。
  • <datalist> </datalist>
    标签定义可选数据的列表。与 input 元素配合使用,就可以制作出输入值的下拉列表。
  • <details></details>
    标签定义元素的细节,用户可进行查看,或通过点击进行隐藏。与 <legend> 一起使用,来制作 detail 的标题。该标题对用户是可见的,当在其上点击时可打开或关闭 detail。
若水GIF截图_2017年8月27日10点13分29秒.gif
  • <figcaption></figcaption>
    <figcaption> 是与其相关联的图片的说明/标题,用�于描述其父节点 元素里的其他数据, figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。。同时 figcaption 元素是可选的;如果没有该元素,这个父节点的图片只是会没有说明/标题。
  • <figure></figure>
    标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。
  • <footer></footer>
    标签定义 section 或 document 的页脚。典型地,它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
  • <header></header>
    标签定义 section 或 document 的页眉。
  • <nav></nav>
    标签定义导航链接的部分。
  • <progress></progress>
    标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。

让低版本的 IE 支持 HTML5新标签:
HTML5 Shiv是JavaScript的一种备选方案,该方案在IE9版本中优先启用HTML5元素样式,但不允许使用没有由JavaScript定义过的元素样式。html5shiv.js用于在IE9以下的浏览器模拟html5的标签。
当使用IE9以下版本的浏览器时,加载html5shiv.js文件,其它的不加载。

<!--[if lt IE 9 ]><script src="js/html5shiv.js"></script><![endif]-->

input 有哪些新增类型?

  • email
    类型用于验证email的格式,当提交表单时会自动验证email域的值
  • url
    类型用于验证 URL 地址的格式,当提交表单时会自动验证url域的值
  • number
    类型会根据你的设置提供选择数字的功能,min属性设置最小值、max属性设置最大值,value属性设置当前值,step属性设定每次增长的值,某些浏览器还不支持
  • range
    类型用于应该包含一定范围内数字值的输入域,其会以一个滑块的形式展现,min属性设置最小值、max属性设置最大值,value属性设置当前值,如果没有设置,则其默认值的范围是1-100
    日期和时间类型:HTML5 拥有多个可供选取日期和时间的新输入类型:
  • date
    选取日、月、年
  • month
    选取月、年
  • week
    选取周和年
  • time
    选取时间(小时和分钟)
  • datetime
    选取时间、日、月、年(UTC 时间)
  • datetime-local
    选取时间、日、月、年(本地时间)
  • search
    类型用于搜索域,比如站点搜索或 Google 搜索,为其加上results="s"属性,则会在搜索框前面加上一个搜索图标
  • tel
    类型用于验证输入的是否是电话格式的内容,此元素现在还没有浏览器支持
  • color
    类型会提供一个颜色拾取器,供用户选择颜色,并将用户选择的颜色填充到此元素中

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

cookie
cookie是指浏览器存储的少量数据,同时它是与具体的web页面或者站点相关的。cookie的数据会自动在web浏览器和web服务器之间传输的,因此服务端的脚本就可以读、写存储在客户端的cookie的值。在javascript中,cookie用于保存状态以及能够为web浏览器提供一种身份识别机制,因此它们是不安全的。

localStorage
实现了web存储草案标准的浏览器在window对象上定义了两个属性:localStorage 和sectionStorage,这两个属性都代表同一个对象Storage,
都是一个持久化关联的数组,数组使用字符串来索引,存储的值也都是字符串形式的。Storage对象设置它的属性为字符串值,浏览器会将该值存储起来。localStorage保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据。除了保存期限的长短不同,这两个对象的属性和方法完全一样。

cookie 和 localStorage 的区别:
localStorage拥有setItem getItem RemoveItem clear等方法,其容量有10M,用于持久化的存储。cookie一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效,每个 Cookie 的大小一般不能超过4KB。

localStorage 存储删除数据
localStorage保存的数据,以“键值对”的形式存在,每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。存入数据使用setItem方法。它接受两个参数,第一个是键名,第二个是保存的数据。
存储数据:

localStorage.setItem("x",1);//以x的名字存储一个变量1
或者
localStorage.x= 1;//设置x为"1"

删除数据:

localStorage.removeItem("x");//删除x项
localStorage.clear();//全部删除

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

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

demo
代码

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

demo
代码

写出如下 loading 动画效果

demo1
代码
demo2
代码

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

推荐阅读更多精彩内容

  • 1. 不管是招聘还是聊天经常能听到 h5开发,它指的是什么?和 HTML5有什么关系? h5指的是一系列技术做的移...
    进击的前端_风笑影阅读 305评论 0 0
  • 题目1: HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签 HTML5...
    饥人谷_Leon阅读 282评论 0 0
  • 1. HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签 HTML5是超...
    _李祺阅读 424评论 0 0
  • 题目1: HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签 HTML5...
    GaoYangTongXue丶阅读 688评论 0 0
  • 【一级雕塑师】申屠国洪特选清水泥,铁质丰富,将雕塑与壶完美结合。龙鳞清晰可见,方正之壶呈龙腾之势,威震四方! 【品...
    爱上紫砂阅读 491评论 0 0