前端学习---HTML5

深藏阁楼爱情的钟 2023-07-06 08:51 95阅读 0赞

**HTML5目录**

一，day one：

1.1，HTML5简介

1.2，语义化标签

1.3，canvas(画布) 简介

1.4，渲染上下文

二，day  two

2.1， 绘制矩形

2.2，样式和颜色

2.3，绘制路径

2.4，绘制图形

2.5，图形变换

2.6，图片

2.7，文本

三，day  three

3.1，像素操作

3.2，覆盖合成

3.3，事件操作

--------------------

## 一，day one： ##

--------------------

### 1.1，HTML5简介 ###

*  特点：新版本的HTML语言， 约等于HTML + CSS + JS
 *  优势：跨平台，快速迭代，降低成本，导流入口多，分发效率高    
 *  新特性：
    
     *  用于绘画的 canvas 元素
     *  用于媒介回放的 video 和 audio 元素
     *  对本地离线存储的更好的支持
     *  新的特殊内容元素，比如 article、footer、header、nav、section
     *  新的表单控件，比如 calendar、date、time、email、url、search

### 1.2，状态标签 ###

*  meter：显示已知范围的标量值/分数值 <meter  value="38"  min="33"  max="43">
    
     *  value:当前的数值 
     *  min:值域的最小边界值，默认为0
     *  max:值域的上限边界值，默认为1
     *  low:低值区间的上限值
     *  high:定义了高值区间的下限值
     *  optimum:这个属性用来指示最优/最佳取值
 *  progress：显示一项任务的完成进度 <progress value="11"  max="22">
    
     *  max：共需要完成多少工作
     *  value：已完成的工作量.，若无则不确定完成量

### 1.3，语义化标签 ###

*  **好处：**让更语义化，结构化的代码标签，代替无意义的div标签，提升了网页的质量和语义
 *  **分类：**
    
     *  <hgroup></hgroup> ：网页 / 标题，多个h1~6则放入其中，
     *  <header></header> ：多个h!~6用hgroup抱裹，还有其它数据，则再用header包裹
     *  <nav></nav> ：页面的导航链接区域
     *  <section></section> ：文档中的节或段 ，单独的模块
     *  <footer></footer> ： 网页页脚或任意 section 的底部部分，譬如：作者，相关文档链接，版权资料
     *  <article></article>  ： 一个在文档，页面或者网站中自成一体的内容，独立文章
     *  <aside></aside> ： article中为主要内容的附属信息：相关资料、标签、名次解释等，article外可做侧边栏，分类导航，日志链接

###  1.4，Html5之前的表单  ###

