1.

img标签可使用usemap属性， 需要指定map的name或者id（有的浏览器用name， 有的用id）， usemap引用map的时候要在map name或者id前加#。

map标签可以指定area标签，

area标签可以使map的某个区域有特别的能力， 比如点击增加链接等。有shape， coords， href， target， alt等属性， alt属性使得·光标在该区域时， 显示一些东西

ie不支持object标签。

2.

锚标签a，其中charset， 几乎主流的浏览器几乎都不支持 charset 属性。 只有 Firefox 和 Opera 支持 coords 属性。

href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。如果用户选择了 <a> 标签中的内容，那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档，或者执行 JavaScript 表达式、方法和函数的列表。 href可使用相对路径， 绝对路径

复杂的锚可以包含图像：

<a href="http://www.w3school.com.cn/index.html"><img src="/i/w3school_logo_white.gif" /></a>

img还可以指定border属性

<a href="value">

属性值

值 描述
URL 超链接的 URL。可能的值：

  • 绝对 URL - 指向另一个站点（比如 href="http://www.example.com/index.htm"）
  • 相对 URL - 指向站点内的某个文件（href="index.htm"）
  • 锚 URL - 指向页面中的锚（href="#top"）

hreflang 属性用于指定被链接文档的语言。

仅在使用 href 属性时才可以指定 hreflang 属性。和 lang 属性类似，hreflang 属性的值也是 ISO 标准的双字符语言代码。和 lang 属性不同的是，hreflang 属性不会指定标签中的内容所使用的语言，而是指定被 href 属性调用的文档所使用的语言。主流的浏览器几乎都不支持 hreflang 属性

用于 <a> 标签的可选属性 rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。rel 属性指定从源文档到目标文档的关系，而 rev 属性则指定从目标文档到源文档的关系。这两种属性可以在 <a> 标签中同时使用。

几乎没有浏览器支持 rel 属性。

rel， rev的属性值

值 描述
alternate 文档的可选版本（例如打印页、翻译页或镜像）。
stylesheet 文档的外部样式表。
start 集合中的第一个文档。
next 集合中的下一个文档。
prev 集合中的前一个文档。
contents 文档目录。
index 文档索引。
glossary 文档中所用字词的术语表或解释。
copyright 包含版权信息的文档。
chapter 文档的章。
section 文档的节。
subsection 文档的子段。
appendix 文档附录。
help 帮助文档。
bookmark 相关文档。
   
nofollow Google 使用 "nofollow"，用于指定 Google 搜索引擎不要跟踪链接。
licence  
tag  
friend  

只有 Firefox 和 Opera 支持 shape 属性。

target： 指明用什么显示连接的内容， 可以是frameset， 或者新的窗口（框架或者窗口）， 如果那个框架不存在， 就新打开一个。

_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。

3.

<hr /> 标签在 HTML 页面中创建水平线。

html注释会被浏览器忽略掉，

注释是这样写的：

实例

<!-- This is a comment -->

4.

段落是通过 <p> 标题定义的, 浏览器会自动地在段落的前后添加空行

5. 文本格式化

sub, sup文本在右下角， 和右上角

This text contains
<sub>subscript</sub>

<br />

This text contains
<sup>superscript</sup>

效果：

This text containssubscript
This text containssuperscript

<pre>： 保留空格， 换行等，可用于显示源代码等

计算机标签输出：这些标签常用于显示计算机/编程代码

<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />

<address> <!-- 用于mail地址等-->
  <a href="mailto:service@w3school.com.cn">用户服务信箱</a><br />
  上海赢科投资有限公司<br />
  金桥开发区 789 号<br />
</address>

title属性可使一些标签在鼠标指向的时候显示完整的标签值， 在ie5中仅acronym元素有效， 在Netscape 6.2中abbr 和 acronym 元素都有效

<abbr>， ACRONYM： 缩写

HTML中表示缩写<acronym>或<abbr>,区别:<abbr>表示简称，<acronym>仅仅代表首字母缩写，所以<abbr>的语义范围更大。

使用时，完整的词写在title属性中，例子：<abbr title="PageRank">PR</abbr>。

目前想到的ABBR及ACRONYM标签的两个好处：

1、增加可阅读性。我经常遇到样的情况，比如逛论坛时候会看到“NC”，假如这是我第一次看到，就会摸不着头脑，这是什么意思呢？南昌？尼采？最后不得不百度下，哦，原来是“脑残”啊，假如用了ABBR及ACRONYM标签，只需要把鼠标知道缩写词上就会显示完整的意思。

2、对搜索引擎友好。ABBR及ACRONYM标签的运用似乎还是SEO的重要一课。搜索引起会自动将“PR”和“PageRank”对应起来，搜索“PR”和“PageRank”，这个页面都会被检索到。

改变文字输出方向：

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

bdo：

允许作者为选定文本片断禁用双向法则， 覆盖双向算法， 比如邮件本身已经有处理， 在一些混合语言中会显示出错， 需要用bdo覆盖， 再用dir指明方向： dir = “ltr”或者“rtl”。

http://www.admin5.com/html/html_tag_ref/bdo.html

这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>

这是短的引用：
<q>
这是短的引用。
</q>

<p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
</p>

del/ins：删除线， 下划线

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

style：

设置文本样式

style="background-color:red"： 定义背景色

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸

style="font-family:arial;color:red;font-size:20px;"

text-align 属性规定了元素中文本的水平对齐方式：

style="text-align:center"

有两种使用 <a> 标签的方式：

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  2. 通过使用 name 属性 - 创建文档内的书签

使用 Target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

实例

HTML 文档内部的已命名的锚：

<a name="tips">Useful Tips Section</a>

然后，我们创建指向相同文档中“有用的提示”部分的链接：

<a href="#tips">Visit the Useful Tips Section</a>

或者，创建从另一个页面指向该文档中“有用的提示”部分的链接：

<a href="http://www.w3school.com.cn/html_links.htm#tips">
Visit the Useful Tips Section
</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

链接电子邮件：

<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>

<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>

<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>

表格的表头使用 <th> 标签进行定义。

<td>&nbsp;</td>
： 显示空单元格

<caption>我的标题</caption>

<th colspan="2">电话</th>： 跨两列

