首页 > 其他分享 >HTML5新特性速查手册:新增标签与属性一览

HTML5新特性速查手册:新增标签与属性一览

时间:2024-08-31 17:22:19浏览次数:18  
标签:验证 标签 表单 HTML HTML5 速查 属性

前言:

网页的相关概念:

  1. 网址:我们在浏览器中输入的地址。

  2. 网页:浏览器所呈现的每一个页面。

  3. 网站:多个网页构成了一个网站。

网页的标准:

结构:HTML

表现:CSS

行为:JavaScript

一、什么是HTML?

HTML(是 HyperText Markup Language的缩写)

中文译名:超文本标记语言。

各部分理解:

超文本:指的就是超链接,这里可以理解为超越普通文本的限制,比普通的文本更强大,相比于普通文本,超文本除了文本数据外还可以存在视频、图片、音频和超链接等内容

标记:标记就是标签,HTML是由一系列预先定义好的标签组成,标签又称为元素,是HTML的基本组成单元

语言:HTML是一个标记语言,存在自己的语法规范和使用规则

HTML发展历史(了解即可)

1993年06月,由IETF(国际互联网工程任务组)发布了HTML1.0草案

1995年11月,由IETF正式发布HTML2.0

1996年09月,IETF关闭HTML工作组,由W3C(万维网联盟)接手HTML的规范制定

1997年01月,由W3C发布HTML3.2

1997年12月,由W3C发布HTML4.0

...

2000年左右:随着互联网的高速发展,产生了更多的需求,例如在线影音、在线游戏....

HTML4.0规范不支持这些需求的实现

2000年-2004年:W3C着手制定XHTML规范,并没有继续更新HTML规范,此时Adobe Flash Player出现,

其支持在线影音和在线游戏的特性,使其迅速占领了web互联网的应用市场

2004年-2014年:由WHATWG(众多浏览器厂商建立)和W3C一同制定了新一代的HTML标准,即HTML5

2014年,由W3C正式发布HTML5

随着HTML5的新标准出现,web网页开发进入迅速发展阶段,而flash由于其占用cpu资源过于庞大,逐渐走向没落,于2020年底已经停止更新

二、HTML5相关介绍

现在我们学习的HTML都是代指HTML5,即HTML最新一代的标准

  • HTML5 在狭义上是指新一代的HTML标准,在广义上是指:整个前端

因为HTML5的优势,使得其能完成很多功能:

  1. 针对 JavaScript ,新增了很多可操作的接口。

  2. 新增了一些语义化标签、全局属性。

  3. 新增了多媒体标签,可以很好的替代 flash 。

  4. 更加侧重语义化,对于 SEO 更友好。

  5. 可移植性好,可以大量应用在移动设备上

        SEO:指的是搜索引擎优化,目的是让浏览器的搜索引擎能够快速检索到你写的网页(在不花费额外费用的情况下,增加网站(由多个网页组成)的曝光度-->引流)

HTML5兼容性

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

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

三、新增语义化标签

1.新增布局标签

标签名语义单/双标签
header整个页面,或部分区域的头部
footer整个页面,或部分区域的底部
nav导航
article文章、帖子、杂志、新闻、博客、评论等。
section页面中的某段文字,或文章中的某段文字(里面文字通常里面会包含标题)。
aside侧边栏
main文档的主要内容(WHATWG没有语义,IE不支持),几乎不用。
hgroup包裹连续的标题,如文章主标题、副标题的组合(W3C 将其删除)

关于article和 section:

1. artical 里面可以有多个 section。

2. section 强调的是分段或分块,如果你想将一块内容分成几段的时候,可使用section元素。

3. article比 section 更强调独立性,一块内容如果比较独立、比较完整,应该使用article元素。

2.新增状态标签

2.1 meter 标签

  • 语义:定义已知范围内的标量测量。也被称为 gauge(尺度),双标签,例如:电量、磁盘用量等。

  • 常用属性如下:

属性描述
high数值规定高值
low数值规定低值
max数值规定最大值
min数值规定最小值
optimum数值规定最优值
value数值规定当前值

