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小時熱門文章

最新文章

最新評論文章