HTML 4.01+5基礎知識

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

沒有實際意義の標籤：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、為網址添加圖標：

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>

</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>

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、下拉窗

</optgroup>

</select>

H5屬性：name、disabled、form、size、multiple、autofocus、required

12、文本域

內容

</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>

禁用表單驗證：

15、框架

frameset>frame

framesetの屬性： cols='' rows='' border='' frameborder=1/0(是否顯示邊框) framespacing=''(頁面間距大小)

frameの屬性：src、frameborder、noresize(不許改變大小)、scrolling(是否有滾動條,yes、no、auto)

marginheight(窗體內容距頂底的距離)、marginwidth(窗體內容距左右的距離)

16、浮動窗體

除了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">

</object>

18、音頻插入

①<embed src="1.mp3" autostart='true' width="800" height="600" ></embed>

//autostart和autoplay的效果一樣

②<object data="1.mp3" width="800" height="500">

</object>

③背景音樂

<bgsound src='2.mp3' loop='3'> //loop循環次數

19、自動跳轉到指定網頁

20、活動文字

屬性：

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>

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>

ps：src：可省，使用source替代，source可以兼容多個瀏覽器

poster：預覽圖

preload：預加載方式，none(啥都不加載，點開再加)、auto(自動加載，不播也加)、metadata(只加載第一幀)

音頻：

27、<button type=’submit’></button>の專有屬性

form、formaction、formenctype、formmethod、formtarget、formnovalidate //會替換掉form中的屬性

28、<meta charset=’utf-8’> //聲明字符編碼

自定義名與值（用於瀏覽器檢索）

模擬http標頭，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:™

巴特西

HTML 4.01+5基礎知識

最新文章

热门文章