H5基础

H5介绍
H5新增的语义化标签
H5新增的状态标签
- <meter>标签
- <progress>标签
H5新增的列表标签
- <datalist>标签
- <details>和<summary>标签
H5新增的文本标签
- <ruby>和<rt>标签
- <mark>标签
H5新增表单控制属性
H5新增input标签的type属性值
多媒体标签
- <video>视频
  - 属性
- <audio>音频
  - 属性
新增全局属性
兼容性处理方式
- 添加元信息让浏览器处于最佳渲染模式
- 使用html5shiv.js让低版本的IE识别H5的语义化标签

H5介绍

H5是什么

HTML5是新一代的HTML标准，2014年10月W3C正式发布了HTML5版本。
官网地址:
W3C: https://html.spec.whatwg.org/multipage/index.html
WHATWG: https://whatwg-cn.github.io/html/multipage

HTML5狭义上是新一代HTML标准，在广义上是指整个前端。

H5的优缺点

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

H5的兼容性

目前几乎所有主流浏览器都支持HTML5。
IE浏览器必须是9以及以上才支持HTML5，且IE9仅支持部分HTML5新特性。

H5新增的语义化标签

<header>: 整个页面或部分区域的头部。
<footer>: 整个页面或部分区域的尾部。
<nav>: 导航区域。
<article>: 文章、帖子、杂志、新闻稿、博客、评论等独立区域。
<section>: 页面中的某段文字，或文章中的某段文字。<section>中通常会包含标题。
<aside>: 侧边栏区域。

<head>
    <h1>页面标题</h1>
</head>

<hr>
<!-- nav标签: 导航区域 -->
<nav>
    <div>导航取</div>
    <a href="#">订单</a>
    <a href="#">商品</a>
    <a href="#">购物车</a>
</nav>

<!-- article标签: 文章独立区域 -->
<article>
    <h2>文章标题</h2>
    <section>
        <h3>文章某一章节标题</h3>
        <p>文章某一章节段落</p>
    </section>
</article>

<hr>
<!-- aside标签: 侧边栏区域 -->
<aside>
    <nav>
        <ul>
            <li><a href="#">链接1</a></li>
            <li><a href="#">链接2</a></li>
            <li><a href="#">链接3</a></li>
        </ul>
    </nav>
</aside>
<hr>
<!-- 页脚 -->
<footer>
    <div>版权所有</div>
</footer>

注意:
1.<article>标签中可以包含<section>标签。
2.<section>强调的是分段或分块，如果你想让一块内容分为几段的时候可以使用<section>标签。
3.<article>标签更加强调独立性，一块内容如果比较独立，比较完整应该实用<article>标签。

H5新增的状态标签

可表示危险(红色)，警告(黄色)，正常(绿色)三种状态。

闭区间符号: [a,b] 含义: a<=x<=b
开区间符号: (a,b) 含义: a<x<b

当只有max和min时，只有一种状态正常状态

<meter max="100" min="0" value="90"></meter>

[max, +∞]: 绿色填充整个进度条

当有max、min、low有警告和正常两种状态

<meter max="100" min="0" value="19" low="20"></meter>

[min, low): 黄色

[low, +∞): 绿色

<meter max="100" min="0" value="20" low="20"></meter>

当有max、min、low、high有危险和警告和正常三种状态

[min, low): 红色
[low, high): 黄色
[high, +∞): 绿色

当有max、min、low、high、optimum有危险和警告和正常三种状态

最佳值optimum所在区间是[min,low)，区间[min,low]绿色，(low,high]黄色，(high,max]红色；
最佳值optimum所在区间是[low,high]，区间[min,low)黄色[low,high]绿色，(high, max]黄色；
最佳值optimum所在区间是(high,max]，区间[min,low)红色，[low,high)黄色；[high,max]绿色；

`<progress>`标签

语义: 显示某个任务完成进度的指示器，一般用于进度条，双标签。例如，工作任务进度。
常用属性:
max: 最大值。
value: 当前值。
允许设置宽高

H5新增的列表标签

`<datalist>`标签

<form action="#">
    <input type="text" list="my-data">
    <button>搜索</button>
</form>
<datalist id="my-data">
    <option value="上海">上海</option>
    <option value="海南">海南</option>
    <option value="上饶">上饶</option>
    <option value="北京">北京</option>
    <option value="东京">东京</option>
    <option value="nanjing">南京</option>
</datalist>

用法:
1.<input>中添加属性list=<datalist>中的id属性值
2.<datalist>中添加<option>标签，<option>标签中添加value属性，选中后value值会填充到<input>中
3.在<input>中具有模糊匹配option值的效果，将匹配的option值作为可选项
4.当datalist中的option的value值和optioin标签中的内容相同时，下拉框只展示value值，
如<option value="上海">上海</option>展示出上海
当datalist中的option的value值和optioin标签中的内容不相同时，下拉框展示value和optioin标签中的内容，
如<option value="nanjing">南京</option>