<th rowspan="2">电话</th>： 跨两行

表格可以嵌套。

列表：

<ul> <!-- 无序列表-->
    <li>苹果</li>
    <li>香蕉</li>
    <li>菠萝</li>
   </ul>

可用属性type定义标签的样式， 如<ul type="circle">

<ol> <!-- 有序号列表-->
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

可用属性type定义标签的样式， 如<ol type="A">

<dl><!-- 自定义列表， dt： 自定义标签， dd: 表项-->
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

列表也可嵌套

<table border="1"
cellpadding="10">： table的内容到边框的距离

<table border="1"
cellspacing="10">： table的内容之间的距离

<table border="1"
bgcolor="red">： 表格背景颜色

<table border="1"
background="/i/eg_bg_07.gif">： 表格背景图片

<td bgcolor="red">First</td>： 单元格的背景颜色

<td
  background="/i/eg_bg_07.gif">
  Second</td>： 单元格的背景图片

frame属性：设置表格边框的样式， 上边狂， 下边框， 上下边框， 左右边框

<table frame="below">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

表单

<input type="radio" checked="checked" name="Sex" value="male" />

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>
<textarea rows="10" cols="30">
The cat was playing in the garden.
<form>
<input type="button" value="Hello world!">
</form>
<fieldset>
<legend>健康信息：</legend>
<form>
<label>身高：<input type="text" /></label>
<label>体重：<input type="text" /></label>
</form>
</fieldset>
<form action="/example/html/form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
<form name="input" action="/html/html_form_action.asp" method="get">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" checked="checked" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
<br /><br />
<input type="submit" value="Submit" />
</form>
<form name="input" action="/html/html_form_action.asp" method="get">
Male:
<input type="radio" name="Sex" value="Male" checked="checked">
<br />
Female:
<input type="radio" name="Sex" value="Female">
<br />
<input type ="submit" value ="Submit">
</form>
<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">
<h3>这个表单会把电子邮件发送到 W3School。</h3>
姓名：<br />
<input type="text" name="name" value="yourname" size="20">
<br />
电邮：<br />
<input type="text" name="mail" value="yourmail" size="20">
<br />
内容：<br />
<input type="text" name="comment" value="yourcomment" size="40">
<br /><br />
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

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


<form>用户：<input type="text" name="user"><br />密码：<input type="password" name="password"></form>

<img src="boat.gif" alt="Big Boat">： 在图像不能显示的时候用 alt替代显示
<body background="/i/eg_background.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面，图像会进行重复。</p>

图像对齐：<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>

<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>

<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>

<p><img src ="/i/eg_cute.gif" align ="left"> 带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。</p>

<p><img src ="/i/eg_cute.gif" align ="right"> 带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。</p>

<img src="/i/eg_mouse.jpg" width="50" height="50">

<img border="0" src="/i/eg_buttonnext.gif" />： 不带边框

<img src="/i/eg_planets.jpg" ismap />： 把整张图都变成map， 且状态栏会输出坐标等

<body bgcolor="#ffffff" text="yellow">： 定义text颜色

<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">  <frame src="/example/html/frame_b.html">  <frame src="/example/html/frame_c.html">

</frameset>

基本的注意事项 - 有用的提示：

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。

为不支持框架的浏览器添加 <noframes> 标签。

重要提示：不能将 <body></body>标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的<noframes> 标签，就必须将这段文字嵌套于 <body></body>标签内。（在下面的第一个实例中，可以查看它是如何实现的。）


<frameset cols="25%,50%,25%">  <frame src="/example/html/frame_a.html">  <frame src="/example/html/frame_b.html">  <frame src="/example/html/frame_c.html">

<noframes><body>您的浏览器无法处理框架！</body></noframes>

</frameset>

<frameset rows="50%,50%">

<frame src="/example/html/frame_a.html">

<frameset cols="25%,75%"><frame src="/example/html/frame_b.html"><frame src="/example/html/frame_c.html"></frameset>

</frameset>

<frameset cols="120,*">  <frame src="/example/html/html_contents.html">  <frame src="/example/html/frame_a.html" name="showframe"></frameset>

内连frame可在body中使用<body><iframe src="/i/eg_landscape.jpg"></iframe><p>一些老的浏览器不支持 iframe。</p><p>如果得不到支持，iframe 是不可见的。</p></body>

验证 HTML文件

HTML 文档是根据文档类型声明进行验证的。如果希望 HTML 文件被正确地验证，就要将恰当的 DTD 添加到文件的第一行。

HTML 4.01 Strict DTD 包含没有被反对使用或者不出现在框架中的元素和属性：

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional DTD 包含 strict DTD 中所有的内容，外加被反对使用的元素和属性：

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset DTD 包含 transitional DTD 中所有的内容，外加对框架的支持：

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">


<span>提示：</span>： 对span之间的内容使用样式，
HTML:
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>



外部样式表


当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。


<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>


内部样式表


当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。


<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
例子2：
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>



内联样式


当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。


<p style="color: red; margin-left: 20px">
This is a paragraph
</p>


例子2：无下划线的链接：<a href="/example/html/lastpage.html" style="text-decoration:none">这是一个链接！</a>

实体符号：用于对html中特殊符号的显示的转义字符实体有三部分：一个和号 (&)，一个实体名称，或者 # 和一个实体编号，以及一个分号 (;)。

 &nbsp;，就可以在文档中增加空格





最常用的字符实体







                    显示结果
                

                    描述
                

                    实体名称
                

                    实体编号
                





                     
                

                    空格
                

                    &nbsp;
                

                    &#160;
                





                    <
                

                    小于号
                

                    &lt;
                

                    &#60;
                





                    >
                

                    大于号
                

                    &gt;
                

                    &#62;
                





                    &
                

                    和号
                

                    &amp;
                

                    &#38;
                





                    "
                

                    引号
                

                    &quot;
                

                    &#34;
                





                    '
                

                    撇号 
                

                    &apos; (IE不支持)
                

                    &#39;
                








其他一些常用的字符实体


    


<p class="tip"><span>提示：</span>... ... ...</p>


CSS:


p.tip span {
font-weight:bold;
color:#ff9955;
}




