HTML5常用知识点

HTML5常用知识点

HTML5属于上一代HTML的新迭代语言,设计HTML5最主要的目的是为了在移动设备上支持多媒体

例如: video 标签和audiocanvas 标记

新特性

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

新语义标签

header:定义了文档的头部区域

footer:定义文档页脚,它不只是页面的最底部,在文档中也可以定义多个

article:定义页面独立的内容区域,标签定义的内容本身必须是有意义且必须独立于文档的其他部分,可用在的地方:博客文章,新闻,评论等

aside:定义页面的侧边栏内容

nav:定义导航栏,大面积链接区域

section:定义文章,这时一般带有标题

语义化标签在IE8及以下不兼容,需做兼容处理
第一种:document.createElement(“nav”);标签为行级元素,需display:block;设置为块级元素。
缺点:每个标签都需要创建一次。
第二种:引入js插件html5shiv.js(自己写也可以)
缺点:在除IE8以下的浏览器多此一举,多一次请求。
第三种:条件hack

针对条件加载

http://www.w3school.com.cn/html/html5_semantic_elements.asp

多媒体标签

视屏video

属性:controls 显示控制栏
属性:autoplay自动播放
属性:loop 设置循环播放

音频audio

属性:controls 显示控制栏
属性:autoplay 自动播放
属性:loop 设置循环播放

新增表单控件

<input type="email">
email: 输入合法的邮箱地址
url: 输入合法的网址
number: 只能输入数字
range: 滑块
color: 拾色器
date: 显示日期
month: 显示月份
week : 显示第几周
time: 显示时间

表单属性

form属性:

autocomplete=on | off 自动完成 输入记录是否显示

novalidate=true | false 是否关闭校验 表单校验 如检查email格式

input属性:
autofocus : 自动获取输入框焦点
form
multiple: 实现多选效果
placeholder : 占位符 (提示信息)
required: 必填项

表单域外的提交 给输入框加个form属性值为表单id即可
<form action="index.html" method="get" id="test">
用户名:<input type="text" name="username" value="" required>
<input type="submit" name="" value="提交"></form>
<input type="text" name="uname" form="test"

如何修改表单控件中的默认提示信息

  1. 表单验证触发oninvalid事件
    setCustomValidity方法设置修改内容

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 读取中

☞ 小案例

 let oInput = document.querySelector("input");
  oInput.onchange = function(){
    //获取文件
    let file = this.files[0];
    //创建读取器
    let reader = new FileReader();
    //开始读取
    reader.readAsText(file);
    reader.onload = function(){
      console.log(reader.result);
    }
  }

获取网络状态

☞ 获取当前网络状态
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);

本地存储

随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,传统方式我们以document.cookie来进行存储的,但是由于其存储大小只有4k左右,并且解析也相当的复杂,给开发带来诸多不便,HTML5规范则提出解决方案,使用sessionStoragelocalStorage存储数据。

☞  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></canvas>标签并用js控制绘图

设置画布大小: 默认大小300x150 必须使用内联方式设置画布,通过其他方式,实际绘图区域大小仍为300x150,会有失真效果。

解决画布重绘问题

  1. 设置一次描边 ctx.stroke();
  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:结束圆的半径

绘制动画效果

   ☞ 绘制一个描边矩形: content.strokeRect(x,y,width,height) 
   ☞ 绘制一个填充矩形: content.fillRect(x,y,width,height)  
   ☞ 清除:           content.clearRect(x,y,width,height)  
   ☞ 实现动画效果: 
          1. 先清屏
          2. 绘制图形
          3. 处理变量

引用:mumacity

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页