HTML5基础篇总结

我不是女神ヾ 2022-05-21 11:52 214阅读 0赞

### HTML5基础篇总结 ###

HTML5 的改进  
          新元素、新属性、完全支持 CSS3 、Video 和 Audio、2D/3D 制图、本地存储、本地 SQL 数据、Web 应用

现代的浏览器都支持 HTML5

HTML5定义了8个新的语义元素，块元素  
  header 、 section 、 footer 、 aside 、 nav 、 main 、article 、 figure

为了正确的显示这些新元素通过设置CSS样式 display： block;

<myHero>: IE浏览器添加的新元素

当IE浏览器为8以及更早的版本时 为了HTML5等一些新元素被识别，解决方案添加注释

#### H5新元素： ####

<canvas>： 定义图形；该标签基于JavaScript的绘图API

多媒体元素：

<audio>：定义音频内容  
 <video>：定义视屏内容  
 <source>：定义多媒体资源<audio>和<video>  
 <embed>: 定义嵌入的内容，比如插件  
 <track>: 为诸如<audio>、<video>之类的媒介外部文本轨道

#### 表单新元素： ####

datalist：定义选项列表  
 keygen ：规定用于表单的密匙对生成器  
 output : 定义不同类型的输出

新的语义跟结构元素  
 article :  定义页面独立的内容区域  
 aside ： 定义页面的侧边栏内容  
 bdi ： 允许设置一i段文本，使其脱离其父元素的文本方向  
 command ： 定义命令按钮，比如单选按钮、复选框等  
 details ： 定义描述文档或某个内容细节  
 dialog ： 定义对话框  
 summary ：标签包含detalis元素的标题  
 figure ： 规定独立的流内容  
 figcaption： 定义<figuere>的标题

footer ： 定义section 或 document 的页脚  
 header ： 定义了文档的头部的区域  
 mark ： 带有记号的文本  
 wbr ： 规定在文本中的何处适合添加换行符  
 time ： 定义日期或时间

meter ：定义度量衡，仅用于已知最大和最小值  
 nav ： 定义导航链接的部分  
 progress : 定义任何类型的任务进度  
 ruby ： 定义ruby注释（中文注音）  
 rt ： 定义字符  
 rp ： 在ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容  
 section ： 定义文档中的节

canvas画布：

在网页中是一个矩形框，二维网格；默认情况下没有边框和内容；其本身没有绘制能力通过JS绘制，写在body内；  
 JS绘制步骤：  
  一、通过id获取canvas画布，document.getElementById("id");  
  二、创建context对象 getContext("2d");3d  
  三、设置fillStyle属性，fillRect(x,y,width,height)定义矩形当前的填充方式,调用stroke();

Canvas画线的两种方式

moveTo(x,y):定义线条开始的坐标
    lineTo(x,y):定义线条结束的坐标

#####   绘制圆：          使用context对象调用arc(x1,y2,x2,y2,r)方法      例：  #####

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();

####    文本： ####

font-定义字体

fillTexe(text,x,y)-在canvas绘制实心的文本内容及坐标点

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px Arial";
    ctx.fillText("Hello World",10,50

strokeText(text,x,y)-在canvas绘制空心的文本内容及坐标点

渐变：  
          createLinearGradient(x,y,x1,y1) : 线性渐变

createRadial(x,y,r,x1,y1,r1) : 径向渐变  
     
   addColorStop ： 指定颜色停止   开始：addColorStop(0,"color"); 结束：addColorStop(1,"color")  
   
         径向渐变例：

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
     
    // 创建渐变
     var grd=ctx.createRadialGradient(75,50,5,90,60,100);
     grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
     // 填充渐变
                           ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);

#####           图片： #####

drawImage(img，x,y);

例：

var   myCanvas = document.getElementById("canvas的id值");
    var   context = myCanvas.getContext("2d");
    var img = document.getElementById("img的id值");
    context.drawImage(img,x,y);

##### H5内联SVG： #####

SVG可伸缩矢量图形：优势可通话文本编辑器创建和修改，在图片质量不下降的情况下被放大

#####    SVG 与 Canvas两者间的区别 #####

