Html5的新特性學習

原創

2020-06-16 10:00

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Html5的學習</title>

</head>

<body>

<!--

第一個：

描述：<article> 標籤規定獨立的自包含內容。

<aside> 標籤定義其所處內容之外的內容。aside 的內容應該與附近的內容相關

-->

<article>

<h1 align="center">html5新特性的學習--大標題</h1>

<p>大標題---下的主要內容</p>

<aside>

<h3 align="middle">html5主要的學習 ---小標題</h3>

<p>小標題----的詳細內容</p>

</aside>

</article>

<!--

第二個：

描述：繪製圖形動畫

canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成：

-->

<canvas id="canvar" width="800" height="200" style="background: yellow"></canvas>

<script>

var c = document.getElementById("canvar"); //得到繪畫的對象

var context = c.getContext("2d"); //創建 context 對象

//繪製直線

context.moveTo(30, 50); //把路徑移動到畫布中的指定點，不繪製線條（橫、豎）

context.lineTo(80, 70); //添加一個新點，剛開始的點到最後一個點的線條（橫、豎）

context.lineTo(120, 30);

context.stroke(); //最後將線條顯示出來（必須）

//繪製一個實心圓

context.fillStyle = "#00ff00" //圓填充後的顏色

context.beginPath(); //開始一個新的起點

context.arc(200, 45, 40, 0, Math.PI 2, true); //畫一個圓形*

context.closePath(); //創建當前點到起始點的路徑

context.fill(); //填充當前的繪畫

//繪製一個空心圓

context.strokeStyle = "#ff0000" //空心圓的顏色

context.beginPath(); //開始一個新的起點

context.arc(300, 45, 40, 0, Math.PI 2, true); //畫一個圓形*

context.closePath(); //創建當前點到起始點的路徑

context.stroke(); //填充當前的繪畫

</script>

<br />

<!--

第三個：

描述：<datalist> 標籤定義可選數據的列表。相當於spinner（下拉選擇）

-->

<input id="myCar" list="cars" />

<datalist id="cars">

<option value="php">

<option value="java">

<option value="android">

<option value="ios">

<option value="web">

</datalist>

<br />

<br />

<!--

第四個：

描述：<details> 標籤定義元素的細節，用戶可進行查看，或通過點擊進行隱藏。

<details> 標籤用於描述文檔或文檔某個部分的細節。<summary>是其第一個子元素。（相當於二級菜單列表）

-->

<details>

<summary>家人</summary>

  爸爸

<br />   媽媽

</details>

<br />

<!--

第五個：

描述： <figure>定義媒介內容的分組，以及它們的標題。

<figcaption> 標籤定義 figure 元素的標題。

-->

<figure>

<figcaption>         " 恆博教育 " </figcaption>

<img src="http://www.hengboit.com/images/wutu3.jpg" width="350" height="234" />

</figure>

<!--

第六個：

描述：<header> 標籤定義 section 或 document 的頁眉。

-->

<header>

<h1>section或document的頁眉</h1>

</header>

<hander>

<h1>section或document 的頁眉</h1>

</hander>

<!--

第七個：

描述：<footer> 標籤定義 section 或 document 的頁腳。

-->

<footer>

<p>section或document的頁腳，包含創作者、日期、聯繫信息等</p>

</footer>

<!--

第八個：

描述：<keygen> 標籤定義生成密鑰。

<form></form> 提交

-->

<form action="http://www.w3school.com.cn/example/html5/demo_form.asp" method="get">

用戶名：

<input type="text" name="usr_name" />

<br/> 加 密：

<keygen name="security" />

<input type="submit" />

</form>

<br />

<!--

第九個：

描述：<mark>主要用來在視覺上向用戶呈現那些需要突出的文字（高亮顯示）

-->

<p align="left">你是誰？我是

<mark> " 高慧鳳 " </mark>

</p>

<div style="text-align-last: center;">
           <button οnclick="playpause()">暫停/播放</button>
           <button οnclick="makemax()">大</button>
           <button οnclick="makezhong()">中</button>
           <button οnclick="makesmall()">小</button>
           <video id="myvideo" width="700" style="margin-top: 15px" loop="loop" muted="muted" preload="auto">
               <source src="http://ht-mobile.cdn.turner.com/nba/big/teams/kings/2014/12/12/HollinsGlassmov-3462827_8382664.mp4" type="audio/mp4"></source>
           </video>
       </div>
       <br />
       <br />
       <script type="text/javascript">
           var myvideo = document.getElementById("myvideo");
           //視頻的暫停和播放
           function playpause() {
               if (myvideo.paused) {
                   myvideo.play();
               } else {
                   myvideo.pause();
               }
           }

           function makemax() {
               myvideo.width = 700;
           }

           function makezhong() {
               myvideo.width = 640;
           }

           function makesmall() {
               myvideo.width = 550;
           }
       </script>

<button id="open">打開窗口</button>
       <button id="modal">打開模態窗口</button>
       <button id="close">關閉窗口</button>

       <dialog>
           <p>我是一個dialog</p>
           <button>關閉</button>
       </dialog>
       <br />
       <br />

       <script>
           document.querySelector('#open').onclick = function() {
               document.querySelector('dialog').show() //打開對話框不影響對其他的操作
           }
           document.querySelector('#modal').onclick = function() {
               document.querySelector('dialog').showModal() //打開對話框後什麼操作也不能做
           }
           document.querySelector('#close').onclick = function() {
               document.querySelector('dialog').close()
           }
           document.querySelector('dialog>button').onclick = function() {
               document.querySelector('dialog').close()
           }
       </script>