匹配规则: like '%key%'
匹配范围: option的value值和option标签中的内容

5.不同浏览器下拉框展示效果不同
Edge浏览器展示datalist:

`<details>`和`<summary>`标签

<details>
    <summary>列表标题一其内容折叠了</summary>
    <p>其内容如下xxxxxxx</p>
</details>

使用场景:
<details>: 用于展示问题和答案，或对专有名词的解释
<summary>: 写在<details>标签中，用于展示问题或专有名词

H5新增的文本标签

`<ruby>`和`<rt>`标签

<ruby>作用:
1.包裹需要注音的文字
2.可以嵌套
3.<ruby>标签中<hr>，<br>等失效

<rt>作用: Ruby Text
注音<ruby>中的文字
写在<ruby>标签中

<ruby>
    <span>魑魅魍魉</span>
    <rt>chī mèi wǎng liǎng</rt>
    <!-- 换行失效 -->
    <br>
    <!-- 分割线失效 -->
    <hr>
    <ruby>
        <span>您好</span>
        <rt>nín hǎo</rt>
    </ruby>
</ruby>

汉字转拼音工具

`<mark>`标签

作用:
标记文字高亮

<p>
    Lorem <mark>dolor</mark> sit amet consectetur adipisicing elit. Esse, voluptatem necessitatibus.
</p>

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

H5新增表单控制属性

`placeholder`: 提示信息

使用范围: 文字输入类表单控件
1.<input type="text" placeholder="请输入用户名">
2.<input type="password" placeholder="请输入用户名">
3.<textarea placeholder="文字"></textarea>

`required`: 必填项

具有校验字段必填的提示

使用范围: 适用于除了按钮以外其他表单控件
1.<input type="text" required>: 文本框必填
2.<input type="password" required>: 密码框必填
3.<input type="radio" required>: 单选框必选
required可以写在一组单选框任意一个选项上，如性别一组任意一个选项添加required属性，那么该组单选框必选

性别:
<input type="radio" name="sex" value="male" placeholder="男">男
<input type="radio" name="sex" value="female" required>女

4.<input type="checkbox" required>: 在一组复选框中，某一项必选，如下，乒乓球必选

<input type="checkbox" name="hobby" value="pingpang" required>乒乓球<br>

5.<textarea name="other" cols="15" rows="5" required></textarea>: 文本域必填

`autofocus`: 自动获取焦点，当页面加载时，浏览器会自动将焦点聚焦到表单中第一个具有`autofocus`属性的元素

使用范围: 适用于所有表单控件
1.<input type="text" autofocus>: 文本框自动获取焦点

2.<input type="password" autofocus>: 密码框自动获取焦点
3.<input type="radio" autofocus>: 单选框自动获取焦点(不推荐)

4.<input type="checkbox" autofocus>: 复选框自动获取焦点(不推荐)

5.<textarea autofocus></textarea>: 文本域自动获取焦点
6.<input type="submit" autofocus>: 按钮自动获取焦点(不推荐)

`autocomplete`: 值为`on`或`off`。模糊匹配历史输入值，展示出一个列表提供可选值，模糊匹配规则为`like 'key%'`，以关键字开头的历史输入值

使用条件:
1.<input type="text">标签中添加autocomplete属性，其值为on
2.浏览器开启保存并自动填充地址选项

3.点击提交按钮。提交表单后，浏览器会记录autocomplete文本框中的值，刷新页面后，可以模糊匹配历史输入值

使用范围: 适用于文字输入类表单控件，密码框和文本域不能使用
1.<input type="text" autocomplete="on">: 文本框开启模糊匹配历史输入值，其他表单控件无效

`pattern`: 正则表达式校验输入值

使用条件:
表单项必须是required必填的，否则无效

使用范围: 适用于文本类表单控件，文本域不能使用
1.<input type="text" name="username" placeholder="请输入账号" required pattern="\w{6}"><br>: 可用在输入文本框和密码框，其他表单控件无效
\w代表匹配任何数字、字母、下划线，{6}代表匹配6个字符。如果没有匹配成功则提示警告

`novalidate`禁用表单验证

novalidate: <form>标签新增属性novalidate，用于禁用表单验证，默认为false，即开启验证，设置为true则禁用验证，开启后即使表单有校验方式也会失效
使用范围: 适用于<form>标签，其他标签无效
1.<form action="" novalidate>: 禁用表单验证

H5新增`input`标签的`type`属性值

email:为空不校验

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

url:为空不校验

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

number:为空不校验

<input type="number" name="number" placeholder="请输入数字">

