1.HTML5 中增强表单标签
<form> <!--邮箱--> 邮箱: <input type="email" /> <!--数字--> 年龄: <input type="number" /> <!--滑动器--> 滑动器: <input type="range" /> <!--搜索框--> 搜索: <input type="search" /> <!--日期的框--> 日期: <input type="date" /> <!--日期的框--> 日期: <input type="week" /> <!--日期的框--> 日期: <input type="month" /> <!--颜色--> 颜色: <input type="color" /> <!--网址--> 网址: <input type="url" /> </form>H5中表单增强的属性 placeholder autofocus:自动的获得焦点 max：最大值 min：最小值 minlength:最小长度 maxlength:最大长度 <form> 账号:<input type="text" placeholder="手机号/邮箱/账 号" autofocus/> 密码:<input type="number" max="130" min="0" /> 密码:<input type="password" minlength="2" maxlength="4" /> </form>
效果：
2.HTML5 中新增结构标签
原来设计：(不过这个依然是流行)
新加入的标签：
3. 标签的使用
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> header{ height:100px; width: 100%; /*背景颜色*/ background-color: red; } nav{ width: 100%; height: 40px; background-color: pink; } .center{ width: 100%; height: 475px; background-color: palegreen; } footer{ width: 100%; height: 150px; background-color: paleturquoise; } .login{ width: 350px; height: 400px; background-color: #ffffff; /*相对定位*/ position: relative; left: 950px; top: 10px; } </style> </head> <body> <!--头部模块--> <header></header> <!--中间提示--> <nav></nav> <!--中间的展现--> <div class="center"> <div class="login"> </div> </div> <!--底部模块--> <footer></footer> </body> </html>
效果：
4. HTML5 中音频视频标签
标签的使用 <!--引入音频的标签--> <audio src="img/1.mp3" controls="controls"> 改网页不支持媒体标签 </audio> <audio> <source src="img/1.mp3"></source> <source src="img/1.ogg"></source> 改网页不支持媒体标签 </audio> <!--引入视频的标签--> <video src="img/movie.mp4" controls="controls" width="300px" height="300px"></video> <video> <source src="img/movie.mp4"></source> <source src="img/movie.ogg"></source> <source src="img/movie.webm"></source> 改网页不支持媒体标签</video> <hr /> <!--多媒体标签 --> <embed src="img/1.mp3"></embed> <embed src="img/movie.mp4" width="500px" height="500px"> </embed>
效果：
5.HTML5 中的绘图标签
标签的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <figure> <img src="img/1.jpg" /> <figcaption>IT程序员</figcaption> </figure> <!-- <dl> <dd> <img src="img/1.jpg" /> </dd> <dd> IT程序员 </dd> </dl>--> <!--展示文章的细节 mark：着重突出的内容 --> <details> <summary>请选择</summary> <p>中国1</p> <p><mark>中国2</mark></p> <p>中国3</p> <p>中国4</p> </details> <!--刻度标签 max:规定的最大值 min:规定最小值 value：当前的值 low：自己定义的最小值 high：自己定义的最大值 --> <meter max="100" min="0" value="10" low="20" high="80"></meter> <!--进度条--> <progress max="100" value="40"></progress> <br /> <input type="text" list="city" /> <datalist id="city"> <option value="IBM">IBM</option> <option value="IBM1">IBM1</option> <option value="IBM2">IBM2</option> <option value="IBM3">IBM3</option> </datalist> <!--画布标签--> <canvas id="mycat"></canvas> <script> var ca=document.getElementById("mycat"); var te= ca.getContext("2d"); //背景颜色 te.fillStyle="#FF0000"; //绘制图形的大小 te.fillRect(0,0,80,100); </script> </body> </html>
效果：
