HTML5（概述）

最新推荐文章于 2021-11-08 12:35:24 发布

原创最新推荐文章于 2021-11-08 12:35:24 发布 · 612 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5（概述）

前端开发专栏收录该内容

31 篇文章

订阅专栏

HTML5概述、新特性：

学习过程：HTML5基础——HTML5进阶——HTML5答疑

发展历史：（之前所说的HTML指的是HTML4.0.1版本）

HTML4.0.1引入了XML，制定为XHTML1.0

HTML5理念：

1、避免不必要的复杂

2、支持已有的写法

3、解决实际问题

4、优雅降级

5、用户优先：用户>开发者>浏览器厂商>标准制定者>理论上的完美

①（避免不必要的复杂）EG：

Doctype的简化:

指示 web 浏览器关于页面使用哪个 HTML 版本简析编写的指令。

html4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

html5简化如下:

<!DOCTYPE html>

标准模式、怪异模式：

验证：

document.compatMode

BackCompat ——表示怪异模式

CSS1Compat ——表示标准模式

区别：

①标准盒模型和ie6混杂模式盒模型

②table字体在标准模式下继承body, 怪异模式不继承body

③ie6以下版本中可以给span等行级元素这是宽高

④即使父级没有高度，也可以这是百分比高度

⑤ie6以下margin: 0 auto不能左右居中

⑥ie6以下图片的padding失效

如下图所示：

注：只有使用IE盒子模型并且在IE6之前版本的浏览器中解析才会出现怪异模式。

②：优雅降级：将浏览器不支持的新的写法降级为浏览器的默认写法（eg:input框的type属性为新制定的值，若浏览器不支持则降级为text值）。

HTML5新特性：

1、新语义元素

2、forms 2表单元素 HTML网页表单的改进，其中为<input>标记引入了新属性。

3、音视频

4、画布

5、拖放

6、文件读取

7、回调函数管理api

8、地理位置

9、执行脚本多线程 worker

10、本地存储

11、websocket

12、HistoryAPI

13、跨文档通信 postmessage

HTML5结构元素：

1.header整个页面的头部，某块区域的标题、页眉

2.footer文档或者某一块的底部、页脚

3.main主要内容区域

4.nav 导航链接部分

5.section 页面中一个内容区域

6.article 它代表一个独立的、完整的相关内容块。

7.aside 元素表示一个页面的一部分，它的内容跟这个页面的其它内容的关联性不强，或者是没有关联，单独存在。

8.figure 标签规定独立的流内容（图像、图表、照片、代码等等）

主要语义化标签：

练习：使用HTML5新语义化标签实现如下结构。

HTML5功能元素：

video视频

audio音频

source资源

figcaption标签定义 figure 元素的标题（了解）

canvas画布

progress进程

①video:（controls属性代表控件、poster属性代表海报：默认视频没有开始播放时的封面）

<!-- 视频 -->
    <video src="./source/银临-【插曲】意难平(蓝光).mp4" width="600px" controls poster="./img/guhf.jpg"></video>

②audio：（source功能标签：加载资源时，按照资源的顺序加载。当有多个不同格式的同一资源时，按照顺序加载，若第一个资源加载完成，则不需要再加载后续资源）

 <!-- 音频 -->
    <audio controls>
        <source src="./source/银临 - 【插曲】意难平.flac">
        <source src="./source/银临 - 【插曲】意难平.mp3">
    </audio>

③process：（value代表当前进度，max与min属性代表进度条的最大值和最小值）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 进度条 -->
    <progress id="pro" max=100 min=0 value=0></progress>
    <span id="ok">完成</span>
    <script>
        console.log(document.compatMode); //判断当前是标准模式还是怪异模式
        var timer = setInterval(function() {
            if (pro.value == 100) {
                clearInterval(timer);
                ok.style.display = 'inline-block';
                return;
                // 将结果返回
            }
            pro.value += 5;
        }, 100)
    </script>
</body>

</html>

HTML5表单元素：

Input type回顾：

<input type="text">

<input type="radio"> 注：多个radio有同一name属性值时才会实现单选效果

<input type="checkbox"> 注：单选框和复选框被选择后的默认value属性值为on

<input type="password">

<input type="submit">

<input type="button">

<input type="file">

Input type新值：

< input type=“tel"> 注：移动端效果较明显：直接弹出拨号盘

<input type=“range">

<input type=“number"> 注：可以输入符号和数字

<input type=“search">

<input type=“email">

<input type=“date">/*日期文本框*/

<input type=“month">

<input type=“week">

<input type=“time">

<input type=“datetime-local”>表示本地日期和时间

<input type=“color">可选颜色

eg:range（滑条）

    <form action="">
        <!-- 滑条 -->
        <input id="range" type="range" max="100" min="0" value="0" step="10">
        <input type="submit">
    </form>
    <script>
        range.onclick = function() {
            console.log(this.value);
           // 注：哪个对象调用这个函数，这个函数就指向谁。this指向当前range。并获取当前value值。
        }
    </script>