Html(工作版)

墨竹摇曳

已于 2022-02-10 09:33:22 修改

阅读量1.7k

点赞数 1

分类专栏： html 文章标签： HTML5

于 2019-06-01 16:21:06 首次发布

本文链接：https://blog.csdn.net/qq_34516556/article/details/82498960

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

头部 head

链接默认地址 base

<base href=""/>

target='_blank ; _parent ; _self ; _top ; framename'
请把 <base> 标签排在 head 元素中第一个元素的位置，这样 head 中其他元素就可以利用 <base> 元素中的信息了。
在一个文档中，最多能使用一个 <base> 元素。
href的值必须以http(s)开头,否则标签不生效
href的值是不是以/结尾区别很大,比如href='http://baidu.com/test'会默认以http://baidu.com/开头,而http://baidu.com/test/会默认以http://baidu.com/test/开头
注意页面中a标签的值,只要a标签带有href属性,就会被默认以base地址开头,除非a标签href为空

链接 link

<head>
<base href="">
<title></title>
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="handheld and (max-width:480px), screen and (min-width:960px)"/>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
//使用apple-touch-icon属性为“增加高光光亮的图标”；
//使用apple-touch-icon-precomposed属性为“设计原图图标”；
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png">
//将重复内容网页爬虫抓取指向同一网页
<link rel="canonical" href="http://www.runoob.com/tags/att-link-rel.html">
//预加载 Firefox
<link rel="prefetch" href="/images/test.jpg"/>
<link rel="prerender" href="http://www.example.com/">
<link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="dns-prefetch" href="//s.w.org">
<link rel="preconnect" href="https://www.example.com/">
</head>

元信息 meta

<meta charset="utf-8"> //编码
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> //手机页面参数
<meta name="keywords" content="" /> //关键词
<meta name="description" content="" /> //描述
<meta name="author" content="zxj, 2018/8/8/" />
<meta name="robots" content="all">
//all ; index ; follow ; none ; noindex ; nofollow

<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
<meta name="renderer" content="webkit">

更多资料

语义化标签

