03HTML5

最新推荐文章于 2024-08-06 18:58:51 发布

Lonely Feather

最新推荐文章于 2024-08-06 18:58:51 发布

阅读量82

点赞数

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/qq_47469471/article/details/127648748

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

03 HTML5

1 HTML5 概述

之前的版本：
	HTML4 或者叫做 XHTML1.0(对语法要求比较严格)

2 HTML 5 新增标签

2.1新增语义化结构标签

就是具有语义的div，和div用法相同

<header></header>        定义页面或 section 的页眉
<footer></footer>        定义页面或 section 的页脚
<nav></nav>                定义页面的主要导航
<main></main>            定义文档的主要内容 (whatwg 没有语义， IE不支持)
<section></section>     定义页面中的一节或文章中的一段，里面通常带有标题
<article></article>        定义文章、博客、论坛帖子、用户评论等
<aside></aside>            定义侧边栏
<hgroup></hgroup>        包裹连续的标题，如文章主标题和副标题的组合 （w3c将其删除）

以上，出现某某某浏览器不支持和某某某将其删除的情况，那么就不要使用…

2.2 新增的状态标签

<meter></meter>   表示某种静止的状态，比如磁盘用量、电池电量、当前温度
<progress></progress>  表示进度完成了多少，比如进度条

2.3 新增列表标签

第一个：datalist

和input结合使用，在搜索框输入数据的时候会在下面显示可以选择的数据

<datalist></datalist>  里面需要嵌套 option 标签
与 input 配合，input 的 list 属性的值要与 datalist id 属性值一致

<input type="text" list="searchData">
<datalist id="searchData">
    <option value="安妮"></option>
    <option value="安妮呢"></option>
    <option value="abc"></option>
    <option value="ab"></option>
    <option value="abd"></option>
    <option value="b"></option>
    <option value="ddd"></option>
</datalist>

第二个：details

标签用于描述文档或文档某个部分的细节。

与 summary 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

属性 open 定义 details 是否可见。

<details>属性 open（添加open显示数据，没有添加需要点击才可以显示数据）
	<summary> 标题 嵌套在 details 的里面（为可见部分）
		
	</summary> 
</details>

2.4 新增注释标签

<ruby></ruby>
<rt></rt>  里面写注音，嵌套在 ruby 的里面

显示效果：

<ruby>
    饕餮
    <rt>taotie</rt>
</ruby>

<p>
	<ruby>饕<rt>tao</rt></ruby>
	<ruby>餮<rt>tie</rt></ruby>
	的意思是怪兽
</p>

2.5 新增标记标签

<mark></mark>  语义是标记的意思，用于搜索引擎搜索结果里标记关键字

2.6 新增图像标签（了解）

<figure> 用于文章的插图，包裹图片元素
	<figcaption></figcaption>  标题或图片的说明
</figure>

3 HTML5表单新增功能

1. 表单控件新增属性

placeholder 提示文字，有别于 value 值
required 表示该字段必填（可以不给值）
autofocus 自动获取焦点（可以不给值，打开页面的时候自动获取焦点）
autocomplete 设置浏览器自动补全（浏览器记忆曾经在该表单填写的内容） on/off(搜索框输入数据的时候会从来之前输入过的内容，添加属性可以将其取消off, 具体记忆是工具input标签的name属性，如果name属性发生修改，那么记忆的数据就不会显示)
pattern 正则填写验证规则

2 input type 属性新增值

2.1 规定类型的文本输入框

<!--邮箱-->
<input type="email" name="email" placeholder="请输入邮箱">

<!--url-->
<input type="url" name="url" placeholder="请输入网址">

<!--数字-->
<input type="number" name="num">
<input type="number" name="num" min='10' max='100' step='10'> 
	<!--step为设置的步长，每次添加10-->

<!--搜索框,表现形式与text相同, 无验证效果-->
<input type="search" name="kw" placeholder="搜索">

<!--电话号码 同于text  但是用移动设备，会直接弹出数字键盘, 无验证效果-->
<input type="tel" name="tel_num" placeholder="请输入电话号码">

2.2 范围选择框

<input type="range" name="range">
<input type="range" name="range" value="80">
<input type="range" name="range" value="80" max="100" min="0">

2.3 颜色选择框

<input type="color" name="color">

2.4 时间日期选择框

<input type="date" name="date">  选择日期 年月日
<input type="month" name="month"> 选择月份 年月
<input type="week" name="week"> 选择第几周 年周
<input type="time" name="time"> 选择时间 时分
<input type="datetime" name="datetime">  特别不好使，请直接使用下面的标签---
<input type="datetime-local" name="datetime"> 日期+时间

