01-HTML5 笔记

浏览器内核(渲染引擎)

  • IE浏览器内核:Trident内核,也是俗称的IE内核;
  • Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;
  • Firefox浏览器内核:Gecko内核,俗称Firefox内核;
  • Safari浏览器内核:Webkit内核;
  • Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核;
  • 360浏览器、猎豹浏览器内核:IE+Chrome双内核;
  • 搜狗、遨游、QQ浏览器内核:Trident(兼容模式)+Webkit(高速模式);
  • 百度浏览器、世界之窗内核:IE内核;
  • 2345浏览器内核:以前是IE内核,现在也是IE+Chrome双内核;
  • 关于移动端:
    • 移动端的浏览器内核主要说的是系统内置浏览器的内核。
      目前移动设备浏览器上常用的内核有 Webkit,Blink,Trident,Gecko 等,其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit,Android 4.4 之前的 Android 系统浏览器内核是 WebKit,Android4.4 系统浏览器切换到了Chromium,内核是 Webkit 的分支 Blink,Windows Phone 8 系统浏览器内核是 Trident。

了解HTML5

HTML5属于上一代HTML的新迭代语言,设计HTML5最主要的目的是为了在移动设备上支持多媒体!!!
    例如: video 标签和 audio 及 canvas 标记

◆ 新特性:
    1. 取消了过时的显示效果标记  <font></font> 和 <center></center> ...
    2. 新表单元素引入
    3. 新语义标签的引入  
    4. canvas标签(图形设计)
    5. 本地数据库(本地存储)
    6. 一些API

◆ 好处:
    1. 跨平台
	例如:比如你开发了一款HTML5的游戏,你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台,甚至可以通过封装的技术发放到App Store或Google Play上,所以它的跨平台性非常强大,这也是大多数人对HTML5有兴趣的主要原因。
◆ 缺点:
    1. 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("header");

解决方案二:通过引用第三方js插件方式(本质也是用createElement方式)

    <!--[if lte IE 8]>
	<script type="text/javascript" src="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: 自动获取焦点
    placeholder: 占位符  (提示信息)
    multiple: 实现多选效果
    form:规定输入字段所属的一个或多个表单。
          <form id="test">
                <input type="text" form="test" />
          </form>
          <input type="text" form="test" />
    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>
    required: 必填项, oninvalid="setCustomValidity('必填内容')"
		<form action="" method="get">
                      <input type="text" name="uname" pattern="^\d{4,11}" required class="uname">
		</form>
		<script type="text/javascript">
                      var input=document.querySelector(".uname");
                      input.oninvalid=function(){   	
                            if(this.validity.patternMismatch===true){
                                  this.setCustomValidity("请输入4到11为数字");
                            }else{
                                  this.setCustomValidity("");
                            }
                      }
		</script>

HTMl5中的API

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

☞ document.querySelector("选择器");
    备注:
          选择器: 可以是css中的任意一种选择器
          通过该选择器只能选中第一个元素。

☞ document.querySelectorAll("选择器");
    备注: 与document.querySelector区别: querySelectorAll 可以选中所有符合选择器规则的元素,返回的是一个列表。querySelector返回的只是单独的一个元素

☞ Dom.classList.add("类名"): 给当前dom元素添加类样式
☞ Dom.classList.remove("类名"); 给当前dom元素移除类样式
☞ Dom.classList.contains("类名"); 检测是否包含类样式
☞ Dom.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	读取中
<input type="file" name="">
<script type="text/javascript">
    var input=document.querySelector("input");
    input.onchange=function(){
          //获取到文件
          var file=this.files[0];
          //开始读取,创建读取器
          var  reader=new FileReader();
          //开始读取
          reader.readAsText(file);
          //获取读取的结果
          //当文件读取完成后,才可以获取文件信息内容
          reader.onload=function() {
                console.log(reader.result);
          }			
    }
</script>

获取网络状态

☞ 获取当前网络状态
    window.navigator.onLine 返回一个布尔值

☞ 网络状态事件
    1. window.ononline
    2. window.onoffline

本地存储

☞ 发展:
    随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,传统方式我们以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()

操作多媒体

http://www.w3school.com.cn/html5/html5_ref_audio_video_dom.asp

注意:	
    chrome已不再支持html中audio/video标签的autoplay属性,据说是突然播放声音怕到你,信?
    ◆ video   可配合muted(静音)属性可播放,或是video.play();
    ◆ audio   就是不可以不可以不可以
              设置方法:(网友给的,不过我就是找不到“Autoplay policy”,嗯...)
                1、在chrome浏览器地址栏中输入:chrome://flags
                2、搜索“Autoplay policy”,默认为“Default”,修改为 “No user gesture is required” 就可以了

Canvas画布

绘图工具

☞ 介绍canvas画布
☞ 设置画布大小: 使用属性方式设置
☞ 解决画布重绘问题
    1. 设置一次描边
    2. 开启新的图层 ctx.beginPath();

绘图方法

步骤:落笔(找落笔点坐标) -- 连线 -- 描边

ctx.moveTo(x,y)    落笔
ctx.lineTo(x,y)    连线
ctx.stroke()       描边

ctx.beginPath();   开启新的图层
颜色: strokeStyle="值"
线宽: lineWidth="值"   备注:不需要带单位