<!doctype html>
<html lang="zh">
	<head>
		<title>Title of the document</title>
		<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
		<style>
			header,nav,aside,main,article,section,figcaption,figure,footer,address,hgroup{display:block;}
		</style>
	</head>

	<body>
		//页头与导航
		//如果文档中有“前后”按钮，则应该把它放到 <nav> 元素中。
		//可以定义多个 header 元素。header 标签不能被放在 footer、address 或者另一个 header 元素内部
		<header>
			<nav>
				<a href=""></a>
				<a href=""></a>
				<a href=""></a>
			</nav>
		</header>
		
		//侧边栏
		//aside 标签定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。
		<aside></aside>
		
		//主体
	    //在一个文档中，不能出现一个以上的 main 元素。main 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。
		<main></main>
		
		//文章
		//article 标签规定独立的自包含内容。一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
		//article 元素的潜在来源：1论坛帖子 2报纸文章 3博客条目 4用户评论
		<article>
		  <h1></h1>
		  <p></p>
		</article>
		
		//片段
		//section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
		<section cite="www.baidu.com">
		  <h1></h1>
		  <p></p>
		</section>
	
		//独立元素
		//figure 元素规定独立的流内容（图像、图表、照片、代码等等）。
		//figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
		//figcaption 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
		<figure>
		  <figcaption></figcaption>
		  <img src=".jpg">
		</figure>
		
		//页脚与地址
		//footer 元素应当含有其包含元素的信息,页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
		//您可以在一个文档中使用多个 <footer> 元素。
		//footer 元素内的联系信息应该位于 <address> 标签中。
		//如果 <address> 元素位于 <article> 元素内部，则它表示该文章作者或拥有者的联系信息。
		//不应该使用 <address> 标签来描述邮政地址，除非这些信息是联系信息的组成部分。
		//通常的做法是将 <address> 元素添加到网页的头部或底部,比如 <footer> 元素中。 通常的做法是将 <address> 元素添加到网页的头部或底部,比如 <footer> 元素中。
	
		<footer>
		  <p>Posted by: W3School</p>
		  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
		  <address>
			Written by W3School.com.cn<br />
			<a href="mailto:us@example.org">Email us</a><br />
			Address: Box 564, Disneyland<br />
			Phone: +12 34 56 78
		  </address>
		</footer>
		
		//注解
		<ruby> 
			漢 <rt><rp>(</rp>han<rp>)</rp></rt> 
			字 <rt><rp>(</rp>zi<rp>)</rp></rt> 
		</ruby>
		
		//标题
		<hgroup>
			<h1></h1>
			<h2></h2>
			<h3></h3>
			<h4></h4>
			<h5></h5>
			<h6></h6>
		</hgroup>
		
		//段落
		<p></p>
		
		//按钮
		//在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。
		<button type="button" autofocus="autofocus" disabled="disabled">Click Me!</button>
		
		//短引用
		<q cite="http://www.wwf.org" quotes=‘"~" "~" "'" "'"’></q> 
	
		//块引用
		<blockquote cite="http://www.wwf.org"></blockquote>
	
		//缩写
		//IE 6 或更早版本的 IE 浏览器不支持 <abbr> 标签。
		<abbr title=""></abbr>
	
		//文本方向
		<bdo dir="rtl"></bdo>
		
		//行内标签
		<span></span>
		
		//换行
		<br />
		
		//水平线
		<hr />
		
		//折叠栏(Chrome,Safari支持)
		<details open>
		<summary>Copyright 1999-2011.</summary>
		<p> - by Refsnes Data. All Rights Reserved.</p>
		<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
		</details>

		//下拉输入框(IE10以下不支持)
		<input list="browsers">
		<datalist id="browsers">
		<option value="Internet Explorer">
		<option value="Firefox">
		<option value="Chrome">
		<option value="Opera">
		<option value="Safari">
		</datalist>
		
		//脚本
		//async需要ie10及以上
		//如果使用 "src" 属性，则 <script> 元素必须是空的
		<script defer="defer" async="async"></script>
	</body>
</html>

物理样式

<b></b>
<i></i>
<small></small>
<sup></sup>
<sub></sub>

内容样式

//强调
<em>斜体样式</em>
<strong>粗体样式</strong>

//删除文本
<del></del>

//插入文本
<ins></ins>

//引用
//它可以使你或者其他人从文档中自动摘录参考书目，并把它们作为脚注或者独立的文档来显示。<cite>标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。
<cite><a>斜体样式</a></cite>

//术语
//在技术文档中，当第一次新的特殊术语或短语时，应该将它们与普通文本分开，这样读者可以更好地理解文章当前的主题，而从那以后就不要再对这个术语进行任何标记了。
<dfn>斜体样式</dfn>

//代码文本
表示计算机源代码或者其他机器可以阅读的文本内容。
<code>源码</code>
<pre>    元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。    </pre>
`width='80'`定义每行的最大字符数（通常是 40、80 或 132）。

可以导致段落断开的标签（例如<h*>、`<p>` 和 `<address>` 标签）绝不能包含在 `<pre>` 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。

//样本文本
//表示一段用户应该对其没有什么其他解释的文本字符。要从正常的上下文抽取这些字符时，通常要用到这个标签。
//下面的 HTML 代码会显示为：字符序列 ae 可能会被转换为 æ 连字字符。
字符序列 <samp>ae</samp> 可能会被转换为 &aelig; 连字字符。

//键盘文本
键入 <kbd>quit(等宽样式)</kbd> 来退出程序，或者键入 <kbd>menu</kbd> 来返回主菜单。

//变量
<var>斜体样式</var>

//标记
<mark>新Html5标签,高亮样式</mark> 

//时间（ie9+）
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
 
<p>我在 <time datetime="2016-02-14">情人节</time> 有个约会。</p>

//单词换行时机（ie不支持）
<p>学习 AJAX ,您必须熟悉 <wbr>Http<wbr>Request 对象。</p>

