html_H5新增标签和属性

转载已于 2023-04-10 09:23:25 修改 · 121 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://b23.tv/ycTpFIY

文章标签：

#前端 #html5 #html

于 2023-03-31 15:49:18 首次发布

html-study 专栏收录该内容

2 篇文章

订阅专栏

HTML5不仅包括新一代HTML标准，还引入了新的语义化标签如<header>和<footer>，增强了JavaScript接口，提供了多媒体元素如<video>和<audio>，改进了表单控制和验证功能，并具备更好的SEO支持和跨平台兼容性。对于旧版浏览器，可通过html5shiv等工具进行兼容性处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html5简介
狭义上指新一代html标准，广义上指前端
优势
针对js，新增很多可操作接口；
新增一些语义化标签，全局属性；
新增多媒体标签代替flash；
更侧重语义化，对SEO更友好；
可移植性好，应用在移动端
兼容性
支持:Chrome、Safari、Opera、Firefox
新增布局标签

标签	语义
`header`	头部
`footer`	底部
`nav`	导航
`article`	文章、杂志、帖子、新闻、博客、评论等，article强调独立性，内部可以写多个section
`section`	某段文字，section强调是分段或分块
`aside`	侧边栏
main	文档主要内容(WHATWG无语义，IE不支持)
hgroup	包裹连续标题(w3c删除)

新增状态标签

meter定义已知范围内标量测量

meter属性	含义
optimum	最优值
min	最小值
max	最大值
low	低值
high	规定高值
value	当前值

progress显示某个任务完成进度

progress属性	含义
max	最大值
value	当前值

新增列表标签

datalist用于搜索框关键字提示

<input type="text" list="selectcont">
<datalist id="selectcont">
  <option>dd</option>
</datalist>

details用于展示内容答案，对专有名词解释

<details>
  <summary>执魔</summary>
  <p>小说，作者我是墨水</p>
</details>

summary写在details里，用于指定名词或问题

新增文本标签

文本注音ruby

  <ruby>
    <span>拼音</span>
    <rt>pin yin</rt>
  </ruby>

文本标记mark，w3c建议用于搜索显示的关键字

新增表单控件属性

属性	含义
`placeholder`	提示文字，适用于文字输入类的表单控件
`required`	必填项，适用于除按钮外表单控件
`autofocus`	自动获取焦点
`autocomplete`	自动完成，可以设置off或on，适用于文字输入类表单控件，密码框、多行输入框不可用
`pattern`	正则表达式，适用文本输入类表单控件，多行输入不可用，空的表单不会验证，往往与required配合使用

input新增type属性值

type取值	含义
email	提交时进行邮箱格式验证，为空不验证
number	数字类型，为空不验证
url	URL类型，为空不验证
search	搜索框
tel	移动端输入唤起数字键盘
range	默认50，提交时范围类型验证
color	颜色
date	日期
month	月
week	周
time	时间
datetime-local	日期+时间

form新增属性
novalidate表单所有输入不验证
新增视频标签video

video属性	含义
src	视频地址
controls	显示视频控件
muted	静音
autoplay	自动播放
loop	循环播放
poster	视频封面
preload	auto/metadata/nono，metadata仅预先获取视频原数据(如长度)，auto下载整个文件，如果设置autoplay，忽略该属性
width	宽
height	高

新增音频标签audio

audio属性	含义
src	视频地址
controls	显示视频控件
muted	静音
autoplay	自动播放
loop	循环播放
preload	auto/metadata/nono，metadata仅预先获取视频原数据(如长度)，auto下载整个文件，如果设置autoplay，忽略该属性

新增全局属性(了解)

属性	含义
contenteditable	是否可被编辑，值类型布尔值
draggable	是否可被拖动，值类型布尔值
hidden	隐藏，不占位
spellcheck	拼写检查，值类型布尔值
contentmenu	规定鼠标右键显示内容
data-*	储存页面私有数据

部分兼容性处理

设置IE总是使用最新文档模式进行渲染

 <meta http-equiv="X-UA-compatible" content="IE=Edge">

默认使用webkit内核进行渲染，针对360等双核浏览器

<meta name="rendener" content="webkit">

使用html5shiv让低版本浏览器认识h5语义化标签

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

lt小于， lte小于等于，gt大于， gte大于等于，!否

html5shi资源Google 资源库:
http://html5shiv.googlecode.com/svn/trunk/html5.js
html5shi资源百度静态资源:
http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js