<table style="width:656px;"> 
 <thead> 
  <tr> 
   <th style="width:86px;">标签</th> 
   <th style="width:283px;">属性</th> 
   <th style="width:97px;">标签</th> 
   <th style="width:179px;">属性</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:86px;">from</td> 
   <td style="width:283px;"> <p>action:服务器地址（接口）</p> <p>name:必须存在，获取表单&nbsp;</p> </td> 
   <td style="width:97px;">select</td> 
   <td style="width:179px;">下拉框&nbsp;selected：选中&nbsp;&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="width:86px;">fieldset</td> 
   <td style="width:283px;">表单分组</td> 
   <td style="width:97px;">optgroup</td> 
   <td style="width:179px;">分组&nbsp;&nbsp;label：组名</td> 
  </tr> 
  <tr> 
   <td style="width:86px;">legend</td> 
   <td style="width:283px;">指定组名</td> 
   <td style="width:97px;">option</td> 
   <td style="width:179px;">子项&nbsp;&nbsp;multiple="multiple"</td> 
  </tr> 
  <tr> 
   <td colspan="2" style="width:349px;">&lt;from&gt;&lt;fieldset&gt;....&lt;legend&gt;爱好 .....</td> 
   <td colspan="2" style="width:256px;">&lt;select&gt;&lt;optgroup&gt;.....&lt;option&gt;....</td> 
  </tr> 
  <tr> 
   <td style="width:86px;">input</td> 
   <td style="width:283px;"> <p>&nbsp;&nbsp;</p> 
    <ul> 
     <li> <p>&nbsp;name分组&nbsp; &nbsp;id&nbsp; &nbsp;</p> </li> 
     <li> <p>checked默认选中控制</p> </li> 
     <li> <p>type：XXX</p> 
      <table style="width:217px;"> 
       <tbody> 
        <tr> 
         <td style="width:214px;"> 
          <ul> 
           <li> <p>text：文本框</p> </li> 
           <li> <p>password：密码框</p> </li> 
           <li> <p>submit：提交按钮</p> </li> 
           <li> <p>reset：重置按钮</p> </li> 
           <li> <p>button：普通按钮</p> </li> 
           <li> <p>radio：单选按钮</p> </li> 
           <li> <p>checkbox：复选框</p> </li> 
          </ul></td> 
        </tr> 
       </tbody> 
      </table></li> 
    </ul></td> 
   <td style="width:97px;"> <p>textarea</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>button</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> </td> 
   <td style="width:179px;"> <p>&nbsp;&nbsp;</p> <p>文本域&nbsp; 属性name</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> 
    <table style="width:214px;"> 
     <tbody> 
      <tr> 
       <td style="width:211px;"> 
        <ul> 
         <li> <p>type:submit:提交按钮</p> </li> 
         <li> <p>type:reset:重置按钮</p> </li> 
         <li> <p>type:button:普通按钮</p> </li> 
        </ul></td> 
      </tr> 
     </tbody> 
    </table></td> 
  </tr> 
 </tbody> 
</table>

### 1.5，HTML5表单  ###

<table> 
 <thead> 
  <tr> 
   <th style="width:336px;">表单格式</th> 
   <th style="width:239px;">表单属性</th> 
   <th style="width:296px;">表单验证反馈</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:336px;"> 
    <table style="width:283px;"> 
     <tbody> 
      <tr> 
       <td style="width:280px;"> 
        <ul> 
         <li> <p>email：email地址类型</p> </li> 
         <li> <p>tel：电话类型url格式 格式错有提示</p> </li> 
         <li> <p>url：url格式&nbsp; &nbsp;格式错有提示</p> </li> 
         <li> <p>search：将输入内容x掉，清空文本</p> </li> 
         <li> <p>range：数值选择器&nbsp; 属性:min、max</p> </li> 
         <li> <p>number：只能包含数字的输入框</p> </li> 
         <li> <p>color：颜色选择器</p> </li> 
         <li> <p>datetime：完整日期</p> </li> 
         <li> <p>datetime-local：完整日期，不含时区</p> </li> 
         <li> <p>time：时间，不含时区</p> </li> 
         <li> <p>date：日期</p> </li> 
         <li> <p>week：周</p> </li> 
         <li> <p>month：月</p> </li> 
        </ul></td> 
      </tr> 
     </tbody> 
    </table></td> 
   <td style="width:239px;"> 
    <ul> 
     <li> <p>placeholder &nbsp;:</p> </li> 
     <li> <p>&nbsp;输入框提示信息</p> </li> 
     <li> <p>适用于form</p> </li> 
     <li> <p>以及type为text,search,url,tel,email,password类型的input</p> </li> 
     <li> <p>autofocus &nbsp;: &nbsp;指定表单获取输入焦点&nbsp; &nbsp;&lt;input type="aa" autofocus required/&gt;</p> </li> 
     <li> <p>required &nbsp;: &nbsp;此项必填，不能为空</p> </li> 
     <li> <p>pattern : 正则验证 &nbsp;pattern="\d{1,5}"</p> </li> 
     <li> <p>formaction：在submit里定义提交<span style="color:#7c79e5;">地址</span></p> </li> 
     <li> <p>list和datalist &nbsp;: &nbsp;为输入框构造一个选择列表，&nbsp;list值为datalist标签的id</p> </li> 
    </ul></td> 
   <td style="width:296px;"> <p>validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false</p> <p>node.addEventListener("invalid",fn1,false);</p> <p>valueMissing &nbsp;&nbsp;&nbsp; &nbsp; : &nbsp;输入值为空时返回true</p> <p>typeMismatch &nbsp;&nbsp; &nbsp; : &nbsp;控件值与预期类型不匹配返回true</p> <p>patternMismatch &nbsp;: &nbsp;输入值不满足pattern正则返回true</p> <p>tooLong &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; : &nbsp;超过maxLength最大限制返回true</p> <p>rangeUnderflow &nbsp; : &nbsp;验证的range最小值返回true</p> <p>rangeOverflow &nbsp; &nbsp;: &nbsp;验证的range最大值返回true</p> <p>stepMismatch &nbsp; &nbsp; : &nbsp;验证range 的当前值 是否符合min、max及step的规则返回true</p> <p>customError 不符合自定义验证返回true</p> <p>setCustomValidity</p> <p><span style="color:#f33b45;">关闭验证</span></p> <p>formnovalidate属</p> </td> 
  </tr> 
 </tbody> 