2.2 progress标签

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

  • 常用属性如下:

属性描述
max数值规定目标值。
value数值规定当前值。

3.新增列表标签

标签名语义单/双标签
datalist用于搜索框的关键字提示
details用于展示问题和答案,或对专有名词进行解释
summary写在 details的里面,用于指定问题或专有名词
input type="text" list="mydata">
<datalist id="mydata">
<option value="小明">小明</option>
<option value="小王">小王</option>
<option value="小李">小李</option>
<option value="VaporGas">VaporGas</option>
</datalist>
<details>
<summary>如何学好HTML?</summary>
<p>学好标签的使用</p>
</details>

4.新增文本标签

4.1文本注音

标签名语义单/双标签
ruby包裹需要注音的文字
rt写注音,rt 标签写在ruby的里面
<ruby>
<span>魑魅魍魉</span>
<rt>chī mèi wǎng liǎng </rt>
</ruby>

4.2文本标记

标签名语义单/双标签
mark标记

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

四、新增表单功能

1.表单控件新增属性

属性名功能
placeholder提示文字(注意:不是默认值,value是默认值),适用于文字输入类的表单控件。
required表示该输入项必填,适用于除按钮外其他表单控件。
autofocus自动获取焦点,适用于所有表单控件。
autocomplete自动完成,可以设置为on或off,适用于文字输入类的表单控件。注意:密码输入框、多行输入框不可用。
pattern填写正则表达式,适用于文本输入类表单控件。注意:多行输入不可用,且空的输入框不会验证,往往与required配合。

2.input新增属性值

属性名功能
email邮箱类型的输入框,表单提交时会验证格式,输入为空则不验证格式。
ur1ur1类型的输入框,表单提交时会验证格式,输入为空则不验证格式。
number数字类型的输入框,表单提交时会验证格式,输入为空则不验证格式。
search搜索类型的输入框,表单提交时不会验证格式。
tel电话类型的输入框,表单提交时不会验证格式,在移动端使用时,会唤起数字键盘。
range范围选择框,默认值为50,表单提交时不会验证格式。
color颜色选择框,默认值为黑色,表单提交时不会验证格式。
date日期选择框,默认值为空,表单提交时不会验证格式。
month月份选择框,默认值为空,表单提交时不会验证格式。
week周选择框,默认值为空,表单提交时不会验证格式。
time时间选择框,默认值为空,表单提交时不会验证格式。
datetime-local日期+时间选择框,默认值为空,表单提交时不会验证格式。

3.form标签新增属性

属性名功能
novalidate如果给form标签设置了该属性,表单提交的时候不再进行验证。

五、新增多媒体标签

1.视频标签

<video>标签用来定义视频,它是双标签。

属性描述
srcURL地址视频地址
width像素值设置视频播放器的宽度
height像素值设置视频播放器的高度
controls-向用户显示视频控件(比如播放/暂停按钮)
muted-视频静音
autoplay-视频自动播放
loop-循环播放
posterURL地址视频封面
preloadauto/metadata/none视频预加载,如果使用 autoplay,则忽略该属性。none:不预加载视频。·metadata:仅预先获取视频的元数据(例如长度)。auto:可以下载整个视频文件,即使用户不希望使用它。

2.音频标签

<audio>标签用来定义音频,它是双标签。

属性描述
srcURL地址音频地址
controls-向用户显示音频控件(比如播放/暂停按钮)
autoplay-音频自动播放
muted-音频静音
loop-循环播放
preloadauto/metadata/none音频预加载,如果使用autoplay,则忽略该属性。none:不预加载音频。·metadata:仅预先获取音频的元数据(例如长度)。·auto:可以下载整个音频文件,即使用户不希望使用它。

六、新增全局属性(了解)

属性名功能
contenteditable表示元素是否可被用户编辑,可选值如下:true:可编辑false:不可编辑
draggable表示元素可以被拖动,可选值如下:true:可拖动false:不可拖动
hidden隐藏元素
spellcheck规定是否对元素进行拼写和语法检查,可选值如下:true:检查false:不检查
contextmenu规定元素的上下文菜单,在用户鼠标右键点击元素时显示。
data-*用于存储页面的私有定制数据。

