HTML
<!--New things in HTML 5 are marked within red. Reference URL: http://www.w3schools.com/html/html5_new_elements.asp-->
Note: 在HTML5中,元素(Element)名称和属性(Attribute)名称都应该使用小写格式,详情参考此处;
1. New Declaration
In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
HTML5 is not based on SGML, and therefore does not require a reference to a DTD.
<!DOCTYPE html>
2. HTML headings are defined with h1 to h6 tags.
3. HTML元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码;
开始标签 | 元素内容 | 结束标签 |
---|---|---|
<p> | This is a paragraph | </p> |
<a href="default.htm" > | This is a link | </a> |
<br /> |
4. <a>标签的新属性:download,可以指定用户点击链接时下载某个文件,也可以默认下载href属性中的链接地址;
5. <a>标签的target属性:新标签页,当前frame,父级frame,整个body,或者指定的frame下;
<a target="_blank|_self|_parent|_top|framename">
6. <img>标签的alt属性用于指定在图片不能显示时的替代文字(在IE7及以前的版本中,alt属性被作为tooltip(提示框)显示出来,这种行为是错误的,应该使用title属性来显示图片的提示信息)。
7. <map> --><area>的coords属性的坐标值是对于整个页面而言的,“0,0”就是页面左上角,坐标顺序是左上右下(x1,y1,x2,y2);
8. margin属性的顺序是上右下左,例如:“margin: 10 0 20 50;" 意思是margin-left是50px,margin-top是10px;
9. <abbr>标签用于显示缩写词,用于替代以前的<acronym>标签:
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948</p>
鼠标放在“WHO”上就可以看到
10. <bdo>标签用于指定文本的方向;
<p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p>
11. <a>标签可以链接到一个新邮件
<p> This is another mailto link: <a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">Send mail!</a> </p>
12. <table>的border-spacing样式用于设置单元格之间的距离;
13. HTML Form Tags: 可嵌套用在<form>标签内的标签;
Tag | Description |
---|---|
<form> | Defines an HTML form for user input |
<input> | Defines an input control |
<textarea> | Defines a multiline input control (text area) |
<label> | Defines a label for an <input> element |
<fieldset> | Groups related elements in a form |
<legend> | Defines a caption for a <fieldset> element |
<select> | Defines a drop-down list |
<optgroup> | Defines a group of related options in a drop-down list |
<option> | Defines an option in a drop-down list |
<button> | Defines a clickable button |
<datalist> | Specifies a list of pre-defined options for input controls |
<keygen> | Defines a key-pair generator field (for forms) |
<output> | Defines the result of a calculation |
14. <output>标签:用于定义一个计算的结果;
15. <input>标签的step属性:规定输入字段的合法数字间隔(假如 step="3",则合法数字应该是 -3、0、3、6,以此类推);
16. <input>标签的range属性:用slider控件直观地显示数字变化范围;
17. <section>标签和<article>标签:<section>标签定义了文档中的一个区域(占用页面中整整一行,类似<p>),<article>标签定义了一块独立的内容区域,用于包含Forum post、blog post、News story等;
18. <header>标签和<footer>标签:可用于整个文档,也可用于一个section;
19. <figure>标签:定义一块独立的区域,用于包含插图、图标、照片,代码等,<figcaption>标签用于定义一个caption;
20. <input>标签的新Type属性值有以下几种:其中tel不被任何浏览器接受,IE只识别url、range、number和email。
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
21. <input>标签的新属性(Attribute)有以下几种:
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step
22. <form>标签的新属性有以下几种:
autocomplete
novalidate
23. 新属性(Property)valueAsNumber:此属性可以将用户输入的内容转化为一个number(不必再使用parseInt或者parseFloat),number可以为整数或者小数;
24. <canvas>标签:画板,主要用于画Paths, Text, Gradients, 和Images;例如,arc: arc(定义一个中心点,半径,起始角度,结束角度,和绘图方向:顺时针或逆时针);
25. <svg>标签:用于绘制矢量图,<svg>标签定义的图形使用XML格式;
26. <video>标签:用于视频播放,目前支持的格式有mp4, ogg, webm;
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> </video>
27. <audio>标签:用于音频播放,目前支持格式有mp3, ogg, wav;
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> </audio>
28. navigator.geolocation对象:包含一系列与位置相关的函数:如getCurrentPosition(), watchPosition(), 和clearWatch();
其中,getCurrentPosition()和watchPosition()方法都会返回一个位置对象,包含以下属性:
Property | Description |
---|---|
coords.latitude | The latitude as a decimal number |
coords.longitude | The longitude as a decimal number |
coords.accuracy | The accuracy of position |
coords.altitude | The altitude in meters above the mean sea level |
coords.altitudeAccuracy | The altitude accuracy of position |
coords.heading | The heading as degrees clockwise from North |
coords.speed | The speed in meters per second |
timestamp | The date/time of the response |
29. drag和drog操作:JS提供了一系列方法用于拖放操作,详细请参考此处;
30. Multimedia支持:HTML5标准只支持MP4, WebM, and Ogg格式的视频(Video),和MP3, WAV, and Ogg 格式的音频(audio);
31. Plug-ins支持:<object></object>标签和<embed>标签(无对应关闭标签);
32. HTML Sounds/Audio:最好使用<audio>和<embed>结合,<a>标签也可以播放;
33. HTML Videos: 最好的解决方案是<video>+<object>+<embed>,<a>标签也可以播放;
34. <script>标签: type属性不再必须,新加入了一个async属性;
35. <style>标签和<link>标签:type属性不再必须;
36. <meter>标签:用于显示一个在固定范围内的标准测量值;
--------------------------------------------------------------------------------------------------------------------------
37. 将pdf嵌套进网页的代码:
<object><embed src="FILENAME.PDF" height="600" width="600" type="application/pdf"></embed></object>
38. 行级元素必须包含在块级元素内,比如<label>,<span>必须包含于<p>或者<div>内;
39. placeholder属性用于给当前input添加一个提示,placeholder的值显示在input中,
<input type="text" name="fname" placeholder="First name"><br> <input type="text" name="lname" placeholder="Last name"><br> <input type="submit" value="Submit">
40.
------------------------------------------------------------
Deprecated Tags and Attributes
1. Tags: <font>, <center>, <strike>, <acronym>
2. Attributes: color, bgcolor, type of <ul>, align of <div>,