zoukankan      html  css  js  c++  java

  • HTML5基础

    一、了解HTML5
    　　☞HTML5属于上一代HTML的新迭代语言，设计HTML5最主要的目的是为了在移动设备上支持多媒体！！！
    　　　　例如： video 标签和 audio 及 canvas 标记
    　　☞ 新特性：
    　　　　1. 取消了过时的显示效果标记 <font></font> 和 <center></center> ...
    　　　　2. 新表单元素引入
    　　　　3. 新语义标签的引入
    　　　　4. canvas标签（图形设计）
    　　　　5. 本地数据库（本地存储）
    　　　　6. 一些API
    ☞ 好处：(跨平台)
    例如：比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以它的跨平台性非常强大，这也是大多数人对HTML5有兴趣的主要原因。
    ☞ 缺点：
    pc端浏览器支持不是特别友好，造成用户体验不佳
    二、新语义标签

    　　(一)、网页布局结构标签及兼容处理(http://www.w3school.com.cn/html/html5_semantic_elements.asp)

    <header></header>
    <footer></footer>
    <article></article>
    <aside></aside>
    <nav></nav>
    <section></section>
    ....
    兼容性：
    - 第一种解决方案
    document.createElement("nav");
    - 第二种解决方案： 通过js插件
     <script type="text/javascript" src="code/语义标签兼容处理/html5shiv.min.js">
    - 终极解决方案
      <!--[if lte IE 8]>
        <script type="text/javascript" src="code/语义标签兼容处理/html5shiv.min.js"></script>
      <![endif]-->
     
    (二)、多媒体标签及属性介绍
    ☞ <video></video> 视频
    属性：controls 显示控制栏
    属性：autoplay 自动播放
    属性：loop 设置循环播放
    ☞ <audio></audio> 音频
    属性：controls 显示控制栏
    属性：autoplay 自动播放
    属性：loop 设置循环播放
    ☞ video标签支持的格式 http://www.w3school.com.cn/html5/html_5_video.asp
    ☞ 多媒体标签在网页中的兼容效果方式
    <video>
    <source src="code/多媒体标签/trailer.mp4">
    <source src="trailer.ogg">
    <source src="trailer.WebM">
    </video>
    三、新表单元素及属性

    (一)、智能表单控件

    <input type="email">

    email: 输入合法的邮箱地址
    url： 输入合法的网址
    number： 只能输入数字
    range： 滑块
    color： 拾色器
    date： 显示日期
    month： 显示月份
    week ： 显示第几周
    time： 显示时间
    (二)、表单属性

    ◆form属性：

    autocomplete=on | off 自动完成
    novalidate=true | false 是否关闭校验

    ◆ input属性：

    *autofocus ： 自动获取焦点
    form
    list：
    <input type="text" list="abc"/>
    <datalist id="abc">
    <option value="123">12312</option>
    <option value="123">12312</option>
    <option value="123">12312</option>
    <option value="123">12312</option>
    </datalist>
    multiple： 实现多选效果
    *placeholder ： 占位符 （提示信息）
    *required： 必填项
    四、HTMl5中的API

    (一)、获取页面元素及类名操作和自定义属性

    ☞ document.querySelector("选择器")；

    备注：
    选择器： 可以是css中的任意一种选择器
    通过该选择器只能选中第一个元素。

    ☞ document.querySelectorAll("选择器");

    备注：
    与document.querySelector区别： querySelectorAll 可以选中所有符合选择器规则的元素，返回的是一个列表。querySelector返回的只是单独的一个元素

    ☞ Dom.classList.add("类名"): 给当前dom元素添加类样式

    ☞ Dom.classList.remove("类名"); 给当前dom元素移除类样式

    ☞ classList.contains("类名"); 检测是否包含类样式

    ☞ classList.toggle("active"); 切换类样式（有就删除，没有就添加）

    ☞ 自定义属性 （小案例分析体验自定义属性）

    data-自定义属性名

    备注：
    在标签中，以data-自定义名称
    1. 获取自定义属性 Dom.dataset 返回的是一个对象
    Dom.dataset.属性名 或者 Dom.dataset[属性名]
    注意：
    属性名是不包含data-
    2. 设置自定义属性
    Dom.dataset.自定义属性名=值 或者 Dom.dataset[自定义属性名]=值
    (二)、文件读取

    ☞ FileReader

    FileReader 接口有3个用来读取文件方法返回结果在result中
    readAsBinaryString ---将文件读取为二进制编码
    readAsText ---将文件读取为文本
    readAsDataURL ---将文件读取为DataURL
    ☞ FileReader 提供的事件模型
    onabort 中断时触发
    onerror 出错时触发
    onload 文件读取成功完成时触发
    onloadend 读取完成触发，无论成功或失败
    onloadstart 读取开始时触发
    onprogress 读取中
    ☞ 分析读取图片小案例
     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <input type="file" name="">
 9     <script type="text/javascript">        
10         var input=document.querySelector("input");
11         input.onchange=function(){
12             //获取到文件
13             var file=this.files[0];
14             //开始读取，创建读取器
15             var reader=new FileReader();
16             //开始读取
17             reader.readAsText(file);
18             //获取读取的结果
19             //当文件读取完成后，才可以获取文件信息内容
20             reader.onload=function() {
21                 console.log(reader.result);
22             }            
23         }
24     </script>
25 </body>
26 </html>
    (三)、获取网络状态

    ☞ 获取当前网络状态

    window.navigator.onLine 返回一个布尔值
    ☞ 网络状态事件
    1. window.ononline
    2. window.onoffline
    (四)、获取地理定位

    ☞ 获取一次当前位置

    window.navigator.geolocation.getCurrentPosition(success,error);
    1. coords.latitude 维度
    2. coords.longitude 经度
    ☞ 实时获取当前位置
    window.navigator.geolocation.watchPosition(success,error);
    ☞ 分析地理定位小案例
     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <script type="text/javascript">
 9           // 只能获取一次当前地理位置信息
10           window.navigator.geolocation.getCurrentPosition(success,error);
11           function success (msg) {
12                console.log(msg);
13           }
14           function error (msg) {
15              console.log(msg);
16           }
17           //实时获取地理位置:
18           window.navigator.geolocation.watchPosition(success,error);
19           function success (msg,position) {
20                console.log(msg);
21                console.dir(position);
22           }
23           function error (msg) {
24              console.log(msg);
25           }
26     </script>
27 </body>
28 </html>
    (五)、本地存储

    ☞发展：

    随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案，使用sessionStorage和localStorage存储数据。
    ☞ localStorage：
    1. 永久生效
    2. 多窗口共享
    3. 容量大约为20M
    ◆window.localStorage.setItem(key,value) 设置存储内容
    ◆window.localStorage.getItem(key) 获取内容
    ◆window.localStorage.removeItem(key) 删除内容
    ◆window.localStorage.clear() 清空内容
    ☞ sessionStorage：
    1. 生命周期为关闭当前浏览器窗口
    2. 可以在同一个窗口下访问
    3. 数据大小为5M左右
    ◆window.sessionStorage.setItem(key,value)
    ◆window.sessionStorage.getItem(key)
    ◆window.sessionStorage.removeItem(key)
    ◆window.sessionStorage.clear()

    五、 Canvas画布

    (一)、绘图工具

    ☞ 介绍canvas画布

    　　☞ 设置画布大小： 使用属性方式设置
    ☞ 解决画布重绘问题
    1. 设置一次描边
    2. 开启新的图层
    (二)、绘图方法
    ctx.moveTo(x,y) 落笔
    ctx.lineTo(x,y) 连线
    ctx.stroke() 描边
    ctx.beginPath()； 开启新的图层
    演示： strokeStyle="值"
    线宽： linewidth="值" 备注：不需要带单位
    线连接方式： lineJoin: round | bevel | miter (默认)
    线帽（线两端的结束方式）： lineCap: butt(默认值) | round | square
    闭合路径： ctx.closePath()
     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         canvas {
 8              border: 1px solid red;
 9         }
10     </style>
11 </head>
12 <body>
13      <canvas width="600" height="400"></canvas>
14      <script type="text/javascript">
15          //获取canvas画布对象
16          var canvas =document.querySelector("canvas");
17          //获取绘图上下文
18          var ctx=canvas.getContext("2d");
19          //先落笔
20          ctx.moveTo(100, 100);
21          // 连线
22          ctx.lineTo(300, 100);
23          //描边
24          ctx.stroke();
25          ctx.beginPath();
26          //带颜色的横线
27          ctx.moveTo(100, 150);
28          ctx.lineTo(300, 150);
29     //红色的线
30          ctx.strokeStyle="red";
31     //设置线宽
32          ctx.lineWidth="20";   
33          ctx.stroke();
34      </script>
35 </body>
36 </html>
    (三)、渐变方案

    ☞ 线性渐变

    var grd=ctx.createLinearGradient(x0,y0,x1,y1);
    x0-->渐变开始的x坐标
    y0-->渐变开始的y坐标
    x1-->渐变结束的x坐标
    y1-->渐变结束的y坐标
    grd.addColorStop(0,"black"); 设置渐变的开始颜色
    grd.addColorStop(0.1,"yellow"); 设置渐变的中间颜色
    grd.addColorStop(1,"red"); 设置渐变的结束颜色
    ctx.strokeStyle=grd;
    ctx.stroke();
    备注：
    addColorStop(offse,color);
    中渐变的开始位置和结束位置介于0-1之间，0代表开始，1代表结束。中间可以设置任何小数
     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         canvas {
 8              border: 1px solid red;
 9         }
10     </style>
11 </head>
12 <body>
13   <canvas width="600" height="400"></canvas>
14   <script type="text/javascript">
15     //获取canvas画布对象
16     var canvas =document.querySelector("canvas");
17     //获取绘图上下文
18     var ctx=canvas.getContext("2d");
19     //创建渐变方案 
20     var lgd=ctx.createLinearGradient(100, 50, 300, 50);
21     //添加开始颜色
22     lgd.addColorStop(0, "red");
23     //添加结束颜色
24     lgd.addColorStop(1, "blue");
25     ctx.strokeStyle=lgd;
26     ctx.lineWidth="50";
27     ctx.moveTo(100, 50);
28     ctx.lineTo(300, 50);
29     ctx.stroke();
30   </script>
31 </body>
32 </html>
    ☞ 径向渐变
    ctx.createradialGradient(x0,y0,r0,x1,y1,r1);
    (x0,y0)：渐变的开始圆的 x,y 坐标
    r0：开始圆的半径
    (x1,y1)：渐变的结束圆的 x,y 坐标
    r1：结束圆的半径
     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         canvas {
 8              border: 1px solid red;
 9         }
10     </style>
11 </head>
12 <body>
13   <canvas width="600" height="400"></canvas>
14   <script type="text/javascript">
15     //获取canvas画布对象
16     var canvas =document.querySelector("canvas");
17     //获取绘图上下文
18     var ctx=canvas.getContext("2d");
19     var rgd=ctx.createRadialGradient(200, 150, 50, 200, 150, 100);
20     rgd.addColorStop(0, "red");
21     rgd.addColorStop(1, "pink");
22     ctx.fillStyle=rgd;
23     ctx.moveTo(100, 50);
24     ctx.lineTo(300, 50);
25     ctx.lineTo(300, 300);
26     ctx.lineTo(100, 300);
27     ctx.closePath();
28     ctx.fill();
29   </script>
30 </body>
31 </html>

    (四)、填充效果

    ctx.fill(); 设置填充效果

    ctx.fillstyle="值"; 设置填充颜色
    (五)、非零环绕原则
    ☞ 绘制一个如下图形
    ☞ 非零环绕原则：
    1. 任意找一点，越简单越好
    2. 以点为圆心，绘制一条射线，越简单越好（相交的边越少越好）
    3. 以射线为半径顺时针旋转，相交的边同向记为+1，反方向记为-1，如果相加的区域等于0，则不填充。
    4. 非零区域填充
    ☞ 非零环绕原则案例：
     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         canvas {
 8              border: 1px solid red;
 9         }
10     </style>
11 </head>
12 <body>
13   <canvas width="600" height="400"></canvas>
14   <script type="text/javascript">
15     //获取canvas画布对象
16     var canvas =document.querySelector("canvas");
17     //获取绘图上下文
18     var ctx=canvas.getContext("2d");
19     //绘制一个300*300矩形
20     ctx.moveTo(150, 50);
21     ctx.lineTo(450, 50);
22     ctx.lineTo(450, 350);
23     ctx.lineTo(150, 350);
24     ctx.lineTo(150, 50);
25     //开始绘制图形
26     ctx.moveTo(300, 100);
27     ctx.lineTo(200, 200);
28     ctx.lineTo(250, 200);
29     ctx.lineTo(250, 300);
30     ctx.lineTo(350, 300);
31     ctx.lineTo(350, 200);
32     ctx.lineTo(400, 200);
33     ctx.lineTo(300, 100);
34     ctx.fill();
35   </script>
36 </body>
37 </html>

    (六)、绘制虚线

    原理：

    设置虚线其实就是设置实线与空白部分直接的距离,利用数组描述其中的关系

    例如： [10,10] 实线部分10px 空白部分10px
    例如： [10,5] 实线部分10px 空白部分5px
    例如： [10,5,20] 实线部分10px 空白5px 实线20px 空白部分10px 实线5px 空白20px....
    绘制：
    ctx.setLineDash(数组);
    ctx.stroke();
    例如：
    ctx.moveTo(100, 100);
    ctx.lineTo(300, 100);
    ctx.setLineDash([2,4]);
    ctx.stroke();
    注意：
    如果要将虚线改为实线，只要将数组改为空数组即可。
     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         canvas {
 8              border: 1px solid red;
 9         }
10     </style>
11 </head>
12 <body>
13   <canvas width="600" height="400"></canvas>
14   <script type="text/javascript">
15     //获取canvas画布对象
16     var canvas =document.querySelector("canvas");
17     //获取绘图上下文
18     var ctx=canvas.getContext("2d");
19     ctx.strokeStyle="red";
20     ctx.moveTo(100, 50);
21     ctx.lineTo(400, 50);
22     ctx.setLineDash([20,20]);
23     ctx.stroke();
24     ctx.beginPath();
25     ctx.strokeStyle="blue";
26     ctx.moveTo( 100 , 100 );
27     ctx.lineTo( 400,  100 );
28     ctx.setLineDash([10,5]);
29     ctx.stroke();
30     ctx.beginPath();
31     ctx.strokeStyle="green";
32     ctx.moveTo(100, 150);
33     ctx.lineTo(400, 150);
34     ctx.setLineDash([10,5,20]);
35     ctx.stroke();
36   </script>
37 </body>
38 </html>
    (七)、绘制动画效果
    ☞ 绘制一个描边矩形： content.strokeRect(x,y,width,height)
    ☞ 绘制一个填充矩形： content.fillRect(x,y,width,height)
    ☞ 清除： content.clearRect(x,y,width,height)
    ☞ 实现动画效果：
    1. 先清屏
    2. 绘制图形
    3. 处理变量
     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         canvas {
 8              border: 1px solid red;
 9         }
10     </style>
11 </head>
12 <body>
13   <canvas width="600" height="400"></canvas>
14   <script type="text/javascript">
15     //获取canvas画布对象
16     var canvas =document.querySelector("canvas");
17     //获取绘图上下文
18     var ctx=canvas.getContext("2d");
19     //开始位置
20     var x=0;
21     //处理的是一个增量
22     var step=5;
23     //改变的方向的
24     var i=1;
25     //创建一个定时器
26     setInterval(function(){
27       //先清屏
28       ctx.clearRect(0, 0, canvas.width, canvas.height);
29       //开始绘制图形
30       ctx.fillRect(x, 100, 100, 200);
31       //开始处理变量
32       x+=step*i;
33       if(x>canvas.width-100){
34         i=-1;
35       }else if(x<0){
36         i=1;
37       }
38     },20);
39   </script>
40 </body>
41 </html>

     (八)、绘制文本

    ☞ 绘制填充文本

    content.fillText(文本的内容,x,y)
    ☞ 绘制镂空文本
    content.strokeText();

    ☞ 设置文字大小：

    content.font="20px 微软雅黑"
    备注： 该属性设置文字大小，必须按照cssfont属性的方式设置

    ☞ 文字水平对齐方式【文字在圆心点位置的对齐方式】

    content.textalign="left | right | center" 
    ☞文字垂直对齐方式
    content.textBaseline="top | middle | bottom | alphabetic(默认)"
    ☞文字阴影效果
    ctx.shadowColor="red"; 设置文字阴影的颜色 
    ctx.ShadowOffsetX=值; 设置文字阴影的水平偏移量
    ctx.shadowOffsetY=值; 设置文字阴影的垂直偏移量
    ctx.shadowBlur=值; 设置文字阴影的模糊度
     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         canvas {
 8              border: 1px solid red;
 9         }
10     </style>
11 </head>
12 <body>
13      <canvas width="600" height="400"></canvas>
14      <script type="text/javascript">
15           //获取canvas画布对象
16           var canvas =document.querySelector("canvas");
17           //获取绘图上下文
18           var ctx=canvas.getContext("2d");
19           ctx.moveTo(300, 0);
20           ctx.lineTo(300, 400);
21           ctx.stroke();
22           ctx.beginPath();
23           ctx.moveTo(0, 200);
24           ctx.lineTo(600,200);
25           ctx.stroke();
26           //设置文字大小： 与css设置文字一样
27           ctx.font="40px 微软雅黑";
28           //设置文字的对齐方式
29           ctx.textAlign="center";
30           //设置文字上下对齐方式
31           ctx.textBaseline="middle";
32           //设置带阴影的效果
33           ctx.shadowColor="red";
34           ctx.shadowOffsetX=5;
35           ctx.shadowOffsetY=5;
36           ctx.shadowBlur=10;
37           ctx.strokeText("撸起袖子加油干", 300, 200);
38           ctx.fillText("撸起袖子加油干", 300, 200);
39      </script>
40 </body>
41 </html>

     

    (九)、绘制图片

    ☞

    //将图片绘制到画布的指定位置
    content.drawImage(图片对象,x,y); 
    ☞
    //将图片绘制到指定区域大小的位置 x,y指的是矩形区域的位置，width和height指的是矩形区域的大小
    content.drawImage(图片对象,x,y,width,height); 
    ☞
    //将图片的指定区域绘制到指定矩形区域内
    content.drawImage(图片对象,sx,sy,swidth,sheight,dx,dy,dwidth,dheight); 
    sx,sy 指的是要从图片哪块区域开始绘制，swidth，sheight 是值 截取图片区域的大小
    dx,dy 是指矩形区域的位置，dwidth,dheight是值矩形区域的大小
    ☞
    解决图片绘制到某一个区域的按原比例缩放绘制：
    绘制宽：绘制高==原始宽：原始高
    (十)、绘制圆弧
    ☞
    content.arc(x,y,radius,startradian,endradian[,direct]);
    x,y 圆心的坐标
    radius 半径
    startradian 开始弧度
    endradian 结束弧度
    direct 方向（默认顺时针 false） true 代表逆时针
    ☞ 0度角在哪？
    以圆心为中心向右为0角 顺时针为正，逆时针为负 
    ☞ 备注：
    角度 和 弧度的关系： 角度:弧度= 180:pi
    特殊值:
    0度 = 0弧度
    30度 = π/6 (180度的六分之一)
    45度 = π/4
    60度 = π/3
    90度 = π/2
    180度 = π
    360度 = 2π
    ☞ 绘制圆上任意点：
    公式：
    x=ox+r*cos( 弧度 )
    y=oy+r*sin( 弧度 )

    ox: 圆心的横坐标

    oy: 圆心的纵坐标

    r： 圆的半径

    (十一)、平移【坐标系圆点的平移】

    ctx.translate(x,y); 

    特点：
    通过该方法可以将原点的位置进行重新设置。
    注意：
    1. translate(x,y) 中不能设置一个值
    2. 与moveTo(x,y) 的区别：
    moveTo(x,y) 指的是将画笔的落笔点的位置改变，而坐标系中的原点位置并没有发生改变
    translate(x,y) 是将坐标系中的原点位置发生改变
    (十二)、旋转【坐标系旋转】
    ctx.rotate(弧度)
    (十三)、伸缩

    ctx.scale(x,y) 

    备注：
    沿着x轴和y轴缩放
    x,y 为倍数 例如： 0.5 1
     
  • 相关阅读:
    KL散度、JS散度和交叉熵
    np.dot()计算两个变量的乘积
    numpy 相关统计
    sns.FacetGrid(),map用法
    df.to_dict()转化为字典数据
    springboot 热部署
    Springboot thymeleaf
    springboot 静态资源
    springboot yaml part2
    Warning: You cannot set a form field before rendering a field associated with the value. ant desgin pro form 表单报错
  • 原文地址：https://www.cnblogs.com/junjingyi/p/9178800.html
Copyright © 2011-2022 走看看