HTML5标签_和属性手册

2、<form>标签常用属性详解在表单的<form>标记中还可以设置表单的基本属性，包括表单的名称、处理程序、传送方法等。

一般情况下，表单的处理程序action和传送方法method是必不可少的参数。

action属性定义一个URL。

当点击提交按钮时，向这个URL 发送数据。

真正处理表单的数据脚本或程序是在action属性里，这个属性值可以是程序或脚本的一个完整的URL。

说明：在该语法中，表单的处理程序定义的是表单要提交的地址，也就是表单中收集到的资料将要传递的程序地址。

这一地址可以是绝对地址，也可以是相对地址，还可以是一些其他的地址形式，例如发送E-mail等。

<form action="mailto:1347014722@"> </form>method属性用于向action URL 发送数据的HTTP 方法。

method=get：使用这个设置时，来访者输入的数据会附加在URL之后，由用户端直接发送至服务器，所以速度上会比post快，但缺点是数据长度不能够太长。

在没有指定method的情形下一般都会视get为默认值。

method=post：使用这种设置时，表单数据是与URL分开发送的，用户端的计算机会通知服务器来读取数据，所以通常没有数据长度上的限制，缺点是速度上也会比POST慢。

enctype属性对表单内容进行编码的MIME 类型。

Text/plain 以纯文本的形式传送application /x-www-form-urlencoded 默认的编码形式multipart/form-data MIME编码，上传文件的表单必须选择该项target属性目标显示方式。

target属性用来指定目标窗口的打开方式。

_blank是指将返回的信息显示在新打开的窗口中；_parent是指将返回信息显示在父级的浏览器窗口中；_self则表示将返回信息显示在当前浏览器窗口；_top表示将返回信息显示在顶级浏览器窗口中。

HTML5（⼀）——新增元素和属性⾃ H5 诞⽣以来，在 html4.0 中有些元素已被 H5 废弃，但是在 H5 中添加了很多新元素以及功能，今天我们学习 H5 中新增的元素和属性都有哪些？新增语义结构标签标签描述<article>定义页⾯独⽴的内容区域。

<aside>定义页⾯的侧边栏内容。

<bdi>允许您设置⼀段⽂本，使其脱离其⽗元素的⽂本⽅向设置。

<command>定义命令按钮，⽐如单选按钮、复选框或按钮<details>⽤于描述⽂档或⽂档某个部分的细节<dialog>定义对话框，⽐如提⽰框<summary>标签包含 details 元素的标题<figure>规定独⽴的流内容（图像、图表、照⽚、代码等等）。

<figcaption>定义 <figure> 元素的标题<footer>定义 section 或 document 的页脚。

<header>定义了⽂档的头部区域<mark>定义带有记号的⽂本。

<meter>定义度量衡。

仅⽤于已知最⼤和最⼩值的度量。

<nav>定义导航链接的部分。

<progress>定义任何类型的任务的进度。

<ruby>定义 ruby 注释（中⽂注⾳或字符）。

<rt>定义字符（中⽂注⾳或字符）的解释或发⾳。

<rp>在 ruby 注释中使⽤，定义不⽀持 ruby 元素的浏览器所显⽰的内容。

<section>定义⽂档中的节（section、区段）。

<time>定义⽇期或时间。

<wbr>规定在⽂本中的何处适合添加换⾏符。

新增标签使⽤时根据描述内容，在适当的地⽅使⽤新标签，应⽤的时候和其他标签是⼀样的，H5 新增标签使得⽹页结构更清晰明了，建议⼤家使⽤新增元素。

HTML5新增元素，标签总结总是遇到h5新标签的笔试题⽬，就查阅了资料来总结⼀下：1.form相关：（1）form属性：在HTML5中表单元素可放在表单之外，通过给该元素添加form属性来指向⽬标表单（form属性值设为⽬标表单id）即可。

（2）formaction属性：HTML5给提交按钮(如button、submit、image等)增加了formaction属性，以便提交到不同的服务器地址。

<input formaction="new.html" type="submit" value="提交到new.html">（3）formmethod属性：⽤法同formaction。

（4）placeholder属性：⽤于⽂本框处于未输⼊状态时的⼀种⽂字提⽰。

（5）autofocus属性：⾃动获得焦点，⼀个页⾯只能有⼀个控件具有该属性。

该属性⽆值，直接写就好。

<input name="username" autofocus type="text" id="username">（6）list属性：⽤于单⾏⽂本框，该属性的值为某个datalist元素的id，增加该属性后的单⾏⽂本框类似选择框()，但允许⽤户⾃定义输⼊，为了避免没有⽀持该元素的浏览器出现错误，我们通常使⽤CSS设置不显⽰。

