cite 表示引用到某一本書籍名稱，預設樣式為斜體，q 表示直接引用到裡面的話，大塊的引用使用block預設樣式將增加“雙引號” ，關鍵的詞用<b>預設為粗體；一些技術術語則用<i>來表示，為斜體
ol標籤為有序列表，在出現類似排行榜這樣的資訊塊時，比較適合使用。可以通過<ol type="a">來指定ol列表自增symbol
- 第一個ol的li元素
- 第二個ol的li元素
dl為自定義列表，一般用來實現類似術語表這樣的功能
<object><embed>來引入第三方外掛，比如flash, pdf等來滿足閱讀pdf文件或者觀看視訊的需求，但是html5中就可以直接使用video,audio來完成了！
<canvas><svg>標籤也是可以來嵌入資源的，其中canvas是基於畫素的，svg是向量的
<select name="groupdata" id="grouptest"> <optgroup label="group1"> <option value="0">0</option> <option value="1">1</option> </optgroup> <option value="2">2</option> </select>
HTML中的實體標籤
html的所有標籤都放在<>中，瀏覽器在解析文件內容時，一旦遇到<>這種字元時，她都會認為是一個標籤因此並不會出現在渲染內容中，但是如何能夠讓瀏覽器不把<>當作tag而當作普通的字元來處理呢？一種解決方案就是使用實體標籤來表達，有點類似於轉義字元
常用實體標籤有：
空格：
" : "
> : >
< : <
© : ©
& : &
網頁中所需圖片分類
在一個網頁中，為了美觀會有很多大大小小的圖片。雖然通過css3可以實現很多酷炫的圖形影像效果，比如圓角，漸變等，但是對於更加複雜的效果或者考慮到瀏覽器相容性的話，我們可能還是需要圖片。這些圖片從性質上來分，可以分為兩類：
1. 修飾性的圖片（一般使用background來引用）
2. 內容性的圖片（一般用image標籤來引用）
對於第一種往往包含小圖示，logo，特殊效果的按鈕文字等，以及非純色背景等。這些圖片往往從美工過來的視覺稿psd中切圖來獲取。
第二種往往圖片本身就是網頁的內容之一，比如一片文章中的配圖，示意圖等，廣告banner等，這種圖一般我們在頁面設計時（形成html靜態頁面），只用一個image佔位符來代替即可，不用從原始稿中切圖。當然，如果後續這些內容圖片並不會有更多版本更新，也是可以切過來的。
內容性的圖片往往儲存為jpg格式，因為影像資訊豐富，jpg可以較好勝任；
修飾性的圖片往往儲存為png8或者png24(支援半透明，圖片質量更高）
| Attribute Name | Elements | Description |
|---|---|---|
accept |
<form>, <input> |
List of types the server accepts, typically a file type. |
accept-charset |
<form> |
List of supported charsets. |
accesskey |
Global attribute | Defines a keyboard shortcut to activate or add focus to the element. |
action |
<form> |
The URI of a program that processes the information submitted via the form. |
align |
<applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr> |
Specifies the horizontal alignment of the element. |
alt |
<applet>, <area>, <img>, <input> |
Alternative text in case an image can't be displayed. |
async |
<script> |
Indicates that the script should be executed asynchronously. |
autocomplete |
<form>, <input> |
Indicates whether controls in this form can by default have their values automatically completed by the browser. |
autofocus |
<button>, <input>, <keygen>, <select>, <textarea> |
The element should be automatically focused after the page loaded. |
autoplay |
<audio>, <video> |
The audio or video should play as soon as possible. |
autosave |
<input> |
Previous values should persist dropdowns of selectable values across page loads. |
bgcolor |
<body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr> |
Background color of the element. Note: This is a legacy attribute. Please use the CSS |
border |
<img>, <object>, <table> |
The border width. Note: This is a legacy attribute. Please use the CSS |
buffered |
<audio>, <video> |
Contains the time range of already buffered media. |
challenge |
<keygen> |
A challenge string that is submitted along with the public key. |
charset |
<meta>, <script> |
Declares the character encoding of the page or script. |
checked |
<command>, <input> |
Indicates whether the element should be checked on page load. |
cite |
<blockquote>, <del>, <ins>, <q> |
Contains a URI which points to the source of the quote or change. |
class |
Global attribute | Often used with CSS to style elements with common properties. |
code |
<applet> |
Specifies the URL of the applet's class file to be loaded and executed. |
codebase |
<applet> |
This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored. |
color |
<basefont>, <font>, <hr> |
This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS |
cols |
<textarea> |
Defines the number of columns in a textarea. |
colspan |
<td>, <th> |
The colspan attribute defines the number of columns a cell should span. |
content |
<meta> |
A value associated with http-equiv or name depending on the context. |
contenteditable |
Global attribute | Indicates whether the element's content is editable. |
contextmenu |
Global attribute | Defines the ID of a <menu> element which will serve as the element's context menu. |
controls |
<audio>, <video> |
Indicates whether the browser should show playback controls to the user. |
coords |
<area> |
A set of values specifying the coordinates of the hot-spot region. |
data |
<object> |
Specifies the URL of the resource. |
data-* |
Global attribute | Lets you attach custom attributes to an HTML element. |
datetime |
<del>, <ins>, <time> |
Indicates the date and time associated with the element. |
default |
<track> |
Indicates that the track should be enabled unless the user's preferences indicate something different. |
defer |
<script> |
Indicates that the script should be executed after the page has been parsed. |
dir |
Global attribute | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left) |
dirname |
<input>, <textarea> |
|
disabled |
<button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> |
Indicates whether the user can interact with the element. |
download |
<a>, <area> |
Indicates that the hyperlink is to be used for downloading a resource. |
draggable |
Global attribute | Defines whether the element can be dragged. |
dropzone |
Global attribute | Indicates that the element accept the dropping of content on it. |
enctype |
<form> |
Defines the content type of the form date when the method is POST. |
for |
<label>, <output> |
Describes elements which belongs to this one. |
form |
<button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> |
Indicates the form that is the owner of the element. |
formaction |
<input>, <button> |
Indicates the action of the element, overriding the action defined in the <form>. |
headers |
<td>, <th> |
IDs of the <th> elements which applies to this element. |
height |
<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> |
Specifies the height of elements listed here. For all other elements, use the CSS |
hidden |
Global attribute | Prevents rendering of given element, while keeping child elements, e.g. script elements, active. |
high |
<meter> |
Indicates the lower bound of the upper range. |
href |
<a>, <area>, <base>, <link> |
The URL of a linked resource. |
hreflang |
<a>, <area>, <link> |
Specifies the language of the linked resource. |
http-equiv |
<meta> |
|
icon |
<command> |
Specifies a picture which represents the command. |
id |
Global attribute | Often used with CSS to style a specific element. The value of this attribute must be unique. |
ismap |
<img> |
Indicates that the image is part of a server-side image map. |
itemprop |
Global attribute | |
keytype |
<keygen> |
Specifies the type of key generated. |
kind |
<track> |
Specifies the kind of text track. |
label |
<track> |
Specifies a user-readable title of the text track. |
lang |
Global attribute | Defines the language used in the element. |
language |
<script> |
Defines the script language used in the element. |
list |
<input> |
Identifies a list of pre-defined options to suggest to the user. |
loop |
<audio>, <bgsound>, <marquee>, <video> |
Indicates whether the media should start playing from the start when it's finished. |
low |
<meter> |
Indicates the upper bound of the lower range. |
manifest |
<html> |
Specifies the URL of the document's cache manifest. |
max |
<input>, <meter>, <progress> |
Indicates the maximum value allowed. |
maxlength |
<input>, <textarea> |
Defines the maximum number of characters allowed in the element. |
media |
<a>, <area>, <link>, <source>, <style> |
Specifies a hint of the media for which the linked resource was designed. |
method |
<form> |
Defines which HTTP method to use when submitting the form. Can be GET (default) or POST. |
min |
<input>, <meter> |
Indicates the minimum value allowed. |
multiple |
<input>, <select> |
Indicates whether multiple values can be entered in an input of the type email or file. |
name |
<button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param> |
Name of the element. For example used by the server to identify the fields in form submits. |
novalidate |
<form> |
This attribute indicates that the form shouldn't be validated when submitted. |
open |
<details> |
Indicates whether the details will be shown on page load. |
optimum |
<meter> |
Indicates the optimal numeric value. |
pattern |
<input> |
Defines a regular expression which the element's value will be validated against. |
ping |
<a>, <area> |
|
placeholder |
<input>, <textarea> |
Provides a hint to the user of what can be entered in the field. |
poster |
<video> |
A URL indicating a poster frame to show until the user plays or seeks. |
preload |
<audio>, <video> |
Indicates whether the whole resource, parts of it or nothing should be preloaded. |
radiogroup |
<command> |
|
readonly |
<input>, <textarea> |
Indicates whether the element can be edited. |
rel |
<a>, <area>, <link> |
Specifies the relationship of the target object to the link object. |
required |
<input>, <select>, <textarea> |
Indicates whether this element is required to fill out or not. |
reversed |
<ol> |
Indicates whether the list should be displayed in a descending order instead of a ascending. |
rows |
<textarea> |
Defines the number of rows in a text area. |
rowspan |
<td>, <th> |
Defines the number of rows a table cell should span over. |
sandbox |
<iframe> |
|
scope |
<th> |
|
scoped |
<style> |
|
seamless |
<iframe> |
|
selected |
<option> |
Defines a value which will be selected on page load. |
shape |
<a>, <area> |
|
size |
<input>, <select> |
Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters. |
sizes |
<link>, <img>, <source> |
|
span |
<col>, <colgroup> |
|
spellcheck |
Global attribute | Indicates whether spell checking is allowed for the element. |
src |
<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> |
The URL of the embeddable content. |
srcdoc |
<iframe> |
|
srclang |
<track> |
|
srcset |
<img> |
|
start |
<ol> |
Defines the first number if other than 1. |
step |
<input> |
|
style |
Global attribute | Defines CSS styles which will override styles previously set. |
summary |
<table> |
|
tabindex |
Global attribute | Overrides the browser's default tab order and follows the one specified instead. |
target |
<a>, <area>, <base>, <form> |
|
title |
Global attribute | Text to be displayed in a tooltip when hovering over the element. |
type |
<button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu> |
Defines the type of the element. |
usemap |
<img>, <input>, <object> |
|
value |
<button>, <option>, <input>, <li>, <meter>, <progress>, <param> |
Defines a default value which will be displayed in the element on page load. |
width |
<canvas>, <embed>, <iframe>, <img>, <input>,
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes <object>, <video> |
For the elements listed here, this establishes the element's width. |
wrap |
<textarea> |
Indicates whether the text should be wrapped. |
大多數元素的屬性都有兩個面孔：content attribute以及IDL attribute
content attribute是當你從content(html程式碼）中直接設定時的屬性(比如<img src="xxx.img"/>中的src屬性)，而你可以通過element.setAttribute()或者element.getAttribute()函式來set和get的屬性。
content屬性通常總是一個string，即使當預期的值應該是一個integer的情況下。比如，為了使用content attribute來設定一個<input>元素的maxlength為42時，你就呼叫setAttribute(“maxlength","42")在那個元素上。
IDL屬性則被公認為是一個javascript的屬性。這些屬性你可以使用javascript屬性（類似於element.foo)來讀或寫。IDL attribute總會使用（但是有可能變形）underlying content attribute來返回一個value（當你get it時），會在content attribute中儲存一些屬性當你set it。換句話說，IDL attribute，基本上就是用來反映conent attribute的。
大多數時候，IDL attribute會返回返回他們實際使用的values.比如，預設的<input>元素的type是"text",所以如果你通過input.type="foobar"來設定type,則<input>袁術將會在appearance和behaviour上是text type，而"type" content attribute的value將會被設定為"foobar".然而type的IDL attribute將會返回"text"
IDL attribute並不總是string,比如，input.maxlength是一個數值型(signed long)。當使用IDL attribute,你讀或寫desired type, 那麼input.maxlength總廠會返回一個number，當set input.maxlength時，則它需要一個number引數。如果你傳入其他型別，則她會自動轉換為一個number