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">点击此处播放</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的基本功能的更多相关文章
- Web开发者应当开始学习HTML5的新功能
据国外媒体报道,谷歌开发者业务部门高管马克·皮尔格雷姆(Mark Pilgrim)在WWW2010会议上表示,尽管还需要进一步完善,HTML5已经获得大多数平台支持,适合完成大多数任务. 但并非所有人 ...
- 用jquery实现html5的placeholder功能
html5的placeholder功能在表单中经常用到,它主要用来提示用户输入信息,当用户点击该输入框之后,提示文字会自动消失. 我们用jquery实现类似的功能: 当输入框获得焦点时,清空输入框中的 ...
- 关于html5新增的功能（百度）
HTML5包含以下新增和更新功能: 1. 新增了一种HTML文档类型:<DOCTYPE html> 2. 新增了一些结构化标记的元素(<header>,<nav> ...
- 让IE8支持HTML5及canvas功能！chart.js图表绘制工具库IE8上兼容方案
第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...
- 让IE8支持HTML5及canvas功能！
微软出的IE9支持HTML5,但因为不支持XP系统,暂时我还用不了. 即使能用,现阶段如果开发HTML5页面,并考虑到兼容性问题的话,恐怕也得让自己的界面支持IE6-8吧. 首先,需要让IE支持HTM ...
- ionic结合HTML5实现打电话功能
HTML5中这样子可以实现打电话的功能,但是在ionic实际项目中,并不是直接就可以这样子用,需要配置一下config.xml文件就可以在手机上调用到自己的联系人打电话页面了, 因为项目是引用的Cor ...
- HTML5的新增功能有哪些？
HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. 新的功能: 1.用于绘画的 canvas 元素 2.用于媒介回放的 video 和 audio 元素 3.对本地离线存储的 ...
- BAT大佬推荐使用的HTML5的十个功能
HTML5不是新事物.自从最初发布(2008年1月)以来,我们一直在使用它的一些功能.后来,我再次仔细查看了HTML5功能列表.看到我发现了什么?到目前为止,我还没有真正使用过它! 在本文中,我列出了 ...
- html5地理位置定位功能小析
Geolocationd 基本原理1.GPS GPS基本原理是测量出已知位置的卫星到用户接收机之间的距离,然后综合多颗卫星的数据就可知道接收机的具体位置.适用于具备GPS功能的设备(1)优点:在 ...
- HTML5拖拽功能中 dataTransfer对象详解
有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...
随机推荐
- python的内存回收机制
变量相当于门牌号,当门牌没有了,即函数的引用都没有调用了,内存的数据就会被清除掉. python内有个定时器,定期的会刷新,如果发现内存中数据被引用了,就会被回收,这个就是内存的回收机制 ...
- ModelSim10.7安装破解教程
我打算开始学习ZYNQ,所以先安装好工具ModelSim10.7,很无奈的是倒腾了一个上午也没生产license的txt文档和破解成功. 上面是破解失败的截图,下面是生成不了license,点了直接闪 ...
- WebGPU 工具分享 - WGSL 代码高亮插件（VSCode）与预处理工具
WGSL 还在积极讨论中,虽然各位大佬不是很满意这个新生儿. 不过,社区已经有了基础的实验性工具(VSCode 插件),并支持了较新的语法. ① WGSL 插件 这个插件支持对文件扩展名为 .wgsl ...
- mysql覆盖索引与回表
mysql覆盖索引与回表 Harri2012关注 62019.07.28 11:14:15字数 1,292阅读 77,322 select id,name where name='shenjian' ...
- Zookeeper 文件系统 ?
Zookeeper 提供一个多层级的节点命名空间(节点称为 znode).与文件系统不 同的是,这些节点都可以设置关联的数据,而文件系统中只有文件节点可以存放 数据而目录节点不行. Zookeeper ...
- 为什么要使用 kafka，为什么要使用消息队列？
缓冲和削峰:上游数据时有突发流量,下游可能扛不住,或者下游没有足够多的机器来保证冗余,kafka在中间可以起到一个缓冲的作用,把消息暂存在kafka中,下游服务就可以按照自己的节奏进行慢慢处理. 解耦 ...
- Redis的Jedis操作（五）
需要把jedis依赖的jar包添加到工程中.Maven工程中需要把jedis的坐标添加到依赖. 推荐添加到服务层. 1.连接单机版 第一步:创建一个Jedis对象.需要指定服务端的ip及端口. 第二步 ...
- Java 中，Maven 和 ANT 有什么区别？
虽然两者都是构建工具,都用于创建 Java 应用,但是 Maven 做的事情更多, 在基于"约定优于配置"的概念下,提供标准的 Java 项目结构,同时能为应用自 动管理依赖(应用 ...
- 学习saltstack （三）
salt是一个新的基础平台管理工具,2011-02-20诞生,创造者Thoms SHatch,起名salt原因生活中常见.易记,使用saltstack.com原因这个域名没有被注册,Because s ...
- numpy入门—Numpy的核心array对象以及创建array的方法
Numpy的核心array对象以及创建array的方法 array对象的背景: Numpy的核心数据结构,就叫做array就是数组,array对象可以是一维数组,也可以是多维数组: Python的Li ...