<div> 是一个块级元素， 用于定义块。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。







                显示结果
            

                描述
            

                实体名称
            

                实体编号
            





                ￠
            

                分
            

                &cent;
            

                &#162;
            





                £
            

                镑
            

                &pound;
            

                &#163;
            





                ¥
            

                日圆
            

                &yen;
            

                &#165;
            





                §
            

                节
            

                &sect;
            

                &#167;
            





                ©
            

                版权
            

                &copy;
            

                &#169;
            





                ®
            

                注册商标
            

                &reg;
            

                &#174;
            





                ×
            

                乘号
            

                &times;
            

                &#215;
            





                ÷
            

                除号
            

                &divide;
            

                &#247;
            






<base target="_blank">： 在head中使用


<base> 标签为页面上的所有链接规定默认地址或默认目标。


通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。


使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。


实例


<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>
<body>
<img src="eg_smile.gif" />
<a href="http://www.w3school.com.cn">W3School</a>
</body>



注释：<base> 标签必须位于 head 元素内部。



    必需的属性


DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.







                    属性
                

                    值
                

                    描述
                

                    DTD
                





                    href
                

                    URL
                

                    规定页面中所有相对链接的基准 URL。
                

                    STF
                








可选的属性







                属性
            

                值
            

                描述
            

                DTD
            





                target
            


  • _blank
    • 

  • _parent
    • 

  • _self
    • 

  • _top
    • 

  • framename



                在何处打开页面中所有的链接。
            

                TF
            






头元素


头元素包含关于文档的概要信息，也称为元信息（meta-information）。Meta 意为“关于某方面的信息”。


可以这么说，元数据（meta-data）是关于数据的信息，而元信息是关于信息的信息。



根据 HTML 标准，仅有几个标签在 HTML 的头部分是合法的。它们是：<base>, <link>, <meta>, <title>, <style> 和 <script>。


这是一个不合法的结构：


<head>
<p>This is some text</p>
</head>



<title> 元素可定义文档的标题。


浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。


HTML <link> 标签




定义和用法


<link> 标签定义文档与外部资源的关系。


<link> 标签最常见的用途是链接样式表。




在 HTML 中，<link> 标签没有结束标签。


注释：link 元素是空元素，它仅包含属性。

此元素只能存在于 head 部分，不过它可出现任何次数。


可选的属性


DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.







                属性
            

                值
            

                描述
            

                DTD
            





                charset
            

                charset
            

                定义被链接文档的字符编码方式。
            

                STF
            





                href
            

                URL
            

                定义被链接文档的位置。
            

                STF
            





                hreflang
            

                language_code
            

                定义被链接文档中文本的语言。
            

                STF
            





                media
            


  • screen
    • 

  • tty
    • 

  • tv
    • 

  • projection
    • 

  • handheld
    • 

  • print
    • 

  • braille
    • 

  • aural
    • 

  • all



                规定被链接文档将显示在什么设备上。
            

                STF
            





                rel
            


  • alternate
    • 

  • appendix
    • 

  • bookmark
    • 

  • chapter
    • 

  • contents
    • 

  • copyright
    • 

  • glossary
    • 

  • help
    • 

  • home
    • 

  • index
    • 

  • next
    • 

  • prev
    • 

  • section
    • 

  • start
    • 

  • stylesheet
    • 

  • subsection



                定义当前文档与被链接文档之间的关系。
            

                STF
            





                rev
            


  • alternate
    • 

  • appendix
    • 

  • bookmark
    • 

  • chapter
    • 

  • contents
    • 

  • copyright
    • 

  • glossary
    • 

  • help
    • 

  • home
    • 

  • index
    • 

  • next
    • 

  • prev
    • 

  • section
    • 

  • start
    • 

  • stylesheet
    • 

  • subsection



                定义被链接文档与当前文档之间的关系。
            

                STF
            





                target
            


  • _blank
    • 

  • _parent
    • 

  • _self
    • 

  • _top
    • 

  • framename



                定义在何处加载被链接文档。
            

                TF
            





                type
            

                MIME_type
            

                规定被链接文档的 MIME 类型。
            

                STF
            







HTML <meta> 标签




定义和用法


<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。


<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。




在 HTML 中，<meta> 标签没有结束标签。


注释：<meta> 标签永远位于 head 元素内部。注释：元数据总是以名称/值的形式被成对传递的。




必需的属性


DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.







                    属性
                

                    值
                

                    描述
                

                    DTD
                





                    content
                

                    some_text
                

                    定义与 http-equiv 或 name 属性相关的元信息
                

                    STF
                








可选的属性


DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.







                属性
            

                值
            

                描述
            

                DTD
            





                http-equiv
            


  • content-type
    • 

  • expires
    • 

  • refresh
    • 

  • set-cookie



                把 content 属性关联到 HTTP 头部。
            

                STF
            





                name
            


  • author
    • 

  • description
    • 

  • keywords
    • 

  • generator
    • 

  • revised
    • 

  • others



                把 content 属性关联到一个名称。
            

                STF
            





                scheme
            

                some_text
            

                定义用于翻译 content 属性值的格式。
            

                STF
            







类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：


<meta name="keywords" content="HTML,ASP,PHP,SQL"


如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。



使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：


<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">



一个嵌入的 Java applet：


<applet code="Bubbles.class" width="350" height="350">
Java applet that draws animated bubbles.
</applet>




<label> 标签为 input 元素定义标注（标记）。


label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。


<label> 标签的 for 属性应当与相关元素的 id 属性相同。


noscript 元素用来定义在脚本未被执行时的替代内容（文本）。


<script type="text/javascript">
document.write("Hello World!")
</script>





必选的属性







                    属性
                

                    值
                

                    描述
                

                    DTD
                





                    type
                

                    MIME-type
                

                    指示脚本的 MIME 类型。
                

                    STF
                








可选的属性







                属性
            

                值
            

                描述
            

                DTD
            





                charset
            

                charset
            

                规定在外部脚本文件中使用的字符编码。
            

                STF
            





                defer
            

                defer
            

                规定是否对脚本执行进行延迟，直到页面加载为止。
            

                STF
            





                language
            

                script
            

                不赞成使用。规定脚本语言。请使用 type 属性代替它。
            

                TF
            





                src
            

                URL
            

                规定外部脚本文件的 URL。
            

                STF
            





                xml:space
            

                preserve
            

                规定是否保留代码中的空白。
            