SVG 是一种使用 XML 描述 2D 图形的语言。  
  Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。  
 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位  
 置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

QUnit——对JavaScript 进行单元测试的利器

response.js解决IE6-8对CSS3 Media Query的支持

html5shiv.js解决IE9以下对HTML5新元素的不识别问题

animate.css： CSS3的动画库

H5中的MathML对应的标签<math xmlns="http://ww.w3.org/1998/Math/MathML"></math>

<mrow></mrow>===包裹着算数元素    <msup><mi>x</mi><mn></mn>2<msup>==x的2次方  
          <mo>+</mo> ==  +  
          <mrow><mn>2</mn><mo></mo><mi>x</mi></mrow> = 4x

##### H5拖放（Drag和Drop） #####

设置元素属性 draggable 值 为 true； 可拖拽

ondragstart： 拖动  setData()方法   拖动的数据  
        ondropover：  放在哪  调用ondropover需要调用preventDefault()方法来避免浏览器对数据的默认处理  
        ondrop： 进行放置

datatransfer.getData()方法获取被拖的数据  
        dataTransfer.setData()设置被拖的数据的数据类型和值

<head>
    <style type="text/css">
    #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script>
    function allowDrop(ev)
    {
        ev.preventDefault();
    }
     
    function drag(ev)
    {
        ev.dataTransfer.setData("Text",ev.target.id);
    }
     
    function drop(ev)
    {
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
    </script>
    </head>
    <body>
     
    <p>拖动 RUNOOB.COM 图片到矩形框中:</p>
     
    <div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
    <br>
    <img id="drag1" src="/images/logo.png" draggable="true" οndragstart="drag(event)" width="336" height="69">
     
    </body>

##### H5获取当前的地理位置 #####

维度： position.coords.latitude     经度： position.coords.longitude

navigator.geolocation  检测是否支持地理定位  
      通过调用其  getCurrentPosition() 方法 第一个参数获取用户的经纬度位置

获取位置错误与拒绝：getCurrentPosition()的第二个参数  
       error.PERMISSION\_DENIED:用户拒绝地理位置请求

error.POSITION\_UNAVAILABLE:位置信息不可用

error.TIMEOUT： 请求位置信息超时

error.UNKONWN\_ERROR：未知错误

例：

##### getCurrentPosition()的返回数据 #####

coords.latitude : 维度；  
  coords.loangitude : 经度；  
  coords.accuracy : 位置精度;  
  coords.altitude : 海拔  
  coords.altitudeAccuracyc: 海拔精度;  
  coords.heading : 方向;  
  coords.speed : 速度;  
  coords.timestamp ： 响应的日期/时间

geolocation对象的watchPosition()效果一样

##### H5视屏： #####

视屏<video>支持三种格式 ： MP4 、 WebM ， Ogg  
 strack : 播放器文本的轨迹，规定外部文本的轨道，  
  其属性  kind： 规定文本轨道的文本类型  
   label： 文本轨道的标签和标题 值 text  
   srclang： 轨道文本数据的语言  
   src： 轨道文件的地址

通过JS控制视屏暂停播放

var vedio = document.getElementById("vedio的di值");
      function play(){
         if(vedio.paused){
       vedio.play();
         }else{
              vedio.pause();
       }
      }

##### H5音频 ： #####

音频的三种格式： MP3、Wav 、 Ogg，大多数浏览器的音频都是通过flash播放的

##### H5的新表单输入类型input：（并不是所有主流浏览器支持） #####

color ： 定义拾色器  
 date ： 定义一个时间选择器（年/月/日）  
 datetime ： 定义一个日期和时间控制器  
 datetime-local ： 定义一个选择日期和时间（无时区）  
 email ： 定义一个电子邮件域；自动判断是否符合电子邮件格式  
 month ： 定义一个（年/月）选择器  
 number： 定义一个数字域可限制范围最大长度等  
 range： 定义一个精度滑动条，设置范围及默认值  
 search： 定义一个搜索域  
 tel ： 定义一个电话号码域  
 time ： 定义一个（小时/分）选择器 （无时区）  
 url ： 定义一个地址域  
 week：定义一个（周/年）选择器  （无时区）

#####  input新属性： #####

autofocus： 页面在加载时域自动获取焦点  
    form： 规定输入域属于哪个表单，form="表单的id值"  
    formaction ： 描述表单提交的URL地址，会覆盖所属表单的action  
    formenctype: 描述表单提交到服务器的数据编码，yusubmit、image配合使用  
    formmethod: 表单的提交方式，覆盖所属表单的method  
    list: 规定预输入域 datalist 的选项列表  
    multiple： 规定input可选中多个值

pattern： 描述一个正则表达式用于验证 input的值，不符合时 设置 title ：提示信息

placehoder : 输入域的提示信息(与hint)  
    required ： 规定必须在提交前填写内荣，不能为空  
    step ： 输入域的数据值间隔，如step="2" 则 0 2 4 6等

新元素在不同的浏览器中可能会造成样式不同甚至不支持

例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<form>
    			颜色选择器：<input type="color" /><br/>
    			时间日期：<input type="date" /><br/>
    			时间域：<input type="datetime" /><br/>
    			时间时分：<input type="datetime-local" /><br/>
    			电子邮件：<input type="email" /><br/>
    			数字: <input type="number" min="0" max="25" maxlength="15" step="2"/><br />
    			电话： <input type="tel"/><br />
    			年月: <input type="month" /><br />
    			时分周： <input type="week" /><br />
    			地址： <input type="url" /><br />
    			时间: <input type="time" /><br />
    			搜索域：<input type="search"/><br />
    			滑动条： <input type="range" min="0" max="10" value="5"/><br />
    			文件: <input type="file" multiple/><br />
    			文本： <input type="text" pattern="[0-9A-Za-z]{6}" title="6个数字或字母及组合" placeholder="输入你的文本信息" required /><br />
    			<input type="submit" value="submit" />
    		</form>
    	</body>
    </html>

#####    表单新属性： #####

autocomplete : 填写表单后自动填充内容  
 novalidate : 规定表单早提交时是否验证

##### H5语义元素 #####

header ：头部  
 nav ：导航  
 section ： 文档节  
 asider ： 左边的侧栏  
 figcaption  
 figuer  
 footer

![70][]

##### H5 Web存储：本地储存用户浏览数据，更安全快速，IE7及更早的不支持 #####

客户端存储数据的两个对象：  
   localSorage ： 用于长久保存整个网站的数据，没有过期时间，直到手动去除  
   sessionStorage : 用于临时保存同一窗口的数据；关闭窗口就会除去数据

在使用Web存储前检测浏览器是否支持 ：  
    if(typeof(Stroage)!== undefined)\{//支持\}else\{//不支持\}

localStorage对象键值对  localStorage.sitename="..."  
  保存数据： localStorage.setItem(key,value);  
  读取数据: localStorage.getItem(key);  
  删除单个数据：localStorage.removeItem(key);  
  删除所有数据：localStorage.clear();  
  得到某个索引的key ：localStorage.key(indedx);

键值对通常以字符串形式存储，需转换格式  
  JSON.stringify();//将对象转换成字符串  
  JSON.parse(); //将字符串转换成对象  
  loadAll(); //载入所有存储在local Storage的数据

H5 Web SQL数据库  
 数据库是按照数据结构组织、存储和管理数据的仓库  
   
 openDatabase ： 打开数据库，当该数据库不存在时会创建新的一个数据库对象  
         它有五个参数：数据库名称、版本号、描述文、数据库大小、创建回调  
   创建回调会在建立数据库后调用  
 transaction： 能够让我们控制一个事务，以及基于这种情况执行提交或回滚  
 executeSql ： 执行SQL语句

##### H5 应用程序缓存 #####

三个优势：离线缓存、速度、减少服务器负载  
 <html manifest="demo.appcache">  
 在html 里加manifest属性

Manifest文件分三部分（告知浏览器缓存内容）：  
    CACHE MANIFEST -在此标题下列出的文件将在首次下载后进行缓存  
    NETWORK-该下面文件需要于服务器链接，且不会被缓存  
    FALLBACK- 该下的文件规定当前页面无法访问是的回退页面（比如404页面）

一个完整的Manifest文件 例：

CACHE MANIFEST
     # 2012-02-21 v1.0.0   （注释）
     /theme.css
     /logo.gif
     /main.js
     NETWORK:
     login.php
     FALLBACK:
     /html/ /offline.html

##### H5 Web Workers #####

Web Workers是运行在后台的JavaScript,独立于其他的脚本，不会影响页面性能

在创建web worker前检测浏览器是否支持  
     if(typeof(Worker)!==undefined)\{\}else\{\}

在外部JavaScript中创建web worker；该为worker.js一个简单的计数器

var i=0;
     function timedCount()
     {
          i=i+1;
         postMessage(i);
         setTimeout("timedCount()",500);
     }
     timedCount();

通过new Worker()创建一个web worker对象，在通过该对象创建时间监听onmessage

终止web worker 通过对象调用 terminate()方法

由于web Worker位于外部文件，不能访问JavaScript的window对象、document对象、parent对象

##### H5 WebSocket: #####

提供一种在单个TCP连接上进行全双工通讯协议，连接浏览器与服务器，  
      浏览器通过Js向服务器发出建立Socket连接的请求，建立连后浏览器可  
      以与服务器交互数据，通过send()方法想服务器发送数据，通过onmessage事件接受服务器返回的数据

var Scoket = new WebSocket(url,\[protocol\]);

#####  webSocket属性： #####

Socket.readyState : 连接状态，0表示未连接，  
        1表示已连接，  
        2表示连接正在进行关闭，  
        3表示已经关闭或连接不能打开

Socket.buffereAmount: 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，  
      但是还没有发出的 UTF-8 文本字节数。

webSocket事件：

open： Socket.onopen  连接时触发  
      message ： Socket.onmessage 浏览器接受服务器数据时触发  
      error ： Socket.onerror 通讯发生错误时触发  
      close ： Socket.onclose 连接关闭时触发

webSocket方法：  
      Socket.send();     // 使用连接发送数据  
      Socket.close();   // 关闭连接

#####          H5插件元素： #####

H5音频以确保在所有浏览器中都能够正常的播放可以通过embed插件，它时定义外部的内容所有浏览器都有效

雅虎播放器时免费的，在HTML底部插入 :<script src="http://mediaplayer.yahoo.com/latest"></script>  
 使用超链接。 内联声音

#####    总结H5中的新元素： #####

article（文章域）、aside（页面侧栏）、audio（音频）、bdi（一段脱离父元素的文本方向）  
 command(命令按钮)、datalist（预选项列表）、derails（描述文档某个细节）  
 dialog（对话框）、figuer（独立的流内容）、figcaption（figure的标题）  
 embed、（插入的内容）、footer（页脚）、header（文档头部）、keygen（表单密匙生成）  
 mark（带有记号的文本）、  
   
废除、不支持的元素：  
 acronym(首字母缩写)：被abbr代替，通常你使用abbr进行缩进  
 basefont（文本默认的字体、样式）、font（字体样式）  
 center （居中文本） 、dir （目录列表）

##### px、em、rem特点及区别： #####

px：像素相对于显示器的分辨率，相对长度  
     特点： Ie无法调整那些使用px作为单位的字体大小，  
            国外大部分网站能够调整的原因在于其使用了er、em，Firefox能够调整px、em、rem，但国内大部分使用IE浏览器或内核

em：相对长度单位，相对于当前对象内文本的字体尺寸。如果当前对行内文本的的自传体尺寸未被人设置则相当于浏览器的默认字体尺寸  
     特点： em的值不是固定的  
     em会继承父级元素的字体大小

rem：相对大小单位，相对的是HTML的根元素，集相对大小和绝对大小于一身的优点  
      对于不支持它的浏览器。声明一个绝对单位

##### （移动）meta篇： #####

视图宽：

自动识别格式：

定义浏览器点击行为：

上传文件类型跟格式

accpet可以限制上传文件的类型

[70]: /images/20220521/4b6e917c13014d0ab794e1c6ad2e4c92.png