HTML5的基本功能

  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" rel="external nofollow" >点击此处播放</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>
个人收藏笔记记录

开通VIP
