HTML5学习-2-新增/修改HTML标签

本文介绍了HTML5新增和修改的标签,包括音频播放、画布、细节展示等功能性标签,以及表单、按钮等交互性标签的更新,旨在帮助读者了解HTML5的新特性和改进。

 

 

目录

标签-修改(声明)

标签-修改(超链接)

 

标签-新增(文章)

 

 

标签-新增(旁白)

 

标签-新增(音频播放)

标签-新增(文本方向)

标签-新增(覆盖文本方向)

标签-修改(按钮)

 

标签-新增(画布)

标签-新增(用户调用的命令)

标签-新增(选项列表)

 

标签-新增(细节)

 

 

标签-新增(对话框或窗口)

 

标签-修改(相关元素分组)

 

 

标签-新增( figure 标题)

 

 

标签-新增(独立的流内容)

 

 

标签-新增(页脚)

 

 

标签-修改(表单)

 

 

标签-新增(页眉)

标签-修改

 

标签-新增(主要内容)

 

标签-新增(带有记号的文本)

 

标签-重新定义(命令的列表或菜单)

 

标签-新增(命令/菜单项目)

标签-新增(标量值)

 

标签-新增(导航链接)

 

标签-新增(不同类型的输出)

标签-新增(进度)

 

标签-新增(ruby注释不支持时显示)

 

标签-新增(字符解释或发音)

标签-新增(ruby注释)

 

标签-新增(文章章节)

 

标签-修改(下拉列表) 标签-新增(播放媒介类型) 标签-新增(摘要) 标签-修改(多行文本输入)</a></p><p style="margin-left:0px" id="%3Ctime%3E%20%E6%A0%87%E7%AD%BE-%E6%96%B0%E5%A2%9E%EF%BC%88%E6%97%A5%E5%8E%86%E6%97%B6%E9%97%B4%E5%B1%95%E7%A4%BA%EF%BC%89-toc" name="tableOfContents"><a target="_self" data-cke-saved-href="#%3Ctime%3E%20%E6%A0%87%E7%AD%BE-%E6%96%B0%E5%A2%9E%EF%BC%88%E6%97%A5%E5%8E%86%E6%97%B6%E9%97%B4%E5%B1%95%E7%A4%BA%EF%BC%89" href="#%3Ctime%3E%20%E6%A0%87%E7%AD%BE-%E6%96%B0%E5%A2%9E%EF%BC%88%E6%97%A5%E5%8E%86%E6%97%B6%E9%97%B4%E5%B1%95%E7%A4%BA%EF%BC%89"><time> 标签-新增(日历时间展示)</a></p><p style="margin-left:0px" id="%3Ctrack%3E%20%E6%A0%87%E7%AD%BE-%E6%96%B0%E5%A2%9E%EF%BC%88%E5%A4%96%E9%83%A8%E6%96%87%E6%9C%AC%E8%BD%A8%E9%81%93%EF%BC%89-toc" name="tableOfContents"><a target="_self" data-cke-saved-href="#%3Ctrack%3E%20%E6%A0%87%E7%AD%BE-%E6%96%B0%E5%A2%9E%EF%BC%88%E5%A4%96%E9%83%A8%E6%96%87%E6%9C%AC%E8%BD%A8%E9%81%93%EF%BC%89" href="#%3Ctrack%3E%20%E6%A0%87%E7%AD%BE-%E6%96%B0%E5%A2%9E%EF%BC%88%E5%A4%96%E9%83%A8%E6%96%87%E6%9C%AC%E8%BD%A8%E9%81%93%EF%BC%89"><track> 标签-新增(外部文本轨道)</a></p><p style="margin-left:0px" id="%3Cvideo%3E%20%E6%A0%87%E7%AD%BE-%E6%96%B0%E5%A2%9E%EF%BC%88%E8%A7%86%E9%A2%91%EF%BC%89-toc" name="tableOfContents"><a target="_self" data-cke-saved-href="#%3Cvideo%3E%20%E6%A0%87%E7%AD%BE-%E6%96%B0%E5%A2%9E%EF%BC%88%E8%A7%86%E9%A2%91%EF%BC%89" href="#%3Cvideo%3E%20%E6%A0%87%E7%AD%BE-%E6%96%B0%E5%A2%9E%EF%BC%88%E8%A7%86%E9%A2%91%EF%BC%89"><video> 标签-新增(视频)</a></p><p style="margin-left:0px" id="%3Cwbr%3E%20%E6%A0%87%E7%AD%BE-%E6%96%B0%E5%A2%9E%EF%BC%88%E6%8D%A2%E8%A1%8C%E7%AC%A6%EF%BC%89-toc" name="tableOfContents"><a target="_self" data-cke-saved-href="#%3Cwbr%3E%20%E6%A0%87%E7%AD%BE-%E6%96%B0%E5%A2%9E%EF%BC%88%E6%8D%A2%E8%A1%8C%E7%AC%A6%EF%BC%89" href="#%3Cwbr%3E%20%E6%A0%87%E7%AD%BE-%E6%96%B0%E5%A2%9E%EF%BC%88%E6%8D%A2%E8%A1%8C%E7%AC%A6%EF%BC%89"><wbr> 标签-新增(换行符)</a></p><hr id="hr-toc" name="tableOfContents"/>

 

 

