Category Archives: HTML

怪异模式与标准模式

很久以前,网页基本上可以说是分两种,一种是针对网景浏览器(Netscape Navagator)而写的,一种是针对微软IE浏览器而写的。当W3C开始制定web标准后,这些浏览器厂商不可能立即采用这些标准,因为这会影响当时网络上存在的大量网页。为此,浏览器厂商决定引入两种模式来有针对性地解析网页。

现在网页浏览器的布局引擎(layout engine)中使用了3中模式:怪异模式(quirks mode)、准标准模式(almost standards mode)和完全标准模式(full standards mode)。在怪异模式下,浏览器会模拟网景4(Navigator 4)和IE5浏览器的非标准行为来解析网页——这是很有必要的,因为需要支持那些在网络标准被广泛采纳之前就已经存在的网站。在完全标准模式下,浏览器会按照HTML和CSS标准来解析网页(但愿如此-_-)。在准标准模式下,浏览器的解析行为已经比较标准了,但是还是会有一小部分的怪异行为。

浏览器如何决定使用何种模式来解析网页

对HTML文档而言,浏览器会根据文件头部的DOCTYPE文档类型声明来判断是采用怪异模式还是标准模式来解析网页。为确保浏览器会使用完全标准模式来解析你的网页,请确保你的网页头部有类似下面这样的DOCTYPE文档类型声明:

上例中的DOCTYPE声明(<!DOCTYPE html>)可能是最简答的文档类型声明了,而且也是HTML5标准推荐的文档类型声明。更早的HTML标准推荐的是其他的文档类型。但是所有现世的浏览器(包括很老的IE6)都会使用完全标准模式来解析这种文档类型声明的html文件,所以使用其他的(同时书写上也更复杂的)DOCTYPE文档类型声明是毫无理由的。如果你使用其他的DOCTYPE文档类型声明,你可能一不小心就写了一个触发了准标准模式或怪异模式的DOCTYPE文档类型了。

请务必确保将DOCTYPE文档声明写于文档的最头部——任何出现在DOCTYPE文档类型声明之前的内容(比如注释、xml声明)都会在IE9及更早的IE浏览器中触发怪异模式。

在HTML5标准里,DOCTYPE文档类型声明的唯一目的就是激活完全标准模式。在更早的HTML标准里,DOCTYPE文档类型声明被赋予了一些其他含义,但是从没有哪个浏览器会把DOCTYPE用于判断是使用怪异模式还是标准模式之外的其他用途。

XHTML

这里应该敲下黑板。如果你的服务器在HTTP响应头的Content-Type里使用 application/xhtml+xml 这个MIME类型来将你的网页声明为XHTML的话,你不再需要通过声明一个DOCTYPE来激活标准模式,因为这类文件总是会被浏览器按完全标准模式进行解析。但是需要注意的是,使用 application/xhtml+xml 这个MIME类型的话,IE8浏览器会出现下载对话框而不是显示对应的网页,因为IE8不认识这个文档格式——第一个支持XHTML格式的IE浏览器是IE9。

如果你使用 text/html 这个MIME类型来返回类XHTML文件的话,浏览器会按照HTML文件来对待这些网页,这时候你就需要显示地进行DOCTYPE文档类型声明来触发标准模式了。

如何知道当前使用的模式

火狐浏览器中,可通过在上下文菜单里选择“查看页面信息”查看“渲染模式”。

IE浏览器中,可通过按F12查看“文档模式”。

这些模式间的区别是什么

详见怪异行为清单准标准模式

参考资料:

https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode

 

Insert Flash movie

Code for the previous example is as below:

Please note that we have set the value of wmode to be transparent to make the four sides of the flash movie to be transparent and set the background color of the container to be the same color as the edges of the flash movie, so that the flash movie looks better.

Or some code like the below:

And the corresponding demo is as below:

HTML entities

Source: http://www.freeformatter.com/html-entities.html

Complete list of HTML entities with their numbers and names. Also included is a full list of ASCII characters that can be represented in HTML (i.e. printable characters).

ASCII Characters (Printable)

Only printable characters are displayed as control characters (0-31) shouldn’t be present in HTML pages since they have no visual representations.

Character Entity Name Entity Number Description
  &nbsp; &#32; Space