<datalist> 标签:定义可选数据的列表。

与 input 元素配合使⽤，就可以制作出输⼊值的下拉列表。

order:<input list="list" name="order" autofocus type="text" id="order"><datalist id="list" style="display:none"><option value="1">1</option><option value="2">2</option><option value="3">3</option></datalist>（7）autocomplete属性：⾃动完成允许浏览器预测对字段的输⼊，HTML5实现了⾃定义设置该属性，避免了任何⼈都可以看到所存在的安全隐患。

详解Html5中video标签那些属性和⽅法前⾔最近在写⼀个⾃定义播放器, 写之前我们肯定要把播放器的属性和⽅法全部过⼀遍,知彼知⼰,⽅能百战不殆嘛...后⾯会把⾃⼰写的播放器和踩过的⼀些坑也上传上来video标签⾏内属性src：视频的URLposter：视频封⾯，没有播放时显⽰的图⽚preload：预加载autoplay：⾃动播放loop：循环播放controls：浏览器⾃带的控制条width：视频宽度height：视频⾼度webkit-playsinline="true" IOS下防⽌全屏播放playsinline="true" 同上x-webkit-airplay="true" ⽀持ios的AirPlay功能x5-video-player-type="h5" 启⽤同层H5播放器x5-video-player-fullscreen="true" 全屏设置x5-video-orientation="portraint" 竖屏style="object-fit:fill" 封⾯铺满muted="true" 静⾳播放应该还有⼀些...不过暂时没⽤到, 可以去查MDN⽂档video对象的属性和⽅法1.错误状态$video.error; //null:正常$video.error.code; //1.⽤户终⽌ 2.⽹络错误 3.解码错误 4.URL⽆效2.⽹络状态属性(有些⽐较常⽤)$video.currentSrc; //返回当前资源的URL$video.src = value; //返回或设置当前资源的URL$video.canPlayType(type); //是否能播放某种格式的资源$workState; //0.此元素未初始化 1.正常但没有使⽤⽹络 2.正在下载数据 3.没有找到资源$video.load(); //重新加载src指定的资源$video.buffered; //返回已缓冲区域，$video.buffered.end(0)拿到最后⼀刻的数据$video.preload; //none:不预载 metadata:预载资源信息 auto:3.准备状态$video.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA$video.seeking; //是否正在seeking4.播放状态( 常⽤ )$video.currentTime = value; //当前播放的位置，赋值可改变位置$video.duration; //当前资源长度流返回⽆限$video.paused; //是否暂停$video.defaultPlaybackRate = value;//默认的回放速度，可以设置$video.playbackRate = value;//当前播放速度，设置后马上改变$video.seekable; //返回可以seek的区域$video.ended; //是否结束$video.autoPlay; //是否⾃动播放$video.loop; //是否循环播放$video.play(); //播放$video.pause(); //暂停5.控制$video.controls;//是否有默认控制条$video.volume = value; //⾳量$video.muted = value; //静⾳video事件⽅法(常⽤的加*了)loadstart //客户端开始请求数据*progress //客户端正在请求数据suspend //延迟下载abort //客户端主动终⽌下载（不是因为错误引起），*error //请求数据时遇到错误stalled //⽹速失速*play //play()和autoplay开始播放时触发*pause //pause()触发loadedmetadata //成功获取资源长度*waiting //等待数据，并⾮错误*playing //开始回放canplay //可以播放，但中途可能因为加载⽽暂停*canplaythrough //可以播放seeking //资源寻找中seeked //资源寻找完毕*timeupdate //播放时间改变*ended //播放结束ratechange //播放速率改变durationchange //资源长度改变*volumechange //⾳量改变基本上⾃定义播放器代码都是基于这个api和属性来写的, 以后⽅便⾃⼰查阅....以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

HTML5的标签⼤全以及相关属性按字母顺序排列的标签列表4: 指⽰在 HTML 4.01 中定义了该元素5: 指⽰在 HTML 5 中定义了该元素标签描述45定义注释。

45定义⽂档类型。

45定义超链接。

45定义缩写。

45HTML 5 中不⽀持。

定义⾸字母缩写。

4定义地址元素。

45HTML 5 中不⽀持。

定义 applet。

4定义图像映射中的区域。

45定义 article。

5定义页⾯内容之外的内容。

5定义声⾳内容。

5定义粗体⽂本。

45定义页⾯中所有链接的基准 URL。

45HTML 5 中不⽀持。

请使⽤ CSS 代替。

4定义⽂本显⽰的⽅向。

45HTML 5 中不⽀持。

定义⼤号⽂本。

4定义长的引⽤。

45定义 body 元素。

45插⼊换⾏符。

45定义按钮。

45定义图形。

5定义表格标题。