列表

自定义列表 dl

<dl>
   <dt></dt>
   <dd></dd>
   <dd></dd>
   <dd></dd>
</dl>

有序列表 ol

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

start="5"不赞成使用,但是目前，仍然没有 start 属性的 CSS 替代方案。
reversed 列表顺序为降序

无序列表 ul

<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>

表单

不推荐使用（ie8无效）:

表单元素中的placeholder，autofocus，novalidate，required，form类属性。
color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url 类input元素。
textarea下maxlength属性无效，input元素multiple，pattern，accept无效，但readonly只读属性和input元素的maxlength属性有效。
除form系列属性外，其余均在ie10中被实现，ie10开始支持range，number，email，url类型input，但不支持step属性。
fieldset中disabled(ie9修复)的BUG。

表单 form

<form action="" method="post" autocomplete="on">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

target="_blank"
name="myForm" name 属性提供了一种在脚本中引用表单的方法。
accept-charset="GBK,gb2312,UTF-8"accept-charset 属性规定服务器用哪种字符集处理表单数据
enctype="application/x-www-form-urlencoded ; text/plain ; multipart/form-data"enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。在使用包含文件上传控件的表单时，必须使用multipart/form-data。
autocomplete="on"当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
novalidate="novalidate"如果使用该属性，则表单不会验证表单的输入。

表单分组 fieldset
fieldset 元素可将表单内的相关元素分组，注意在HTML 4.01 中不支持fieldset属性。

<form>
  <fieldset form="iceform" name="person">
    <legend align=‘right’>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

disabled='disabled' ie8无效
form='iceform' fieldset 所属的一个或多个表单,form 属性的值必须是所属表单的 id,如需引用一个以上的表单，请使用空格分隔的列表。

输入框 input

//文本输入框
<input type="text" name="username" autocomplete="on" autofocus="autofocus" placeholder="请输入用户名" maxlength="20" pattern="[A-z]{3}"  />

//密码输入框
<input type="password" name="pwd" autocomplete="on" placeholder="请输入密码" maxlength="20" pattern="[A-z]{3}"/>

//隐藏域
<input type="hidden" name="country" value="Norway" />

//提交按钮
<input type="submit" />

//重置按钮
<input type="reset" />

//搜索框
<input type="search" />

//button 类型常用于在用户点击按钮时启动 JavaScript 程序。
<input type="button" value="Click me" onclick="msg()" />

//上传输入框
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" multiple="multiple"/>

//数值输入框
<input type="number" name="points" min="0" max="10" />

//网址输入框
<input type="url" name="user_url" />

//image上传框
<input type="image" src="submit.jpg" alt="Submit" />

//选择输入框
<input type="checkbox" name="vehicle" value="Car" />
<input type="radio" name="sex" value="female" />

//数值滑块输入框
<input type="range" name="points" min="1" max="10" />

//颜色输入框
<input type="color" name="user_color" />

//日期选择框
<input type="date" name="user_date" />
<input type="datetime" name="user_date" />
<input type="datetime-local" name="user_date" />
<input type="month" name="user_date" />
<input type="week" name="user_date" />
<input type="time" name="user_date" />

//邮件输入框
<input type="email" name="user_email" />

name=""
autofocus="autofocus"
disabled="disabled"
required="required" 属性规定必需在提交之前填写输入字段。
value="" value 属性为 input 元素设定值。<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。value 属性无法与 <input type="file"> 一同使用。对于不同的输入类型，value 属性的用法也不同：
1. type=“button”, “reset”, “submit” - 定义按钮上的显示的文本
2. type=“text”, “password”, “hidden” - 定义输入字段的初始值
3. type=“checkbox”, “radio”, “image” - 定义与输入相关联的值
type="submit" type 属性规定 input 元素的类型。

