HTML5_CSS3

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

HTML5是超文本标记语言的第五次重大修改, 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)也提供了更高的灵活性和控制性。

元素 描述
canvas 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API
audio 定义音频内容
video 定义视频(video 或者 movie)
source 定义多媒体资源 <video> 和<audio>
embed 定义嵌入的内容,比如插件
track 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道
datalist 定义选项列表。与 input 元素配合使用该元素,来定义 input 可能的值
keygen 规定用于表单的密钥对生成器字段
output 定义不同类型的输出,比如脚本的输出
article 定义页面正文内容
aside 定义页面内容之外的内容
bdi 设置一段文本,使其脱离其父元素的文本方向设置
command 定义命令按钮,比如单选按钮、复选框或按钮
details 用于描述文档或文档某个部分的细节
dialog 定义对话框,比如提示框
summary 标签包含 details 元素的标题
figure 规定独立的流内容(图像、图表、照片、代码等等)
figcaption 定义 <figure> 元素的标题
footer 定义 section 或 document 的页脚
header 定义了文档的头部区域
mark 定义带有记号的文本
meter 定义度量衡。仅用于已知最大和最小值的度量
nav 导航
progress 定义任何类型的任务的进度
ruby 定义 ruby 注释(中文注音或字符)
rt 定义字符(中文注音或字符)的解释或发音
rp 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容
section 定义文档中的节(section、区段)
time 定义日期或时间
wbr 规定在文本中的何处适合添加换行符

兼容

<!--[if lt IE 9]>
<script type="text/javascript" src="scripts/html5shiv.js"></script>
<![endif]-->
//如果版本小于IE9就引入html5shiv.js, IE9以前的浏览器就能使用h5标签, 并使用定义好的样式了; 这个标签必须放在head标签内, 因为浏览器要在解析之前知道这个元素

题目2: input 有哪些新增类型?

  • color 用于指定颜色
  • email 用于编辑email的字段
  • url 用于编辑URL的字段
  • number 用于输入浮点数
  • range 用于输入不精确值,如果未指定相应的属性,控件使用如下缺省值:
    • min:0
    • max:100
    • value:min + (max-min)/2,或者当max小于min时使用min
    • step:1
  • search 用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
  • tel 用于输入电话号码
  • Date Picker
    • date 用于输入日期(年、月、日,不包括时间)
    • month 用于输入年月,不带时区
    • week 用于输入由星期-年组成的日期,不带时区
    • time 用于输入不含时区的时间控件
    • datetime 基于 UTC 时区的日期时间输入控件(时,分,秒及几分之一秒)
    • datetime-local 用于输入日期时间控件,不包含时区。

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

cookie
cookie的内容主要包括:名字,值,过期时间,路径和域。路径与域一起构成cookie的作用范围。若不设置过期时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就消失。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不存储在硬盘上而是保存在内存里,当然这种行为并不是规范规定的。若设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭后再次打开浏览器,这些cookie仍然有效直到超过设定的过期时间。存储在硬盘上的cookie可以在不同的浏览器进程间共享,比如两个IE窗口。而对于保存在内存里的cookie,不同的浏览器有不同的处理方式。
cookie的特点:

  • cookie的大小受限制,cookie大小被限制在4KB,不能接受像大文件或邮件那样的大数据。
  • 只要有请求涉及cookie,cookie就要在服务器和浏览器之间来回传送(这解释为什么本地文件不能测试cookie)。而且cookie数据始终在同源的http请求中携带(即使不需要),这也是Cookie不能太大的重要原因。正统的cookie分发是通过扩展HTTP协议来实现的,服务器通过在HTTP的响应头中加上一行特殊的指示以提示浏览器按照指示生成相应的cookie。
  • 用户每请求一次服务器数据,cookie则会随着这些请求发送到服务器,服务器脚本语言如PHP等能够处理cookie发送的数据,可以说是非常方便的。当然前端也是可以生成Cookie的,用js对cookie的操作相当的繁琐,浏览器只提供document.cookie这样一个对象,对cookie的赋值,获取都比较麻烦。而在PHP中,我们可以通过setcookie()来设置cookie,通过$_COOKIE这个超全局数组来获取cookie。
    localStorage
    这是一种持久化的存储方式,也就是说如果不手动清除,数据就永远不会过期。
    它也是采用Key - Value的方式存储数据,底层数据接口是sqlite,按域名将数据分别保存到对应数据库文件里。它能保存更大的数据(IE8上是10MB,Chrome是5MB),同时保存的数据不会再发送给服务器,避免带宽浪费。

localStorage的缺点

  • localStorage大小限制在500万字符左右,各个浏览器不一致
  • localStorage在隐私模式下不可读取
  • localStorage本质是在读写文件,数据多的话会比较卡(firefox会一次性将数据导入内存,想想就觉得吓人啊)
  • localStorage不能被爬虫爬取,不要用它完全取代URL传参
localStorage.removeItem(key):清除键值为key的数据 localStorage.clear():清除所有数据

题目4: 写出如下 CSS3效果的简单事例

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

地址
题目5: 实现如下全屏图加过渡色的效果(具体效果随意)DEMO260
地址
题目6: 写出如下 loading 动画效果 DEMO1268 DEMO2249

地址

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

推荐阅读更多精彩内容

  • 题目1: HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签 HTML5...
    饥人谷_Leon阅读 284评论 0 0
  • 1. 不管是招聘还是聊天经常能听到 h5开发,它指的是什么?和 HTML5有什么关系? h5指的是一系列技术做的移...
    进击的前端_风笑影阅读 306评论 0 0
  • HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签 HTML5是最新的H...
    小囧兔阅读 282评论 0 0
  • HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签 HTML5是超文本标...
    RookieD阅读 187评论 0 0
  • 题目1: HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签 HTML5...
    QQQQQCY阅读 238评论 0 0