Apakah ciri-ciri html5-Soal Jawab bahagian hadapan-php.cn

Ciri-ciri HTML5 termasuk: 1. Teg semantik; 2. Jenis input borang yang dipertingkatkan; 8. Pekerja Web; 9. Storan Web;

Apakah ciri-ciri html5

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.

Sepuluh ciri baharu teratas HTML5

Untuk mengendalikan aplikasi Internet hari ini dengan lebih baik, HTML5 telah menambah banyak elemen dan fungsi baharu, seperti: lukisan grafik, multimedia Kandungan, struktur halaman yang lebih baik, pengendalian bentuk yang lebih baik dan beberapa API untuk menyeret dan menjatuhkan elemen, kedudukan, termasuk caching aplikasi web, storan, pekerja web, dll.

(1) Teg Semantik

Teg semantik menjadikan kandungan halaman berstruktur dan terkenal

标签	描述
	定义了文档的头部区域
	定义了文档的尾部区域
	定义文档的导航
	定义文档中的节（section、区段）
	定义页面独立的内容区域
	定义页面的侧边栏内容
	用于描述文档或文档某个部分的细节
	标签包含 details 元素的标题
	定义对话框，比如提示框

(2) Jenis input borang yang dipertingkatkan

HTML5 mempunyai beberapa jenis input input borang baharu. Ciri baharu ini menyediakan kawalan dan pengesahan input yang lebih baik.

td>

输入类型	描述
color	主要用于选取颜色
date	从一个日期选择器选择一个日期
datetime	选择一个日期（UTC 时间）
datetime-local	选择一个日期和时间 (无时区)
email	包含 e-mail 地址的输入域
month	选择一个月份
number	数值的输入域
range	一定范围内数字值的输入域
search	用于搜索域
tel	定义输入电话号码字段
time	选择一个时间
url	URL 地址的输入域
week	选择周和年

Jenis input

Penerangan

warna

表单元素	描述
	元素规定输入域的选项列表使用元素的 list 属性与元素的 id 绑定
	提供一种验证用户的可靠方法标签规定用于表单的密钥对生成器字段。
	用于不同类型的输出比如计算或脚本输出

Terutama digunakan Pilih warna

tarikh

Pilih tarikh daripada pemilih tarikh

datetime

Pilih tarikh (waktu UTC)

datetime-local

Pilih tarikh dan masa (tiada zon waktu)

e-mel

Medan input yang mengandungi alamat e-mel

bulan

Pilih bulan

nombor

Medan input untuk nilai berangka

julat

Medan input untuk nilai angka dalam julat tertentu

carian

Digunakan untuk medan Carian

tel

Tentukan medan nombor telefon input tr>

masa

Pilih masa

url

Medan input alamat URL

minggu

Pilih minggu dan tahun

HTML5 juga menambah elemen bentuk berikut

Elemen bentuk	Penerangan
	Elemen menentukan pilihan senarai medan inputGunakan atribut senarai elemen	Menyediakan cara yang boleh dipercayai untuk mengesahkan pengguna Teg menentukan medan penjana pasangan kunci untuk digunakan dalam borang.
	Untuk jenis output yang berbeza cth atau output skrip

Atribut borang baharu HTML5

- atribut tempat letak, gesaan ringkas akan dipaparkan pada medan input sebelum pengguna memasukkan nilai. Iaitu, gesaan lalai kotak input biasa kami hilang selepas pengguna memasukkan.
- atribut yang diperlukan ialah atribut boolean. Medan input yang perlu diisi tidak boleh kosong
- Atribut corak menerangkan ungkapan biasa yang digunakan untuk mengesahkan nilai elemen
- atribut min dan maks, tetapkan nilai minimum dan maksimum elemen.
- atribut langkah menentukan selang nombor undang-undang untuk medan input.
- atribut ketinggian dan lebar, digunakan untuk ketinggian imej dan lebar teg
- Atribut autofokus ialah atribut boolean. Menentukan bahawa medan secara automatik mendapat fokus apabila halaman dimuatkan.
- atribut berbilang ialah atribut boolean. Menentukan bahawa berbilang nilai boleh dipilih dalam elemen

(3) Video dan audio