</table>

*  列表标签：
    
     *  datalist，包含一组option元素---表示其表单控件的可选值，它的id必须要和input中的list一致
     *  details:ui小部件，用户可以从其中检索附加信息，open属性来控制附加信息的显示与隐藏
     *  summary:用作 一个<details>元素的一个内容摘要（标题）
 *  注释标签：ruby/rt: 展示文字注音或字符注释。
 *  标记标签：marK:着重
 *  html5新增规范： sessionStorage   localStorage   WebSocket
    
    canvas是HTML5的一部分，不能动态渲染，HTML作为Flash的替代技术出现

--------------------

##  二，day  two ##

--------------------

### 2.1，canvas标签 ###

*  特点：HTML5 新增的元素，用于绘制图形，创建动画，默认具有高宽（150/300px）
 *  替换：IE9之前的IE浏览器不支持canvas，会显示canvas标签内内容，支持则会覆盖标签内其它内容
 *  属性：width height  //只会影响画布，不会影响内容，CSS都会影响，不建议使用

### 2.2，渲染上下文 ###

window.onload=function(){
         var canvas = document.querySelector("#test");  //多个返回唯一的第一个元素 
         if(canvas.getContext){
             var ctx = canvas.getContext("2d");  //获取画布的2d上下文
             ctx.save(); //栈，压入默认色，黑色，一次save压入一次，没有save多个s..S..则下盖上
            //样式+颜色
             ctx.beginPath();
           //路径绘制
             ctx.restore(); //从save压入颜色，依次放出，一次放一，覆盖原色
         }//上述三个依次循环
     }
    <canvas id="test" width="300" height="300">
    	<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>  //不显示
    </canvas>

### 2.3， 绘制矩形 ###

*  ctx.fillRect(x, y, width, height)：绘制一个填充的矩形（填充色黑色） 无单位
 *  ctx.strokeRect(x, y, width, height)：绘制一个矩形的边框（实心黑色） 无单位  
 *  ctx.clearRect(x, y, width, height)：清除指定矩形区域（完全透明）无单位

### 2.4，样式和颜色  ###

*  ctx.fillStyle：图形的填充颜色   （写在绘制矩形前）
 *  ctx.strokeStyle：图形轮廓的颜色，默认黑色
 *  ctx.lineWidth：绘线的粗细，必须为正数，默认1.0，无单位
 *  ctx.lineCap：“butt/round/square”   方/圆/矩形  线条两端的展现形式 
 *  ctx.lineJoin：“round/bevel/miter”   圆/斜/直角  线条与线条间接合处的样式，默认 miter

### 2.5，绘制路径：  ###

*  ctx.beginPath()：新建一条路径， 若无，则下一条路径填充颜色红，上一个依然会填充红
 *  ctx.moveTo(x, y)：设置起点，通常用于canvas初始化或者beginPath()调用后
 *  ctx.lineTo(x, y)：绘制一条从当前位置到指定x以及y位置的直线 
 *  ctx.closePath()：闭合路径，（先设置样式+颜色，在设置起点+转向，在填充+边框，最后闭合）
 *  ctx.stroke()：通过线条来绘制图形轮廓 ，不会自动调用closePath()，手动闭合
 *  ctx.fill()：填充路径的内容区域，生成实心的图形，自动调用closePath()，自动闭合

