H5中新增了一些属性和语义化标签以及一些API等等;
在日常运用中,H5一般用于移动端的开发
新增的属性有:placeholder ---input中提示的内容
input type :calender date time week email url search number....
contenteditable 是否允许编辑
droggable 可拖拽的
hidden 是否隐藏
context-menu 了解
data-val 自定义属性
新增的语义化标签:
canvas 画板 位图
svg 矢量图
Audio 音频
Video 视频
语义化的好处 ---对seo友好 seo指的是搜索引擎优化
<ul><li></li></ul>
<p></p>
<h2></h2>
<header>位于网页顶部的标题,logo</header>
<footer>位于网页底部的友情链接,版权声明,联系方式</footer>
<nav>导航条</nav>
<section>具体的内容</section>
<article>文章</article>
<aside>内容的侧边栏</aside>
<figure>独立的单元,例如某个有图片与内容的新闻块</figure>
表单标签
表单元素:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<progress value="0.5"></progress>
<meter></meter>
新增的API:
video标签的属性:
autoplay 自动播放
controls 是否显示播放控件
currentTime 播放到当前时间
duration 影片的总时长
ended 是否循环播放
paused 当前是否处于暂停状态
play() 开始播放
pause() 暂停播放
矩形
ctx.strokeRect() 描边
ctx.fillRect() 填充
ctx.clearRect() 清除画布
文本
ctx.strokeText() 描边
ctx.fillRect() 填充
ctx.measureText(txt).width
ctx.beginPath() 开始路径
ctx.moveTo() 起点路径
ctx.lineTo() 经过路径
ctx.stroke() 描边
ctx.fill() 填充
ctx.clip() 裁剪
ctx.arc(x,y,r,o,Math.PI/*2) 绘制圆形
图像
ctx.drawImage(imgs,x,y,width,height)
ctx.rotate(deg); //画笔旋转 deg-->角度
ctx.translate(x,y); //平移---改变原点 的坐标
ctx.scale(x,y); //画笔 缩放
ctx.save(); // 保存绘图上下文 ,当前的变形数据
ctx.restore(); //恢复最近一次保存的画笔的变形状态
椭圆
<ellipse cx="200" cy="150" rx="200" ry="100" fill="#0f0" fill-opacity="0.5"</ellipse>
直线
<line x1="100" y1="100" x2="600" y2="400" stroke="#0f0" stroke-width="10"></line>
多边形
<polyline points="50,100 100,200 200,300 250,200" stroke="#000" fill-opacity="0"></polyline>
文本
<text x="0" y="0" alignment-baseline="before-edge" font-size="30>你好明天 </text>
表单的验证 :
<input type="text" name="uname" required maxlength="9" minlength="3" step="1">
required是boolean属性 必须要有,最大长度9,最小长度3
<input type="tel" name="utel" pattern="1[3578]\d{9}">
pattern 正则可以省略 ^ $
<input type="image" src="imgs/login.png" alt="Submit" width="100" height="100">
image可以作为提交按钮来使用