三.HTML5
1.html5新增类型
电子邮件类型
功能描述：输入E-mail地址的文本框
语法：<input type="email"/>
注意：输入的内容中必须包含"@"，"@"后面必须具有内容
搜索类型
功能描述：输入搜索关键字的文本框
语法：<input type="search"/>
URL类型
功能描述：输入WEB站点的文本框
语法：<input type="url"/>
注意：输入的内容中必须包含"http://"，后面必须有内容
颜色类型
功能描述：预定义的颜色拾取控件
语法：<input type="color"/>
数字类型
功能描述：只能接受数字
语法：
属性：min：当前域能接受的最小值
max：当前域能接受的最大值
step：决定了域所接受值递增或递减的步长，默认为1
日期类型
功能描述：创建一个日期输入域
语法：<input type="date" />
周类型
功能描述：与date类型相似，但只能选择周
语法：<input type="week" />
月份类型
功能描述：与date类型相似，但只能选择月份
语法：<input type="month" />
2.html5新增属性：div标签和span标签
placeholder
作用：默认提示
语法：<input type="text" placeholder="请输入用户名"/>
multiple
作用：支持在一个域中输入多个值，逗号隔开，一般配合邮箱和URL使用
语法：<input type="email" multiple/>
autofocus
作用：自动获取焦点
语法：<input type="text" autofocus/>
required
作用：防止域为空提交表单时
语法：<input type="text" required/>
minlength和 maxlength
作用：定制元素允许的最小字符数和最大字符数
语法：<input type="text" minlength="6" maxlength="18"/>
min和max
作用：定制元素允许的最小数字和最大数字
语法：<input type="number" min=”0” max=”100”/>
3.html5新增结构标签
常见的html5新增语义化标签
- header 页面头部
- footer 页脚
- article 定义页面独立的内容区域
- aside 定义页面的侧边栏内容
- details 文档某个部分的细节
- summary 是details中的标题
- figure 规定独立的流内容
- figcaption 是figure的标题
- mark 标记
- nav 导航链接
- meter 用来表示范围已知且可度量的内容。
- ruby 加注释
HTML5新增的结构标签
<header>...</header> 头部
<nav>...</nav> 导航
<section>...</section>定义文档中的节。比如章节、页眉、页脚或文档中的其它部分
<aside>...</aside> 侧边栏
<footer>...</footer>页脚
<article>...</article>代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等
4.datalist标签
<details> 标签用于描述文档或文档某个部分的细节
IE不支持 <details> 标签
<details> <summary>details中的标题</summary> <p>详细的内容</p> </details>
5.视频和音频
视频
<video> </video>标签
<video> 标签定义视频，比如电影片段或其他视频流
<video src="movie.mp4" controls> 您的浏览器不支持 video 标签。 </video>
支持的3种格式：
- mp4
- ogg 移动端
- webM 高清
音频
<audio></audio>标签
<audio> 标签定义声音，比如音乐或其他音频流
<audio src="someaudio.mp3"> 您的浏览器不支持 audio 标签。 </audio>
6.embed标签
<embed/>标签
<embed> 标签定义嵌入的内容，比如插件，当然也可以用来嵌入声音
<embed> 标签必须有 src 属性
<embed src="helloworld.mp4" />
7.canvas标签
<canvas> </canvas> 标签
canvas只是个容器，你可以通过控制坐标在canvas上绘制图形。
一般canvas配合js使用能实现非常复杂的动画效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>画布</title> <style type="text/css"> canvas{ background-color: gray; } </style> </head> <body> <!-- canvas标签： 1.canvas必须配合js在网页上绘制图像 2.画布是一个矩形区域，我们可以控制其每一个像素 3.canvas拥有多种绘制路径、矩形、圆形... 颜色的表示方式： 1.直接用颜色名称:"red" "green" 2.十六进制颜色值："#eeeeff" 3.rgb(1-255,1-255,1-255) 属性： fillStyle 填充绘画的颜色、渐变或模式 strokeStyle 用于笔触的颜色、渐变或模式 shadowColor 用于阴影颜色 shadowOffsetX 水平距离偏移量 shadowOffsetY 垂直距离偏移量 shadowBlur 模糊级别 方法： getContext():返回一个对象，这个方法封装了很多的绘图方法和属性。 但是现在只能提供2d的绘画环境。 rect():创建矩形。 fillRect():绘制填充的矩形 createLinearGradient()：创建线性渐变 addColorStop(): 渐变对象中颜色和停止位置 --> <canvas id="mycanvas" width="400px" height="400px"> 您的浏览器版本太低 </canvas> <script type="text/javascript"> //js代码块 var canvas=document.getElementById("mycanvas"); var obj=canvas.getContext("2d"); // var colorobj= obj.createLinearGradient(0,0,100,0); var colorobj=obj.createRadialGradient(50,50,10,50,50,50); colorobj.addColorStop(0,"red"); colorobj.addColorStop(0.5,"blue"); colorobj.addColorStop(1,"green"); //obj.rect(0,0,100,100); obj.shadowColor="rgb(11,25,9)"; obj.shadowOffsetX=3; obj.shadowOffsetY=3; obj.shadowBlur=5; obj.fillStyle=colorobj; obj.strokeStyle="green"; obj.fillRect(0,0,100,100); obj.strokeRect(100,100,100,100); </script> </body> </html>
四.个人小练
1.div布局（1）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>布局练习2</title> <style> .c1{ background: #a8c8df; height: 150px; line-height: 75px; } .c2{ background: #e6e8f4; height: 50px; line-height: 25px; } p { text-align:center; font-size: 30px; } .c3{ background:#1c56a0; height: 300px; clear: both; line-height: 150px; } .left,.zhong,.right{ width: 33.333%; height: 400px; float: left; line-height: 400px; text-align: center; } .left{ background: #a8bdda; } .zhong{ background: #b5d6e5; } .right{ background: #276da8; } </style> </head> <body> <!------------------------------> <div class="c1"> <p >头部</p> </div> <!------------------------------> <div class="c2" > <p>导航</p> </div> <!------------------------------> <div class="left"> <p>左边</p> </div> <div class="zhong"> <p>中间</p> </div> <div class="right"> <p>右边</p> </div> <!------------------------------> <div class="c3"> <p>足部</p> </div> <!------------------------------> </body> </html>
2.div布局 (2)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>布局练习3</title> <style> .c1{ background: #a8c8df; height: 400px; line-height: 200px;} .c2{ background: #e6e8f4; height: 200px; line-height: 100px;} .c3,.c4{height: 200px; line-height: 100px; width: 50%; float: left; text-align: center;} .c3{ background:#1c56a0;} .c4{ background: #a8bdda;} p{text-align:center; font-size: 30px;} .t1,.t2{width: 50%; float: left;} </style> </head> <body> <div class="t1"> <div class="c1"><p>左</p></div> </div> <div class="t2"> <div class="c2"><p>上</p></div> <div class="c3"><p>左下</p></div> <div class="c4"><p>右下</p></div> </div> </body> </html>