线连接方式:   lineJoin: round | bevel | miter (默认)

线帽(线两端的结束方式/圆角):  lineCap: butt(默认值) | round | square 

闭合路径: ctx.closePath()

渐变方案

☞ 线性渐变
    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代表结束。中间可以设置任何小数
	
☞ 径向渐变
    ctx.createRadialGradient(x0,y0,r0,x1,y1,r1);
    说明:
          (x0,y0):渐变的开始圆的 x,y 坐标
          r0:开始圆的半径
          (x1,y1):渐变的结束圆的 x,y 坐标
          r1:结束圆的半径

填充效果

    ctx.fill();         设置填充效果
    ctx.fillStyle="值"; 设置填充颜色

非零环绕原则

☞ 绘制一个如下图形

☞ 非零环绕原则:
    1. 任意找一点,越简单越好
    2. 以点为圆心,绘制一条射线,越简单越好(相交的边越少越好)
    3. 以射线为半径顺时针旋转,相交的边同向记为+1,反方向记为-1,如果相加的区域等于0,则不填充。
    4. 非零区域填充

绘制虚线

原理:设置虚线其实就是设置实线与空白部分直接的距离,利用数组描述其中的关系
    例如: [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();

注意:
    如果要将虚线改为实线,只要将数组改为空数组即可。

绘制动画效果

☞ 绘制一个描边矩形: ctx.strokeRect(x, y, width, height)
☞ 绘制一个填充矩形: ctx.fillRect(x, y, width, height)
☞ 清除:            ctx.clearRect(x, y, width, height)

☞ 实现动画效果:
    1. 先清屏
    2. 绘制图形
    3. 处理变量

绘制文本

☞绘制填充文本
    ctx.fillText(文本的内容,x,y)
  
☞绘制镂空文本
    ctx.strokeText();
	   
☞设置文字大小:
    ctx.font="20px 微软雅黑"
    备注: 该属性设置文字大小,必须按照cssfont属性的方式设置
	   
☞文字水平对齐方式【文字在圆心点位置的对齐方式】
    ctx.textAlign="left | right | center"
  
☞文字垂直对齐方式
    ctx.textBaseline="top | middle | bottom | alphabetic(默认)"
  
☞文字阴影效果
    ctx.shadowColor="red";  设置文字阴影的颜色
    ctx.ShadowOffsetX=值;   设置文字阴影的水平偏移量
    ctx.shadowOffsetY=值;   设置文字阴影的垂直偏移量
    ctx.shadowBlur=值;      设置文字阴影的模糊度(值越大越模糊)

绘制图片

☞ 将图片绘制到画布的指定位置(图片加载完成再绘制)
    ctx.drawImage(图片对象,x,y);

☞ 将图片绘制到指定区域大小的位置(x,y指的是矩形区域的开始坐标,width和height指的是矩形区域的大小)
    ctx.drawImage(图片对象,x,y,width,height);
	 
☞ 将图片的指定区域绘制到指定矩形区域内
    ctx.drawImage(图片对象, sx, sy, swidth, sheight, dx, dy, dwidth, dheight);
          sx,sy 指的是要从图片哪块区域开始绘制,swidth,sheight是指截取图片区域的大小
          dx,dy 是指绘制区域的位置,dwidth,dheight是指绘制区域的大小

☞ 解决图片绘制到某一个区域的按原比例缩放绘制(失真效果):
  让绘制的宽高比等于原始图片宽高比

绘制圆弧

☞ ctx.arc(x,y,radius,startradian,endradian[,direct]);
  说明:
    x, y          圆心的坐标
    radius        半径
    startradian   开始弧度(角度和弧度的关系: 角度:弧度= 180 : Math.PI)
    endradian     结束弧度
    direct        方向(默认顺时针false) true 代表逆时针

☞ 0度角在哪?
    以圆心为中心向右为0角 顺时针为正,逆时针为负
			 
☞ 特殊值:
    0度 = 0弧度
    45度 = Math.PI / 4
    60度 = Math.PI / 3
    90度 = Math.PI / 2
    180度 = Math.PI
    360度 = 2 * Math.PI
		   
☞ 绘制圆上任意点:(注意:弧度,角度和弧度的关系: 角度:弧度= 180 : Math.PI)
公式:
    x = ox + r * Math.cos(弧度)
    y = oy + r * Math.sin(弧度)

    ox: 圆心的横坐标
    oy: 圆心的纵坐标
    r: 圆的半径

平移【坐标系圆点的平移】

ctx.translate(x,y);
    特点:
	通过该方法可以将画布原点的位置进行重新设置。
    注意:
        1. translate(x,y) 中不能设置一个值
	2. 与moveTo(x,y) 的区别:
	    moveTo(x,y) 指的是将画笔的落笔点的位置改变,而坐标系中的原点位置并没有发生改变
	    translate(x,y) 是将画布坐标系中的原点位置发生改变

旋转【坐标系旋转】

ctx.rotate(弧度) (注意是弧度,角度和弧度的关系: 角度:弧度= 180 : Math.PI)

伸缩

ctx.scale(x,y)
备注:
    沿着x轴和y轴缩放
    x,y 为倍数  例如: 0.5 1
posted @ 2020-05-11 20:54  _vicky  阅读(144)  评论(0编辑  收藏