h5考前复习
来源:互联网 发布:nba2kol数据更新吧 编辑:程序博客网 时间:2024/04/27 16:52
HTML 5 ≈ HTML+CSS 3+Javascript+API
h5和h4的区别
1、DOCTYPE声明 HTML4的声明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5的声明:<!DOCTYPE html>
2、指定字符编码HTML4: <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> HTML5: <meta charset="UTF-8">,
两种方法都有效多媒体API h5支持的文件类型
<video>
标记定义一个视频<audio>
标记定义音频内容<source>
标记定义媒体资源
< video controls="controls" width="300"><source src="move.ogg" type="video/ogg" ><source src="move.mp4" type="video/mp4" >您的浏览器暂不支持video标签。播放视频</ video >
HTML5支持的视频格式:
Ogg =带有Theora视频编码+Vorbis音频编码的Ogg文件
支持的浏览器:F、C、O
MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件
支持的浏览器: S、C
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式 支持的浏览器: I、F、C、O
HTML5支持的音频格式:
Ogg 免费 支持的浏览器:C、F、O
MP3 收费 支持的浏览器: I、C、S
Wav 收费 支持的浏览器: F、O、S
- 可编辑文本框
<input> <textarea>
form表单内的所有属性
我整理的form表单的内容Datalist标签配合option标签实现的自动填充表单功能
<input type="search" name="move" list="search" ><datalist id="search" > <option>黑老师的由来</option> <option>男人缘何肾虚</option> <option>佳佳婕婕不得不说的故事</option></datalist>
output(form中指定输出值)
<form oninput="res.value=no1.value*no2.value“ >
<input type="text" name="no1">
<input type="text" name="no2">
<output name="res"></output>
</form>
history API
window.history.back() window.history.forward() window.history.go()
HTML 5提供了两个新方法:1、history.pushState(); 2、history.replaceState();
pushState()是在history栈中添加一个新的条目,replaceState()是替换当前的记录值。
pushState()和replaceState()参数一样,参数说明如下:
1、state:存储JSON字符串,可以用在popstate事件中。
2、title:现在大多数浏览器不支持或者忽略这个参数,最好用null代替
3、url:任意有效的URL,用于更新浏览器的地址栏,并不在乎URL是否已经存在地址列表中。更重要的是,它不会重新加载页面。浏览器上存储数据 localstorage sessionstorage
留言板基于localstorage
sessionStorage 和 localStorage 就一个不同的地方, sessionStorage数据的存储仅特定于某个会话中,也就是说数据只保持到浏览器关闭,当浏览器关闭后重新打开这个页面时, 之前的存储已经被清除。而 localStorage 是一个持久化的存储,它并不局限于会话。
getItem()和setItem(),清除键值对使用removeItem()。如果希望一次性清除所有的键值对,可以使用clear()。另外,HTML5还提供了一个key()方法,可以在不知道有哪些键值的时候使用,h5中的布局
- 多栏布局 可以解决用position和float布局时高度不一致的问题
多栏布局中每栏的宽度都一样- column-count div内的栏目数
- column-width 设置每个栏目的宽度 或者直接设置div的宽度(多个栏目的总宽度)
- column-cap 设置多栏之间的间隔距离
- column-rule 在栏与栏之间添加间隔线
- 盒布局 通过box属性来实现
盒布局需要加前缀 在Firefox中是 -moz-box 在Safari Chrome Opera中是 -webkit-box 在外层的父元素中使用display: -moz-box; - 弹性盒布局(flex布局)http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
- order 改变元素的显示顺序
- flex-directon: row row-reverse column column-severse改变排列方向,用flex布局时,高度宽度不指定的话可以自适应父元素
- 元素中的flex属性值,决定元素的大小,但是不是倍数关系
- flex-wrap 默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。flex-wrap: nowrap | wrap | wrap-reverse;
- flex-grow 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
- flex-shrink 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
- 多栏布局 可以解决用position和float布局时高度不一致的问题
哪些浏览器支持HTML5
IE8及以下浏览器不支持
Opera Chrome Safari Firefox都支持HTML5支持哪些动画效果
- canvas
- css3中的animations
@keyframes 关键帧集合名 {创建关键帧的代码}
animation: animation-name(keyframe的名称) animation-duration(动画的执行时长) animation-timing-function(动画的执行方式) animation-delay(延迟多少秒后开始执行) animation-iteration(动画执行的次数 infinite(无限次))
animation-direction(动画的执行方向) - css3中的transitions
transition: property(目标属性) duration(执行时长) timing-function(动画的执行方式)
transition-delay 多久后执行
可以同时执行多个动画
canvas画长方形正方形和圆
https://wine1.github.io/2017/11/15/html5-canvas/
http://www.runoob.com/html/html5-canvas.html密码设置为不可见
<input type="password" value="123456">
这样会显示6个小圆点关于button的设置
HTML 5 中的新属性:autofocus, form, formaction, formenctype, formmethod, formnovalidate 以及 formtarget。
http://www.w3school.com.cn/html5/html5_button.asp样式表的用法
(1).将样式表加入到HTML文件行中 <标签名称 style=”样式属性:属性值;样式属性:属性值…”>
(2).将样式表嵌入到HTML文件的文档头中
(3).将一个外部样式表链接到HTML文件上h5中类似canvas的东西SVG
http://blog.csdn.net/dylanqrr/article/details/77530457border-image
border-image: url() 上边距 右边距 下边距 左边距/边框宽度 显示方法
显示方法:repeat stretch
四条边都可以单独设定图片宽度之类的border-radius
椭圆/圆 border-radius:50%;
子弹头 border-radius: 0 50% 50% 0;
半圆图
width: 48px;
height: 96px;
border: 2px solid #000;
border-width: 2px 50px 2px 2px;
border-radius: 50%;给图片加倒影 -webkit-box-reflect: below(above left right) 10px;
canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>画时钟</title> </head> <body onload="draw('canvas')"> <canvas id="canvas" width="400px" height="400px" border:></canvas> </body> <script> var dom=document.getElementById('canvas'); var cxt=dom.getContext("2d"); var width=cxt.canvas.width; var height=cxt.canvas.height; var r=width/2; function drawBackground(){ cxt.save(); cxt.translate(r,r); cxt.beginPath(); cxt.lineWidth=10; cxt.arc(0,0,r-5,0,2*Math.PI,false); cxt.stroke(); cxt.font="18px Arial"; cxt.textAlign='center' cxt.textBaseline='middle' var hourNums=[3,4,5,6,7,8,9,10,11,12,1,2]; hourNums.forEach(function(number,i){ var rad=2*Math.PI/12*i; var x=Math.cos(rad)*(r-30); var y=Math.sin(rad)*(r-30); cxt.fillText(number,x,y); }); for(var i=0;i<60;i++){ var rad=2*Math.PI/60*i; var x=Math.cos(rad)*(r-18); var y=Math.sin(rad)*(r-18); cxt.beginPath(); if(i % 5===0){ cxt.fillStyle="#000" cxt.arc(x,y,2,0,2*Math.PI,false); } else{ cxt.fillStyle="#ccc" cxt.arc(x,y,2,0,2*Math.PI,false); } cxt.fill(); } } function drawHour(hour,minute){ cxt.save(); cxt.beginPath(); var rad=2*Math.PI/12*hour; var mrad=2*Math.PI/12/60*minute cxt.rotate(rad+mrad); cxt.lineWidth=6; cxt.lineCap='round' cxt.moveTo(0,10); cxt.lineTo(0,-r/2); cxt.stroke(); cxt.restore(); } function drawMinute(minute){ cxt.save(); cxt.beginPath(); var rad=2*Math.PI/60*minute; cxt.rotate(rad); cxt.lineWidth=3; cxt.lineCap='round' cxt.moveTo(0,10); cxt.lineTo(0,-r+30); cxt.stroke(); cxt.restore(); } function drawSecond(second){ cxt.save(); cxt.beginPath(); cxt.fillStyle='#c14543' var rad=2*Math.PI/60*second; cxt.rotate(rad); cxt.moveTo(-2,20); cxt.lineTo(2,20); cxt.lineTo(1,-r+18); cxt.lineTo(-1,-r+18); cxt.fill(); cxt.restore(); } function drawDot(){ cxt.beginPath(); cxt.fillStyle='#fff' cxt.arc(0,0,3,0,2*Math.PI,false); cxt.fill(); } function draw(){ cxt.clearRect(0,0,width,height); var now=new Date(); var hour=now.getHours(); var minute=now.getMinutes(); var second=now.getSeconds(); drawBackground(); drawHour(hour,minute); drawMinute(minute); drawSecond(second); drawDot(); cxt.restore(); } draw(); setInterval(draw,1000); </script> </html>
- h5做简易留言板
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>留言本</title> <link rel="stylesheet" type="text/css" href=""> <script type="text/javascript"></script></head><body> <div id="box"> <h1>web留言板</h1> <textarea id="memo" cols="80" rows="10"></textarea><br> <input type="button" name="button" value="增加" onclick="saveStorage('memo');"> <input type="button" name="button" value="初始化" onclick="clearStorage('msg');"><hr> <p id="msg"></p> </div><!-- <style type="text/css"> #box { background-image: url('img/8922136.jpg') ; width: 800px; min-height: 500px; } textarea { border-radius: 10px; position: relative; left: 100px; } span{ float: right; } li{ list-style: none; font-size: 16px; margin-right: 50px; line-height: 20px; } input{ background-color: grey; border: 1px solid grey; border-radius: 3px; height: 30px; width: 80px; margin-left: 200px; } </style> --> <script type="text/javascript"> function saveStorage(id) { var data = document.getElementById(id).value; var time = new Date().getTime();//用时间做键值,就可以解决键值不能重复的问题 window.localStorage.setItem(time, data); loadStorage('msg'); } function loadStorage(id) { var result = '<ul>'; for(var i = 0; i < window.localStorage.length; i++) { var key = window.localStorage.key(i); var value = window.localStorage.getItem(key); var date = new Date(); date.setTime(key); var dateStr = date.toGMTString(); result += '<li>' + value + '<span>' + dateStr + '</span></li>'; } result += '</ul>'; var target = document.getElementById(id); target.innerHTML = result; } function clearStorage() { window.localStorage.clear(); loadStorage('msg'); } </script></body></html>
- h5考前复习
- ado.net考前复习
- 考前复习+小吃
- Codevs 2837 考前复习
- NOIP2017考前复习
- 板子QWQ(考前复习)
- 医师资格考试考前快速复习指导
- 医师资格考试考前快速复习指导
- 医师资格考试考前快速复习指导
- 如何做好一建考前复习
- 复习:H5新标签
- 2013年软件设计师之考前复习笔记:IP地址
- C++考前复习——继承构造的顺序
- sth. about tarjan 第二弹~~考前复习版
- [NOIP2017考前复习] Euler函数与Mobius函数
- 52数学能力测评二阶一模考前复习直播课
- 2016.11.6 复习HTML5 (H5标签)
- H5知识点复习(面试必备)
- 第十四周训练总结(一)
- 状态模式
- 软件测试的艺术————学习笔记2
- Matrices and Vectors
- c++ 如何输出8进制和十六进制和二进制
- h5考前复习
- MySQL 启动服务错误:“本地计算机 上的 MySQL 服务启动后停止。某些服务在未由其他服务或程序使用时将自动停止。”
- 【Scikit-Learn 中文文档】模型评估: 量化预测的质量
- 文章标题c语言快排;
- HTML标签总结
- servlet跳到jsp并弹出提示框
- SPI接口
- 从基础架构层面保障应用场景落地——11.11基础架构峰会在京举行
- 如何在Sublime Text3中安装Emmet(前端神器)插件