html tags and attribute集参考
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