45HTML 5 中不⽀持。

定义居中的⽂本。

4定义引⽤。

45定义计算机代码⽂本。

45定义表格列的属性。

45定义表格列的分组。

45定义命令按钮。

5定义下拉列表。

5定义定义的描述。

45定义删除⽂本。

45定义元素的细节。

5定义定义项⽬。

45HTML 5 中不⽀持。

定义⽬录列表。

4定义⽂档中的⼀个部分。

45定义定义列表。

45定义定义的项⽬。

45定义强调⽂本。

45定义外部交互内容或插件。

5定义 fieldset。

45定义 figure 元素的标题。

5定义媒介内容的分组，以及它们的标题。

5HTML 5 中不⽀持。

4定义 section 或 page 的页脚。

5定义表单。

45HTML 5 中不⽀持。

定义⼦窗⼝（框架）。

4HTML 5 中不⽀持。

定义⼦窗⼝（框架）。

4 HTML 5 中不⽀持。

定义框架的集。

4定义标题 1 到标题 6。

45定义关于⽂档的信息。

45定义 section 或 page 的页眉。

5定义有关⽂档中的 section 的信息。

5定义⽔平线。

45定义 html ⽂档。

45定义斜体⽂本。

45定义⾏内的⼦窗⼝（框架）。

45定义图像。

html5的基本标签HTML5的基本标签包括：1. `<html>`：定义HTML文档的根元素。

2. `<head>`：包含了文档的元数据信息，例如标题、字符编码等。

3. `<body>`：包含了文档的可见内容。

4. `<h1>` - `<h6>`：定义标题，从最高级的标题`<h1>`到最低级的标题`<h6>`。

5. `<p>`：定义段落。

6. `<a>`：定义超链接。

7. `<img>`：定义图像。

8. `<ul>`和`<li>`：定义无序列表和列表项。

9. `<ol>`和`<li>`：定义有序列表和列表项。

10. `<div>`：定义文档中的一个分区或节。

11. `<span>`：定义文档中的一个行内区域。

12. `<form>`：定义用户输入表单。

13. `<input>`：定义表单中的输入字段。

14. `<button>`：定义按钮。

15. `<table>`、`<tr>`、`<td>`：定义表格及其行、单元格。

16. `<video>`：定义视频。

17. `<audio>`：定义音频。

18. `<canvas>`：定义画布，用于绘制图形、动画等。

19. `<header>`：定义文档或节的页眉。

20. `<footer>`：定义文档或节的页脚。

以上只是HTML5的部分基本标签，还有很多其他标签可以用于创建和定义不同的元素和内容。

基础<!DOCTYPE> //定义文档类型。

<html> //定义HTML 文档。

<title> //定义文档的标题。

<body> //定义文档的主体。

<h1> to <h6> //定义HTML 标题。

<p> //定义段落。

<br> //定义简单的折行。

<hr> //定义水平线。

<!--...--> //定义注释。

格式<acronym> //定义只取首字母的缩写。

<abbr> //定义缩写。

<address> //定义文档作者或拥有者的联系信息。

<b> //定义粗体文本。

<bdi> //定义文本的文本方向，使其脱离其周围文本的方向设置。

<bdo> //定义文字方向。

<big> //定义大号文本。

<blockquote> //定义长的引用。

<center> //不赞成使用。

定义居中文本。

<cite> //定义引用(citation)。

<code> //定义计算机代码文本。

<del> //定义被删除文本。

<dfn> //定义定义项目。

<em> //定义强调文本。

<font> //不赞成使用。

定义文本的字体、尺寸和颜色<i> //定义斜体文本。

<ins> //定义被插入文本。

<kbd> //定义键盘文本。

<mark> //定义有记号的文本。

<meter> //定义预定义范围内的度量。

<pre> //定义预格式文本。

<progress> //定义任何类型的任务的进度。

<q> //定义短的引用。

<rp> //定义若浏览器不支持ruby 元素显示的内容。

一、文字备忘之标签HTML5中新增的标签<article> 定义文章<aside> 定义页面内容旁边的内容<audio> 定义声音内容<canvas> 定义图形<command> 定义一个控制按钮<datagrid> 指树或表格状数据格式中的动态数据<datalist> 定义一个下拉列表<details> 定义一个元素的细节<dialog> 定义会话或人的交谈<embed> 定义额外的交互内容或插件<figcaption>定义指定元素的标题<figure> 定义一组媒体内容，以及他们的标题<footer> 为章节或页面定义一个底部<header> 为章节或页面定义一个头部<hgroup> 定义文档中某段落的信息<keygen> 定义表单生成的关键<mark> 定义被标记的文本<meter> 定义预定义范围内的测量<nav> 定义导航链接<output> 定义某种类型的输出<progress> 定义任意种类任务的进程<rp> 定义浏览器不支持ruby元素的替代者<rt> 定义ruby注释的解释<ruby> 定义ruby 注释（中文注音或字符）。