（下转）



    html中的http-equiv属性应用详解




    一.简介




    http-equiv 属性 -- HTTP协议的响应头报文





  • 此属性出现在meta标签中
    • 

  • 此属性用于代替name，HTTP服务器通过此属性收集HTTP协议的响应头报文
    • 

  • 此属性的HTTP协议的响应头报文的值应使用content属性描述




http-equiv示例



    <meta http-equiv="content-type" content="text/html; charset=utf-8" />




    

    告诉浏览器等设备，文件为html文件，且使用了utf8编码




    <meta http-equiv="content-language" content="zh-CN" />




    告诉浏览器等设备，语言使用了中文




    常用的http-equiv类型





  • charset -- charset 定义编码信息
    • 

  • refresh -- refresh 刷新与跳转网页
    • 

  • no-cache -- HTML meta no-cache 定义页面缓存
    • 

  • expires -- HTML meta expires 定义网页缓存过期时间





    二.使用详解




    http-equiv类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。

    常用的http-equiv类型有：




    1、Content-Type和Content-Language (显示字符集的设定)




    

    说明：设定页面使用的字符集，用以说明主页制作所使用的文字已经语言，浏览器会根据此来调用相应的字符集显示page内容。




    用法：




    <meta http-equiv="Content-Type" Content="text/html; Charset=gb2312″ />

    <meta http-equiv="Content-Language" Content="zh-CN" />




    注意：

    该meta标签定义了HTML页面所使用的字符集为GB2132，就是国标汉字码。

    如果将其中的“charset=GB2312"替换成“BIG5"，则该页面所用的字符集就是繁体中文Big5码。

    当你浏览一些国外的站点时，IE浏览器会提示你要正确显示该页面需要下载xx语支持。

    这个功能就是通过读取HTML页面meta标签的Content-Type属性而得知需要使用哪种字符集显示该页面的。

    如果系统里没有装相应的字符集，则IE就提示下载。

    其他的语言也对应不同的charset，比如日文的字符集是“iso-2022-jp "，韩文的是“ks_c_5601"。




    Content-Type的Content还可以是：text/xml等文档类型；

    Charset选项：

    ISO-8859-1(英文)、BIG5、UTF-8、SHIFT-Jis、Euc、Koi8-2、us-ascii,x-mac-roman,iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp,euc-kr,iso-2022-kr,gb2312, gb_2312-80, x-euc-tw, x-cns11643-1,x-cns11643-2等字符集；

    Content-Language的Content还可以是：EN、FR等语言代码。




    2、Refresh (刷新)




    

    说明：让网页多长时间（秒）刷新自己，或在多长时间后让网页自动链接到其它网页。




    用法：




    <meta http-equiv="Refresh" Content="30″>




    <meta http-equiv="Refresh" Content="5; Url=http://www.microsoft.com" />




    注意：其中的5是指停留5秒钟后自动刷新到URL网址。




    3、Expires (期限)




    

    说明：指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新调阅。




    用法：




    <meta http-equiv="Expires" Content="0″ />

    <meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT" />




    注意：必须使用GMT的时间格式，或直接设为0(数字表示多少时间后过期)。




    4、Pragma (cach模式)




    

    说明：禁止浏览器从本地机的缓存中调阅页面内容。




    用法：<meta http-equiv="Pragma" Content="No-cach" />




    注意：网页不保存在缓存中，每次访问都刷新页面。这样设定，访问者将无法脱机浏览。




    5、Set-Cookie (cookie设定)




    

    说明：浏览器访问某个页面时会将它存在缓存中，下次再次访问时就可从缓存中读取，以提高速度。

    当你希望访问者每次都刷新你广告的图标，或每次都刷新你的计数器，就要禁用缓存了。

    通常HTML文件没有必要禁用缓存，对于ASP等页面，就可以使用禁用缓存，因为每次看到的页面都是在服务器动态生成的，缓存就失去意义。如果网页过期，那么存盘的cookie将被删除。




    用法：




    <meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; ath=/">




    6、Window-target (显示窗口的设定)




    

    说明：强制页面在当前窗口以独立页面显示。




    用法：<meta http-equiv="Widow-target" Content="_top">




    注意：这个属性是用来防止别人在框架里调用你的页面。Content选项：_blank、_top、_self、_parent。




    7、Pics-label (网页RSAC等级评定)




    

    说明：在IE的Internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级

    别就是通过该参数来设置的。




    用法：<meta http-equiv="Pics-label"Contect=“(PICS－1.1′http://www.rsac.org/ratingsv01.html’I gen commentRSACi North America Sever’ by ‘inet@microsoft.com’ for ‘http://www.microsoft.com’ on ‘1997.06.30T14:21－0500′ r(n0 s0 0 l0))">




    注意：不要将级别设置的太高。RSAC的评估系统提供了一种用来评价Web站点内容的标准。

    用户可以设置Microsoft Internet Explorer（IE3.0以上）来排除包含有色情和暴力内容的站点。

    上面这个例子中的HTML取自Microsoft的主页。代码中的（n 0 s 0 v 0 l 0）表示该站点不包含不健康内容。

    级别的评定是由RSAC，即美国娱乐委员会的评级机构评定的，如果你想进一步了解RSAC评估系统的等级内容，或者你需要评价自己的网站，可以访问RSAC的站点：http://www.rsac.org/。




    8、Page-Enter、Page-Exit (进入与退出渐隐效果)




    

    说明：这个是页面被载入和调出时的一些特效。




    用法：

    <meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">

    <meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">




    注意：blendTrans是动态滤镜的一种，产生渐隐效果。另一种动态滤镜RevealTrans也可以用于页面进入与退出效果:

    <meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)">

    <meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">




    进入和离开该页面的渐变跳转

    <meta http-equiv="Page-Enter" CONTENT="revealtrans(duration=6.0, transition=23)">

    <meta http-equiv="Page-Exit" CONTENT="revealtrans(duration=6.0, transition=23)">

    把这两句加到<head> </head>中间




    Duration表示滤镜特效的持续时间(单位：秒)

    Transition滤镜类型。表示使用哪种特效，取值为0-23。




    0 矩形缩小 1 矩形扩大 2 圆形缩小 3 圆形扩大 4 下到上刷新 5 上到下刷新 6 左到右刷新

    7 右到左刷新 8 竖百叶窗 9 横百叶窗 10 错位横百叶窗 11 错位竖百叶窗 12 点扩散

    13 左右到中间刷新 14 中间到左右刷新 15 中间到上下 16 上下到中间 17 右下到左上

       18 右上到左下 19 左上到右下 20 左下到右上 21 横条 22 竖条 23 以上22种随机选择一种




    9-1、MSThemeCompatible (开/关XP主题)




    

    说明：是否在IE中 开/关 xp 的主题




    用法：<meta http-equiv="MSThemeCompatible" Content="Yes" />

    解释：Content=”No”关闭 xp 的蓝色立体按钮系统显示样式，从而和win2k 很象。




    9-2、MSSmartTagsPreventParsing




    用法：<meta name="MSSmartTagsPreventParsing" content="True" />

    说明：在Microsoft IE 6 中有一个 Smart tag 开关，如果您包含下面标记，访问这将看不到某些相关连接，

    这样可以避免访问者流失到竞争对手的网站上去。




    10、IE6 (页面生成器)




    

    说明：页面生成器generator，是ie6




    用法：<meta http-equiv="IE6″ Content="Generator" />




    注意：用什么东西做的，类似商品出厂厂商。




    11、Content-Script-Type (脚本相关)




    

    说明：这是近来W3C的规范，指明页面中脚本的类型。




    用法：<meta http-equiv="Content-Script-Type" Content="text/javascript" />




    12、RSS 网站地图-Sitemap




    

    复制代码保存到一个sitemap.xml(或者ror.xml)文件中，然后上传到你应用的根目录下。

    并且把下面代码增加到你站点主页的 <head> 标签中，主要是为了方便搜索引擎来读取。

        

    <link rel="alternate" type="application/rss+xml" title="ROR" href="sitemap.xml" />




    

    如果你的站点地图文件名是ror.xml,记得要把上面代码中的href改成href="ror.xml"

    <link rel="alternate" type="application/rss+xml" title="ROR" href="ror.xml" />