文本类型
placeholder=""placeholder 属性适用于以下类型：text, search, url, telephone, email 以及 password。
autocomplete="off ; on"自动完成允许浏览器预测对字段的输入。适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
maxlength="85"maxlength 属性与 <input type="text"> 或 <input type="password"> 配合使用。
pattern="[A-z]{3}"pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式。pattern 属性适用于以下类型：text, search, url, telephone, email 以及 password 。(ie8不支持)
readonly="readonly"readonly 属性规定输入字段为只读。经常用于text和password。
size="5" size 属性规定以字符数计的元素的可见宽度。
选择类型:
checked="checked"checked 属性与 <input type="checkbox"> 或 <input type="radio"> 配合使用。
数字类型:
max="10 ; date值"max 属性规定输入字段所允许的最大值。max 和 min 属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。
min="10 ; date值"min 属性规定输入字段所允许的最小值。max 和 min 属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。
step="3"step 属性规定输入字段的合法数字间隔（假如 step=“3”，则合法数字应该是 -3、0、3、6，以此类推）。step、max 以及 min 属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。
上传类型:
accept="image/*,image/gif"accept 属性只能与 <input type="file"> 配合使用，它规定能够通过文件上传进行提交的文件类型，可多选。(ie9及以上)
multiple="multiple"multiple 属性规定输入字段可选择多个值。如果使用该属性，则字段可接受多个值，用于email 和 file。
image类型:
src=".jpg" 属性只能与 <input type="image"> 配合使用。它规定作为提交按钮显示的图像的 URL。
alt="" alt 属性只能与 <input type="image"> 配合使用。它为图像输入规定替代文本。
其他
form="formID"如需引用一个以上的表单，请使用空格分隔的列表。
formaction="demo_admin.asp"formaction 属性覆盖 form 元素的 action 属性。该属性适用于 type=“submit” 以及 type=“image”。
formenctype="multipart/form-data"formenctype 属性覆盖 form 元素的 enctype 属性。该属性与 type=“submit” 和 type=“image” 配合使用。
formmethod="post"formmethod 属性覆盖 form 元素的 method 属性。该属性与 type=“submit” 以及 type=“image” 配合使用。
formtarget="_blank"formtarget 属性覆盖 form 元素的 target 属性。该属性与 type=“submit” 以及 type=“image” 配合使用。HTML5 不支持框架和框架集。现在，parent, top 和 framename 值大多用于 iframe。
formnovalidate="formnovalidate"该属性适用于 <form> 以及以下类型的 <input>：text, search, url, telephone, email, password, date pickers, range 以及 color。

文本输入框 textarea

<textarea maxlength="30" placeholder="" required>

</textarea>

autofocus="autofocus"
form="form_id"
disabled="disabled"
name=""
readonly="readonly"readonly 属性规定文本区为只读。在只读的文本区中，无法对内容进行修改，但用户可以通过 tab 键切换到该控件，选取或复制其中的内容。
maxlength="number"
placeholder="请介绍自己..."placeholder 属性规定描述文本区域预期值的简短提示。该提示会在文本区域为空时显示，当字段获得焦点时消失。
required如果设置该属性，则规定文本区域（textarea）是必填的（以便顺利提交表单）。所有主流浏览器都支持 required 属性，除了 Internet Explorer 和 Safari。
wrap="soft(virtual);hard(physical);off;"表单中提交时，文本区域中的文本如何换行。"soft"和"hard"将实现文本区内的自动换行，以改善对用户的显示，但在传输给服务器时，“soft"只在用户按下 Enter 键的地方插入换行符，而"physical” 在自动换行处插入换行符，就像用户真的那样键入的。"off"不换行。

注意:

默认字体是等宽字体（通常是 Courier）。

下拉菜单 select

<select name="form1">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
</select>

name="form1"
disabled="disabled"
autofocus="autofocus"
form="formID"
multiple="multiple"multiple 属性规定可同时选择多个选项。对于 windows：按住 Ctrl 按钮来选择多个选项,对于 Mac：按住 command 按钮来选择多个选项,由于上述差异的存在，同时由于需要告知用户可以使用多项选择，对用户更友好的方式是使用复选框。可以把 multiple 属性与 size 属性配合使用，来定义可见选项的数目。
size="2"size 属性规定下拉列表中可见选项的数目。如果 size 属性的值大于 1，但是小于列表中选项的总数目，浏览器会显示出滚动条，表示可以查看更多选项。

