给标签添加onchange事件_HTML5新增标签和属性

HTML5 是最新的 HTML 标准。 HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件，HTML 4.01 已经改变了很多。今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。

新增标签：

canvas：定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

<canvas id="canvas">canvas>

audio：定义音频内容；

<audio src="/path/move.ogg" controls="controls" autoplay="autoplay" loop="loop" preload="auto">你的浏览器不支持audio标签的话就会显示这段内容audio>

video：定义视频；

<video src="/path/video.ogg" controls="controls" autoplay="autoplay" loop="loop">您的浏览器不支持 video 标签。video>

source：定义多媒体资源；

"controls">  <source src="/path/file.ogg" type="audio/ogg">  <source src="/path/file.mp3" type="audio/mpeg">   您的浏览器不支持该标签。

embed：定义嵌入的内容，比如插件；

<embed src="/path/file.swf" />

track：为音频、视频元素之类的媒介规定外部文本轨道；

<video width="320" height="240" controls> <source src="file.mp4" type="video/mp4"> <source src="file.ogg" type="video/ogg"> <track src="file.vtt" kind="subtitles" srclang="en" label="English"> <track src="file.vtt" kind="subtitles" srclang="no" label="Norwegian">video>

article：定义页面独立的内容区域

aside：定义页面的侧边栏内容

bdi：允许您设置一段文本，使其脱离其父元素的文本方向设置

command：定义命令按钮，比如单选按钮、复选框或按钮

<menu><command onclick="alert('Hello World')">  单击我command>menu>

details：用于描述文档或文档某个部分的细节

<details><summary>我是显示的标题summary><p>我是点击标题展开和隐藏的内容p>details>

dialog：定义对话框，比如提示框

summary：标签包含 details 元素的标题

figure：规定独立的流内容(图像、图表、照片、代码等等)

figcaption：定义

元素的标题

footer：定义 section 或 document 的页脚

header：定义了文档的头部区域

mark：定义带有记号的文本

<p>我是一段文本内容<mark>我是带背景色的mark>，哈哈p>

meter：定义度量衡。仅用于已知最大和最小值的度量

<meter value="3" min="0" max="10">3/10meter><br><meter value="0.6">60%meter>

nav：定义导航链接的部分

progress：定义任何类型的任务的进度

<progress value="22" max="100">progress>

ruby：定义 ruby 注释(中文注音或字符)

<ruby> 王 <rt> wang rt>ruby>

rt：定义字符(中文注音或字符)的解释或发音

rp：在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容

<ruby>王<rt><rp>(rp>wang<rp>)rp>rt>ruby>

section：定义文档中的节(section、区段)

标题内容

time：定义日期或时间

<p>我们早上 <time>9:00time> 开始上班。p><p>中国的 <time datetime="2010-02-14">情人节time>是那一天你知道吗？。p>

wbr：规定在文本中的何处适合添加换行符

datalist：定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值；

<input list="list" /><datalist id="list">  <option value="上海">  <option value="天津">  <option value="杭州">datalist>

keygen：规定用于表单的密钥对生成器字段；

<form action="/serverPath/path.php" method="get">用户名：<input type="text" name="usrName" />加密：<keygen name="security" />      <input type="submit" />form>

output：定义不同类型的输出，比如脚本的输出；

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="range" id="a" value="50">100+<input type="number" id="b" value="50">=<output name="x" for="a b">output>form>

新增属性：

contextmenu：contextmenu的作用是指定右键菜单显示内容，目前只在Firfox上可以用

<div contextmenu="idname"><menu type="context" id="idname">  <menuitem label="选择1">menuitem>  <menuitem label="选择2">menuitem>menu>div>

contentEditable：规定标签是否可编辑内容

<div contenteditable="true">我是一个可编辑的内容。div>

hidden：隐藏该元素

<p hidden>我是被隐藏的内容。p>

draggable：规定元素是否可拖拽

<div draggable="true">可拖动的divdiv>

data-*：用户自定义属性方式来保存数据

<p data-type-address="上海">我是一个段落p><div data-name="jack">你好，我是web前端开发工程师div>

placeholder占位属性：显示在输入框内的默认文本内容，输入内容时消失

type=type=

required必填属性：约束输入框必填

type="text" placeholder="请输入名称" required="required"/>

pattern正则属性：约束用户输入的值必须与正则匹配

type="text" name="pwd"  pattern="[A-Za-z]{3}" title="请输入3位字母密码">

autofocus自动聚焦属性：页面加载后光标默认聚焦到该元素

type="text" autofocus="autofocus"/>

autocomplete自动补全属性：用户输入过的内容，双击表单元素会显示历史输入，on是启用，off是关闭

type="email" name="email" autocomplete="on" />

formnovalidate不验证属性：规定在提交表单时不应该验证 form 或 input 域

<input type="submit" value="验证提交" /><br /><input type="submit" formnovalidate="formnovalidate" value="进行没有验证的提交" />

multiple多选属性：规定输入域可选择多个内容

type="file" name="img" multiple="multiple" />

HTML5表单新功能解析：

表单结构更自由，input标签可以不写在form里面，通过form属性关联

<input type="text" name="realname" form="form1"/><form id="form1" method="get">    <button>提交button>form>

表单重写属性：

formtarget - 重写表单的 target 属性

formaction - 重写表单的 action 属性

formmethod - 重写表单的 method 属性

formenctype - 重写表单的 enctype 属性

formnovalidate - 重写表单的 novalidate 属性

<input type="text" name="realname" form="form1"/><form id="form1" method="get">    <button formmethod="get"  formaction="a.html">get提交给a.htmlbutton>    <button formmethod="post" formaction="b.html">post提交b.htmlbutton>form>

color输入类型

type="color" onchange="document.bgColor=this.value" />

邮箱与URL输入:

     邮箱在移动端输入的时候会切换到对应的输入键盘，约束格式；      URL输入框部分浏览器会自动在开始处添加http:// ;

日期时间相关输入类型

<input type=date /> //日期类型<input type=time /> //时间类型<input type=month /> //月份<input type=week /> //周<input type=datetime /> //时间、日、月、年(UTC时间)<input type=datetime-local /> // 时间、日、月、年(本地时间)

数字输入类型

    max number 规定允许的最大值

    min  number 规定允许的最小值

  step number 规定合法的数字间隔(如果 step="10"，则合法的数是 -10,0,10,30 等)

<input type=number max="300" min="20" step="10" value="40" />

range滑块类型

     max number 规定允许的最大值

    min number 规定允许的最小值

    step number 规定合法的数字间隔(如果 step="3"，则合法的数是 -3,0,3,6 等)

    value number 规定默认值

"range" max="500" min="30" step="5" value="65" onchange="onchangeFn(this.value)"/>

2021，我们重新开始，一起学习，一起进步；