针对搜索引擎的关键字


某些万维网搜索引擎使用 meta 标签的 name 和 content 属性来索引页面。


这个 Meta 元素定义了对页面的描述:


<meta name="description"
content="Free Web tutorials on HTML, CSS, XML, and XHTML" />


这个 Meta 元素定义了页面的关键字:


<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">


name 和 content 属性的作用是描述页面的内容。


然而，由于非常多的网管们使用 meta 标签制造垃圾信息，比方说在页面重复关键词以达到提高排名的目的，一些搜索引擎已经彻底放弃了使用它们。





URL（统一资源定位器）


一个称为 URL（统一资源定位器）的东西用于对万维网上的文档（或其他数据）进行寻址。一个完整的网址，例如：http://www.w3school.com.cn/html/lastpage.html，遵守如下语法规则：


scheme://host.domain:port/path/filename


Scheme 定义因特网服务的类型。最流行的类型是 http。


domain（域）定义因特网域名，比如：w3school.com.cn。


host（主机）定义此域中的主机。如果被省略，缺省的支持 http 的主机是 www。


:port(端口)定义主机的端口号。端口号通常是被省略的。缺省的端口号是 80。


path（路径）定义服务器上的路径（一个辅助的路径）。如果路径被省略，资源（文档）会被定位到网站的根目录。


filename（文件名）定义文档的名称。缺省的文件名一般会是 default.asp 或者 index.html，或者依据 WEB 服务器设置的其他文件名。


编者注：URL 的英文全称是 Uniform Resource Locator，中文也译为“统一资源定位符”。




URL Schemes


以下是其中一些最流行的 scheme：







                Schemes
            

                访问
            





                file
            

                本地 PC 上的文件。
            





                ftp
            

                FTP 服务器上的文件。
            





                http
            

                World Wide Web 服务器上的文件。
            





                gopher
            

                Gopher 服务器上的文件。
            





                news
            

                Usenet 新闻组。
            





                telnet
            

                Telnet 连接。
            





                WAIS
            

                WAIS 服务器上的文件。
            






对于不支持脚本的浏览器， 用这个：

<noscript>No JavaScript support!</noscript>


避免不支持script的浏览器输出不必要的信息：

<script type="text/javascript">

<!--

document.write("如果显示了这段文字，那么您的浏览器支持 JavaScript！")

//-->

</script>


JavaScript:


<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>



VBScript:


<script type="text/vbscript">
<!--
document.write("Hello World!")
'-->
</script>


下面的表格提供了标准的事件属性，可以把它们插入 HTML/XHTML 元素中，以定义事件行为。




窗口事件 (Window Events)


仅在 body 和 frameset 元素中有效。







                    属性
                

                    值
                

                    描述
                





                    onload
                

                    脚本
                

                    当文档载入时执行脚本
                





                    onunload
                

                    脚本
                

                    当文档卸载时执行脚本
                










表单元素事件 (Form Element Events)


仅在表单元素中有效。







                    属性
                

                    值
                

                    描述
                





                    onchange
                

                    脚本
                

                    当元素改变时执行脚本
                





                    onsubmit
                

                    脚本
                

                    当表单被提交时执行脚本
                





                    onreset
                

                    脚本
                

                    当表单被重置时执行脚本
                





                    onselect
                

                    脚本
                

                    当元素被选取时执行脚本
                





                    onblur
                

                    脚本
                

                    当元素失去焦点时执行脚本
                





                    onfocus
                

                    脚本
                

                    当元素获得焦点时执行脚本
                










图像事件 (Image Events)


该属性可用于 img 元素：







                    属性
                

                    值
                

                    描述
                





                    onabort
                

                    脚本
                

                    当图像加载中断时执行脚本
                










键盘事件 (Keyboard Events)


在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, 以及 title 元素。







                    属性
                

                    值
                

                    描述
                





                    onkeydown
                

                    脚本
                

                    当键盘被按下时执行脚本
                





                    onkeypress
                

                    脚本
                

                    当键盘被按下后又松开时执行脚本
                





                    onkeyup
                

                    脚本
                

                    当键盘被松开时执行脚本
                