选项组 optgroup

<select>
	<optgroup label="Swedish Cars" disabled>
	 <option value ="volvo" label="vol">Volvo</option>
	 <option value ="saab">Saab</option>
	</optgroup>
	
	<optgroup label="German Cars">
	 <option value ="audi">Audi</option>
	 <option value ="mercedes" selected>Mercedes</option>
	</optgroup>
</select>

disabled="disabled"
selected
<option> 与 </option> 之间的值是浏览器显示在下拉列表中的内容，而 value 属性中的值是表单被提交时被发送到服务器的值。如果没有指定 value 属性，选项的值将设置为 <option> 标签中的内容。

标注 label

  <label for=""></label>
  <input type="" name="" id="" />

form="formID"如需引用一个以上的表单，请使用空格分隔的列表。
for="inputID"

表格

<table>
  <caption align="bottom"></caption>
  <colgroup span="2" style="background:red"></colgroup>
  <colgroup><col span="3" style="background:yellow" /></colgroup>
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

colspan="2"colspan 属性规定表头单元格可横跨的列数。
rowspan="2"rowspan 属性规定表头单元格可横跨的行数。

图片 img

    <a href="a.php">
        <img src="planets.gif" alt="Planets" ismap/>
    </a>

属性:

ismap="ismap"当用户在 ismap 图像上单击了某处时，浏览器会自动把鼠标的 x、y 位置（相对于图像的左上角）以?x,y的方式发送到服务器端。只有当 <img> 元素属于带有有效 href 属性的 <a> 元素的后代时，才允许 ismap 属性。

图像地图

图像映射 area
定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。

<img src="planets.gif" alt="Planets" usemap="#planetmap" />

<map id="planetmap">

	<!--
	矩形：shape="rect"，coords="x1,y1,x2,y2"
	第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标。
	-->
	 <area shape="rect" coords="0,0,110,260" href ="sun.htm" alt="Sun" />
	 
	 <!--
	 圆形：shape="circle"，coords="x,y,z"
	 这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。
	 -->
	 <area shape="circle" coords="129,161,10" href ="mercur.htm" alt="Mercury" target="_blank"/>
	 
	 <!--
	 多边形：shape="poly"，coords="x1,y1,x2,y2,x3,y3,..."
	 每一对 "x,y" 坐标都定义了多边形的一个顶点,定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。
	 多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
	 -->
	 <area shape="poly" coords="180,139,14,15" alt="Venus" />
 	 <!--
	 其他区域：shape="default"
	 可以识别 shape 属性的 default 值的浏览器，可以提供一个包括全部热点的区域，以用于在超过其他热点定义的范围之外单击的情况。由于区域在 `<map>` 标签中是采用“先来先得”的顺序，所有必须将默认区域放置在后面。否则，默认区域会覆盖其他的图像映射中出现的所有区域。 
	 -->
</map>

属性:

shape = 'rect ; circle ; poly ; default'规定区域的形状。
shape 属性的值会影响浏览器对 coords 属性的解析。浏览器默认使用矩形区域，并期望能找到 4 个 coords 值。如果没有指定形状，而且在标签中也没有包括 4 个坐标，那么浏览器会忽略此元素。
usemap="name ; id"

注意:

<area> 标签定义图像映射（带有可点击区域的图像）内部的区域。
<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性(由浏览器决定)，所以我们需要同时向 <map> 添加 id 和 name 两个属性。
如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。

多媒体

音频 audio

<script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>

<audio controls autoplay loop preload="meta">
	<source src="song.ogg" type="audio/ogg" />
	<source src="song.mp3" type="audio/mpeg" />
	<source src="song.wav" type="audio/wav" />
	<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
	<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
	您的浏览器不支持音频。
</audio>

