【前端】之HTML5基础知识

HTML5 文件格式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <!-- 我的HTML5代码 -->
    </body>
</html>

HTML5 对浏览器的支持

HTML5支持Chrome、Firefox和IE9及以上的浏览器。

如果需要考虑IE8及以下的浏览器，可以加入html5shiv.js的引用。方法如下：

<!--[if lt IE 9]>
<script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script>
<![endif]-->

HTML5 语义性标签

  • <header>：头部
  • <nav>：导航栏
  • <section>：内容区域
  • <aside>：侧边栏
  • <article>：文章（详细内容区域）
  • <footer>：底部

    注：以上所有标签的作用和<div>标签的作用完全相同，但增强了语义性（可读性）。

HTML5 <input>标签

  • type="email"：邮箱（123456@qq.com）
  • type="url"：网址（http://www.baidu.com）
  • type="number"：数字，可以通过点击加减
  • type="tel"：电话号码
  • type="search"：搜索框，框的最后有一个叉，可以清空内容
  • type="range"：范围，可以拖动的条
  • type="color"：颜色选择器
  • type="date"：日期选择器

    注：HTML5中的input标签，如果输入不合法，会自动弹出提示信息。
  • input标签中新增的属性：
    • placeholder属性：input标签中的提示信息，相当于Android中的hint属性
    • autofocus属性：页面加载之后让表单自动获取焦点，不需要写值
    • autocomplete属性：值on/off，on时可以自动显示以前输入的数据
    • required属性：指示是否必填，不需要写值
    • multiple属性：用于文件上传表单，可以选择多个文件，不需要写值
    • novalidate属性：关闭H5表单默认的验证功能，只能加在
      标签上，不需要写值
    • pattern属性：自定义正则验证
  • 表单验证事件：
    • oninput：当用户输入的时候触发的事件，示例代码如下：
    document.getElementById("username").oninput = function() {
    // 每当用户在表单中输入一个字符，就会触发一次这个事件
}
    • oninvalid：当验证不通过时触发的事件，示例代码如下：
    document.getElementById("email").oninvalid = function() {
    this.setCustomValidity("您输入的邮箱不正确！");
}

HTML5 其他标签简介

  • <datalist>标签：可以输入数据的下拉菜单，需要结合input>text使用，代码如下：
    <!-- text表单右侧有一个下拉箭头，可以直接下拉；输入时可以模糊匹配 -->
<input type="text" list="cars" />
<datalist id="cars">
  <option>宝马</option>
  <option>宝骏</option>
  <option>宝宝</option>
</datalist>
  • <fieldset>标签：表单框，盛放多个表单的容器，代码如下：
    <form action="">
  <fieldset>
      <legend>用户验证表单</legend> <!-- 标题 -->
      <!-- 这里写其他标签代码 -->
  </fieldset>
</form>
  • <label>标签：点击该标签中的文本，可以触发该标签中的表单的焦点，代码如下：
    <label>
  姓名：<input type="text"/>
</label>
  • <keygen>标签：加密标签，保证数据传输安全，可以选择不同强度的加密，代码如下：
    <!-- 可以选择中等强度加密(1024)和高强度加密(2048) -->
加密：<keygen/>
  • <meter>标签：度量器，类似温度计，根据在不同的值区间显示不同的颜色，代码如下：
    <!-- 当在low和high之间时显示绿色，否则显示黄色 -->
<meter max="100" min="0" low="30" high="70" value="50"></meter>
  • <progress>标签：进度条，代码如下：
    <progress max="100" min="0" value="40"></progress>
  • <audio>标签：音频播放标签，H5播放音频不依赖于任何插件，代码如下：
    <!-- controls：显示控制条；autoplay：自动播放；loop：自动循环播放 -->
<audio controls autoplay loop>
  <source src="music/fireworks.ogg" />
  <source src="music/fireworks.mp3" />
  <source src="music/fireworks.wav" />
  抱歉，当前浏览器不支持播放此音频！
</audio>
<!-- 注：audio标签目前只支持.ogg、.mp3、.wav三种音频格式 -->
<!-- 不同浏览器支持的音频格式不同，因此需要在服务端保存三种格式的音频文件 -->
  • <video>标签：视频播放标签，H5播放音频不依赖与任何插件，代码如下：
    <video controls autoplay loop>
  <source src="music/movie.ogg" />
  <source src="music/movie.mp4" />
  <source src="music/movie.webm" />
  抱歉，当前浏览器不支持播放此视频！
</video>
<!-- 注：video标签目前只支持.ogg、.mp4、.webm三种音频格式 -->
  • <figure>标签：多媒体标签（图片、音频、视频等），代码如下：
    <figure>
  <figcaption>多媒体标题</figcaption>
  <!-- 这里可以写多媒体代码或其他代码 -->
</figure>

HTML5 DOM拓展

  • 获取文档元素：H5新增了对元素的统一获取方法，代码如下：
    var box01 = document.querySelector(".box1"); // 只会选择符合条件的第一个元素
var boxes = document.querySelectorAll("div"); // 获取所有符合条件的元素的数组
  • 类名操作：H5新增了对元素类的添加、删除、切换、查找操作，代码如下：
    document.querySelector("box").classList.add("box1"); // 添加