鼠标事件 (Mouse Events)


在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title 元素。







                属性
            

                值
            

                描述
            





                onclick
            

                脚本
            

                当鼠标被单击时执行脚本
            





                ondblclick
            

                脚本
            

                当鼠标被双击时执行脚本
            





                onmousedown
            

                脚本
            

                当鼠标按钮被按下时执行脚本
            





                onmousemove
            

                脚本
            

                当鼠标指针移动时执行脚本
            





                onmouseout
            

                脚本
            

                当鼠标指针移出某元素时执行脚本
            





                onmouseover
            

                脚本
            

                当鼠标指针悬停于某元素之上时执行脚本
            





                onmouseup
            

                脚本
            

                当鼠标按钮被松开时执行脚本
            








URL 编码


在因特网上传送 URL 的话，只能使用 ASCII 字符集。


由于 URL 经常会包含 ASCII 字符集以外的字符，所以必须对 URL 进行转换。URL 编码所做的事情就是把 URL 转换为有效的 ASCII 格式。


在进行 URL 编码时，每一个非安全的 ASCII 字符会被替换为 "%hh" 格式，其中 hh 是两位十六进制数，它对应于该字符在 ISO-8859-1 字符集里的字符编码值。


URL 中不能含有空格，URL 编码通常会将空格替换为加号（+）。







当浏览器从 web 服务器请求服务时，可能会发生错误。


从而有可能会返回下面的一系列状态消息：






1xx: 信息







                    消息:
                

                    描述:
                





                    100 Continue
                

                    服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。
                





                    101 Switching Protocols
                

                    服务器转换协议：服务器将遵从客户的请求转换到另外一种协议。
                










2xx: 成功







                    消息:
                

                    描述:
                





                    200 OK
                

                    请求成功（其后是对GET和POST请求的应答文档。）
                





                    201 Created
                

                    请求被创建完成，同时新的资源被创建。
                





                    202 Accepted
                

                    供处理的请求已被接受，但是处理未完成。
                





                    203 Non-authoritative Information
                

                    文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝。
                





                    204 No Content
                

                    没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。
                





                    205 Reset Content
                

                    没有新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。
                





                    206 Partial Content
                

                    客户发送了一个带有Range头的GET请求，服务器完成了它。
                










3xx: 重定向







                    消息:
                

                    描述:
                





                    300 Multiple Choices
                

                    多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。
                





                    301 Moved Permanently
                

                    所请求的页面已经转移至新的url。
                





                    302 Found
                

                    所请求的页面已经临时转移至新的url。
                





                    303 See Other
                

                    所请求的页面可在别的url下被找到。
                





                    304 Not Modified
                

                    未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
                





                    305 Use Proxy
                

                    客户请求的文档应该通过Location头所指明的代理服务器提取。
                





                    306 Unused
                

                    此代码被用于前一版本。目前已不再使用，但是代码依然被保留。
                





                    307 Temporary Redirect
                

                    被请求的页面已经临时移至新的url。
                










4xx: 客户端错误







                    消息:
                

                    描述:
                





                    400 Bad Request
                

                    服务器未能理解请求。
                





                    401 Unauthorized
                

                    被请求的页面需要用户名和密码。
                





                    402 Payment Required
                

                    此代码尚无法使用。
                





                    403 Forbidden
                

                    对被请求页面的访问被禁止。
                





                    404 Not Found
                

                    服务器无法找到被请求的页面。
                





                    405 Method Not Allowed
                

                    请求中指定的方法不被允许。
                





                    406 Not Acceptable
                

                    服务器生成的响应无法被客户端所接受。
                





                    407 Proxy Authentication Required
                

                    用户必须首先使用代理服务器进行验证，这样请求才会被处理。
                





                    408 Request Timeout
                

                    请求超出了服务器的等待时间。
                





                    409 Conflict
                

                    由于冲突，请求无法被完成。
                





                    410 Gone
                

                    被请求的页面不可用。
                





                    411 Length Required
                

                    "Content-Length" 未被定义。如果无此内容，服务器不会接受请求。
                





                    412 Precondition Failed
                

                    请求中的前提条件被服务器评估为失败。
                





                    413 Request Entity Too Large
                

                    由于所请求的实体的太大，服务器不会接受请求。
                





                    414 Request-url Too Long
                

                    由于url太长，服务器不会接受请求。当post请求被转换为带有很长的查询信息的get请求时，就会发生这种情况。
                





                    415 Unsupported Media Type
                

                    由于媒介类型不被支持，服务器不会接受请求。
                





                    416 
                

                    服务器不能满足客户在请求中指定的Range头。
                





                    417 Expectation Failed
                

                     
                








5xx: 服务器错误







                消息:
            

                描述:
            





                500 Internal Server Error
            

                请求未完成。服务器遇到不可预知的情况。
            





                501 Not Implemented
            

                请求未完成。服务器不支持所请求的功能。
            





                502 Bad Gateway
            

                请求未完成。服务器从上游服务器收到一个无效的响应。
            





                503 Service Unavailable
            

                请求未完成。服务器临时过载或当机。
            





                504 Gateway Timeout
            

                网关超时。
            





                505 HTTP Version Not Supported
            

                服务器不支持请求中指明的HTTP协议版本。
            






HTML5


为 HTML5 建立的一些规则：


  • 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
    • 

  • 减少对外部插件的需求（比如 Flash）
    • 

  • 更优秀的错误处理
    • 

  • 更多取代脚本的标记
    • 

  • HTML5 应该独立于设备
    • 

  • 开发进程应对公众透明




新特性


HTML5 中的一些有趣的新特性：


  • 用于绘画的 canvas 元素
    • 

  • 用于媒介回放的 video 和 audio 元素
    • 

  • 对本地离线存储的更好的支持
    • 

  • 新的特殊内容元素，比如 article、footer、header、nav、section
    • 

  • 新的表单控件，比如 calendar、date、time、email、url、search







视频格式