1.不能输入非数值，当输入非数值时会检验并不会填充到输入框内，但是并不是所有非数值按键都会校验，如e按键、复制粘贴输入了非数值在提交时也会校验
2.输入框右侧有加减按钮，可以快速输入数值
3.可以为负数

可以设置step属性，加减按钮的步长，默认为1

<input type="number" name="number" placeholder="请输入数值" step="2">

可以设置min和max属性，浏览器会默认调整输入框的宽度

<input type="number" name="number" placeholder="请输入数值" max="80" min="20">

当输入的值超出范围时，会校验并提示警告

当min,max,step都设置时，会以min + step作为合法数值，否则会提示最近合法数值

search

<input type="search" name="keyword" placeholder="请输入关键字">

search输入框会自动添加清除按钮，点击清除按钮会清空输入框内容，它的作用更多是语义化，明确可以输入关键字

tel

<input type="tel" name="phone" placeholder="请输入电话">

该属性值在PC没有特殊效果，文字和数值都可以输入，它的作用是在移动端，当输入时弹出的键盘只能是数字和符号，不能输入其他字符

range

<input type="range" name="range" placeholder="请输入范围">

可滑动范围选择，默认min=0,max=100

可以设置
min: 最小值
max: 最大值
value: 当前值

<input type="range" name="range" placeholder="请输入范围" min="20" max="50" value="28">

color

<input type="color" name="color" placeholder="请选择颜色">

颜色选择器，可以选择RGB方式，十六进制方式，或者色相方式拾取颜色并提交，数据格式都以16进制提交color=#b62f2f

日期表单控件

<!-- 可选某年某月 -->
<input type="month" name="month">
<!-- 可选某年某月某周 -->
<input type="week" name="week">
<!-- 可选某年某月某日 -->
<input type="date" name="date">
<!-- 某时某分 -->
<input type="time" name="time">
<!-- 某年某月某日某时某分 -->
<input type="datetime-local" name="datetime">

month=2024-01&week=2026-W18&date=2025-06-19&time=16%3A47&datetime=2026-10-23T19%3A47解码:
month=2024-01&week=2026-W18&date=2025-06-19&time=16:47&datetime=2026-10-23T19:47

多媒体标签

`<video>`视频

视频标签

<video src="../视频.mp4" width="500" height="300" controls muted autoplay loop></video>

属性

src

视频地址

width和height

可以调整宽高，高度大于视频高度时，控件会处于底部，视频部分垂直居中

`controls`: 显示控制栏

`muted`: 播放时默认静音

`autoplay`: 自动播放

自动播放的前提是需要播放时静音(必须有muted属性)，例如，有些网站是广告页，用户打开就自动播放并且有声音，体验非常不好，因此自动播放需要设置静音
但是有些场景是允许有声音自动播放的，比例浏览器会记录用户的媒体参与度，用户打开页面就播放这个动作会被浏览器标识，频率多了，浏览器认用户这个视频需要播放声音，因此在没有设置muted的情况下也会自动播放。查看谷歌浏览器媒体参与度:地址栏输入chrome://media-engagement，Is High = No:参与度低

`loop`: 循环播放

`poster`: 视频封面图片

封面图片宽高比需要和视频的宽高比一致，否则不能很好覆盖视频
poster="../resources/封面.jpg"

`preload`: 浏览器处理视频预加载方式

值有none、auto、metadata
none: 不进行预加载
无视频信息和缓存

metadata: 加载基础信息元数据和部分缓存

auto: 浏览器根据用户网速，自行加载信息和缓存

`<audio>`音频

<audio src="../resources/黄昏-罗文.mp3" controls muted autoplay preload="none"></audio>

属性

与<video>缺少了width、height、poster属性

`src`: 音频地址

`controls`: 显示控制栏

`muted`: 播放时默认静音

`autoplay`: 自动播放

注意: 静音状态下autoplay无效，因为静音自动播放无任何意义
即使没有autoplay属性，也会受媒体参与度的影响，会自动播放

`loop`: 循环播放

`preload`: 浏览器处理媒体预加载方式

值有none、auto、metadata
none: 不进行预加载
无基本信息和缓存

metadata: 加载基础信息元数据和部分缓存

auto: 浏览器根据用户网速，自行加载信息和缓存

css样式控制宽高

audio {
    width: 500px;
    /* 不建议调整高度，会让音频控件处于盒子底部 */
    height: 300px;
}

新增全局属性

contenteditable

作用:
允许盒子中的内容可以编辑

<style>
    .edit {
        width: 100px;
        height: 100px;
        background-color: grey;
    }
</style>
<div class="edit" contenteditable="true">Lorem ipsum!</div>
<span contenteditable>行内元素</span>

draggable

作用:
可拖动一个元素

<div class="model" draggable="true">可以拖动的盒子</div>

属性值:
true: 允许拖动
false: 不允许拖动(默认)

