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