七、HTML5兼容性处理

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

<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">
  • 使用htm15shiv 让低版本浏览器认识H5的语义化标签。

<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->
  • 扩展

lt 小于

lte 小于等于

gt 大于

gte 大于等于

!逻辑非

  • 示例:

<!--[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]-->

标签:验证,标签,表单,HTML,HTML5,速查,属性
From: https://blog.csdn.net/weixin_52937170/article/details/141755376

相关文章

  • 在HTML中Form标签中常用的属性
    一.target属性:窗口的打开方式    1._self:在原窗口打开<div><ahref="https://www.baidu.com/"target="_self">点击跳转到百度</a></div>这是它运行的结果:点击图中的文字就会实现跳转并在原窗口打开 2. _blank:打开一个新的窗口<div>......
  • 标签贴错,AMD召回所有新一代CPU
    前言 上个月,AMD首席执行官苏姿丰博士在ComputeX开幕主题演讲上揭开了Zen5架构的神秘面纱。作为AMD未来几年CPU的台柱子,Zen5立刻被引入消费级市场,面向笔记本和台式机的产品在几周内相继发布。欢迎关注公众号CV技术指南,专注于计算机视觉的技术总结、最新技术跟踪、经......
  • PbootCMS生成的sitemap.xml中增加tag标签链接
    打开/apps/home/model/SitemapModel.php,在78行后面增加个指定分类标签调用代码。//指定分类标签调用publicfunctiongetSortTags($scode){$join=array(array('ay_content_sortb','a.scode=b.scode','LEFT'......
  • pbootcms内容详情页标签调用
    内容详情页标签适用范围:在内容详情页使用,包括单页和列表点击后的详情页标签作用:用于输出当前内容的相关信息{content:id}编号{content:scode}栏目编码{content:subscode}副栏目编码{content:sortname}栏目名称{content:subsortname}副栏目名称{conten......
  • PbootCMS网站标题描述等标签限制字数的办法完美结局
    对于内容列表标题的截取可以是[list:titlelen=60]、在内容详情页进行时间格式化可以写成{content:titlelen=60}substr=x,y能够用于截取一段。substr用于截取字符串的长度,传递两个数字,第一个数字代表起始位置,第二个数字代表截取的长度,如果只有一个数字,那么就会截取从这个数字......
  • html之form标签的四大护法
    form表单下面的标签记住下面这几个就可以了,常用的也就这么多。1.input--用户名输入框<inputtype="text"name="username"placeholder="用户名">--密码输入框<inputtype="password"name="password"placeholder="密码">--复选框<in......
  • source标签下的src属性中的url
    $html='<sourcesrc="http://live.aikan.miguvideo.com/envivo_w/2018/SD/imezone=UTC"></source>';正则表达式/<source\s+[^>]*?src="(.*?)"[^>]*>/i<source\s+:匹配<source标签开头,后面跟着一个或多个空白字符。[^>]*?:......
  • base标签
    -基准网址标记base标签是HTML语言中的基准网址标记,它是一个单标签,位于网页头部文件的head标签内,一个页面最多只能使用一个base元素,用来提供一个指定的默认目标,也算是一种表达路径和连接网址的标记。常见的url路径形式分别有相对路径与绝对路径,如果base标签指定了目标,浏览器将通......
  • html之select标签
    1.select标签用于做下拉选择框2.select元素中的option标签定义了列表中的可用选项3.selected表示默认,一般用在option标签里Select对象属性属性描述W3Cdisabled设置或返回是否应禁用下拉列表Yesform返回对包含下拉列表的表单的引用Yeslength返回下拉......
  • Day50.body内基本标签
    1.body内基本标签_h1~h6标题标签1~6级标签2.body内基本标签_b标签加粗,i标签斜体,u标签下划线,s标签删除线3.body内基本标签_p标签段落、br标签换行、hr标签水平分割4.body内基本标签_总结......