<section> 定义章节<source> 定义媒体资源<summary> 定义某”detail”元素的头部<time> 定义日期/时间<video> 定义视频<wbr> 定义可能的换行HTML5支持且同时存在于HTML4中的标签<!–…–> 定义注释<!DOCTYPE> 定义文档类型<a> 定义超链接<abbr> 定义缩写<address> 定义地址元素<area> 定义图片地图的某区域<b> 定义加粗文字<base> 定义整个页面的基础URL <bdo> 定义文本显示的方向<blockquote> 定义一个长引用<body> 定义主体元素<br> 插入单个的换行<button> 定义按钮<caption> 定义表格的标题<cite> 定义引用<code> 定义计算机代码文本<col> 定义表格列的属性<colgroup> 定义表格列的组<dd> 定义个定义描述<del> 定义删除文本<dfn> 定义个定义项<div> 定义文档章节<dl> 定义定义列表<dt> 定义定义项<em> 定义强调文本<fieldset> 定义控件组<form> 定义表单<h1>到<h6> 定义头部1到头部6 <head> 定义文档信息<hr> 定义水平线<html> 定义个html文档<i> 定义倾斜文本<iframe> 定义内联替代窗口（框架）<img> 定义个图片<input> 定义输入域<ins> 定义插入文本<kbd> 定义键盘文本<label> 定义表单控件的标签<legend> 定义控件组的标题<li> 定义列表项<link> 定义相关资源<map> 定义图片地图<menu> 定义菜单列表<meta> 定义元信息<noscript> 定义无脚本章节<object> 定义内嵌对象<ol> 定义一个有序列表<optgroup> 定义个选项组<option> 定义下拉列表选项<p> 定义段落<params> 定义object的参数<pre> 定义预格式化文本<q> 定义短引用<s> 定义不再正确的文本<samp> 定义简单的计算机代码<script> 定义脚本<select> 定义可选择列表<small> 定义小点的文本<span> 定义文档章节<strong> 定义强调的文字<style> 定义一个样式定义<sub> 定义下标文字<sup> 定义上标文字<table> 定义表格<tbody> 定义表格的主体<td> 定义表格单元格<textarea> 定义文本域<tfoot> 定义表格底部<th> 定义表格头<thead> 定义表格头<title> 定义文档的标题<tr> 定义表格行<ul> 定义无序列表<var> 定义变量HTML5不支持的标签<acronym> 在HTML4.01中定义首字母缩略词<applet> 定义内嵌的小应用程序<basefont> 定义文档中基本的字体属性<big> 让文字变大点<center> 居中显示文字或内容<dir> 定义目录列表<font> 指定字体种类，大小，颜色等<frame> 在框架集中定义独有的窗体<frameset> 定义框架集，包含多个窗体<noframe> 当浏览器不支持框架的时候显示文字<strike> 定义删除线文本<tt> 定义电传打字机文本<u> 定义下划线文字<xmp> 定义格式化的文字HTML5中新增的标签<article> 定义文章<aside> 定义页面内容旁边的内容<audio> 定义声音内容<canvas> 定义图形<command> 定义一个控制按钮<datagrid> 指树或表格状数据格式中的动态数据<datalist> 定义一个下拉列表<details> 定义一个元素的细节<dialog> 定义会话或人的交谈<embed> 定义额外的交互内容或插件<figcaption> 定义指定元素的标题<figure> 定义一组媒体内容，以及他们的标题<footer> 为章节或页面定义一个底部<header> 为章节或页面定义一个头部<hgroup> 定义文档中某段落的信息<keygen> 定义表单生成的关键<mark> 定义被标记的文本<meter> 定义预定义范围内的测量<nav> 定义导航链接<output> 定义某种类型的输出<progress> 定义任意种类任务的进程<rp> 定义浏览器不支持ruby元素的替代者<rt> 定义ruby注释的解释<ruby> 定义ruby 注释（中文注音或字符）。

HTML5标签⼤全可以进⾏省略的标签不允许写结束标记的标签：area(定义图像映射中的区域)、base(为页⾯上的所有链接规定默认地址或默认⽬标)、br、col(为表格中⼀个或多个列定义属性值)、embed(定义嵌⼊的内容，⽐如插件--5)、hr、img、input、keygen、link、meta、param、source、track、wbr可以省略结束标记的标签：li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th可以完全省略的标签：html、head、body、colgroup、tbody新增的标签section:页⾯中的⼀个内容区块，⼊章节、页⾯、页脚或页⾯的其他部分、可以和h1、h2...等标签结合起来使⽤，表⽰⽂档结构。

