这些在显示上都会先换行
内联元素 , ,
| | | 外联样式表的方法 |
|
| | noscript的使用 |
不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。 |
| | 如何应付老式的浏览器 | 如何应付老式的浏览器 如果浏览器压根没法识别 |
| | video
最好的html解决方案
HTML 5 + | |
| | 优酷解决方案 | width="480" height="400"
type="application/x-shockwave-flash">
|
| | 使用超链接 “辅助应用程序 | Play a video file |
| | XHTML | 是以xml格式编写的html |
| | xhtml检查器 | https://validator.w3.org/nu/ |
| | xhtml文件的文档声明 | |
| | 文本区标签 | |
| | HTML5是什么的新标准 | html xhtml dom |
| | html5的video支持三种视频文件 | ogg mpeg4 webM |
| | video | |
| | video的属性 | controls 显示播放控制
autoplay="autoplay"自动播放
loop="loop"循环播放
preload="preload"预备加载 |
| | video的方法 属性 事件 请见： | http://www.w3school.com.cn/html5/html_5_video_dom.asp | 方法 | 属性 | 事件 |
|---|
| play() | currentSrc | play | | pause() | currentTime | pause | | load() | videoWidth | progress | | canPlayType | videoHeight | error | | | duration | timeupdate | | | ended | ended | | | error | abort | | | paused | empty | | | muted | emptied | | | seeking | waiting | | | volume | loadedmetadata | | | height | | | | width | |
在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。 |
| | audio可以播放的音频格式有哪些 | mp3 ogg wav |
| | ogg文件适用的浏览器 | 使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器 |
| | MPEG4文件适用的浏览器 | Safari |
| | 我发现Ogg 文件 | 在chrome里好像播放不了 |
| | 设置元素为可拖放 | ![]() |
| | HTML5 定了 8 个新的 HTML 语义（semantic） 元素 | header, section, footer, aside, nav, main, article, figure |
| | 为 HTML 添加新的元素 | document.createElement("myHero") |
| | 样式里的 display:block; | 表示是块级元素，即会占领一整行到边缘 |
| | 如果ie6到ie8并不支持html5 | 可以在里加上
|
| | html5包括的新多媒体元素 | audio video source embed track |
| | 新表单元素 | datalist keyken 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注释 |
| | section | 定义文档中的节 |
| | time | 定义日期或时间 |
| | wbr | 规定在文本中的何处适合添加换行符 |
| | canvas | 绘图
以下代码得放到 |
| | canvas画直线 | var canvas =document.getElementById("myCanvas");
var context = canvas.getContext("2d") ;
context.moveTo( 0, 10 ) ;
context.lineTo( 50, 50 ) ;
context.stroke() ; |
| | canvas画圆圈 | |
| | canvas画实心文本 | context.font = "50px Arial" ;
context.fillText( "我是测试员", 10,50 ) ; |
| | canvas画空心文本 | context.font = "50px Arial" ;
context.strokeText( "我是测试员", 10,50 ) ; |
| | canvas画渐变色 | var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d") ;
var gradient = context.createLinearGradient(0,0,200,100) ;
gradient.addColorStop( 0, "red" );
gradient.addColorStop( 1, "white" ) ;
context.fillStyle = gradient ;
context.fillRect( 10,10,200,90 ) ; |
| | canvas 径向圆渐变 | var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d") ;
var gradient = context.createRadialGradient(100,50,50,100,50,100);
gradient.addColorStop( 0, "#ff0000" ) ;
gradient.addColorStop( 1, "#ffffff" ) ;
context.fillStyle = gradient ;
context.fillRect( 0, 0, 200, 100 ) ; |
| | 把一幅图放置在画布上 | var canvas0 = document.getElementById("myCanvas") ;
var context0 = canvas0.getContext("2d") ;
var imgGirl = document.getElementById("img_girl") ;
context0.drawImage( imgGirl, -100, 0 ) ; 为毛刷新一下页面，才能看到效果!! |
| | 什么是svg | 是 scalable vector graphics
定义网络的基于矢量的图形
使用xml来定义图形
在放在或缩小情形小图片质量不会发生变化
它是W3C标准 |
| | canvas和svg | | Canvas | SVG |
|---|
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
| - 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
|
|
| | 拖拽功能 | http://www.runoob.com/try/try.php?filename=tryhtml5_draganddrop |
| | 显示用户经纬度 | http://www.runoob.com/html/html5-geolocation.html |
| | html5视频 | http://www.runoob.com/html/html5-video.html |
| | html5音频 | http://www.runoob.com/html/html5-audio.html |
| | html5 input类型 | color time 等等 |
| | html5 表单元素 | http://www.runoob.com/html/html5-form-elements.html 其中包括 output这一表单元素 |
| | html5表单新属性 | http://www.runoob.com/html/html5-form-attributes.html |
| | html5语义元素 | http://www.runoob.com/html/html5-semantic-elements.html header nav section article aside figcaption figure footer |
| | html5 web存储 | localStorage sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。 |
| | html5 应用程序缓存 | http://www.runoob.com/html/html5-app-cache.html |
| | 应用程序缓存为应用带来三个优势 | - 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
|
| | web worker | web worker 是运行在后台的 JavaScript，不会影响页面的性能。 web worker 无法访问到 windows document parent http://www.runoob.com/html/html5-webworkers.html |
| | HTML5 服务器发送事件（server-sent event） | EventSource 对象用于接收服务器发送事件通知 |
| | | |
bottom是默认的，还有top middle