3 form 元素新增属性

novalidate  设置了该属性，表单提交的时候就不进行验证了； 不用给值

4 音视频

4.1 音视频的格式

视频： mp4（推荐，全兼容）、ogg、webm
音频： mp3（推荐，全兼容）、ogg、wav

4.2 视频标签 video

<video></video>
	src 视频地址
	controls  控制条；不用给值
	muted  静音；不用给值
	autoplay  自动播放；不用给值； chrome只有视频静音之后才允许自动播放
	loop  循环播放；不用给值
	preload 预先加载；不用给值,在视频未播放就继续缓存
	poster  封面图片，指定地址
	width  指定宽
	height 指定高

4.3 音频标签 audio

<audio></audio>
	src  音频地址
	controls  控制条；不用给值
	muted  静音；不用给值
	autoplay  自动播放；不用给值； chrome只有音频静音之后才允许自动播放
	loop  循环播放；不用给值
	preload 预先加载；不用给值

4.4 source 标签

标签允许您规定两个视频/音频文件共浏览器根据它对媒体类型或者编解码器的支持进行选择

属性	值	描述
src	URL	规定媒体文件的 URL。
type	MIME_type	规定媒体资源的 MIME 类型。
media	media_query	规定媒体资源的类型，供浏览器决定是否下载。

根据浏览器支持的视频格式，加载不用的视频
<video>
    <source src="../../sources/video/movie.mp4" type="video/mp4">
    <source src="../../sources/video/movie.ogg" type="video/ogg">
    <source src="../../sources/video/movie.webm" type="video/webm">
</video>

音频可以用
<audio>
	<source src="../../sources/video/movie.mp3" type="audio/mp3">
    <source src="../../sources/video/movie.ogg" type="audio/ogg">
    <source src="../../sources/video/movie.wav" type="audio/wav">
</audio>

5 HTML5 新增全局属性

hidden  隐藏元素（不占位置），不用给值

contenteditable 规定元素内容是否可编辑。 <element contenteditable="true|false">

contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 仅有Firefox可用

data-* 用于存储页面或应用程序的私有定制数据。

draggable 规定元素是否可拖动。 <element draggable="true|false|auto">

dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。 
<element dropzone="copy|move|link">

hidden 规定元素隐藏或不再相关。

spellcheck 规定是否对元素进行拼写和语法检查。 
<element spellcheck="true|false">

可以对以下内容进行拼写检查：
        <textarea> 元素中的文本
        可编辑元素中的文本
        input 元素中的文本值（非密码）
translate 规定是否应该翻译元素内容。 <element translate="yes|no">

兼容性处理

1 设置 meta

<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">

2 IE8 及以下浏览器识别H5新增标签

2.1 实现原理

JavaScript，document.create() 创建每一个H5新增的标签
在CSS中为刚创建的新标签设置CSS，display属性

<style>
    header,footer,nav,article,aside,section,main {
        display: block;
    }
</style>
<script>
    (function () {
        document.createElement('header');
        document.createElement('footer');
        document.createElement('nav');
        document.createElement('main');
        document.createElement('aside');
        document.createElement('article');
        document.createElement('section');
    })();
</script>

2.2 使用第三方库

使用html5shiv.min.js 来兼容ie浏览器

<!--[if lt ie 9]>
    <script src="/dist/js/html5shiv.min.js"></script>
<![endif]-->

3 IE 条件注释(了解)

3.1 关于条件注释

IE 中的条件注释对 IE 的版本和非 IE 版本有优秀的区分能力。
条件注释的基本结构和HTML的注释 `` 是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
IE 将会根据 if 条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
只有IE9 以及 IE9 以下浏览器可以识别

3.2 基本运算符

lt 小于

lte 小于等于

gt 大于

gte 大于等于

! 逻辑非

3.3 示例

<!--[if IE 8]> 仅IE8可见 <![endif]--> 
<!--[if gt IE 8]>仅IE 8以上可见<![endif]—>
<!--[if lt IE 8]>仅IE 8以下可见<![endif]—>
<!--[if gte IE 8]>IE 8及以上可见<![endif]—>
<!--[if lte IE 8]>IE 8及以下可见<![endif]—>
<!--[if !IE 8]>非IE 8的IE可见<![endif]-->
<!--[if !IE]><!--> 您使用不是 Internet Explorer <!--<![endif]-->