article:表⽰页⾯中⼀块与上下⽂不相⼲的独⽴内容，⽐如⼀篇⽂章。

aside:定义 article 以外的内容。

aside 的内容应该与 article 的内容相关。

header:页⾯中的内容区块或整个页⾯的标题。

footer:页⾯中的内容区块或整个页⾯的脚注。

hgroup:页⾯中的内容区块或整个页⾯的标题进⾏组合。

nav:导航链接的部分。

figure:规定独⽴的流内容（图像、图表、照⽚、代码等等，内容应该与主内容相关，但如果被删除，则不应对⽂档流产⽣影响）。

video:视频。

exp:<video src="url" controls="controls">视频</video>audio:⾳频。

embed:⽤来嵌⼊内容（包括各种媒体）。

mark:变颜⾊，关注。

progress:进度条。

exp:<progress max="100" value="85"></progress>time:定义⽇期或时间，或者两者。

新增及删除标签一、结构标签1.section :一个内容区域块2.article:一块与上下文不相关的内容，如一篇文章3.asider:article以外，与article有关的辅助信息4.header:页面的标题5.hgroup:对整个页面或页面中一个内容区块的标题进行组合6.footer:脚注7.nav:导航链接8.figure:一块独立的内容二、媒体标签:1.video，<video width="320" height="240" controls="controls"><source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4">Your browser does not support the video tag.如果浏览器不支持video标签，将在这个位置显示出来</video>video 元素支持三种视频格式：Ogg = 带有Theora 视频编码和Vorbis 音频编码的Ogg 文件MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件WebM = 带有VP8 视频编码和Vorbis 音频编码的WebM 文件属性值描述autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。

controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。

height pixels设置视频播放器的高度。

loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。

HTML5中常⽤的标签（及标签的属性和作⽤）1、标签:<!DOCTYPE>作⽤:声明是⽂档中的第⼀成分，位于<html>标签之前。

2、标签:<html>作⽤:此元素可告知浏览器其⾃⾝是⼀个HTML⽂档。

属性:manifest:值(url)为脱机使⽤定义缓存信息。

3、标签:<head>作⽤:标签⽤于定义⽂档的头部，它是所有头部元素的容器。

属性:profile:值(URL)⼀个有空格分隔的URL列表，这些URL包含着有关页⾯的元数据信息。

4、标签:<title>作⽤:元素可定义⽂档的标题。

属性:dir:值(rtl,ltr)规定元素中内容的⽂本⽅向。

lang:值(language_code)规定元素中内容的语⾔代码。

xml:lang:值(language_code)规定XHTML⽂档中元素内容的语⾔代码。

5、标签:<body>作⽤:元素定义⽂档的主体。