![20200217124320555.png][]\---beginPath--->![20200217124159747.png][]        ![202002171335154.png][] 二次   ![20200217133545326.png][]   三次

### 2.6，绘制图形 ###

*  ctx.rect(x, y, width, height)：矩形，自动重置默认坐标 
 *  ctx.arcTo(x1, y1, x2, y2, radius)：圆弧，(x1 y1)出发，方向(x2 y2)，不一定到达
 *  ctx.arc(x, y, radius, startAngle, endAngle, true/false)：绘制圆形，半径--(Math.PI/180)\*degrees，true--顺时针
 *  上述几个的特点：需fill()/stroke()，用strokeStyle/..调整颜色，默认黑
 *  ctx.quadraticCurveTo(cp1x, cp1y, x, y)：二次贝塞尔，控制点+结束点，起始点为moveTo指定点
 *  ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：三次贝塞尔，控制点1+控制点2+结束点，起始点为moveTo指定点

### 2.7，图形变换 ###

*  ctx.translate(x, y)：移动 canvas的原点，是累加的
 *  ctx.rotate(angle)：1度=Math.PI/180，顺时针方向，中心点是canvas的原点，是累加的
 *  ctx.scale(x, y)：缩放，正值，大于1.0表放大，.5，增减像素数目，缩放像素大小，是累加的

###    ![20200217135425890.png][] ----》 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2NDc0NA_size_16_color_FFFFFF_t_70][]   --下述渐变代码图片---》![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2NDc0NA_size_16_color_FFFFFF_t_70 1][]   2.8，图片 ###

*  ctx.drawImage(image, x, y, width, height)：传入图片，image/canvas 对象，起始坐标，缩放的大小
 *  ctx.createPattern(image, "repetition" )：设置背景，图像源，"repeat/no-repeat/repeat-x/repeat-y" 
 *  x=ctx.createLinearGradient(x1, y1, x2, y2)：渐变，起点，终点
 *  x.addColorStop(position, color) ：0.0 ~1.0 渐变中颜色所在的相对位置 
 *  x.createRadialGradient(x1, y1, r1, x2, y2, r2)： 原点+半径->圆  原点+半径->圆

var canvas = document.querySelector("#test");
       if(canvas.getContext){
          var ctx = canvas.getContext("2d");
          var gradient = ctx.createRadialGradient(150, 150, 50, 150, 150, 100)
          gradient.addColorStop(0,"red");
          gradient.addColorStop(0.5,"yellow");
          gradient.addColorStop(0.7,"pink");
          gradient.addColorStop(1,"green");
          ctx.fillStyle=gradient;
          ctx.fillRect(0,0,300,300);
        }
    }

### 2.9，文本 ###

渲染文本

*  ctx.fillText(“ text ”, x, y) ：填充指定的文本，文本内容，地点
 *  ctx.strokeText(“ text “, x, y)：绘制文本边框

![20200217144456535.png][]    ![20200217144508569.png][]      bottom  ![20200217145034300.png][]    middle ![20200217144952535.png][]     top![20200217145058996.png][]

文本样式

*  ctx.font =“ 10px sans-serif ”：设置文本样式，此处为默认值，字体大小缺一不
 *  ctx.textAlign = “ value ”：可选值  left, right  center 基于fillText设置的x值，文本以x为对称，在其左/右
 *  textBaseline = “ value ”：top/middle/bottom  文本基线在文本块的顶部/中间/底部
 *  measureText(“ obj ”) 方法返回一个 TextMetrics 对象，包含关于文本尺寸的信息（例如文本的宽度）

canvas中文本水平垂直居中

![20200217145732513.png][]     ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2NDc0NA_size_16_color_FFFFFF_t_70 2][]

阴影

*  shadowOffsetX/Y = float：默认0，设定阴影在 X 和 Y 轴的延伸距离
 *  shadowBlur = float： 设定阴影的模糊程度，默认为 0 ，值不跟像素数量挂钩，也不受变换矩阵的影响，
 *  shadowColor = color ：设定阴影颜色，默认透明黑

