HTML5：掌握设计未来的钥匙

前言

HTML5 新特性

HTML

HTML5简介

什么是HTML5

HTML5 优势

  1. 针对 JavaScript ，新增了很多可操作的接口。
  2. 新增了一些语义化标签、全局属性。
  3. 新增了多媒体标签，可以很好的替代 flash 。
  4. 更加侧重语义化，对于 SEO 更友好。
  5. 可移植性好，可以大量应用在移动设备上。

HTML5兼容性

  • 支持： Chrome 、 Safari 、 Opera 、 Firefox 等主流浏览器。

    IE 浏览器必须是 9 及以上版本才支持 HTML5 ，且 IE9 仅支持部分 HTML5 新特性。

新增语义化标签

新增布局标签

image-20230926210155275

关于 article 和 section ：

  1. artical 里面可以有多个 section 。
  2. section 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用 section 元 素。
  3. article 比 section 更强调独立性，一块内容如果比较独立、比较完整，应该使用 article 元素。

新增状态标签

meter 标签

  • 语义：定义已知范围内的标量测量。也被称为 gauge （尺度），双标签，例如：电量、磁盘用量等。

  • 常用属性如下：

    image-20230926205842273

progress 标签

  • 语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签，例如：工作完成进度等。

  • 常用属性如下：

    image-20230926210240068

新增列表标签

image-20230926210327310

1
2
3
4
5
6
7
<input type="text" list="mydata">
    <datalist id="mydata">
        <option value="周冬雨">周冬雨</option>
        <option value="周杰伦">周杰伦</option>
        <option value="温兆伦">温兆伦</option>
        <option value="马冬梅">马冬梅</option>
    </datalist>
1
2
3
4
<details>
	<summary>如何走上人生巅峰？</summary>
	<p>一步一步走呗</p>
</details>

新增文本标签

文本注音

image-20230926210452989

1
2
3
4
5
<ruby>
	<span>魑魅魍魉</span>
	<rt>chī mèi wǎng liǎng </rt>
</ruby>

文本标记

image-20230926210533420

注意： W3C 建议 mark 用于标记搜索结果中的关键字。

新增表单功能

表单控件新增属性

image-20230926210657067

input 新增属性值

image-20230926210804232

form 标签新增属性

image-20230926210851006

新增多媒体标签

视频标签

video标签是双标签。

image-20230926211105954

音频标签

audio标签是双标签。

image-20230926211253550

新增全局属性（了解）

image-20230926211319268

HTML5兼容性处理

  • 添加元信息，让浏览器处于最优渲染模式。

    1
    2
    3
    4
    <!--设置IE总是使用最新的文档模式进行渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
    <meta name="renderer" content="webkit">

  • 使用 html5shiv 让低版本浏览器认识 H5 的语义化标签。

    1
    2
    3
    <!--[if lt ie 9]>
    <script src="../sources/js/html5shiv.js"></script>
    <![endif]-->

  • 拓展

    lt 小于

    lte 小于等于

    gt 大于

    gte 大于等于

    ! 逻辑非

  • 示例：

    1
    2
    3
    4
    5
    6
    <!--[if IE 8]>仅IE8可见<![endif]-->
    <!--[if gt IE 8]>仅IE8以上可见<![endif]—>
    <!--[if lt IE 8]>仅IE8以下可见<![endif]—>
    <!--[if gte IE 8]>IE8及以上可见<![endif]—>
    <!--[if lte IE 8]>IE8及以下可见<![endif]—>
    <!--[if !IE 8]>非IE8的IE可见<![endif]-->

    后记

    无