属性:alink:值(rgb(x,x,x),#xxxxxx,colorname)不赞成使⽤，请使⽤样式取代它。

规定⽂档中活动链接(active link)的颜⾊。

background:值(URL)不赞成使⽤。

请使⽤样式取代它。

规定⽂档的背景图像。

bgcolor:值(reb(x,x,x),#xxxxxx,colorname)不赞成使⽤。

请使⽤样式取代它。

规定⽂档中的背景颜⾊。

link:值(reb(x,x,x),#xxxxxx,colorname)不赞成使⽤。

请使⽤样式取代它。

规定⽂档中未访问链接的默认颜⾊。

text:值(reb(x,x,x),#xxxxxx,colorname)不赞成使⽤。

请使⽤样式取代它。

规定⽂档中所以⽂本的颜⾊。

vlink:值(reb(x,x,x),#xxxxxx,colorname)不赞成使⽤。

请使⽤样式取代它。

规定⽂档中已被访问链接的颜⾊。

6、标签:<h1>到<h6>标签作⽤:<h1>-<h6>标签了定义标题。

h5标签和用法HTML5标签和用法HTML5是一种用于创建网页的标记语言，它引入了许多新的语义化标签，使得网页结构更加清晰明了。

以下是一些常见的HTML5标签及其用法：1. `<header>`：定义文档的页眉，通常包含网站的标题、logo、导航菜单等内容。

2. `<nav>`：用于定义导航链接的部分，可以包含站点的主要导航菜单。

3. `<section>`：用于划分文档的各个区域，每个区域可以有自己的标题。

4. `<article>`：定义一个独立的、完整的文章内容，如博客文章、新闻报道等。

5. `<aside>`：定义一个与页面内容相关的侧边栏，可以包含与主要内容相关的辅助信息。

6. `<footer>`：定义文档的页脚，通常包含版权信息、联系方式等内容。

7. `<main>`：标记文档的主要内容，每个页面应该只有一个`<main>`元素。

8. `<figure>`和`<figcaption>`：用于组织一组相关的媒体内容，例如图片、图表等，`<figcaption>`则用于对`<figure>`元素进行描述。

此外，HTML5还引入了许多新的表单标签和输入类型，例如`<inputtype="email">`用于输入电子邮箱地址，`<input type="date">`用于选择日期等。

使用HTML5标签有助于提高网页的可读性和可访问性，同时也在搜索引擎优化上起到一定的作用。

然而，为了确保在不支持HTML5的浏览器上正常显示，务必使用CSS或JavaScript进行适当的兼容性处理。

总之，HTML5标签丰富了前端开发者的工具箱，使得创建现代化、语义化的网页变得更加便捷。

通过熟练掌握这些标签的用法，我们可以构建更加清晰、结构合理的网页。

html5图⽚标签与属性
标记：
标记说明　<lmg>　图像
　<Map>　图像映射
　<Area>　图像映射中定义区域
<lmg>标记属性：
属性说明　Src　图像的源⽂件
　Alt　提⽰⽂字
　Width　宽度
　Height　⾼度
　Vspace　垂直间距
　Hspace　⽔平间距
　Align　排列
　Border 边框
<Area>标记属性：
属性说明　Shape　定义图像映射区域的形状
　Href 设置不同区域的链接地址
　Alt　设置替代⽂字
　Coords　设置区域坐标
Align属性植：
属性说明　Top　⽂字的中间线居于图⽚上⽅
　Middle　⽂字的中间线居于图⽚中间
　Bottom　⽂字的中间线居于图⽚底部
　Left　图⽚在⽂字的左侧
　Right　图⽚在⽂字的右侧
　Absbottom　⽂字的底线居于图⽚底部
　Absmiddle　⽂字的底线居于图⽚中间
　Baseline　英⽂⽂字基准线对齐
　Texttop　英⽂⽂字上边线对齐
Shape属性植：
属性说明　Rect　矩形区域
　Circle　椭圆形区域
　Poly　多边形区域。

HTML5常⽤标签整理<!--1. html5 ⽂本 --><div> <header> <hgroup> <h1>h1</h1> <h2>h2</h2> </hgroup> </header> <article>article</article> <footer>footer</footer></div><!-- 2. html5 ⼩标签 --><div> <a href="#header的位置" accesskey="a">快捷键a</a> <small>small</small> <big>big</big> <i>i</i> <blink>blink</blink> <cite>cite</cite> _sub ^sup <span>span</span> <dfn>dfn</dfn> <samp>samp</samp> <pre>pre</pre> <kbd>kbd</kbd> <address>addressaddressaddress</address> <textarea name="" id="" cols="30" rows="10">textareatextareatextarea</textarea> <code>code</code></div><div> <article>article</article> <aside>aside</aside> <details>details</details> <figcaption>figcaption</figcaption> <figure>figure</figure> <footer>footer</footer> <header>header</header> <hgroup>hgroup</hgroup> <menu>menu</menu> <nav>nav</nav> <section>section</section> <summary></summary> <progress value="20" max="100"></progress></div><!-- 3. html5 列表 --><div> <ul contenteditable="true"> <li>ul1</li> <li>ul2</li> <li>ul3</li> <li>ul4</li> </ul></div><div> <ol contenteditable="true"> <li>ol1</li> <li>ol2</li> <li>ol3</li> <li>ol4</li> </ol></div><div> <dl contenteditable="true"> <dt>dt1</dt> <dd>dd1</dd> <dt>dt2</dt> <dd>dd2</dd> <dt>dt3</dt> <dd>dd3</dd> <dt>dt4</dt> <dd>dd4</dd> </dl></div><!-- 4. html5 form --><div> <form id="" name="" action="" method="" autocompelete="on"> <label for="email">邮箱：</label> <input type="email" id="" name="" placeholder="" size="" required autofocus Pattern="[A-Za-z]{0-10}" min="" max="" value=""><!--四到⼗个英⽂字母 --> <input type="number"> <input type="seach"> <input type="date"> <input type="color"> <input type="text"> <input type="textarea"> <input type="password"> <input type="range"> <input type="radio" name="one"> <input type="radio" name="two"> <input type="checkbox"> <input type="file" multiple="multiple"> <button type="submit" value="" onclick="javascript:window.location.href='aa.htm'">submit</button> </form></div><div> <form> <fieldset> <legend>health information</legend> height: <input type="text" /> weight: <input type="text" /> </fieldset> </form></div><div> <input type="text" list="CityList"></input> <datalist style="display:none" id="CityList"> <option>one</option> <option>two</option> <option>three</option> <option>four</option> <option>five</option> <option>one01</option> <option>two01</option> </datalist></div><!-- 5. html5 select --><div> <select> <option>one</option> <option>two</option> <option>three</option> <option>four</option> <option>five</option> </select></div><!--6. html5 多媒体 below --><div> <img src="image1.png" alt="图⽚⽆法显⽰替换⽂本" title="提⽰⽂本" longdesc="这是吴倩在2014.10.12弄的⼀张⽆法显⽰的图，这⾥做个长的提⽰⽂本">img</img> <figcaption> <p>this is something about img</p> </figcaption> <audio autoplay="autoplay" controls="controls"> <source src="file.ogg"></source><!-- firefox --> <source src="file.mp3"></source><!-- chrome+safari --> <source src="file.wav"></source><!-- opera --> <a href="file.mp3">down this file</a> </audio><video controls preload> <source src="file.ogv" type="video/ogg" codecs="vorbis,theora"></source> <source src="file.mp4" type="video/mp4" codecs="avc1.42E01E,MP4A.40.2"></source> <source src="1.swf"></source> <a href="file.mp4">down this file</a></video><canvas id="myCanves">本游览器不⽀持HTML5的画布标记！</canvas><embed id="" src="" width="" height="" type="" wmode="Opaque" wmode="transparent"><object data="" type=""></object>块级元素列表<address> 定义地址<caption> 定义表格标题<dd> 定义列表中定义条⽬<div> 定义⽂档中的分区或节<dl> 定义列表<dt> 定义列表中的项⽬<fieldset> 定义⼀个框架集<form> 创建 HTML 表单<h1> 定义最⼤的标题<h2> 定义副标题<h3> 定义标题<h4> 定义标题<h5> 定义标题<h6> 定义最⼩的标题<hr> 创建⼀条⽔平线<legend> 元素为 fieldset 元素定义标题<li> 标签定义列表项⽬<noframes> 为那些不⽀持框架的浏览器显⽰⽂本，于 frameset 元素内部<noscript> 定义在脚本未被执⾏时的替代内容<ol> 定义有序列表<ul> 定义⽆序列表<p> 标签定义段落<pre> 定义预格式化的⽂本<table> 标签定义 HTML 表格<tbody> 标签表格主体（正⽂）<td> 表格中的标准单元格<tfoot> 定义表格的页脚（脚注或表注）<th> 定义表头单元格<thead> 标签定义表格的表头<tr> 定义表格中的⾏⾏内元素列表<a> 标签可定义锚<abbr> 表⽰⼀个缩写形式<acronym>定义只取⾸字母缩写<b> 字体加粗<bdo> 可覆盖默认的⽂本⽅向<big> ⼤号字体加粗<br> 换⾏<cite> 引⽤进⾏定义<code> 定义计算机代码⽂本<dfn> 定义⼀个定义项⽬<em> 定义为强调的内容<i> 斜体⽂本效果<img> 向⽹页中嵌⼊⼀幅图像<input> 输⼊框<kbd> 定义键盘⽂本<label> 标签为 input 元素定义标注（标记）<q> 定义短的引⽤<samp> 定义样本⽂本<select>创建单选或多选菜单<small> 呈现⼩号字体效果<span> 组合⽂档中的⾏内元素<strong>语⽓更强的强调的内容<sub> 定义下标⽂本<sup> 定义上标⽂本<textarea>多⾏的⽂本输⼊控件<tt> 打字机或者等宽的⽂本效果<var> 定义变量<button> 按钮<del> 定义⽂档中已被删除的⽂本<iframe> 创建包含另外⼀个⽂档的内联框架（即⾏内框架）<ins> 标签定义已经被插⼊⽂档中的⽂本<map> 客户端图像映射（即热区）<object> object对象<script> 客户端脚本。

HTML5details标签属性HTML5&details标签属性HTML5中新增的标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。

HTML5标签用法一般情况下，details用来对显示在页面的'内容做进一步骤解释。

其展现出来的效果和jQuery手风琴插件差不多。

其大致写法如下：Google Nexus 6商品详情：屏幕5.96” 2560x1440 QHD AMOLED display (493 ppi)电池3220 mAh相机13MP rear-facing with optical image stabilization 2MP front-facing处理器Qualcomm Snapdragon 805 processor首先是标签，里面接着是标题，这里面的内容一般简短，具有总结性，会展示在页面。

接着可以跟任意类型的HTML元素作为详情内容，这些内容需要在点击才会呈现。

上面代码呈现出来的效果会是下面这样的：最开始详情是隐藏的，当点击时都会展现。

open 属性当然，你也可以通过给标签设置open属性让它默认为展开状态。

Google Nexus 6商品详情：屏幕5.96” 2560x1440 QHD AMOLED display (493 ppi)电池3220 mAh相机13MP rear-facing with optical image stabilization 2MP front-facing处理器Qualcomm Snapdragon 805 processor此时默认会把详情展开，而点击标题后会折叠起来。

示例示例如上面那样，预览在线版本可点击此处。

浏览器兼容性由于是HTML5新标签，浏览器支持情况不是很理想。

从来自caniuse的数据来看，目前仅Chrome, Safari 8+ 和Opera 26+支持此标签。

可喜的是，如果你在caniuse开启了「显示来自UC浏览器的结果」选项的话，会发现，国产的UC浏览器也支持了此标签。

HTML5Video标签的属性、⽅法和事件汇总介绍前段时间写了⼀个基于html5 video的视频播放器，从起初的对其不了解，然后到能够写⼀个基本完善的⾃定义播放器。

在这个过程中，对video标签的属性，⽅法，事件有了个全⾯的认识。

下⾯分类列出来⼀下。

<video>标签的属性复制代码代码如下:src ：视频的属性poster：视频封⾯，没有播放时显⽰的图⽚preload：预加载autoplay：⾃动播放loop：循环播放controls：浏览器⾃带的控制条width：视频宽度height：视频⾼度html 代码复制代码代码如下:<video id="media" src="https:///test.mp4" controls width="400px" heigt="400px"></video>//audio和video都可以通过JS获取对象,JS通过id获取video和audio的对象获取video对象复制代码代码如下:Media = document.getElementById("media");Media⽅法和属性：HTMLVideoElement和HTMLAudioElement 均继承⾃HTMLMediaElement复制代码代码如下:Media.error; //null:正常Media.error.code; //1.⽤户终⽌ 2.⽹络错误 3.解码错误 4.URL⽆效<strong>//⽹络状态</strong>- Media.currentSrc; //返回当前资源的URL- Media.src = value; //返回或设置当前资源的URL- Media.canPlayType(type); //是否能播放某种格式的资源- workState; //0.此元素未初始化 1.正常但没有使⽤⽹络 2.正在下载数据 3.没有找到资源- Media.load(); //重新加载src指定的资源- Media.buffered; //返回已缓冲区域，TimeRanges- Media.preload; //none:不预载 metadata:预载资源信息 auto:</p> <p><strong>//准备状态</strong>- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA- Media.seeking; //是否正在seeking</p> <p><strong>//回放状态</strong></p> <p>Media.currentTime = value; //当前播放的位置，赋值可改变位置Media.startTime; //⼀般为0，如果为流媒体或者不从0开始的资源，则不为0Media.duration; //当前资源长度流返回⽆限Media.paused; //是否暂停Media.defaultPlaybackRate = value;//默认的回放速度，可以设置Media.playbackRate = value;//当前播放速度，设置后马上改变Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下⽂Media.seekable; //返回可以seek的区域 TimeRangesMedia.ended; //是否结束Media.autoPlay; //是否⾃动播放Media.loop; //是否循环播放Media.play(); //播放Media.pause(); //暂停<strong>//视频控制</strong></p> <p>Media.controls;//是否有默认控制条Media.volume = value; //⾳量Media.muted = value; //静⾳TimeRanges(区域)对象TimeRanges.length; //区域段数TimeRanges.start(index) //第index段区域的开始位置TimeRanges.end(index) //第index段区域的结束位置<strong>//相关事件</strong></p> <p> var eventTester = function(e){ Media.addEventListener(e,function(){console.log((new Date()).getTime(),e)},false);}eventTester("loadstart"); //客户端开始请求数据eventTester("progress"); //客户端正在请求数据eventTester("suspend"); //延迟下载eventTester("abort"); //客户端主动终⽌下载（不是因为错误引起）eventTester("loadstart"); //客户端开始请求数据eventTester("progress"); //客户端正在请求数据eventTester("suspend"); //延迟下载eventTester("abort"); //客户端主动终⽌下载（不是因为错误引起），eventTester("error"); //请求数据时遇到错误eventTester("stalled"); //⽹速失速eventTester("play"); //play()和autoplay开始播放时触发eventTester("pause"); //pause()触发eventTester("loadedmetadata"); //成功获取资源长度eventTester("loadeddata"); //eventTester("waiting"); //等待数据，并⾮错误eventTester("playing"); //开始回放eventTester("canplay"); //可以播放，但中途可能因为加载⽽暂停eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕eventTester("seeking"); //寻找中eventTester("seeked"); //寻找完毕eventTester("timeupdate"); //播放时间改变eventTester("ended"); //播放结束eventTester("ratechange"); //播放速率改变eventTester("durationchange"); //资源长度改变eventTester("volumechange"); //⾳量改变。