HTML5 menyediakan standard untuk memainkan fail audio, iaitu , menggunakan elemen

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

Salin selepas log masuk

　atribut kawalan digunakan untuk menambah kawalan main, jeda dan kelantangan.

Antara anda perlu memasukkan teks gesaan bagi elemen

kawalan menyediakan kawalan main, jeda dan kelantangan untuk mengawal video. Anda juga boleh menggunakan operasi DOM untuk mengawal main balik dan jeda video, seperti kaedah main() dan jeda().

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

Salin selepas log masuk

Pada masa yang sama, elemen video juga menyediakan atribut lebar dan ketinggian untuk mengawal saiz video Jika ketinggian dan lebar ditetapkan, ruang video yang diperlukan akan ditempah apabila halaman dimuatkan. Jika sifat ini tidak ditetapkan dan penyemak imbas tidak mengetahui saiz video, penyemak imbas tidak akan dapat menempah ruang tertentu semasa memuatkan dan halaman akan berubah berdasarkan saiz video asal. Kandungan yang dimasukkan antara

dan teg disediakan untuk paparan oleh penyemak imbas yang tidak menyokong elemen video.

Elemen video menyokong berbilang elemen sumber. Elemen boleh memautkan fail video yang berbeza. Penyemak imbas akan menggunakan format pertama yang diiktiraf (MP4, WebM dan Ogg)

(4) Lukisan kanvas

Teg hanyalah bekas grafik dan mesti digunakan dengan skrip untuk melukis grafik.

Kanvas - Grafik

1. Buat kanvas ialah kotak segi empat tepat dalam halaman web, dilukis melalui elemen Secara lalai, elemen tidak mempunyai sempadan dan tiada kandungan.

Teg biasanya perlu menentukan atribut id (sering dirujuk dalam skrip), atribut lebar dan tinggi mentakrifkan saiz kanvas dan menggunakan atribut gaya untuk menambah jidar. Anda boleh menggunakan berbilang elemen dalam halaman HTML

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Salin selepas log masuk

2. Gunakan Javascript untuk melukis imej Elemen kanvas itu sendiri tidak mempunyai keupayaan melukis. Semua kerja lukisan mesti dilakukan dalam JavaScript

Objek getContext("2d") ialah objek HTML5 terbina dalam dengan berbilang kaedah untuk melukis laluan, segi empat tepat, bulatan, aksara dan menambah imej.

<script>
　　var c=document.getElementById("myCanvas");
　　var ctx=c.getContext("2d");
　　ctx.fillStyle="#FF0000";
　　ctx.fillRect(0,0,150,75);
</script>

Salin selepas log masuk

Menetapkan sifat fillStyle boleh menjadi warna, kecerunan atau corak CSS. Tetapan fillStyle lalai ialah #000000 (hitam). Kaedah fillRect(x,y,width,height) mentakrifkan kaedah pengisian semasa bagi segi empat tepat. Maksud: Lukis segi empat tepat 150x75 pada kanvas, bermula dari sudut kiri atas (0,0).

Kanvas - Laluan

Untuk melukis garisan pada Kanvas, kami akan menggunakan dua kaedah berikut:

Tentukan koordinat mula (0,0), dan koordinat akhir (200,100 Kemudian gunakan kaedah lejang() untuk melukis garisan

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
</script>

Salin selepas log masuk

Kanvas - Teks).

Gunakan kanvas untuk melukis teks Atribut dan kaedah penting adalah seperti berikut:

Gunakan fon "Arial" untuk melukis teks tinggi 30px (pepejal) pada kanvas

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

Salin selepas log masuk

Kanvas - Kecerunan

Kecerunan boleh diisi dalam segi empat tepat, bulatan, garisan, teks, dll. Pelbagai bentuk boleh disesuaikan dengan warna yang berbeza.

Terdapat dua cara berbeza untuk menetapkan kecerunan Kanvas:

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Salin selepas log masuk

　　创建了一个线性渐变，使用渐变填充矩形

Canvas - 图像

　　把一幅图像放置到画布上, 使用 drawImage(image,x,y) 方法

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

Salin selepas log masuk

　　把一幅图像放置到了画布上