--------------------

## 三，day  three ##

--------------------

### 3.1，像素操作 ###

*  ctx.getImageData(sx, sy, sw, sh)：获取ImageData对象，坐标，宽高 
 *  ctx.putImageData(ImageData, dx, dy)：像素数据写入 
 *  ctx.createImageData(width, height)：创建一个ImageData对象，新对象的宽度/高度，默认透明色
 *  ctx.globalAlpha = value：全局透明度的设置，0.0~1.0  默认1.0

ImageData对象：

*  属性-width/height：横向/纵向像素点的个数，单位是像素
 *  属性-data数组：存储每一个像素点的rgba消息， (R/G/B)/A:0~255(黑色到白色/透明到不透明)，rgba(1,1,1,2)

### 3.2，覆盖合成 ###

*  ctx.globalCompositeOperation="source-over"; 新--源  旧--目标
    
     *  source-over：默认，源在上面,新的图像层级比较高
     *  source-in：只留下源与目标的重叠部分(源的那一部分)
     *  source-out ：只留下源超过目标的部分
     *  source-atop：砍掉源溢出的部分
     *  destination-over：目标在上面,旧的图像层级比较高
     *  destination-in：只留下源与目标的重叠部分(目标的那一部分)
     *  destination-out：只留下目标超过源的部分
     *  destination-atop：砍掉目标溢出的部分
 *  canvas.toDataURL：将画布导出为图像，F12，Console，复制地址，查找

window.onload=function(){
    	var canvas = document.querySelector("#test");
    	if(canvas.getContext){
    		var ctx = canvas.getContext("2d");
    		ctx.fillStyle="pink";
    		ctx.fillRect(50,50,100,100);
    		ctx.globalCompositeOperation="source-out";
    		ctx.fillStyle="green";
    		ctx.fillRect(100,100,100,100);
    	}
    }

###     3.3，事件操作 ###

*  ctx.isPointInPath(x, y)：判断在当前路径中是否包含检测点 ，x/y  坐标

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2NDc0NA_size_16_color_FFFFFF_t_70 3][]

备注：拖拽，即08签名未看 13   15  16   19  22   23    24  25  27  28

window.onload=function(){
         var canvas = document.querySelector("#test");  //多个返回唯一的第一个元素 
         if(canvas.getContext){
             var ctx = canvas.getContext("2d");
             ctx.fillRect(0,0,100,100);    //填充的矩形
             ctx.strokeRect(100.5,100.5,100,100)  //带边框的矩形  
             var test = document.createElement("div");
             test.id="test";
             document.body.appendChild(test);
             test.style.background="pink";
         }
     }

## ##

[20200217124320555.png]: https://img-blog.csdnimg.cn/20200217124320555.png
[20200217124159747.png]: https://img-blog.csdnimg.cn/20200217124159747.png
[202002171335154.png]: https://img-blog.csdnimg.cn/202002171335154.png
[20200217133545326.png]: https://img-blog.csdnimg.cn/20200217133545326.png
[20200217135425890.png]: https://img-blog.csdnimg.cn/20200217135425890.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2NDc0NA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200217135143597.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2NDc0NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2NDc0NA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200217143331755.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2NDc0NA==,size_16,color_FFFFFF,t_70
[20200217144456535.png]: https://img-blog.csdnimg.cn/20200217144456535.png
[20200217144508569.png]: https://img-blog.csdnimg.cn/20200217144508569.png
[20200217145034300.png]: https://img-blog.csdnimg.cn/20200217145034300.png
[20200217144952535.png]: https://img-blog.csdnimg.cn/20200217144952535.png
[20200217145058996.png]: https://img-blog.csdnimg.cn/20200217145058996.png
[20200217145732513.png]: https://img-blog.csdnimg.cn/20200217145732513.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2NDc0NA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200217145830421.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2NDc0NA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2NDc0NA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200217172820106.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI2NDc0NA==,size_16,color_FFFFFF,t_70