HTML：基礎知識
HTML 4.01+5
1、Html結構：html>head+body
2、Html快捷鍵：!加Tab（在sublime中）
3、雙標籤：
①常用標籤
h1、h2、h3、h4、h5、h6
p、center（廢棄）、
b/strong、i/em/cite/dfn、s/del、u/ins、tt、sub、sup、big、small、address
pre、blockquote
hr：水平線
沒有實際意義の標籤：code(郵編)/var/samp/abbr/span/time
②帶屬性標籤
ul>li //type：dise(實心圓)、cirle(空心圓)、square(實心方塊)
ol>li
type：1、a、A、i、I
start：’2’ //從2開始編號
reversed //倒序
liのvalue=’5’ //強制編號
font //size(0-7)、color、face(字體）
dl>dt+dd
table>(tr+th)+(tr+td)
//tableの屬性：
border(邊框大小，像素)、cellspacing(內線大小)、cellpadding(數據與內線距離)、width、height、align、bgcolor、background
summary(表格描述，不顯示)、bordercolor<廢>、bordercolorlight(上、左側顏色)<廢>、bordercolordark(下、右側顏色)<廢>
rules(設置需要顯示內框線的位置,需要border>0：none(全不)、rows(橫)、cols(豎)、all(全)
frame(設需顯外線：above(上)、below(下)、lhs(左)、rhs(右)、hsides(上下)、vsides(左右)、void(全不)、border/box(全))
//tr、td、thの屬性
width、height、bgcolor、align、nowrap(換行)、colspan(擴展行數)、rowspan(擴展列數)
table>thead+tbody+tfoot //結構化表格
colgroup>col //直列化表格：align、valign、span、width、bgcolor(火狐中不可用)
img //src、alt(注釋、無圖時代顯)、width、height、border、vsapce(圖片與上下段的距離)、hspace(圖與左右)、align(圖片在文字的位置、t/b/l/r/middle)
4、為網址添加圖標：
<link rel='shortcut icon' href='*.ico' type='image/x-icon'>
5、超鏈接格式：
scheme：//host[：post]/path/filename
例：http：//www.163.com
file：///f：/img/pic.jpg
ftp：//192.168.1.1
mailto：//mdpx@163.com
../page/index.html
6、書籤：
建立書籤：<p name='m'>
引用書籤：<a href='#m'>
跳頁引用書籤：<a href='6.html#m'>
7、基準參考點：同DOS的CD命令
<head>
<base href='../../case'>
</head>
8、aの屬性
link：尚未被選 alink：點選未放開 vlink：已被點選
link='red' //尚未被選時是紅色
accesskey='p' //快捷鍵是alt+p
tabindex='2' //tab鍵序
target=’_blank’ //在新窗打開，_parent：父窗；_self：自身(默認)；_top：頂層
9、formの屬性
name、method(=get/post)、action='url'
10、inputの屬性 通用屬性
type：checkbox、radio、text、password、hidden、submit、reset、image、file
name
單屬性：autofocus、disabled
賦值屬性：autocomplacote=’true/false’(是否自動完成)，form=’c’ (掛載到名為c的form上)
10-1、input:text專用屬性
<input type=’text’
list=’m’
maxlength=’10’
pattern=’^[\d]{2,4}’ //正則表達式
placeholder=’輸入提示內容’ //輸入提示
readonly //只讀
disabled //禁用
size=’30’ //文本框寬度
value=’初始值’ //初始值
required > //必须输入一个值
<datalist id=’m’>
<option value=’苹果’>苹果</option>
<option value=’香蕉’ label=’香蕉’>
<option value=’黄梨’>
</datalist>
10-2、<input type=’password’>屬性同text
10-3、<input type=’number’>の屬性
list、readonly、required、value、min=10、max=100、step=2
10-4、<input type=’flie’ accept=’image/jpeg,image/png’ required>
11、下拉窗
<select [multiple] name='name' size='value'>
<option value='value' selected>值</option>
<optgroup label='value'>
<option value='value' selected>值</option>
</optgroup>
</select>
H5屬性：name、disabled、form、size、multiple、autofocus、required
12、文本域
<textarea cols='長度值' rows='寬度值' name=''>
內容
</textarea>
H5屬性：name、form、readonly、disabled、maxlength、autofocus、required、placeholder、wrap
wrap=’soft’ 為默認，hard時，會將換行符提交，而soft則不會。
13、圖像按鈕
按鈕中有圖片 button>img
圖片按鈕 input：image
14、form元件
<form>
<fieldset> //外邊框
<legend>標題</legend> //外邊框標題
//其他form元件
</fieldset>
</form>
禁用表單驗證：
<form action=’’ novalidate></form>
15、框架
frameset>frame
framesetの屬性： cols='' rows='' border='' frameborder=1/0(是否顯示邊框) framespacing=''(頁面間距大小)
frameの屬性：src、frameborder、noresize(不許改變大小)、scrolling(是否有滾動條,yes、no、auto)
marginheight(窗體內容距頂底的距離)、marginwidth(窗體內容距左右的距離)
16、浮動窗體
<iframe> </iframe>
除了noresize外，與frameset相同
引用用name命名，在用target調用，多了 height和width
17、視頻插入
embedの屬性：<embed> </embed>
src、width、height
wmode：window(默認)、opaque(不透明)、transparent(背景透明)
allowFullScreen='ture/false' //是否允許全屏
objectの屬性： object>param
type：application/x-shockware-flash(flashの)
data：數據路徑
width、height
param用來給屬性賦值
name、value
舉例：
①<embed src="1.mp4" allowFullScreen='true' width="800" height="600" ></embed>
②<object data="1.mp4" width="800" height="500">
<param name="src" value="1.mp4">
<param name="autostart" value="true">
</object>
18、音頻插入
①<embed src="1.mp3" autostart='true' width="800" height="600" ></embed>
//autostart和autoplay的效果一樣
②<object data="1.mp3" width="800" height="500">
<param name="src" value="1.mp4">
<param name="autostart" value="true">
</object>
③背景音樂
<bgsound src='2.mp3' loop='3'> //loop循環次數
19、自動跳轉到指定網頁
<meta http-equiv='fresh' content='5000,http：//www.baidu.com'> //5秒後跳轉到www.baidu.com
20、活動文字
<marquee>文字</marquee>
屬性：
behavior：scroll(滾動)、slide(滾到邊停)、alternate(左右循環)
direction：left/right/down/up
height、width、vspace、hspace
scrollamount：播放速度
21、常用語句
onmouseover='this.stop()'
onmouseout='this.start()'
22、新雙標籤
mark：黃背景、黑色字
<ruby> 滿<rt>mǎn</rt> </ruby> //顯示為
<bdo dir=’rtl’>文字</bdo> //文字從右向左顯示，ltr為默認，從左向右
23、整體插圖
<figure>
<figcaption> 這是圖</figcaption>
<img src=’img.png’>
</figure>
24、文檔標籤
header(頭)、footer(尾)、nav(導航)、section(重要の主題或概念)、article(獨立)、aside(與周邊牽扯少)
hgroup(標題組)
25、進度條
meterの屬性
value=’80’ //顯示值
min=’10’ max=’100’ //邊界
low=’40’ height=’80’ //過高或過低時候，會顯示不同的顏色
optimum=’60’ //最佳值
progressの屬性
value=’50’ max=’100’
26、音視頻
<video [src=’1.mp4’] width=’800’ height=’1000’ muted autoplay controls poster=’1.jpg’ preload=’metadata’>
<source src=’1.mp4’>
<source src=’1.webm’>
<source src=’1.ogg’>
</video>
ps：src：可省，使用source替代，source可以兼容多個瀏覽器
poster：預覽圖
preload：預加載方式，none(啥都不加載，點開再加)、auto(自動加載，不播也加)、metadata(只加載第一幀)
音頻：
<audio autoplay controls preload=’auto’><source src=’1.mp3’></audio>
27、<button type=’submit’></button>の專有屬性
form、formaction、formenctype、formmethod、formtarget、formnovalidate //會替換掉form中的屬性
28、<meta charset=’utf-8’> //聲明字符編碼
自定義名與值（用於瀏覽器檢索）
<meta name=’author’ content=’man’> //作者
<meta name=’description’ content=’這’> //描述
<meta name=’keywords’ content=’a,c’> //關鍵字
<meta name=’generator’ content=’sublime’> //編輯器
模擬http標頭，5秒後自動跳到http://www.man.com
<meta http-equiv=’refresh’ content=’5;http://www.man.com’>
29、全局屬性：
accesskey=’n’ //alt+n獲取焦點
contenteditable=’true’ //可修改
dir=’rtl’ //right to left 從右到左，ltr 從左到右
hidden //隱藏
lang=’en’ //局部設置語言
title=’中華’ //元素の額外提示
tabindex=’1’ //獲取焦點の順序
30、特殊符號：®:® X:× “:" <:< ￥:¥ TIM:™
©:© ÷:÷ ‘:&apos >:> 空格: &:&
