HTML5(H5)

王瑞芝 發表於 2019-7-8 12:46:00

一.什么是H5
HTML5的第五个版本（h5一般是指移动版的开发）
二.h5新增属性：（1）placeholden(文本框的样式设计，默认值)　　
<div class="cnblogs_code">
<pre> <input type="text" placeholder="请设置用户名">
<input type="password" placeholder="请输入密码">
<input type="text" value="请设置用户名"></pre>
</div>
 
 
 
　　　　　　　（2）input的type类型
 
<div class="cnblogs_code">
<pre> <input type="date" name="date">//日期(年月日)框
 <br>
 <input type="time" name="time">//时间框（几点几时几分）
 <br>
 <input type="week" name="week">//(第几周)
 <br>
 <input type="datetime-local" name="datetime">

 <br>
 <br>
 <br>
 <input type="number">
 <br>
 <input type="email">
 <br>
 <input type="color" name="color">
 <br>
 <input type="range" min="1" max="100" name="range" value="10" step="10">
 <br>
 <input type="search" name="username">
 <br>
 <input type="url"></pre>
</div>
 
　　　　　　　　　　　　　（3）contenteditable（可编辑文本的框）---可以继承（也可以覆盖）
　　　　　　　　　　
<div class="cnblogs_code">
<pre> <div contenteditable="true">hello world</div>


<div contenteditable="true">
 hello
 <span contenteditable="false">world</span>
</div>

<div contenteditable="true">
 <span contenteditable="false">用户名：</span>
 <span>张三 </span>
</div>
<div>
 <span>用户名：</span>
 <span contenteditable="true">张三 </span>
