HTML5的基本功能
阿新 • • 發佈：2020-08-08
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script> 7 document.createElement("myHero")//JS語句document.createElement("myHero")為IE瀏覽器添加了新的元素標籤，直接自定義設定元素標籤的格式 8 </script> 9 <style> 10 myHero { 11 display: block; 12 background-color: #dddddd; 13 padding: 50px; 14 font-size: 30px; 15 } 16 </style> 17 </head> 18 <body> 19 <hr> 20 <h1 style="text-align:center;">video視訊網頁播放</h1> 21 <video width="620" height="240" autoplay="autoplay" controls><!-- width 和 height 屬性控制視訊的尺寸--> 22 <source src="./video/movie.mp4" type="video/mp4"> 23 24 你的瀏覽器不支援video標籤 25 </video> 26 <hr> 27 28 <h1>我的第一個標籤</h1> 29 <p>我的第一個段落</p> 30 <myHero>我的第一個新元素</myHero> 31 <hr> 32 <h1 style="text-align:center;">canvas畫布上的簡單操作</h1> 33 <img id="scream" src="img/timg.jpg" alt="美麗的圖片" width="320" height="260"><br> 34 <canvas id="myCanvas" width="1080" height="500" style="border: 1px solid #000000"><!--指定一個ID屬性，定義畫布大小，style定義邊框屬性--> 35 </canvas> 36 <!--canvas元素本身沒有繪圖能力，繪製工作必須都在JavaScript內部完成--> 37 <script> 38 var c=document.getElementById("myCanvas"); 39 var ctx=c.getContext("2d"); 40 <!--繪製一個矩形--> 41 ctx.fillStyle="#FF0000";<!--設定風格，如：CSS顏色，漸變，圖案等--> 42 ctx.fillRect(0,0,150,75);<!--fillRect(x,y,width,height)定義矩形的填充方式--> 43 <!--繪製線條--> 44 ctx.moveTo(0,0);<!--定義開始座標--> 45 ctx.lineTo(200,100);<!--定義結束座標--> 46 ctx.stroke();<!--使用stroke()方法繪製線條--> 47 <!--繪製一個圓--> 48 ctx.beginPath(); 49 ctx.arc(195,50,40,0,2*Math.PI);<!--arc(x,y,r,start,stop)，xy表示在畫布上的位置--> 50 ctx.stroke(); 51 <!--繪製文字--> 52 ctx.font="30px Arial"; 53 ctx.fillText("Hello World",320,50);<!--使用 "Arial" 字型在畫布上繪製一個高 30px 的文字（實心）--> 54 ctx.strokeText("Hello World",320,100);<!--文字（空心）--> 55 //顏色漸變 56 //建立一個線性漸變。使用漸變填充矩形 57 var grd=ctx.createLinearGradient(0,0,200,0); 58 grd.addColorStop(0,"red"); 59 grd.addColorStop(1,"white"); 60 //填充漸變 61 ctx.fillStyle=grd; 62 ctx.fillRect(0,100,150,80); 63 //建立一個徑向/圓漸變。使用漸變填充矩形： 64 var grd1=ctx.createRadialGradient(75,50,5,90,60,100); 65 grd1.addColorStop(0,"red"); 66 grd1.addColorStop(1,"white"); 67 // 填充漸變 68 ctx.fillStyle=grd1; 69 ctx.fillRect(200,100,150,80); 70 //把一幅影象放置到畫布上 71 var img=document.getElementById("scream"); 72 img.onload = function () { 73 ctx.drawImage(img,500,50); 74 } 75 </script> 76 <hr> 77 <h1 style="text-align:center;">數學公式</h1> 78 <math xmlns="http://www.w3.org/1998/Math/MathML"> 79 <mrow> 80 <msub><mi>a</mi><mn>2</mn></msub> 81 <mo>+</mo> 82 <msub><mi>b</mi><mn>2</mn></msub> 83 <mo>=</mo> 84 <msub><mi>c</mi><mn>2</mn></msub> 85 </mrow> 86 </math> 87 88 <hr> 89 <h1 style="text-align:center;">Input 型別輸入控制和驗證</h1> 90 <form action="test01.html"> 91 選擇你喜歡的顏色：<input type="color" name="favcolor"><br> 92 生日：<input type="date" name="bday" value="2020-08-06"><br> 93 生日（日期和時間）：<input type="datetime" name="bdaytime"><br> 94 生日（日期和時間）：<input type="datetime-local" name="bdaytime1"><br> 95 生日（年月）：<input type="month" name="bdaymonth"><br> 96 選擇時間：<input type="time" name="user_time"><br> 97 選擇周：<input type="week" name="year_week"><br> 98 E-mail：<input type="email" name="user_email"><br><!--提交表單時，會自動驗證Email域值是否合法有效--> 99 數量（1到5之間）：<input type="number" name="quantity" min="1" max="50" step="3"><br><!--step為輸入域規定合法的數字間隔--> 100 滑動條Points：<input type="range" name="points" min="1" max="10"><br> 101 Search Google：<input type="search" name="googlesearch"><br> 102 新增你的主頁：<input type="url" name="homepage"> 103 <input type="submit"> 104 </form> 105 <hr> 106 <h1 style="text-align:center;">填寫並提交表單，然後重新重新整理頁面檢視如何自動填充內容</h1> 107 <form action="test01.html" id="form1" autocomplete="on" method="get"><!--autocomplete自動填充內容--> 108 First name:<input type="text" name="fname" placeholder="First name"><br><!--placeholder簡短的提示在使用者輸入值前會顯示在輸入域上--> 109 Last name:<input type="text" name="lname" autofocus><br><!--autofocus 屬性規定在頁面載入時，域自動地獲得焦點，便於輸入--> 110 E-mail:<input type="email" name="email" autocomplete="off" required><br><!--required規定必須在提交之前填寫輸入域（不能為空）--> 111 Country code：<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="請輸入國家的字母程式碼"><br><!--正則表示式匹配多個數字\d+--> 112 選擇圖片：<input type="file" name="img" multiple> 113 <input type="submit"><br> 114 <input type="submit" formmethod="post" formnovalidate formaction="HTML5.html" value="使用POST，不驗證，提交到不同位置"><br><!--formaction 屬性會覆蓋<form> 元素中的action屬性--> 115 <input type="image" src="./img/timg.jpg" alt="Submit" width="48" height="48"><br> 116 117 </form> 118 <p>"備註"欄位沒有在form表單之內，但它也是form表單的一部分</p> 119 備註：<input type="text" name="remarks" form="form1"> 120 <hr> 121 <h1 style="text-align:center;">規定輸入域的選項列表</h1> 122 <form action="test01.html" method="post"> 123 <input list="browsers" name="browser"> 124 <datalist id="browsers"> 125 <option value="IE"></option> 126 <option value="Chrome"></option> 127 <option value="Firefox"></option> 128 </datalist> 129 <input type="submit"> 130 </form> 131 <hr> 132 <h1 style="text-align:center;">用於不同型別的輸出，比如計算或指令碼輸出</h1> 133 <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 134 <input type="range" id="a" value="50">100 135 +<input type="number" id="b" value="50"> 136 =<output name="x" for="a b"></output> 137 </form> 138 <hr><h1 style="text-align: center">圖片對應的正上方或正下方加文字</h1> 139 <figure style="text-align: center"> 140 <img src="./img/timg.jpg" alt="圖片" width="304" height="228"> 141 <figcaption>Fig.1 A view of the beautiful girl</figcaption> 142 </figure> 143 144 145 146 147 148 </body> 149 </html>