(5)SVG绘图

　　SVG是指可伸缩的矢量图形

SVG 与 Canvas两者间的区别

　　SVG 是一种使用 XML 描述 2D 图形的语言。

　　Canvas 通过 JavaScript 来绘制 2D 图形。

　　SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

　　在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

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

(6)地理定位

　　HTML5 Geolocation（地理定位）用于定位用户的位置。

window.navigator.geolocation {
    getCurrentPosition:  fn  用于获取当前的位置数据
    watchPosition: fn  监视用户位置的改变
    clearWatch: fn  清除定位监视
}

Salin selepas log masuk

　　获取用户定位信息：

navigator.geolocation.getCurrentPosition(
    function(pos){
　　　　console.log(&#39;用户定位数据获取成功&#39;)
　　　　//console.log(arguments);
　　　　console.log(&#39;定位时间：&#39;,pos.timestamp)
　　　　console.log(&#39;经度：&#39;,pos.coords.longitude)
　　　　console.log(&#39;纬度：&#39;,pos.coords.latitude)
　　　　console.log(&#39;海拔：&#39;,pos.coords.altitude)
　　　　console.log(&#39;速度：&#39;,pos.coords.speed)

},    //定位成功的回调
function(err){ 
　　　　console.log(&#39;用户定位数据获取失败&#39;)
　　　　//console.log(arguments);

}        //定位失败的回调
)

Salin selepas log masuk

(7)拖放API

　　拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

　　拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。

拖放的源对象(可能发生移动的)可以触发的事件——3个：

dragstart：拖动开始
drag：拖动中
dragend：拖动结束

整个拖动过程的组成： dragstart*1 + drag*n + dragend*1

拖放的目标对象(不会发生移动)可以触发的事件——4个：

dragenter：拖动着进入
dragover：拖动着悬停
dragleave：拖动着离开
drop：释放

整个拖动过程的组成1： dragenter*1 + dragover*n + dragleave*1

整个拖动过程的组成2： dragenter*1 + dragover*n + drop*1

dataTransfer：用于数据传递的“拖拉机”对象；

在拖动源对象事件中使用e.dataTransfer属性保存数据：

e.dataTransfer.setData( k,  v )

Salin selepas log masuk

在拖动目标对象事件中使用e.dataTransfer属性读取数据：

var value = e.dataTransfer.getData( k )

Salin selepas log masuk

(8)Web Worker

　　当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

　　web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

　　首先检测浏览器是否支持 Web Worker

 if(typeof(Worker)!=="undefined"){
   // 是的! Web worker 支持!
   // 一些代码.....
   }else{
   // //抱歉! Web Worker 不支持
   }

Salin selepas log masuk

　　下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码

 if(typeof(w)=="undefined")
   {
   w=new Worker("demo_workers.js");
   }

Salin selepas log masuk

　　然后我们就可以从 web worker 发送和接收消息了。向 web worker 添加一个 "onmessage" 事件监听器：

 w.onmessage=function(event){
 document.getElementById("result").innerHTML=event.data;
 };

Salin selepas log masuk

　　当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，使用 terminate() 方法。

完整的 Web Worker 实例代码

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>var w;function startWorker()
{if(typeof(Worker)!=="undefined")
{  if(typeof(w)=="undefined")
    {
    w=new Worker("demo_workers.js");
    }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
  };
}else{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}function stopWorker()
{ 
w.terminate();
}</script>

</body>
</html>

Salin selepas log masuk

　　创建的计数脚本，该脚本存储于 "demo_workers.js" 文件中

var i=0;

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

 timedCount();

Salin selepas log masuk

(9)Web Storage

　　使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。数据以键/值对存在, web网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。

　　在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage

if(typeof(Storage)!=="undefined")
   {
   // 是的! 支持 localStorage  sessionStorage 对象!
   // 一些代码.....
   }
 else
   {
   // 抱歉! 不支持 web 存储。
   }

Salin selepas log masuk

　　不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

(10)WebSocket

　　WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>W3Cschool教程(w3cschool.cn)</title>
    
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>

Salin selepas log masuk

推荐教程：《html视频教程》

Atas ialah kandungan terperinci Apakah ciri-ciri html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!