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>

HTML5的基本功能的更多相关文章

  1. Web开发者应当开始学习HTML5的新功能

    据国外媒体报道,谷歌开发者业务部门高管马克·皮尔格雷姆(Mark Pilgrim)在WWW2010会议上表示,尽管还需要进一步完善,HTML5已经获得大多数平台支持,适合完成大多数任务. 但并非所有人 ...

  2. 用jquery实现html5的placeholder功能

    html5的placeholder功能在表单中经常用到,它主要用来提示用户输入信息,当用户点击该输入框之后,提示文字会自动消失. 我们用jquery实现类似的功能: 当输入框获得焦点时,清空输入框中的 ...

  3. 关于html5新增的功能（百度）

    HTML5包含以下新增和更新功能: 1. 新增了一种HTML文档类型:<DOCTYPE html>   2. 新增了一些结构化标记的元素(<header>,<nav> ...

  4. 让IE8支持HTML5及canvas功能！chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  5. 让IE8支持HTML5及canvas功能！

    微软出的IE9支持HTML5,但因为不支持XP系统,暂时我还用不了. 即使能用,现阶段如果开发HTML5页面,并考虑到兼容性问题的话,恐怕也得让自己的界面支持IE6-8吧. 首先,需要让IE支持HTM ...

  6. ionic结合HTML5实现打电话功能

    HTML5中这样子可以实现打电话的功能,但是在ionic实际项目中,并不是直接就可以这样子用,需要配置一下config.xml文件就可以在手机上调用到自己的联系人打电话页面了, 因为项目是引用的Cor ...

  7. HTML5的新增功能有哪些？

    HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. 新的功能: 1.用于绘画的 canvas 元素 2.用于媒介回放的 video 和 audio 元素 3.对本地离线存储的 ...

  8. BAT大佬推荐使用的HTML5的十个功能

    HTML5不是新事物.自从最初发布(2008年1月)以来,我们一直在使用它的一些功能.后来,我再次仔细查看了HTML5功能列表.看到我发现了什么?到目前为止,我还没有真正使用过它! 在本文中,我列出了 ...

  9. html5地理位置定位功能小析

    Geolocationd 基本原理1.GPS    GPS基本原理是测量出已知位置的卫星到用户接收机之间的距离,然后综合多颗卫星的数据就可知道接收机的具体位置.适用于具备GPS功能的设备(1)优点:在 ...

  10. HTML5拖拽功能中 dataTransfer对象详解

    有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...

随机推荐

  1. JavaScript 02 运算符,分支结构

    一元换算符 字符串类型 对于字符串,来说自增或自减会自动进行类型转换 1.var str = '10' 自动转换 从string转为number 2.str++ NaN 对于转化不成功的string类 ...

  2. idea如何打包项目，部署到linux后台运行

    服务器安装tomcat 上传好tomcat包 scp -r tomcat liwwww@111116.11222.101121.12111111:/opt/ linux下启动tomcat服务的命令   ...

  3. 使用 JWT 来保护你的 SpringBoot 应用

    关键词 写在前面 Spring Boot 创建Spring Boot应用 创建一个Web 应用 使用JWT保护你的Spring Boot应用 添加Spring Security 本文代码 关键词 Sp ...

  4. abstract的method是否可同时是static，是否可同时是native，是否可同时是synchronized?

    abstract的method 不可以是static的,因为抽象的方法是要被子类实现的,而static与子类扯不上关系! native方法表示该方法要用另外一种依赖平台的编程语言实现的,不存在着被子类 ...

  5. Idea中使用Lombok 编译报找不到符号

    1.问题描述 项目中使用了lombok,但是在idea编译过程是出现找不到符号.报错如下图所示:   file @Data @ApiModel(value = "HeadTeacherVO& ...

  6. 在并发情况下，Elasticsearch 如果保证读写一致？

    1.可以通过版本号使用乐观并发控制,以确保新版本不会被旧版本覆盖,由应用 层来处理具体的冲突: 2.另外对于写操作,一致性级别支持 quorum/one/all,默认为 quorum,即只 有当大多数 ...

  7. 抽象的（abstract）方法是否可同时是静态的（static）, 是否可同时是本地方法（native），是否可同时被 synchronized 修饰？

    都不能.抽象方法需要子类重写,而静态的方法是无法被重写的,因此二者是矛 盾的.本地方法是由本地代码(如 C 代码)实现的方法,而抽象方法是没有实现 的,也是矛盾的.synchronized 和方法的实 ...

  8. IE中的编码位置

    进入设置 找到Editor 找到File Encodings

  9. STM32 之 HAL库（固件库） _

    1 STM32的三种开发方式 通常新手在入门STM32的时候,首先都要先选择一种要用的开发方式,不同的开发方式会导致你编程的架构是完全不一样的.一般大多数都会选用标准库和HAL库,而极少部分人会通过直 ...

  10. POJ 2236：Wireless Network

    描述 n台电脑,如果两台电脑间的距离的d范围内,则两台电脑能够连通. 如果AB连通,BC连通,则认为AC连通. 已知电脑台数N,最大距离d,以及每个电脑的坐标.有如下两种操作: O i 表示修复编号为 ...