当前，video 元素支持三种视频格式：







                    格式
                

                    IE
                

                    Firefox
                

                    Opera
                

                    Chrome
                

                    Safari
                





                    Ogg
                

                    No
                

                    3.5+
                

                    10.5+
                

                    5.0+
                

                    No
                





                    MPEG 4
                

                    9.0+
                

                    No
                

                    No
                

                    5.0+
                

                    3.0+
                





                    WebM
                

                    No
                

                    4.0+
                

                    10.6+
                

                    6.0+
                

                    No
                






Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件


MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件


WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件




如何工作


如需在 HTML5 中显示视频，您所有需要的是：


<video src="/i/movie.ogg"  width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>



video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：


实例


<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> 标签的属性







                属性
            

                值
            

                描述
            





                autoplay
            

                autoplay
            

                如果出现该属性，则视频在就绪后马上播放。
            





                controls
            

                controls
            

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





                height
            

                pixels
            

                设置视频播放器的高度。
            





                loop
            

                loop
            

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





                preload
            

                preload
            


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


如果使用 "autoplay"，则忽略该属性。







                src
            

                url
            

                要播放的视频的 URL。
            





                width
            

                pixels
            

                设置视频播放器的宽度。
            









音频格式


当前，audio 元素支持三种音频格式：







                     
                

                    IE 9
                

                    Firefox 3.5
                

                    Opera 10.5
                

                    Chrome 3.0
                

                    Safari 3.0
                





                    Ogg Vorbis
                

                     
                

                    √
                

                    √
                

                    √
                

                     
                





                    MP3
                

                    √
                

                     
                

                     
                

                    √
                

                    √
                





                    Wav
                

                     
                

                    √
                

                    √
                

                     
                

                    √
                








如何工作


如需在 HTML5 中播放音频，您所有需要的是：


<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>




control 属性供添加播放、暂停和音量控件。


<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的


audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：


实例


<audio controls="controls"><source src="song.ogg" type="audio/ogg"><source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>




<audio> 标签的属性







                属性
            

                值
            

                描述
            





                autoplay
            

                autoplay
            

                如果出现该属性，则音频在就绪后马上播放。
            





                controls
            

                controls
            

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





                loop
            

                loop
            

                如果出现该属性，则每当音频结束时重新开始播放。
            





                preload
            

                preload
            


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


如果使用 "autoplay"，则忽略该属性。







                src
            

                url
            

                要播放的音频的 URL。
            






canvas 元素用于在网页上绘制图形。


HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。


画布是一个矩形区域，您可以控制其每一像素。


canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。





创建 Canvas 元素


向 HTML5 页面添加 canvas 元素。


规定元素的 id、宽度和高度：


<canvas id="myCanvas" width="200" height="100"></canvas>




属性


new : HTML5 中的新属性。







                属性
            

                值
            

                描述
            





                height
            

                pixels
            

                设置 canvas 的高度。
            





                width
            

                pixels
            

                设置 canvas 的宽度。
            







通过 JavaScript 来绘制


canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：


<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>



getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。


返回鼠标坐标：

<script type="text/javascript">

function cnvs_getCoordinates(e)

{

x=e.clientX;

y=e.clientY;

document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";

}

 

function cnvs_clearCoordinates()

{

document.getElementById("xycoordinates").innerHTML="";

}

</script>

<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" οnmοusemοve="cnvs_getCoordinates(event)" οnmοuseοut="cnvs_clearCoordinates()"></div>


HTML 5 Web 存储


HTML5 提供了两种在客户端存储数据的新方法：


  • localStorage - 没有时间限制的数据存储
    • 

  • sessionStorage - 针对一个 session 的数据存储


之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。


HTML5 使用 JavaScript 来存储和访问数据。


访问计数的例子：

if (localStorage.pagecount)

    {

    localStorage.pagecount=Number(localStorage.pagecount) +1;

    }

else

    {

    localStorage.pagecount=1;

    }

document.write("Visits: " + localStorage.pagecount + " time(s).");


</script>



session count：
<script type="text/javascript">
if (sessionStorage.pagecount){sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;}
else{sessionStorage.pagecount=1;}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>






HTML5 新的 Input 类型


HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。


本章全面介绍这些新的输入类型：


  • email
    • 

  • url
    • 

  • number
    • 

  • range
    • 

  • Date pickers (date, month, week, time, datetime, datetime-local)
    • 

  • search
    • 

  • color




HTML5 的新的表单元素：







                Input type
            

                IE
            

                Firefox
            

                Opera
            

                Chrome
            

                Safari
            





                datalist
            

                No
            

                No
            

                9.5
            

                No
            

                No
            





                keygen
            

                No
            

                No
            

                10.5
            

                3.0
            

                No
            





                output
            

                No
            

                No
            

                9.5
            

                No
            

                No
            






<form action="/example/html5/demo_form.asp" method="get">

Webpage: <input type="url" list="url_list" name="link" />

<datalist id="url_list">

    <option label="W3School" value="http://www.w3school.com.cn" />

    <option label="Google" value="http://www.google.com" />

    <option label="Microsoft" value="http://www.microsoft.com" />

</datalist>

<input type="submit" />

</form>




HTML5 的新的表单属性


新的 form 属性：


  • autocomplete
    • 

  • novalidate


新的 input 属性：


  • autocomplete
    • 

  • autofocus
    • 

  • form
    • 

  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
    • 

  • height 和 width
    • 

  • list
    • 

  • min, max 和 step
    • 

  • multiple
    • 

  • pattern (regexp)
    • 

  • placeholder
    • 

  • required




html5新增标签：







                <article>
            

                定义 article。
            





                <aside>
            

                定义页面内容之外的内容。
            





                <audio>
            

                定义声音内容。
            






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

<canvas>定义图形。







                <command>
            

                定义命令按钮。
            





                <datalist>
            

                定义下拉列表。
            






<details>定义元素的细节。

<embed>定义外部交互内容或插件。







                <figcaption>
            

                定义 figure 元素的标题。
            





                <figure>
            

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






<footer>定义 section 或 page 的页脚。







                <header>
            

                定义 section 或 page 的页眉。
            





                <hgroup>
            

                定义有关文档中的 section 的信息。
            






<keygen>定义生成密钥。


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







                <meter>
            

                定义预定义范围内的度量。
            





                <nav>
            

                定义导航链接。
            