<nav>
           <a href="https://www.baidu.com">百度</a>
           <a href="http://www.apple.com">蘋果</a>
       </nav>

<progress id="prog" value="0" max="100"></progress>
       <input id="startBtn" type="button" value="start" οnclick="startProgress()" />
       <div id="numValue">0%</div>
       <br />
       <br />
       <script type="text/javascript">
           //當前進度
           var currProgress = 0;
           //進度條是否完成
           var done = false;
           //進度條計數的最大數值
           var total = 100;

           function startProgress() {
               //獲得進度條的標籤
               var prBar = document.getElementById("prog");
               //獲得開始按鍵
               var startButt = document.getElementById("startBtn");
               //顯示的進度百分比數值
               var val = document.getElementById("numValue");
               startButt.disabled = true;
               prBar.value = currProgress;
               val.innerHTML = Math.round((currProgress / total) * 100) + "%";
               currProgress++;
               if (currProgress > 100) done = true;
               if (!done)
                   setTimeout("startProgress()", 100);
               else {
                   document.getElementById("startBtn").disabled = false;
                   done = false;
                   currProgress = 0;
               }
           }
       </script>

<p>
           如果想學習 AJAX，那麼您必須熟悉 XML
           <wbr>Http
           <wbr>Request 對象。
       </p>
   </body>

</html>

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

相關文章

網遊通訊傳輸可變長度的數值和數組

何爲可變長度的數值(int,long等) 其實現在大部分網絡遊戲（端遊、頁遊、手遊都一樣），在客戶端和服務端通訊，關於數值都會採用可變長度的方式來傳輸，從簡而減小通訊量。一般情況，客戶端和服務端進行網絡的socket通訊，都是

2020-06-25 11:57:58

非常簡單的animation動畫

<meta charset="utf-8"> <style> .animated { animation-duration: 3s; /*動畫時間*/ animation-fill-mode: b

2020-07-07 19:00:34

get方法傳中文報錯問題修復

get方法，傳中文參數時，會報錯400，類型也會錯誤（如圖第一條）解決方法：encodeURIComponent（參數）即可

2020-07-04 10:51:48

Geolocation 地理定位

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Docume

2020-07-03 13:31:57

JS關閉微信網頁兼容IOS、安卓和PC

當前時間2020-03-29在IOS和安卓的微信裏親測，加上PC瀏覽器。 <script> setTimeout(function(){ //10毫秒後關閉安卓系統 document.addEventLi

2020-06-30 20:12:01

Wex5開發小程序出現錯誤，彈出錯誤提示：Script error for：/cordova.js

2018年3月份上線的小程序是正常的，但最近發現在安卓端小程序下打開出錯，如下所示（頁面直接微信打開沒問題，iOS端打開沒問題）。打不開頁面，彈出錯誤提示：Script error for：/cordova.js。終於找

2020-06-30 20:12:01

HTML視頻地址變更後播放新視頻

HTML頁面中video下source的src值變更後，播放的還是老的視頻的問題的解決方法：修改video的src屬性而不是source的src屬性。 <video id="video" controls> <source sr

2020-06-29 22:44:27

SVG開發系列（一）

介紹： SVG從1999年由一組加入W3C的公司啓動開發，與之前1998年提交給W3C的標準（PGML、VML）構成競爭。SVG從這兩個格式吸取了經驗。[3] SVG允許3種圖形對象類型：矢量圖形、柵格圖像以及文本。圖形對象——包括

2020-06-27 20:51:00

Html5 Canvas開發之清除一個特定區域內的Canvas、寬高技巧、使Canvas填充整個瀏覽器窗口

1.清除一個特定區域內的Canvas context.fillRect(40, 40, 100, 100); context.beginPath(); context.arc(230, 90, 50, 0, Math.PI*2, fals

2020-06-25 17:44:26

Html5 Canvas開發之鼠標繪圖和方塊移動

1.鼠標繪圖 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti

2020-06-25 17:44:14

同時開發兩款H5的ARPG遊戲的設計和實踐

前話這裏主要是想記錄一下自己的想法，以及一些設計思想，然後在實際開發過程中，是否會遇到一些自己所想不到的事情，以及怎麼的解決過程。事實上，寫這種文章，遠比寫技術性的文章難多了，個人感覺還很難寫好。這裏寫也僅是自己的觀點，一種想法

2020-06-25 11:57:58

用WebStorm開發TypeScript

爲什麼是TypeScript 最近在做H5的遊戲，最終選定的TypeScript作爲開發語言。主要是看重他有強類型和Class，作爲習慣使用AS3,Java等強類型編程的人來說，還是習慣這種編程寫法。聽一些直接使用javascri

2020-06-25 11:57:58

HTML5 for Web Designers部分翻譯（含中英文）

第一次翻譯技術類文章，翻譯不好別介意~ 【原文來自：HTML5 for Web Designers 翻譯：武良呈([email protected])】 KEEPING IT REAL 保證HTML5規範的合理

2020-06-24 19:10:50

深入瞭解iPad上的MouseEvent

深入瞭解iPad上的MouseEvent iPad上沒有鼠標，所以手指在觸發觸摸事件（TouchEvent）的時候，系統也會產生出模擬的鼠標事件（MouseEvent）。這對於普通網頁的瀏覽需求而言，基本可以

2020-06-23 10:08:19

HTML中空白空格樣式

HTML中空白空格樣式一.& nbsp;二．& ensp;三．& emsp;四．& thinsp;五．& zwnj;六．& zwj; HTML提供了5種空格實體（space entity），它們擁有不同的寬度，非斷行空格（

雪芽蓝域zzs

2020-06-23 09:25:19

24小時熱門文章

最新文章

最新評論文章