<!DOCTYPE>标签-修改(声明)

这个标签,很早就存在了,这里只是说明到了H5之后,该标签的变化;

<!DOCTYPE> 声明必须是HTML文档的第一行,来指示web浏览器关于页面使用哪个HTML版本进行编写的指令;

在HTML4.01中,<!DOCTYPE>声明引用DTD,因为HTML4.01基于SGML,DTD规定了标记语言的规则,这样浏览器才能正确地呈现内容,而HTML5不基于SGML,所以不需要引用 DTD,在HTML4.01中有三种<!DOCTYPE>声明。在 HTML5中只有一种:<!DOCTYPE html>

<a>标签-修改(超链接)

在 HTML 4.01 中,<a> 标签可以是超链接或锚。在 HTML5 中,<a> 标签始终是超链接,但是如果未设置 href 属性,则只是超链接的占位符。

HTML5 提供了一些新属性,同时不再支持一些 HTML 4.01 属性,新增的type属性、download属性、media属性感觉挺厉害;

<article>标签-新增(文章)

中文翻译是文章

<aside> 标签-新增(旁白)

<aside> 标签定义其所处内容之外的内容。

aside 的内容应该与附近的内容相关。

中文翻译旁白,有点类似于备注的感觉

<audio> 标签-新增(音频播放)

音频播放

<bdi> 标签-新增(文本方向)

文本方向

<bdo> 标签-新增(覆盖文本方向)

覆盖默认的文本方向

<button> 标签-修改(按钮)

HTML5中的新属性:autofocus, form, formaction, formenctype, formmethod, formnovalidate 以及 formtarget。

<canvas> 标签-新增(画布)

画布