//w3c推荐写法
<audio controls="controls">
	<source src="song.mp3" type="audio/mp3" />
	<source src="song.ogg" type="audio/ogg" />
	<source src="song.wav" type="audio/wav" />
	<embed src="song.mp3" />
</audio>

视频 video

<script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>

<video controls autoplay loop muted preload="meta" poster="/images/w3school.gif">
	<source src="movie.ogg" type="video/ogg" />
	 <source src="movie.mp4" type="video/mp4" />
	 <source src="movie.webm" type="video/webm" />
	 <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
	 <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
	您的浏览器不支持视频。
</video>

//w3c推荐写法
<video controls="controls">
	<source src="movie.mp4" type="video/mp4" />
	<source src="movie.ogg" type="video/ogg" />
	<source src="movie.webm" type="video/webm" />
	<object data="movie.mp4">
		<embed src="movie.swf">
	</object>
</video>

属性:

autoplay 自动播放
controls 播放控件
loop 循环播放
muted 静音
preload='meta ; auto ; none' 预加载
poster='url'规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
audio/video属性、事件及方法

字幕

<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">

属性:

default 规定该轨道是默认的。
kind= captions ; chapters ; descriptions ; metadata ; subtitles 规定轨道的种类。
label=text 规定文本轨道的标签和标题。
srclang=en 规定轨道文本数据的语言。如果 kind 属性值是 “subtitles”，则该属性是必需的。

视频库
DPlayer
videojs

在线PDF

    <div id="PDF"></div>

    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.media.js"></script>

    <script>
    	//ie不支持
        $('#PDF').media({
            width: '100%',
            height: '500px',
            autoplay: true,
            src:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
        }); 
    </script>

flash

对象object 及参数param

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" type="application/x-shockwave-flash" data="fallback.swf">
	<param name="movie" value="http://pal6images.roogames.com/xianjian6x/images/xj6music.swf">
    <param name="quality" value="high">
    <param name="wmode" value="transparent">
    <param name="autoplay" value="true" />
    <param name="controller" value="true" />
    <embed src="http://pal6images.roogames.com/xianjian6x/images/xj6music.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent">
</object>

给flash传递参数，多个参数可以使用&符号连接，例如k1=v1&k2=v2&k3=v3;也可以传递xml文件，例如xml=dreamd.xml
<param name="vars" value="xml=dreamdu.xml" />
<param name="flashvars" value="autostart=true&file=video.flv" />

设置flash缩放模式，value取值为showall(显示全部内容,保持比例，但是上下，或者左右可能有空白), noborder(缩放可以裁减内容，保持比例，但是不留空白), exactfit(缩放按照flash设置的高度和宽度，不保持比例)，noscale(不缩放，原始比例)
<param name="scale" value="default" />

设置flash缩放的参考点，可用参数L(左侧)，R(右侧)，T(上侧)，B(下侧)，TL(左上)，TR(右上)，BL(左下)，BR(右下)，默认以中心作为参考点
<param name="salign" value="TL" />

WMV
<param name="url" value="3d.wmv">
<param name="filename" value="3d.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full" />
<param name="autosize" value="1">
<param name="playcount" value="1">

<param name="bgColor" value="#ff6600" />
<param name="themenu" value="false" />
<param name="base" value="url" />
<param name="BorderStyle" value="1" />
<param name="MousePointer" value="0" />
<param name="Enabled" value="1" />
<param name="Min" value="0" />
<param name="Max" value="10" />

注意：

在object中ie9才开始支持mp4、wmv、mov视频格式和MP3、wav、wma音频格式，ie始终不支持swf格式。
Chrome不支持object和embed中的wmv和mov格式。
js 与 flash 的相互调用

嵌入内容
定义嵌入的内容，比如插件。

<embed src="helloworld.swf" type="application/x-shockwave-flash">