document.querySelector("box").classList.remove("box1"); // 删除
var flag = document.querySelector("box").classList.contains("box1"); // 查询
document.querySelector("box").classList.toggle("box1"); // 切换
  • 自定义属性：H5支持自定义属性，但属性名必须以“data-”开头，代码如下：
    <div id="mydiv" data-name="myname" data-my-content="mycontent"></div>
<script>
  console.log(document.querySelector("#mydiv").dataset["name"]);
  console.log(document.querySelector("#mydiv").dataset["myContent"]);
</script>

HTML5 元素拖拽

  • 拖拽元素：要想让一个元素可以拖拽，需要设置元素的draggable属性为true
  • 目标元素：页面中的所有元素都一个作为拖拽的目标元素
  • 拖拽事件：
    • ondragstart：应用于拖拽元素，当拖拽开始时被回调
    • ondrag：应用于拖拽元素，整个拖拽过程都会不断回调这个方法
    • ondragleave：应用与拖拽元素，当鼠标离开拖拽元素时被回调
    • ondragend：应用于拖拽元素，当拖拽结束时被回调
    • ondragenter：应用于目标元素，当拖拽元素进入目标元素区域时被回调
    • ondragover：应用于目标元素，当拖拽元素停留在目标元素上时会不断回调这个方法
    • ondrop：应用于目标元素，当在目标元素上松开鼠标时被回调
    • ondragleave：应用于目标元素，当鼠标离开目标元素区域时被回调
  • 当拖拽元素悬浮在目标元素上方时，可以设置鼠标样式，代码如下：
    target.ondragover = function(event) {
    event.preventDefault();
};

HTML5 全屏

  • HTML5允许用户自定义网页上的任意元素全屏显示，代码如下：
    // 请求全屏代码：
if (elem.requestFullscreen) { // 可以默认请求全屏，screen小写
    elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { // 可以火狐请求全屏，Screen大写
    elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {  // 可以webkit请求全屏，Screen大写
    elem.webkitRequestFullScreen();
}
// 取消全屏代码：
if (elem.cancelFullscreen) {
    elem.cancelFullscreen();
} else if (elem.mozCancelFullScreen) {
    elem.mozCancelFullScreen();
} else if (elem.webkitCancelFullScreen) {
    elem.webkitCancelFullScreen();
}

HTML5 WEB存储

  • 传统的WEB存储方式：使用document.cookie存储。
    • 缺陷一：存储大小只有4K左右，太小
    • 缺陷二：需要使用截取字符串的方式解析，麻烦
  • HTML5提出的WEB存储方案：Storage存储，这种方式存储，可能存储在浏览器内存里面（window.sessionStorage），也有可能存储在计算机硬盘里面（window.localStorage）。使用这种方式存储数据的特性有：
    • 设置、读取方便
    • 容量较大：sessionStorage约5M，localStorage约20M
    • 只能存储字符串，如果是对象，可以先转化成字符串（JSON.stringify），然后存储
  • 浏览器存储：window.sessionStorage
    • 生命周期到管理浏览器窗口为止
    • 在同一个窗口下，数据可以共享
  • 本地存储：window.localStorage
    • 永久存储，除非手动删除
    • 可以多窗口共享
  • 使用方法（方法相同，这里以sessionStorage为例）：
    window.sessionStorage.setItem("username", "zhangsan"); // 存储数据
var value = window.sessionStorage.getItem("username"); // 获取数据
window.sessionStorage.setItem("username", "lisi"); // 修改数据
window.sessionStorage.removeItem("username"); // 删除数据
window.sessionStorage.clear(); // 清空数据
  • 查看存储位置方法：浏览器->F12打开开发者工具->Resource->local/session storage

HTML5 检测网络状态

// 当用户网络连接后回调的事件：
window.addEventListener("online", function() {
    alert("网络已连接！");
});
// 当用户断开网络连接后回调的事件：
window.addEventListener("offline", function() {
    alert("网络已断开！");
});

HTML5 应用缓存

  • HTML5支持应用缓存，需要创建一个cache manifest（缓存清单）文件
  • HTML5应用缓存的优势：
    • 可配置需要缓存的资源
    • 网络无连接时，应用仍可用
    • 本地读取缓存资源，提升访问速度，增强用户体验
    • 减少请求，缓解服务器负担
  • 操作流程：
    • 创建缓存清单文件：创建一个文件，以.appcache为后缀名，如my.appcache
    • 在HTML页面中添加如下代码：
      <html manifest="my.appcache">
    • appcache文件结构如下所示：
      CACHE MANIFEST
# .appcache文件以“#”开启注释
# 可以缓存网络文件，也可以缓存本地文件，本地文件用相对路径
CACHE:  # 指定需要缓存的静态资源：
    http://...........jpg
NETWORK:  # 指定要在线能访问的资源：
    http://...........jpg
FALLBACK:  # 当页面无法访问时，跳转到的页面：
    404.html

HTML5 地理定位

  • HTML5新增了获取用户地理信息的API
  • 简单代码如下：
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
} else {
    alert("你的浏览器不支持地理定位！");
}
function onSuccess (position) {
    var latitude = position.coords.latitude; // 获取维度
    var langitude = position.coords.longitude; // 获取经度
}
function onError (error) {
    alert(error);
}

posted on 2017-12-31 14:52  ITGungnir  阅读(267)  评论(0)  编辑  收藏  举报

导航