<output>定义输出的一些类型。


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







                <rp>
            

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





                <rt>
            

                定义 ruby 注释的解释。
            





                <ruby>
            

                定义 ruby 注释。
            






<section>定义 section。

<source>定义媒介源。

<summary>定义 details 元素的标题。

<time>定义日期/时间。


<track>定义用在媒体播放器中的文本轨道。

<video>定义视频。


html5新增属性：







                contenteditable
            


  • true
    • 

  • false



                规定是否允许用户编辑内容。
            





                contextmenu
            

                menu_id
            

                规定元素的上下文菜单。
            












                draggable
            


  • true
    • 

  • false
    • 

  • auto



                规定是否允许用户拖动元素。
            





                dropzone
            


  • copy
    • 

  • move
    • 

  • link



                规定当被拖动的项目/数据被拖放到元素中时会发生什么。
            





                hidden
            

                hidden
            

                规定该元素是无关的。被隐藏的元素不会显示。
            












                spellcheck
            


  • true
    • 

  • false



                规定是否必须对元素进行拼写或语法检查。
            






html5增加了很多新的事件， 尤其是media事件：

具体参见下面的链接：

http://www.w3school.com.cn/html5/html5_ref_eventattributes.asp
												


											

html/html5学习相关推荐
	

    
						
  1. HTML5学习之语义化标签
		
    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
    
		
    2. 
						
  2. html和html5学习
		
    html和html5学习   chorme.safari中的input或textarea  替换元素和非替换元素  html超链接(a)详细讲解  html5新增及删除标签  html表格  图片加a ...
    
		
    3. 
						
  3. HTML5学习笔记（一）：HTML简介
		
    Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...
    
		
    4. 
						
  4. html5该怎么样学习？零基础入门HTML5学习路线
		
    纵观近几年HTML5的发展可以看出,HTML5开发持续上涨,腾讯.微软.谷歌等国际互联网企业都将HTML5的研发与使用放在了重要的地位.目前全球有超过十亿台手机浏览器支持HTML5,而微信小程序的开放 ...
    
		
    5. 
						
  5. Html5学习笔记1 元素 标签 属性
		
    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
    
		
    6. 
						
  6. HTML5 学习笔记
		
    HTML5 学习笔记 前言 该学习笔记的相关学习视频:[狂神说Java]HTML5完整教学通俗易懂 目前笔记只有简单的例子和框架,将来在实践中会进一步学习和补充内容 目录 HTML5 学习笔记 前言  ...
    
		
    7. 
						
  7. html5 制作会转的风扇,HTML5学习第5天[乱撞的球]可以听到风扇声的哟
		
    HTML5学习第5天[乱撞的球] body{ font-family: 微软雅黑; } body,h1{ margin:0; } canvas{ display:block;margin-left:  ...
    
		
    8. 
						
  8. html5 学习_5分钟内学习HTML
		
    html5 学习 by Eric Tirado 埃里克·蒂拉多(Eric Tirado) 5分钟内学习HTML (Learn HTML in 5 minutes) 快速教程可帮助您开始构建网站. (A ...
    
		
    9. 
						
  9. HTML5学习笔记之音视频标签
		
    HTML5学习笔记之音视频标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习 ...
    
		
    10. 
						
  10. html5学习开发指南
		
    本文发表于CSDN<程序员>杂志2016年8月期,未经允许不得转载! 概述: 随着移动互联网的兴起,前端开发工程师的岗位也随着兴起.前端工程师不仅在用户和产品之间扮演着越来越重要的角色,而 ...
    
		
    11. 
		


					

最新文章
	

    
						
  1. 如何在TVM上集成Codegen（下）
		
    2. 
						
  2. 异步复位和同步释放电路的详细解释
		
    3. 
						
  3. idea与mysql连接时，遇见的小问题
		
    4. 
						
  4. js的数据类型，以及如何判断它们是哪种类型
		
    5. 
						
  5. Android 第一个OpenGL ES程序
		
    6. 
						
  6. 看嵌入式大神直播，送开发板！
		
    7. 
						
  7. 如何应对软件项目的投标答辩
		
    8. 
						
  8. Java面向对象-抽象类
		
    9. 
						
  9. UXDB基于MySQL_干货分享｜“脱胎换骨”后的UXDB究竟如何
		
    10. 
						
  10. 七、K8s volume相关操作
		
    11. 
						
  11. Unity 常用API以及C# 工具类的使用
		
    12. 
						
  12. 5900x matlab,芯片工程师入手5900X平台，简单自用工具评测
		
    13. 
						
  13. 我的费曼学习法之路「世界上最好的学习法：费曼学习法」
		
    14. 
						
  14. cad动态块制作翻转_cad动态块拉伸制作方法，单开门动态块制作教程具体分析
		
    15. 
						
  15. Domain Impression A Source Data Free Domain Adaptation Method
		
    16. 
						
  16. Arduino UNO驱动DS1307数字实时时钟RTC
		
    17. 
						
  17. 第三方支付接口申请流程
		
    18. 
						
  18. 在EXCEL中插入超级链接
		
    19. 
						
  19. win10文件同步到服务器失败,手把手为你解决win10系统同步时间同步失败的思路...
		
    20. 
						
  20. SAP—IDoc操作步骤
		
    21. 
		

	


热门文章
	

    
									
  1. SpringBoot+WebSocket+Vue整合实现在线聊天
			
    2. 
						
  2. Java 成员变量中有数组的情况处理
			
    3. 
						
  3. Linux vi种 wq 、wq!、x、q、q!区别
			
    4. 
						
  4. Vim插件#Vim Project项目管理
			
    5. 
						
  5. ABB机器人Sockets通讯
			
    6. 
						
  6. 在 KubeSphere 上部署 Apache Pulsar
			
    7. 
						
  7. c语言中03怎么表示成30,C语言入门篇-03
			
    8. 
						
  8. 美团点评2017秋招笔试真题-安全工程师卷
			
    9. 
						
  9. 0.0.1 NODEMCU-ESP8266-12F VER 0.1CH340G开发版V3 4线oled0.96寸屏天气时钟日记
			
    10. 
						
  10. flink 并行度。
			
    11.