拖动后并不会固定，需要通过拖动事件来实现拖动后固定

hidden

作用:
隐藏元素

<div class="model" draggable="true">可以拖动的盒子</div>
<div class="model" hidden>隐藏了盒子，和display一样不占位，而visibility: hidden仍然占据元素为位置</div>
<div class="model">是否占位</div>

spellcheck

作用:
检查输入的文字是否规范，并不能很准确检查文字规范

<div class="edit" contenteditable="true" spellcheck="true">Lorem ipsumxxxxxxx</div>

使用条件:
1.打开浏览器拼写检查

2.在可输入元素中输入文字

属性值:
true: 开启拼写检查
false: 关闭拼写检查(默认)

contextmenu

自定义右键菜单，在元素上右击鼠标时，弹出自定义的右键菜单

data-*

作用:
用户储存定制私有数据

<input type="text" data-key1="value1" data-key2="value2">

在元素上自定义个key1和key2的属性，通过js可以取出所有data-*属性。

兼容性处理方式

由于H5新增标签并不是所有浏览器都支持，尤其是IE9以下的浏览器。因此要处理兼容性，兼容性问题并不能完全避免，但是可以尽量避免。

添加元信息让浏览器处于最佳渲染模式

<!-- 设置IE使用最新的文档模式进行渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 设置浏览器使用webkit(chromium)内核进行渲染，针对360等套壳浏览器 -->
<meta name="renderer" content="webkit">

使用html5shiv.js让低版本的IE识别H5的语义化标签

在head中添加如下语法代码:
如果浏览器小于IE9，则引入html5shiv.js(谷歌浏览器)

<head>
   <!--[if lt IE 9]>
   <script src="./html5shiv.js"></script>
   <![endif]-->
</head>

posted @ 2025-03-31 12:28 ethanx3 阅读(131) 评论(0) 收藏举报

刷新页面返回顶部

学习的敌人是自己的满足，要认真学习一点东西，必须从不自满开始。对自己学而不厌，对人家诲人不倦

H5基础

H5介绍

H5是什么

H5的优缺点

H5的兼容性

H5新增的语义化标签

H5新增的状态标签

<meter>标签

<progress>标签

H5新增的列表标签

<datalist>标签

<details>和<summary>标签

H5新增的文本标签

<ruby>和<rt>标签

<mark>标签

H5新增表单控制属性

placeholder: 提示信息

required: 必填项

autofocus: 自动获取焦点，当页面加载时，浏览器会自动将焦点聚焦到表单中第一个具有autofocus属性的元素

autocomplete: 值为on或off。模糊匹配历史输入值，展示出一个列表提供可选值，模糊匹配规则为like 'key%'，以关键字开头的历史输入值

pattern: 正则表达式校验输入值

novalidate禁用表单验证

H5新增input标签的type属性值

email:为空不校验

url:为空不校验

number:为空不校验

search

tel

range

color

日期表单控件

多媒体标签

<video>视频

属性

src

width和height

controls: 显示控制栏

muted: 播放时默认静音

autoplay: 自动播放

loop: 循环播放

poster: 视频封面图片

preload: 浏览器处理视频预加载方式

<audio>音频

属性

src: 音频地址

controls: 显示控制栏

muted: 播放时默认静音

autoplay: 自动播放

loop: 循环播放

preload: 浏览器处理媒体预加载方式

css样式控制宽高

新增全局属性

contenteditable

draggable

hidden

spellcheck

contextmenu

data-*

兼容性处理方式

添加元信息让浏览器处于最佳渲染模式

使用html5shiv.js让低版本的IE识别H5的语义化标签

公告

`<meter>`标签

`<progress>`标签

`<datalist>`标签

`<details>`和`<summary>`标签

`<ruby>`和`<rt>`标签

`<mark>`标签

`placeholder`: 提示信息

`required`: 必填项

`autofocus`: 自动获取焦点，当页面加载时，浏览器会自动将焦点聚焦到表单中第一个具有`autofocus`属性的元素

`autocomplete`: 值为`on`或`off`。模糊匹配历史输入值，展示出一个列表提供可选值，模糊匹配规则为`like 'key%'`，以关键字开头的历史输入值

`pattern`: 正则表达式校验输入值

`novalidate`禁用表单验证

H5新增`input`标签的`type`属性值

`<video>`视频

`controls`: 显示控制栏

`muted`: 播放时默认静音

`autoplay`: 自动播放

`loop`: 循环播放

`poster`: 视频封面图片

`preload`: 浏览器处理视频预加载方式

`<audio>`音频

`src`: 音频地址

`controls`: 显示控制栏

`muted`: 播放时默认静音

`autoplay`: 自动播放

`loop`: 循环播放

`preload`: 浏览器处理媒体预加载方式