! &#33; Exclamation mark
" &#34; Quotation mark
# &#35; Number sign
$ &#36; Dollar sign
% &#37; Percent sign
& &amp; &#38; Ampersand
' &#39; Apostrophe
( &#40; Opening/Left Parenthesis
) &#41; Closing/Right Parenthesis
* &#42; Asterisk
+ &#43; Plus sign
, &#44; Comma
- &#45; Hyphen
. &#46; Period
/ &#47; Slash
0 &#48; Digit 0
1 &#49; Digit 1
2 &#50; Digit 2
3 &#51; Digit 3
4 &#52; Digit 4
5 &#53; Digit 5
6 &#54; Digit 6
7 &#55; Digit 7
8 &#56; Digit 8
9 &#57; Digit 9
: &#58; Colon
; &#59; Semicolon
< &lt; &#60; Less-than
= &#61; Equals sign
> &gt; &#62; Greater than
? &#63; Question mark
@ &#64; At sign
A &#65; Uppercase A
B &#66; Uppercase B
C &#67; Uppercase C
D &#68; Uppercase D
E &#69; Uppercase E
F &#70; Uppercase F
G &#71; Uppercase G
H &#72; Uppercase H
I &#73; Uppercase I
J &#74; Uppercase J
K &#75; Uppercase K
L &#76; Uppercase L
M &#77; Uppercase M
N &#78; Uppercase N
O &#79; Uppercase O
P &#80; Uppercase P
Q &#81; Uppercase Q
R &#82; Uppercase R
S &#83; Uppercase S
T &#84; Uppercase T
U &#85; Uppercase U
V &#86; Uppercase V
W &#87; Uppercase W
X &#88; Uppercase X
Y &#89; Uppercase Y
Z &#90; Uppercase Z
[ &#91; Opening/Left square bracket
\ &#92; Backslash
] &#93; Closing/Right square bracket
^ &#94; Caret
_ &#95; Underscore
` &#96; Grave accent
a &#97; Lowercase a
b &#98; Lowercase b
c &#99; Lowercase c
d &#100; Lowercase d
e &#101; Lowercase e
f &#102; Lowercase f
g &#103; Lowercase g
h &#104; Lowercase h
i &#105; Lowercase i
j &#106; Lowercase j
k &#107; Lowercase k
l &#108; Lowercase l
m &#109; Lowercase m
n &#110; Lowercase n
o &#111; Lowercase o
p &#112; Lowercase p
q &#113; Lowercase q
r &#114; Lowercase r
s &#115; Lowercase s
t &#116; Lowercase t
u &#117; Lowercase u
v &#118; Lowercase v
w &#119; Lowercase w
x &#120; Lowercase x
y &#121; Lowercase y
z &#122; Lowercase z
{ &#123; Opening/Left curly brace
| &#124; Vertical bar
} &#125; Closing/Right curly brace
~ &#126; Tilde

ISO-8859-1 Characters

Full list of supported ISO-8859-1 characters. Notice that the names are case sensitive, hence if you want an uppercase letter, the name should
also start with an uppercase letter.

Character Entity Name Entity Number Description
À &Agrave; &#192; Capital a with grave accent
Á &Aacute; &#193; Capital a with acute accent
 &Acirc; &#194; Capital a with circumflex accent
à &Atilde; &#195; Capital a with tilde
Ä &Auml; &#196; Capital a with umlaut
Å &Aring; &#197; Capital a with ring
Æ &AElig; &#198; Capital ae
Ç &Ccedil; &#199; Capital c with cedilla
È &Egrave; &#200; Capital e with grave accent
É &Eacute; &#201; Capital e with acute accent
Ê &Ecirc; &#202; Capital e with circumflex accent
Ë &Euml; &#203; Capital e with umlaut
Ì &Igrave; &#204; Capital i with grave accent
Í &Iacute; &#205; Capital i with accute accent
Î &Icirc; &#206; Capital i with circumflex accent
Ï &Iuml; &#207; Capital i with umlaut
Ð &ETH; &#208; Capital eth (Icelandic)
Ñ &Ntilde; &#209; Capital n with tilde
Ò &Ograve; &#210; Capital o with grave accent
Ó &Oacute; &#211; Capital o with accute accent
Ô &Ocirc; &#212; Capital o with circumflex accent
Õ &Otilde; &#213; Capital o with tilde
Ö &Ouml; &#214; Capital o with umlaut
Ø &Oslash; &#216; Capital o with slash
Ù &Ugrave; &#217; Capital u with grave accent
Ú &Uacute; &#218; Capital u with acute accent
Û &Ucirc; &#219; Capital u with circumflex accent
Ü &Uuml; &#220; Capital u with umlaut
Ý &Yacute; &#221; Capital y with acute accent
Þ &THORN; &#222; Capital thorn (Icelandic)
ß &szlig; &#223; Lowercase sharp s (German)
à &agrave; &#224; Lowercase a with grave accent
á &aacute; &#225; Lowercase a with acute accent
â &acirc; &#226; Lowercase a with circumflex accent
ã &atilde; &#227; Lowercase a with tilde
ä &auml; &#228; Lowercase a with umlaut
å &aring; &#229; Lowercase a with ring
æ &aelig; &#230; Lowercase ae
ç &ccedil; &#231; Lowercase c with cedilla
è &egrave; &#232; Lowercase e with grave accent
é &eacute; &#233; Lowercase e with acute accent
ê &ecirc; &#234; Lowercase e with circumflex accent
ë &euml; &#235; Lowercase e with umlaut
ì &igrave; &#236; Lowercase i with grave accent
í &iacute; &#237; Lowercase i with acute accent
î &icirc; &#238; Lowercase i with circumflex accent
ï &iuml; &#239; Lowercase i with umlaut
ð &eth; &#240; Lowercase eth (Icelandic)
ñ &ntilde; &#241; Lowercase n with tilde
ò &ograve; &#242; Lowercase o with grave accent
ó &oacute; &#243; Lowercase o with acute accent
ô &ocirc; &#244; Lowercase o with circumflex accent
õ &otilde; &#245; Lowercase o with tilde
ö &ouml; &#246; Lowercase o with umlaut
ø &oslash; &#248; Lowercase o with slash
ù &ugrave; &#249; Lowercase u with grave accent
ú &uacute; &#250; Lowercase u with acute accent
û &ucirc; &#251; Lowercase u with circumflex accent
ü &uuml; &#252; Lowercase u with umlaut
ý &yacute; &#253; Lowercase y with acute accent
þ &thorn; &#254; Lowercase thorn (Icelandic)
ÿ &yuml; &#255; Lowercase y with umlaut

ISO-8859-1 Symbols

Full list of supported ISO-8859-1 symbols in HTML.

Symbol Entity Name Entity Number Description
  &nbsp; &#160; Non-breaking space
¡ &iexcl; &#161; Inverted exclamation mark
¢ &cent; &#162; Cent
£ &pound; &#163; Pound
¤ &curren; &#164; Currency
¥ &yen; &#165; Yen
¦ &brvbar; &#166; Broken vertical bar
§ &sect; &#167; Section
¨ &uml; &#168; Spacing diaeresis
© &copy; &#169; Copyright
ª &ordf; &#170; Feminine ordinal indicator
« &laquo; &#171; Opening/Left angle quotation mark
¬ &not; &#172; Negation
­ &shy; &#173; Soft hyphen
® &reg; &#174; Registered trademark
¯ &macr; &#175; Spacing macron
° &deg; &#176; Degree
± &plusmn; &#177; Plus or minus
² &sup2; &#178; Superscript 2
³ &sup3; &#179; Superscript 3
´ &acute; &#180; Spacing acute
µ &micro; &#181; Micro
&para; &#182; Paragraph
¸ &cedil; &#184; Spacing cedilla
¹ &sup1; &#185; Superscript 1
º &ordm; &#186; Masculine ordinal indicator
» &raquo; &#187; Closing/Right angle quotation mark
¼ &frac14; &#188; Fraction 1/4
½ &frac12; &#189; Fraction 1/2
¾ &frac34; &#190; Fraction 3/4
¿ &iquest; &#191; Inverted question mark
× &times; &#215; Multiplication
÷ &divide; &#247; Divide

Math Symbols

Full list of all supported math symbols in HTML.

Symbol Entity Name Entity Number Description
&forall; &#8704; For all
&part; &#8706; Part
&exist; &#8707; Exist
&empty; &#8709; Empty
&nabla; &#8711; Nabla
&isin; &#8712; Is in
&notin; &#8713; Not in
&ni; &#8715; Ni
&prod; &#8719; Product
&sum; &#8721; Sum
&minus; &#8722; Minus
&lowast; &#8727; Asterisk (Lowast)
&radic; &#8730; Square root
&prop; &#8733; Proportional to
&infin; &#8734; Infinity
&ang; &#8736; Angle
&and; &#8743; And
&or; &#8744; Or
&cap; &#8745; Cap
&cup; &#8746; Cup
&int; &#8747; Integral
&there4; &#8756; Therefore
&sim; &#8764; Similar to
&cong; &#8773; Congurent to
&asymp; &#8776; Almost equal
&ne; &#8800; Not equal
&equiv; &#8801; Equivalent
&le; &#8804; Less or equal
&ge; &#8805; Greater or equal
&sub; &#8834; Subset of
&sup; &#8835; Superset of
&nsub; &#8836; Not subset of
&sube; &#8838; Subset or equal
&supe; &#8839; Superset or equal
&oplus; &#8853; Circled plus
&otimes; &#8855; Circled times
&perp; &#8869; Perpendicular
&sdot; &#8901; Dot operator

Greek Letters

Full list of all supported greek letters in HTML.

Letter Entity Name Entity Number Description
Α &Alpha; &#913; Alpha
Β &Beta; &#914; Beta
Γ &Gamma; &#915; Gamma
Δ &Delta; &#916; Delta
Ε &Epsilon; &#917; Epsilon
Ζ &Zeta; &#918; Zeta
Η &Eta; &#919; Eta
Θ &Theta; &#920; Theta
Ι &Iota; &#921; Iota
Κ &Kappa; &#922; Kappa
Λ &Lambda; &#923; Lambda
Μ &Mu; &#924; Mu
Ν &Nu; &#925; Nu
Ξ &Xi; &#926; Xi
Ο &Omicron; &#927; Omicron
Π &Pi; &#928; Pi
Ρ &Rho; &#929; Rho
Σ &Sigma; &#931; Sigma
Τ &Tau; &#932; Tau
Υ &Upsilon; &#933; Upsilon
Φ &Phi; &#934; Phi
Χ &Chi; &#935; Chi
Ψ &Psi; &#936; Psi
Ω &Omega; &#937; Omega
α &alpha; &#945; alpha
β &beta; &#946; beta
γ &gamma; &#947; gamma
δ &delta; &#948; delta
ε &epsilon; &#949; epsilon
ζ &zeta; &#950; zeta
η &eta; &#951; eta
θ &theta; &#952; theta
ι &iota; &#953; iota
κ &kappa; &#954; kappa
λ &lambda; &#955; lambda
μ &mu; &#956; mu
ν &nu; &#957; nu
ξ &xi; &#958; xi
ο &omicron; &#959; omicron
π &pi; &#960; pi
ρ &rho; &#961; rho
ς &sigmaf; &#962; sigmaf
σ &sigma; &#963; sigma
σ &sigma; &#963; sigma
τ &tau; &#964; tau
υ &upsilon; &#965; upsilon
φ &phi; &#966; phi
χ &chi; &#967; chi
ψ &psi; &#968; psi
ω &omega; &#969; omega
ϑ &thetasym; &#977; Theta symbol
ϒ &upsih; &#978; Upsilon symbol
ϖ &piv; &#982; Pi symbol

Miscellaneous HTML entities

List of miscellaneous HTML entities.

Symbol Entity Name Entity Number Description
Π&OElig; &#338; Uppercase ligature OE
œ &oelig; &#339; Lowercase ligature OE
Š &Scaron; &#352; Uppercase S with caron
š &scaron; &#353; Lowercase S with caron
Ÿ &Yuml; &#376; Capital Y with diaeres
ƒ &fnof; &#402; Lowercase with hook
ˆ &circ; &#710; Circumflex accent
˜ &tilde; &#732; Tilde
&ensp; &#8194; En space
&emsp; &#8195; Em space
&thinsp; &#8201; Thin space
&zwnj; &#8204; Zero width non-joiner
&zwj; &#8205; Zero width joiner
&lrm; &#8206; Left-to-right mark
&rlm; &#8207; Right-to-left mark
&ndash; &#8211; En dash
&mdash; &#8212; Em dash
&lsquo; &#8216; Left single quotation mark
&rsquo; &#8217; Right single quotation mark
&sbquo; &#8218; Single low-9 quotation mark
&ldquo; &#8220; Left double quotation mark
&rdquo; &#8221; Right double quotation mark
&bdquo; &#8222; Double low-9 quotation mark
&dagger; &#8224; Dagger
&Dagger; &#8225; Double dagger
&bull; &#8226; Bullet
&hellip; &#8230; Horizontal ellipsis
&permil; &#8240; Per mille
&prime; &#8242; Minutes (Degrees)
&Prime; &#8243; Seconds (Degrees)
&lsaquo; &#8249; Single left angle quotation
&rsaquo; &#8249; Single right angle quotation
&oline; &#8254; Overline
&euro; &#8364; Euro
&trade; &#8482; Trademark
&larr; &#8592; Left arrow
&uarr; &#8593; Up arrow
&rarr; &#8594; Right arrow
&darr; &#8595; Down arrow
&harr; &#8596; Left right arrow
&crarr; &#8629; Carriage return arrow
&lceil; &#8968; Left ceiling
&rceil; &#8969; Right ceiling
&lfloor; &#8970; Left floor
&rfloor; &#8971; Right floor
&loz; &#9674; Lozenge
&spades; &#9824; Spade
&clubs; &#9827; Club
&hearts; &#9829; Heart
&diams; &#9830; Diamond

HTML reference

Reference: http://www.htmlcssvqs.com/8ed/appendixes/html-reference.php

There are two tables below: Table A.1 lists global attributes, which you apply to most HTML elements; Table A.2 contains HTML elements and their specific (that is, not global) attributes. Each element has a short description and an annotated list of its associated attributes.

Consult www.caniuse.com and findmebyip.com/litmus for the latest on browser support for the HTML5 features.

Table A.1 HTML Global Attributes – The following attributes may be used with most HTML elements
Global Attribute Description Version
  accesskey For adding a keyboard shortcut to an element
aria-* For associating accessibility attribute values specified by WAI-ARIA 5
class For identifying a set of elements in order to apply styles to them
contenteditable For making the content of an element editable 5
contextmenu For identifying a contextual menu for an element (the value must be the same as a menu element’s id attribute) 5
data-* For storing custom data that is private to the page or application 5
dir For specifying the element’s text direction
draggable For making an element draggable 5
dropzone For identifying an element as a place where draggable elements can be dropped 5
event For associating an element with a script (event is a placeholder for the actual event name)
hidden For indicating that an element is not yet relevant or is no longer relevant 5
id For identifying a particular element so that it can be linked to, styled, or scripted with JavaScript
lang For specifying the language an element is written in
role For providing additional information to assistive devices about the role of an element as defined by WAI-ARIA 5
spellcheck For indicating whether the content of an element should have its spelling and grammar checked 5
style For adding local style sheet information
tabindex For defining the order in which the Tab key takes the visitor through elements
title For labeling elements with tool tips
Table A.2 HTML Elements and Attributes
Element/ Attribute(s) Description Version
a For creating links and anchors
  href For specifying the URL of a page or the name of an anchor that a link goes to
hreflang For specifying the language of the linked resource 5
media For describing the media for which the target document was defined 5
rel For identifying the nature of the link
target For specifying the window or iframe where a link should open *
type For noting a resource’s MIME type
abbr For explaining the meaning of abbreviations and acronyms *
address For identifying contact information for the nearest article or body element ancestor
area For specifying the coordinates of image maps
accesskey For adding a keyboard shortcut to a particular region of the map
alt For giving information about an area
coords For giving the coordinates of an area in an image map
href For specifying the destination URL of a link in an area of an image map
hreflang For specifying the language of the linked resource 5
media For describing the media for which the target document was defined 5
rel For identifying the kind of link
shape For specifying the shape of an area in an image map
target For specifying the window or iframe where a link should open *
article For identifying a self-contained composition in a page that is in principle independently distributable or reusable 5
aside For identifying a section of a page that consists of content that is tangentially related to the content around it 5
audio For embedding sound or audio in a page 5
autoplay For telling the browser to start playing the audio file as soon as it can 5
controls For telling the browser to provide controls for the audio element 5
crossorigin For setting cross-origin request credentials 5
loop For telling the audio file to start over without interruption upon reaching its end 5
mediagroup For associating multiple media files together 5
muted For controlling the default state of audio output 5
preload For specifying whether the browser can begin downloading the audio file before the visitor starts playing it 5
src For identifying the URL of the audio file to play 5
b For identifying a span of text to which attention is being drawn for utilitarian purposes, without conveying any extra importance and with no implication of an alternate voice or mood *
base For specifying the base URL of the page
href For specifying the URL to be used to generate relative URLs
target For specifying the default target for the links on the page *
bdi For identifying a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting 5
dir For specifying text direction 5
bdo For explicitly formatting the text direction of its content
dir For specifying text direction
blockquote For identifying a section quoted from another source
cite For giving the URL of the source
body For enclosing the main content area of a page
br For creating a line break
button For creating buttons
autofocus For specifying that the button is to be focused as soon as the page is loaded 5
disabled For indicating that the element is not available in the current state
form For associating the element with a form that it is not a part of 5
formaction For overriding the form’s action attribute 5
formenctype For overriding the form’s enctype attribute 5
formmethod For overriding the form’s method attribute 5
formnovalidate For overriding the form’s novalidate attribute 5
formtarget For overriding the form’s target attribute 5
name For identifying the data sent with a button, or for identifying the button itself (perhaps for a JavaScript function)
type For using the button in a form element
value For specifying the data that should be submitted when the button is clicked
canvas To provide scripts with a resolution-dependent bitmap canvas for rendering graphics on the fly 5
width, height For specifying the size of the canvas 5
caption For creating a caption for a table
cite For marking text as a citation
code For marking text as computer code
col For joining columns in a table into a non-structural group
span For specifying the number of columns in a column group
colgroup For joining columns in a table into a structural column group
span For specifying the number of columns in a column group
command For representing a command the user can invoke, such as defining a keyboard command 5
checked For indicating the checked state of the command (if the command type is “checkbox” or “radio”) 5
disabled For indicating that the command is not available in the current state 5
icon For providing an image that represents the command 5
label For showing the name of the command to the user 5
radiogroup For identifying the radio buttons that will be toggled when the command is toggled (if the command type is “radio”) 5
type For indicating the type of command 5
datalist To contain a group of option elements that represent a predefined set of options for another form control 5
dd For marking a definition in a list
details For creating a disclosure widget from which the visitor can obtain additional information or controls 5
open For specifying whether the element is open or closed by default 5
del To mark deleted text
cite For referencing a URL that explains the change
datetime For specifying the time and date of the change
dfn For specifying the defining instance of a term
title For providing the definition of the term
div For dividing a page into block-level sections
dl For creating a definition list
dt For marking a term to be defined in a list
em To mark text that has stress emphasis *
embed For adding multimedia *
src For specifying the URL of a multimedia file
type For identifying the MIME type of the multimedia file
width, height For specifying the size of the embedded multimedia player
fieldset For grouping a set of form elements together
disabled For disabling all form controls within the fieldset 5
form For associating the element with a form that it is not a part of 5
name For providing the fieldset with a name for use later 5
figcaption For identifying a caption or legend for the contents of its parent figure element 5
figure For identifying content that is referenced within the main flow of the document but that could be moved elsewhere without affecting the flow of the document 5
footer For identifying a footer for the nearest ancestor body, section, article, or aside element 5
form For designating a form to collect data for submission
accept-charset For identifying the character encoding to be used with the form submission (defaults to the page’s character set)
action For giving the URL of the script that will process the form data
autocomplete For preventing the browser from providing/remembering autocompletion values when the attribute is set to “off” (the default is “on”; that is, autocompletion is allowed by default) 5
enctype For making sure files are sent to the server in the proper format
method For specifying how data should be sent to the server
name For providing the form with a name for use later
novalidate For allowing the form to be submitted without validation 5
target For identifying the target window or iframe of the form’s submission *
h1, h2, h3, h4, h5, h6 For creating headings
head For creating the head section, which contains information about the page, including the title, author, keywords, style sheets, and scripts
header For identifying a group of introductory content or navigational aids 5
hgroup For identifying the heading of a section when a heading has multiple levels 5
hr For identifying a paragraph-level thematic break *
html For identifying a text document as an HTML document
manifest For specifying an application cache manifest that is used when the page is offline 5
i For marking a span of text that is in an alternate voice or mood or that is otherwise offset from the normal prose in a manner indicating a different quality of text *
iframe For creating a nested browsing context *
name For specifying the name of the iframe, to be used as a target
sandbox For specifying additional restrictions on the content of the iframe, for security purposes 5
seamless For specifying whether the iframe should appear to be part of the containing page 5
src For specifying the URL of the initial page
srcdoc For specifying the URL of the initial page 5
width, height For specifying the size of the iframe
img For inserting images on a page
alt For offering alternate text that is displayed if the image is not and that is for users of assistive devices
crossorigin For allowing images from third-party sites (that allow cross-origin access) to be used with the canvas element
ismap For indicating that the element provides access to a server-side image map (the element must be a descendant of an a element)
src For specifying the URL of an image
usemap For specifying the client-side image map that should be used with the referenced image
width, height For specifying the size of an image so that the page is loaded more quickly, or for scaling
input For creating form elements
accept For informing the browser what file types will be accepted if the input type is “file”
alt For providing a textual alternate if the input type is “image”
autocomplete For preventing the browser from providing/remembering autocompletion values when the attribute is set to “off” (the default is “on”; that is, autocompletion is allowed by default) 5
autofocus For specifying that the input is to be focused as soon as the page is loaded 5
checked For marking a radio button or checkbox by default
dirname For identifying the direction of the entered text 5
disabled For indicating that the input is not available in the current state
form For associating the element with a form that it is not a part of 5
formaction For overriding the form’s action attribute 5
formenctype For overriding the form’s enctype attribute 5
formmethod For overriding the form’s method attribute 5
formnovalidate For overriding the form’s novalidate attribute 5
formtarget For overriding the form’s target attribute 5
list For associating the input with a datalist 5
max, min For indicating the input element’s allowed range of values 5
maxlength For specifying the maximum number of characters that can be entered in an input element
multiple For specifying whether the user can be allowed to enter more than one value 5
name For identifying data collected by an element
pattern For providing a regular expression against which the input element’s value is checked 5
placeholder For providing a hint to aid in data entry 5
readonly For keeping visitors from changing certain form elements
required For identifying that the element must not be blank to submit the form (not allowed when the input type is “hidden,” “image,” or some button types) 5
size For specifying the length of a text or password box
src For specifying the URL of an active image
step For controlling the granularity and specificity of allowed values 5
type For specifying if a form element is a text box, password box, radio button, checkbox, hidden field, submit button, reset button, active image, date/time box, number box, or color box; for selecting from a range of values; or for entering a telephone number, email address, or set of search terms *
value For specifying the default data in a form element
width, height For specifying the dimensions of the input (only allowed when the input type is “image”) *
ins For marking an addition to the document
cite For referencing a URL that explains the change
datetime For specifying the time and date of the change
kbd For marking user input
keygen For generating a public and private key pair 5
autofocus For specifying that the keygen element is to be focused as soon as the page is loaded 5
challenge For generating a challenge to go along with the key pair 5
disabled For indicating that the element is not available in the current state 5
form For associating the element with a form that it is not a part of 5
keytype For identifying the kind of key pair to be generated 5
name For identifying the data that is gathered 5
label For labeling form elements
for For specifying which form element the label belongs to
form For associating the element with a form that it is not a part of 5
legend For labeling fieldsets
li For creating a list item
value For determining the initial value of the list item (if it is the child of an ol) *
link For linking to an external style sheet or other external resource
href For specifying the URL of the resource
hreflang For specifying the language of the linked resource 5
media For defining a style sheet’s targeted media types and/or media features
rel For identifying the kind of link
sizes For identifying the size of the referenced icon (for use only when the rel attribute is “icon”) 5
title For labeling an alternate style sheet or other resource
type For noting a resource’s MIME type (only required if the link type is not “text/css”)
map For creating a client-side image map
name For naming a map so it can be referenced later
mark For highlighting text for reference purposes due to its relevance in another context 5
math For embedding MathML in the page 5
menu For containing a list of commands *
label For labeling the menu 5
type For identifying the kind of menu being used: “context,” “list” (default), or “toolbar” 5
meta For associating various kinds of metadata with the page
charset For identifying the character encoding of the page itself 5
content For adding extra information about the page itself
http-equiv For creating automatic jumps to other pages, setting the default scripting language, and declaring the character encoding
name For identifying extra information about the page
meter For representing a measurement within a known range 5
high, low For specifying a range of values as being “high” or “low” 5
max, min For identifying the maximum and minimum allowable values 5
name For identifying the data that is gathered 5
optimum For identifying the optimum value 5
value For indicating the current value of the meter (required) 5
nav For identifying a section of a page that links to other pages or to parts within the page 5
noscript For providing alternatives to scripts
object For embedding objects in Web pages
data For identifying the source of the multimedia file to be embedded
form For associating the element with a form that it is not a part of 5
name For identifying the object (e.g., so it can be scripted)
type For noting the object’s MIME type
typemustmatch For indicating that the resource specified in the object’s data attribute must have the same MIME type as identified in the object’s type attribute (allowed only if the object’s data and type are both specified)
usemap For indicating whether the object has an associated image map
width, height For specifying the dimensions of the object’s box
ol For creating ordered lists
reversed For specifying whether the list is descending (. . . , 3, 2, 1) 5
start For specifying the initial value of the first list item *
type For specifying the kind of numerals that should begin each list item *
optgroup For grouping a set of option elements under a common label within a select element
disabled For indicating that the element is not available in the current state
label For labeling the group of options
option For creating the individual options in a select or datalist element
disabled For indicating that the element is not available in the current state
label For specifying how the option should appear in the menu
selected For making a menu option be selected by default in a blank form
value For specifying the initial value of a menu option
output For representing the result of a calculation 5
for For creating an explicit association between the result of a calculation and the values that went into the calculation 5
form For associating the element with a form that it is not a part of 5
name For identifying the data that is gathered 5
p For creating a paragraph
param For setting properties of an object
name For identifying the kind of property
value For setting the value of the named property
pre For representing a block of preformatted text
progress For identifying the completion progress of a task 5
max Must be a valid floating-point number greater than zero (if present) 5
value Must be a valid floating-point number equal to or greater than zero (and less than or equal to the value of the max attribute, if it is present) 5
q For quoting short passages from another source
cite For giving the URL of the source of the quote
rp For providing parentheses around a ruby text component of a ruby annotation in browsers that don’t support ruby annotations 5
rt For marking the ruby text component of a ruby text annotation 5
ruby For allowing text to be marked up with ruby annotations 5
s For identifying text that is no longer accurate or no longer relevant *
samp For representing sample output from a program or computing system
script For adding “automatic” scripts to a page
async For influencing script loading and execution 5
charset For specifying the character set an external script is written in
defer For influencing script loading and execution
src For referencing an external script
type For specifying the scripting language the script is written in (only required if the script type is not “text/javascript”) *
section For identifying a section of a document 5
select For creating form control for selecting from a set of options
autofocus For specifying that the select element is to be focused as soon as the page is loaded 5
disabled For indicating that the element is not available in the current state
form For associating the element with a form that it is not a part of 5
multiple For allowing users to choose more than one option in the menu
name For identifying the data collected by the menu
required For identifying that the user must select one of the options in order to submit the form (the first child option element must be a placeholder or an empty value) 5
size For specifying the number of items initially visible in the menu (and for displaying the menu as a list)
small For representing side comments such as small print *
source For identifying multiple alternative media resources within an audio or video element 5
crossorigin For setting cross-origin request credentials 5
media For identifying the intended media type of the resource 5
src For identifying the URL of the audio or video file to play 5
type For noting a resource’s MIME type 5
span For wrapping content in an element that has no intrinsic semantic meaning *
strong For indicating strong importance of the element’s content *
style For embedding style information in a page
media For indicating a style sheet’s purpose
scoped For applying styles only to the descendants of the element’s parent 5
type For indicating a style sheet’s MIME type (only required if the style type is not “text/css”) *
sub For creating subscripts
summary For identifying a summary, caption, or legend for the contents of its parent details element 5
sup For creating superscripts
svg For embedding Scalable Vector Graphics in the page 5
table For creating tables
tbody For identifying the body of the table; in contrast with the header (thead) or footer (tfoot)
td, th For creating regular and header cells, respectively, in a table
colspan For spanning a cell across more than one column
rowspan For spanning a cell across more than one row
scope For identifying to which rows, columns, rowgroups, or columngroups a th applies
textarea For creating text block entry areas in a form
autofocus For specifying that the text area is to be focused as soon as the page is loaded 5
dirname For identifying the direction of the entered text 5
disabled For indicating that the element is not available in the current state
form For associating the element with a form that it is not a part of 5
maxlength For specifying the maximum number of characters that can be entered in a textarea
name For identifying the data that is gathered with the text block
placeholder For providing a hint to aid in data entry 5
readonly For protecting a text area’s contents
required For indicating that the element must not be blank in order to submit the form 5
rows, cols For specifying the number of rows and columns in the text block
wrap For specifying the use of soft or hard wraps when content of field is submitted 5
tfoot, thead For identifying the footer and header area of a table
time For specifying a date, a time, or both 5
datetime For providing a machine-readable version of the time or date expressed in the element’s text 5
pubdate For specifying the publication date and time of the element’s ancestor article or body element 5
title For creating the title of the page (required)
tr For creating rows in a table
track For specifying external timed text tracks for the parent audio or video element 5
default For indicating which track is the default 5
kind For identifying whether the track is “subtitles,” “captions,” “descriptions,” “chapters,” or “metadata” 5
label For providing a user-readable name for the track 5
src For identifying the URL of the track’s data 5
srclang For identifying the language of the track’s data 5
u For displaying a span of text with an unarticulated, though explicitly rendered, non-textual annotation *
ul For creating unordered lists
var For marking text as a variable name
video For embedding videos, movies, and captioned audio files 5
autoplay For telling the browser to start playing the video file as soon as it can 5
controls For telling the browser to provide controls for the video element 5
crossorigin For setting cross-origin request credentials 5
loop For telling the video file to start over without interruption upon reaching its end 5
mediagroup For associating multiple media files together 5
muted For controlling the default state of audio output 5
poster For specifying the URL of an image to use as a placeholder while media loads, or in case of an error loading 5
preload For specifying whether the browser can begin downloading the media file before the visitor starts playing it 5
src For identifying the URL of the video file to play 5
width, height For specifying the dimensions of the video 5
wbr For identifying an appropriate place to insert a line-break into a word without hyphenation 5

HTML Tags备注

<!−−>
HTML’s comment tag, beginning with <!−− and ending with −−>.
<!DOCTYPE>
<a>
<abbr>
<acronym>
首字母缩写。HTML5 do not support this tag, please use <abbr> to replace it.
<address>
<applet>
HTML5不支持<applet>标签,请使用object标签代替。
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
应避免使用该标签。
<bdi>
<bdo>
<big>
<blockquote>
定义块引用。
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。
<code>
定义计算机代码文本。
<col>
<colgroup>
<command>
<datadtst>
<dd>
<del>
<details>
<dfn>
定义一个定义项目。
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
把文本定义为强调的内容。
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> – <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<keygen>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<menuitem>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
引用。用于简短的行内饮用。
<rp>
<rt>
<ruby>
<s>
<samp>
定义样本文本。
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
把文本定义为语气更强的强调的内容。
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
定义变量。可以将此标签与<pre>及<code标签配合使用。
<video>
Video size is adjusted in proportion to its original size
<wbr>

HTML元素title属性值定义的提示文字实现换行

用&#10;来换行就可以了!比如下面这行代码:

上面那行代码的实际效果如下:将鼠标放于此处查看title属性中定义的提示文字

HTML块级元素和行内元素

每一个HTML元素的display属性都有一个默认的值。具体的默认值是什么,取决于元素的类型。大部分HTML元素display属性的默认值是block或inline。

块级元素

块级元素总是另起一个新行,并占满可用宽度(尽可能地向左右两个方向延伸)。

<div>元素是一个块级元素。

一些块级元素(block-level elements):

  • <div>
  • <h1> – <h6>
  • <p>
  • <form>

行内元素(inline elements)

行内元素不会重新开始一个新行(译者注:注意,这并不是说span不能在新的一行上显示,如果一行的内容满了,span里的内容会显示在下一行的,这是内容排列的问题,不是因为span需要另起一个新行;而且span里的内容也可以一部分在某一行,一部分在下一行(仍然取决于内容的排列)),并且只会占用必要的宽度。这是在段落内的行内元素

一些行内元素:

  • <span>
  • <a>
  • <img>

HTML群体标签

HTML群体标签
标签 描述
<div> 描述一个文档中的一部分(块级)
<span> 描述一个文档中的一部分(行内)

编译自:http://www.w3schools.com/html/html_blocks.asp

Forms in HTML

Forms in HTML
Tag Attribute Meaning
form   A tag that contains any of the following tags, making them into a valid HTML form
  action The name of the server-side CGI that is run when control is pased back to the Web server
input   A form field of varying types, depending on the value of the type attribute
  class The class assigned to the element
  id The unique id assigned to the element; as with JavaScript objects, no spaces or punctuation marks are allowed, and the id cannot start with a nuber
  name Primarily used to group sets of radio buttons
  maxlength The maximum length entry that the user may enter in this field
  size The number of characters that are displayed on the page
  type The type of input required; possible values include button, checkbox, image, password, radio, reset, submit, and text
  value The preset value of this form field
label   Used to specify labels for controls that do not have build-in labels, such as text fields, check boxes, radio buttons, and menus
  for Associates the label with a specific element’s id
option   The possible options available inside a select tag
  selected Indicates whether this option is selected as the default
  value The preset value of each option
select   A form field that is either a pop-up menu or a scrolling list, based on the size attribute
  class The class assigned to the element
  id The unique id assigned to the element
  size The number of options that are displayed on the page; if the attribute is set to 1, or this attribute is not present, the result is a pop-up menu

Reference: JavaScript Visual QuickStart Guide, 8th Edition

Table Tag in HTML

Example

The following is an example code for a table consisting of 2 lines and 3 columns.

The table resulting from the above-mentioned code in a web browser is as below:

Line 1, Column 1 Line 1, Column 2 Line 2, Column 3
Line 2, Column 1 Line 2, Column 2 Line 2, Column 3

Web Browser Supporting Profile

Supporting Browsers: IT, Firefox, Chrome, Safari, Opera
Unsupporting Browsers: /
Conclusion: All major browsers support the <table> tag.


Optional Properties

Property Value Description
align left
center
right
You are advised to abandon using this tag any more.To achieve the equivalent effect, you can use corresponding style code.
This tag is used to define the relative alignment of the table to its surrounding elements.
bgcolor rgb(x,x,x)
#xxxxxx
colorname
You are advised to abandon using this tag any more.To achieve the equivalent effect, you can use corresponding style code.
This tag is used to define background color of the table.
border pixels This tag is used to define the width of the table border.
cellpadding pixels
%
This tag is used to define the padding area between the cell broder and the content in the cell.
cellspacing pixels
%
This tag is used to define the space between cells.
frame void
above
below
hsides
lhs
rhs
vsides
box
border
This tag is used to specify which part of the outer border is visible.
rules none
groups
rows
cols
all
This tag is used to specify which part of the inner border is visible.
summary text This tag is used to define the summary of the table.
width %
pixels
This tag is used to define the width of the table.

Video Tag in HTML5

Video Size is Adjusted in Proportion to Its Original Size

If there is a video whose width and height are respectively 800px and 600px, then you can resize it by setting propertities width and height.
However, you should be noted that the size of the video is adjusted in proportion to its original size, and if you try to set a size which is not in proportion to its original size, the vidio will adjust its size in proportion to its original size as per the relatively short length (width/height).
This means that if you set a size of 2400px width and 1200px height, the resulting size you got will be 1600px width and 1200px height.