<command> 标签-新增(用户调用的命令

command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮,比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。

<datalist> 标签-新增(选项列表)

<datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。使用 input 元素的 list 属性来绑定 datalist。

<details> 标签-新增(细节)

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

<dialog> 标签-新增(对话框或窗口)

定义对话框或窗口

<fieldset> 标签-修改(相关元素分组)

fieldset 元素可将表单内的相关元素分组。

HTML5 拥有如下属性:disabled、form、name,HTML 4.01 中不支持这些属性。

<figcaption> 标签-新增( figure 标题)

<figcaption> 标签定义figure元素的标题(caption)。

<figure> 标签-新增(独立的流内容

<figure>标签规定独立的流内容(图像、图表、照片、代码等等)。

<footer> 标签-新增(页脚)

<footer> 标签定义文档或节的页脚。

<form> 标签-修改(表单)

autocomplete属性不错

<header> 标签-新增(页眉)

定义文档的页眉(介绍信息)

<input> 标签-修改

width

  • pixels
  • %

定义 input 字段的宽度。(适用于 type="image")

step

number

规定输入字的的合法数字间隔。

required

required

指示输入字段的值是必需的。

form

formname

规定输入字段所属的一个或多个表单。

formaction

URL

覆盖表单的 action 属性。

(适用于 type="submit" 和 type="image")

formenctype

见注释

覆盖表单的 enctype 属性。

(适用于 type="submit" 和 type="image")

formmethod

  • get
  • post

覆盖表单的 method 属性。

(适用于 type="submit" 和 type="image")

formnovalidate

formnovalidate

覆盖表单的 novalidate 属性。

如果使用该属性,则提交表单时不进行验证。

formtarget

  • _blank
  • _self
  • _parent
  • _top
  • framename

覆盖表单的 target 属性。

(适用于 type="submit" 和 type="image")

height

  • pixels
  • %

定义 input 字段的高度。(适用于 type="image")

list

datalist-id

引用包含输入字段的预定义选项的 datalist 。

max

  • number
  • date

规定输入字段的最大值。

请与 "min" 属性配合使用,来创建合法值的范围。

maxlength

number

规定输入字段中的字符的最大长度。

min

  • number
  • date

规定输入字段的最小值。

请与 "max" 属性配合使用,来创建合法值的范围。

multiple

multiple

如果使用该属性,则允许一个以上的值。

name

field_name

定义 input 元素的名称。

pattern

regexp_pattern

规定输入字段的值的模式或格式。

例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。

placeholder

text

规定帮助用户填写输入字段的提示。

autocomplete

  • on
  • off

规定是否使用输入字段的自动完成功能。

 

autofocus

autofocus

规定输入字段在页面加载时是否获得焦点。

(不适用于 type="hidden")

 

<main> 标签-新增(主要内容)

<main> 标签规定文档的主要内容。<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。

<mark> 标签-新增(带有记号的文本

<mark> 标签定义带有记号的文本

<menu> 标签-重新定义(命令的列表或菜单)

目前所有主流浏览器都不支持 <menu> 标签。

<menuitem> 标签-新增(命令/菜单项目

可以从弹出菜单调用的命令/菜单项目

<meter> 标签-新增(标量值)

定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。可以达到类似于进度条的效果

<nav> 标签-新增(导航链接

定义导航链接的部分。

<output> 标签-新增(不同类型的输出

定义不同类型的输出,比如脚本的输出。

<progress> 标签-新增(进度

标示任务的进度(进程)。

<rp> 标签-新增(ruby注释不支持时显示)

<rp> 标签在ruby注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。ruby 注释是中文注音或字符。在东亚使用,显示的是东亚字符的发音。与 <ruby> 以及 <rt> 标签一同使用:

<rt> 标签-新增(字符解释或发音

<rt> 标签定义字符(中文注音或字符)的解释或发音。ruby 注释是中文注音或字符,在东亚使用,显示的是东亚字符的发音。与 <ruby> 以及 <rt> 标签一同使用:

<ruby> 标签-新增(ruby注释

<ruby> 标签定义 ruby 注释(中文注音或字符)。在东亚使用,显示的是东亚字符的发音。与 <ruby> 以及 <rt> 标签一同使用:

<section> 标签-新增(文章章节)

定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

<select> 标签-修改(下拉列表)

新增autofocus、form、required属性

<source> 标签-新增(播放媒介类型)

媒介元素(比如 <video> 和 <audio>)定义媒介资源。

<summary> 标签-新增(摘要)

<summary> 标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。

<textarea> 标签-修改(多行文本输入)

H5新增autofocusformmaxlengthplaceholderrequiredwrap属性

<time> 标签-新增(日历时间展示)

<time> 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。

该元素能够以机器可读的方式对日期和时间进行编码,这样,举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。

<track> 标签-新增(外部文本轨道

<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。

目前所有主流浏览器都不支持 <track> 标签。

<video> 标签-新增(视频)

<wbr> 标签-新增(换行符

Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符。

提示:如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用 <wbr> 元素来添加 Word Break Opportunity(单词换行时机)。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值