autostart=true ; false
loop=正整数 ; true ; false
hidden=true ; no 控制面板
starttime=mm:ss(分：秒)
volume=0-100(int) 音量
units=pixels ; en 长度单位
palette=color ; color 前、背景色
showcontrols=true
controls=console ; smallconsole ; playbutton ; pausebutton ; stopbutton ; volumelever
该属性规定控制面板的外观。默认值是console。
console：一般正常面板；
smallconsole：较小的面板；
playbutton：只显示播放按钮；
pausebutton：只显示暂停按钮；
stopbutton：只显示停止按钮；
volumelever：只显示音量调节按钮。
align=top ; bottom ; center ; baseline ; left ; right ; texttop ; middle ; absmiddle ; absbottom
该属性规定控制面板和当前行中的对象的对齐方式。
top：控制面板的顶部与当前行中的最高对象的顶部对齐；
bottom：控制面板的底部与当前行中的对象的基线对齐；
baseline：控制面板的底部与文本的基线对齐；
texttop：控制面板的顶部与当前行中的最高的文字顶部对齐；
middle：控制面板的中间与当前行的基线对齐；
absmiddle：控制面板的中间与当前文本或对象的中间对齐；
absbottom：控制面板的底部与文字的底部对齐。

链接 a

//同一个页面不同部分的跳转，锚点的写法
目标元素：<p id="test"></p>     
锚点超链接：<a href="#test"></a>

//同一个页面不同部分的跳转，锚点的写法
目标元素：<a name="test"></a>     
锚点超链接：<a href="#test"></a>

//不同页面跳转，同时存在锚点
目标元素：a.html页面的<div id="test"/>   
锚点超链接：<a href="a.html#test" target='_blank'></a>

//不同页面带参数跳转，同时存在锚点
目标元素：a.php?p=abc页面的<div id="test"/>   
锚点超链接：<a href="a.php?p=abc#test" target='_blank'></a>

//网站目录
<frameset cols="100,*">
  <frame src="toc.html">
  <frame src="pref.html" name="view_frame">
</frameset>

//toc.html

<h3>Table of Contents</h3>
<ul>
  <li><a href="pref.html" target="view_frame">Preface</a></li>
  <li><a href="chap1.html" target="view_frame">Chapter 1</a></li>
  <li><a href="chap2.html" target="view_frame">Chapter 2</a></li>
  <li><a href="chap3.html" target="view_frame">Chapter 3</a></li>
</ul>

属性:

target='_blank’ ; _self ; _parent ; top
download='filename'ie不支持

内联框架 iframe

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

<iframe src ="/index.html" srcdoc="<i>替代文字</i>">
	<p>浏览器不支持iframe</p>
</iframe>

属性:

name
srcdoc iframe中需要render的内容，会覆盖掉对应的资源的内容。
sandbox设置一些安全规则。
iframe特性全解读

进度条(ie10及以上)

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

ie9及以下兼容写法

<!--[if lt IE 8]>
[if !IE 9] 非
[if lt(e) IE 8] 小于(等于)
[if gt(e) IE 8] 大于(等于)
[if (gt IE 5)&(lt IE 7)|(IE 8)] 且 或
<![endif]-->

HTML 5 全局属性

titie

accesskey
焦点快捷键。

<a href="http://www.baidu.com/" accesskey="g">baidu</a>

contenteditable

<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>

data-*
嵌入自定义数据

<ul>
<li data-animal-type="鸟类">喜鹊</li>
<li data-animal-type="鱼类">金枪鱼</li> 
<li data-animal-type="蜘蛛">蝇虎</li> 
</ul>

tabindex
当使用 “tab” 键进行导航时元素的顺序，Safari不支持。

<a href="http://www.w3school.com.cn/" tabindex="2">W3School</a>
<a href="http://www.google.com/" tabindex="1">Google</a>
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>

draggable
拖拽，ie8不支持。

<style>
	#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>

<script>
function allowDrop(ev){
    ev.preventDefault();
}
 
function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
}
 
function drop(ev){
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

<p>拖动 RUNOOB.COM 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="http://p3.qhimg.com/dmfd/320_180_/t01ea26c95b5388df04.jpg" draggable="true" ondragstart="drag(event)">