html5.docx

XML可扩展标记语言宗旨是传输数据，而不是显示数据OSI：(open System interconnection )开放式系统互联。OSI模型把网络通讯的工作分为7层，物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。web socket编程Web API Web API是网络应用程序接口。什么是 Web Worker？当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。HTML5=html +css+js API(还包含3D,动画，存储，通讯，多线程)ajax=异步javascript和xml，是一种创建交互式网页应用的网页开发技术。是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。浏览器：chrome opera safraiSEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过对网站内部调整优化及站外优化，使网站满足搜索引擎收录排名需求，在搜索引擎中关键词排名提高，从而把精准用户带到网站，获得免费流量，产生直接销售或品牌推广。新增的结构元素(1)section元素定义文档或应用程序中的一个区段，比如章节、页眉、页脚、或文档中的其他部分。可以与h1、h2、h3、h4、h5、h6元素结合起来使用。(2)article元素表示文档中的一块独立的内容，例如博客中的一篇文章或报纸中的一篇文章。(3)header元素表示页面中一个内容区块或整个页面的标题。 页面表头 * padding:0; margin: 0; body font-family: 微软雅黑; text-align: center; a color:#f60; text-decoration: none; hgroup margin-bottom: 10px; nav background: #ff6600; height: 48px; nav li background: #000000; float: left; border-radius: 5px; padding:5px 10px; margin: 10px; list-style: none; HTML5视频教程 手机版 HTML5论坛 首页 手机版 论坛 (4)nav元素表示导航链接的部分 NAV test2 test3 (5)footer元素表示整个页面或页面中一个内容区块的脚注。新增的块级语义元素(1)aside表示article元素内容之外的与article元素内容相关的内容(2)figure元素表示一段独立的流内容，一般表示文档主题流内容的一个独立单元。使用元素为figure元素添加标题。(3)dialog元素定义对话 老师 2+2=? 学生 4 老师 答对了!新增的行内语义元素(1)mark元素在视觉上向用户呈现那些需要突出显示或高亮显示的文字。(2)time元素pubdate属性(3)meter元素表示度量衡，仅用于已知最大值和最小值的量度。必须定义度量的范围，既可以在元素文本中，也可以在min/max属性中定义。 硬盘硬盘使用情况35.4/100GB(4)progress元素表示运行中的进程 当前完成的进度新增的嵌入多媒体元素与交互性元素(1)details没有summary时你好！我被展开了有summary时 请展开你好！我被展开了(2)datagrid(3)menu(4)commandaddress元素全局属性：HTML5表单list属性该属性的值必须是某个datalist元素的id，钙元素类似于select，但是当用户想要设置的值不在选项列表中时，允许自行输入。该元素本身并不显示，而是当文本框获得焦点时，以提示输入的方式显示。 list属性text: 今天 你好 开心checkValidity显式验证法除了对input元素添加属性进行元素内容有效性的自动验证外，所有表单元素和输入元素在DOM节点上都有一个checkValidity方法，当想要覆盖浏览器默认的验证和反馈的过程时，可以使用这个方法。该方法根据的结果正确与否，返回true或者false。用法: Title Email function check() var email=document.getElementById(email); if(email.value=) alert(请输入邮件地址); return false; else if(!email.checkValidity() alert(请输入正确的email地址); return false; else alert(输入正确); 使用setCustomValidity方法自动以错误信息 Title 密码: 确认密码: Email: function check() var pass1=document.getElementById(pass1); var pass2=document.getElementById(pass2); if(pass1.value!=pass2.value) pass2.setCustomValidity(密码不一致。); else pass2.setCustomValidity(); var email=document.getElementById(email); if(!email.checkValidity() email.setCustomValidity(请输入正确的email地址!); cite元素表示作品(如一本书、一篇文章、一首歌曲等)的标题。small元素通常用来免责、警告、提出法律限制或版权。emaili的multiple属性multiple 属性用于设置或返回表单中的 email 字段是否可接收都个值(邮箱地址)。单设置为 true 时，表示允许用户在 email 字段中输入多个值。该属性反映了 HTML multiple 属性。提示：在表单提交时，使用逗号将多个邮箱分开，如： , , 。HTML中的文件HTML中与表单元素相关的两个API为文件API和拖放API。文件通过file对象选择文件在html4中,file控件只允许放置一个文件，在HTML5中允许放置多个文件。控件内的每一个用户选择的文件都是file对象，而FileList对象则为这些file对象的列表，包括用户选择的所有文件。案例;使用FileList对象和file对象的实例，在对话框中通过单机“浏览”按钮，选择要上传的文件，然后单击“上传文件”按钮，将会弹出一个对话框，这个对话框中显示上传文件的名称。 Title !- function ShowName() var file; for(var i=0;i选择文件:使用Blob接口获取文件的类型与大小Bolb表示二进制数据原型。它提供了一种slice方法，可以通过该方法访问到字节内部的原始数据块。Bolb有两个属性:size属性和type属性,size表示一个Bolb对象的字节长度，type表示Bolb的MIME类型，如果是未知类型，返回一个空字符串。通过类型过滤选择文件 Title选择文件: function FileUpload() var file; var myExp=/image/w+/; for(var i=0;idocument.getElementById(file).files.length;i+) file=document.getElementById(file).filesi; if(!myExp.test(file.type) alert(+不是图像文件); else alert(+文件可以上传); 在file控件中，可以通过accept属性，让fil控件只能接受某种类型的文件。使用FileReader接口读取文件这些方法无论读取成功还是失败，方法不会读取结果，这一结果存储在result属性中。FileReader的使用有四种方法abort:中断读取readAsBinaryString 参数:file 将文件读取为二进字符串。readAsDataURL: 参数file 将文件读取为DataURLreadAsText: 参数：file,encoding 将文件读取为文本使用readAsDataURL方法预览图片 读取图像请选择一个文件 function fileReader() if(typeof FileReader=undefined) alert(未实现接口); return false; var file=document.getElementById(file).files0;/检查是否为图像文件 var reader=new FileReader();/将文件以Data URl形式 reader.readAsDataURL(file); reader.onload=function(e) var result=document.getElementById(result); result.innerHTML= Canvas写文字 Title body padding:0; margin: 0; function draw(id) var canvas=document.getElementById(id); var context=canvas.getContext(2d); context.fillStyle=green; context.fillRect(0,0,800,400); context.fillStyle=#fff; context.strokeStyle=#fff; context.font=bold 40px 微软雅黑; context.fillText(HTML5,50,50); context.strokeText(HTML5,50,100);这个可以设置字体坐标为(0,0)的时候字体消失的问题。首字母不用大写canSave.html 文件保存 canSave.jsfunction draw(id) var canvas=document.getElementById(id); var context=canvas.getContext(2d); context.fillStyle=green; context.fillRect(0,0,400,300); window.location=canvas.toDataURL(image/jpeg);拖放API拖放步骤:1、将想要拖放的元素的draggable属性设为true(draggable=true)。这样才能将该元素进行拖放，另外，img与a元素必须指定(href)，默认允许拖放。2、编写与拖放有关的事件处理代码。事件产生事件的元素描述dragstart被拖放的元素开始拖放操作drag被拖放的元素拖放过程dragenter拖放过程中鼠标经过的元素被拖放的元素开始进入本元素的范围内dragover拖放过程中鼠标经过的元素被拖放的元素正在本元素的范围内移动dragleave拖放过程中鼠标经过的元素被拖放的元素离开本元素的范围drop拖放的目标元素有其他元素被拖放到本元素中dragend拖放的对象元素拖放操作结束drag.html: 拖放 .box width:400px; height:400px; #box1 background: #cccccc; app.js:var box1Div,msgDiv;window.onload=function() box1Div=document.getElementById(box1); msgDiv=document.getElementById(msg); / box1Div.ondragenter=function(e) / / show(e); / box1Div.ondragover=function(e) e.preventDefault(); img1.ondragstart=function(e) e.dataTransfer.setData(imgId,img1); box1Div.ondrop=function(e) show(e); e.preventDefault(); var img=document.getElementById(e.dataTransfer.getData(imgId,img1); box1Div.appendChild(img); function show(obj) var s=; for(var k in obj) s+=k+:+objk