</div></pre>
</div>
 
 
 
 
　　　　　　　（4）draggable(拖拽属性)
　　　　　　　　在标签中默认为（draggable="true"）
　　　　　　　　生命周期：（1）.鼠标按下（拖拽开始）
　　　　　　　　　　　　  （2）.拖拽中；
　　　　　　　　　　　　　（3）.松开鼠标，拖拽结束
　　　　　　　　拖拽属性的方法
1----divDrag.ondragstart=function(){
　　　　按下的时候必须移动一下
}
2----divDrag.ondarg=function (){
　　　　鼠标按下以后，只要移动一下，时间一直触发
}
3----divDrag.ondragend=function（）{
　　　　鼠标完成移动后处罚的事件
}
4----divTarget.ondragenter=function(){
　　　　(当拖拽元素进入区域触发）--必须鼠标进入
 
<div class="cnblogs_code">
<pre> // 进入目标元素也有几个对应的事件
 var divTarget = document.getElementsByClassName("target");
 divTarget.ondragenter = function(event){ //当拖拽元素进入区域触发（必须是鼠标进入）
 console.log('进入')
 }</pre>
</div>
 
 
 
}
5----divTarget.ondragover=function(){
　　　　
<div class="cnblogs_code">
<pre> divTarget.ondragover = function(event){ //当拖拽元素的鼠标进入区域，不断触发
 console.log("移动")
 event.preventDefault();
 }</pre>
</div>
 
 
 
}
6----divTarget.ondragleave=function(){
　　　　
<div class="cnblogs_code">
<pre> divTarget.ondragleave = function(event){ //当拖拽元素的鼠标进入区域后离开，触发
 console.log('移出')
 }</pre>
</div>
 
 
 
}   
7----divTarget.ondrop=function(){
　　　　
<div class="cnblogs_code">
<pre> divTarget.ondrop = function(event){ //当拖拽元素的鼠标进入区域后松开鼠标，触发
 console.log('松开')
 }</pre>
</div>
 
 
 
}   
8----拖拽元素最终都是回到拖拽的起点
（事件一定是由行为触发的，一个行为不止可以触发一个事件）                               
三.h5新增标签：（1）语义化标签，就是跟div差不多的东西
所谓语义化标签就是一种我们仅通过标签名就能判断出该标签内容的语义的标签。下面将介绍<code><article> <section> <nav> <aside>、<header> <footer></code>等HTML5新增的语义化区块标签。
1----header（通常放置在页面或者页面中某个区间标题，还可以放置搜索清单，logo图片等元素，按照最新的w3c标准，我们还可以放置<nav>导航栏）
2----nav (通常表示页面的导航，可以通过导航连接到网站某个页面，或者当前网页的其他部分)
3----aside（所包含的内容不是页面的主要内容，具有独立性，是对页面的补充。）
4----footer（一般放置在页面的或者页面中某个区块的底部，包含版权信息，联系方式等信息）
5----article（表示包含于一个文档，页面，应用程序或者网站的一段地里的内容，可以被独立发布或者重新使用文章标记标签）
6----section（是一个主题性的内容分组，通常用于对页面进行分块或者对文章等进行分段）
　　　　　　　（2）canvas（画布），javascript代码画图
　　　　　1--canvas标签定义：在网页中提供一块区域，可以供你画图的区域（行内块标签）
 
当浏览器不支持canvas时会显示其中的内容　　　　　　　
<div class="cnblogs_code">
<pre> <canvas>
您的浏览器不支持画布
</canvas></pre>
</div>
 
2--canvas的属性
getContext----设置画布的样式（2d；3d）
3--canvas的颜色和阴影
 
<div class="cnblogs_code">
<pre>属性： fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
shadowColor 设置或返回用于阴影的颜色
shadowBlur 设置或返回用于阴影的模糊级别
shadowOffsetX 设置或返回阴影距形状的水平距离
shadowOffsetY 设置或返回阴影距形状的垂直距离 方法：</pre>
<table class="dataintable">
<tbody>
<tr>
<td>createLinearGradient()</td>
<td>创建线性渐变（用在画布内容上）</td>
</tr>
<tr>
<td>createPattern()</td>
<td>在指定的方向上重复指定的元素</td>
</tr>
<tr>
<td>createRadialGradient()</td>
<td>创建放射状/环形的渐变（用在画布内容上）</td>
</tr>
<tr>
<td>addColorStop()</td>
<td>规定渐变对象中的颜色和停止位置</td>
</tr>
</tbody>
</table>
<pre> </pre>
</div>
 
4---线条样式
<div class="cnblogs_code">
<pre>lineCap 设置或返回线条的结束端点样式
lineJoin 设置或返回两条线相交时，所创建的拐角类型
lineWidth 设置或返回当前的线条宽度
miterLimit 设置或返回最大斜接长度</pre>
</div>
5--矩形
<div class="cnblogs_code">
<pre>rect() 创建矩形
fillRect() 绘制“被填充”的矩形
strokeRect() 绘制矩形（无填充）
clearRect() 在给定的矩形内清除指定的像素</pre>
</div>
6--路径
<div class="cnblogs_code">
<pre>fill() 填充当前绘图（路径）
stroke() 绘制已定义的路径
beginPath() 起始一条路径，或重置当前路径
moveTo() 把路径移动到画布中的指定点，不创建线条
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创建二次贝塞尔曲线
bezierCurveTo() 创建三次方贝塞尔曲线
arc() 创建弧/曲线（用于创建圆形或部分圆）
arcTo() 创建两切线之间的弧/曲线
isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false</pre>
</div>
7--转换
<div class="cnblogs_code">
<pre>scale() 缩放当前绘图至更大或更小
rotate() 旋转当前绘图
translate() 重新映射画布上的 (0,0) 位置
transform() 替换绘图的当前转换矩阵
setTransform() 将当前转换重置为单位矩阵。然后运行 transform()</pre>
</div>

 
 
 
<h2> </h2>
 
 
 
 
　　　　　　
　　　　　　　（3）SVG（可以伸缩的矢量的图形）
　　　　　　　（4）audio(声音)
　　　　　　　（5）video（视频）
四.新增API(ES6)
定义：（1）需要地理位置的功能（GPS）
（2）重力感应：陀螺仪
（3）动画优化 request
（4）history 控制历史
（5）localstorage(当前)      sessionstorage(会话)  ------存储功能、存储数据 
（6）websocket  聊天室，在线聊天
（7）filereader  读取文档
（8）webworker   文件异步处理
（9）fetch  
  
来源：https://www.cnblogs.com/lyx1014/p/11135179.html

頁: [1]

琼殿技术论坛's Archiver

HTML5(H5)