html5常用基本標簽

、Html的基本結(jié)構(gòu)：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

網(wǎng)頁的文本、圖片等信息；

</body>

</html>

二、Head部分：用于表示網(wǎng)頁的元數(shù)據(jù)即描述網(wǎng)頁的基本信息

其常用標簽及屬性有：

1、title標簽：瀏覽器標簽頁顯示的標題

2、meta標簽：其常用屬性

①charset:設(shè)置文檔的字符集編碼格式。HTML5中設(shè)置字符集編碼：<meta charset="UTF-8">

常見的字符集編碼格式：

a.GB-2312:國標碼，簡體中文

b.GBK：擴展的國標碼

c.UTF-8：萬國碼 Unicode 常用

②http-equiv屬性:將我們的信息寫給瀏覽器看，讓瀏覽器按照這里面的要求執(zhí)行，可選屬性值：Content-Type(文檔類型) refresh(網(wǎng)頁定時刷新) set-cookie(設(shè)置瀏覽器cookie緩存) 需要配合content屬性使用。（http-equiv屬性只是表明需要設(shè)置哪一部分，具體的設(shè)置內(nèi)容，放到content屬性中）

③name屬性：使用方法同“http-equiv”。將我們的信息寫給搜索引擎看

常用且需要掌握的屬性值：author（作者） keywords（網(wǎng)頁關(guān)鍵字） description（網(wǎng)頁描述）這兩個屬性設(shè)置，網(wǎng)頁必不可少。

3、link標簽：鏈接網(wǎng)頁圖標（title前的小logo），其常用屬性有：

①rel屬性：聲明鏈接文件的類型，此處選icon

②type屬性：可以省略

③href屬性：表示圖片的路徑地址

三、body部分：網(wǎng)頁的文本、圖片等信息

標簽的分類：

塊級標簽：顯示為塊，前后隔一行（自動換行）

行級標簽：按行從左往右逐一顯示。

1、常見的塊級標簽：

①<h1></h1>......<h6><h6>：標題標簽，自動加粗，h1最大，h6最小。

②<hr/>：水平線標簽，添加一條水平線。

③<p></p>:段落標簽，

④<br/>:換行標簽，

⑤<blockquote/></blockquote>:引用標簽，cite屬性，表明引用的來源，一般引用網(wǎng)址

瀏覽器默認首行縮進。

⑥<pre></pre>:預格式標簽，用于重載代碼。瀏覽器默認顯示樣式：1、顯示為等寬字體。 2、代碼中的換行、

空格等元素能在瀏覽器中顯示。

【補充】html 文件中空格的表示：

2、基于布局的塊級標簽

列表：無序列表、有序列表、定義列表

①有序列表：<ol></ol> 列表項：<li></li>

②無序列表：<ul></ul> 列表項：<li></li>

③定義列表（實現(xiàn)圖文混排）:<dl></dl>

列表標題：<dt>一般只有一項</dt>

列表描述項：<dd>可以有很多項</dd>

3、組合標簽：<figure></figure>用于顯示圖片及圖片標題

他有兩個子標簽：<img />圖片

<figcaption></figcaption>圖片的標題

例如：<figure>

<figcaption>探險家伊澤瑞爾</figcaption>

</figure>

4、分區(qū)標簽：<div></div>

5、常見的行級標簽

<1>span（文本）:無實際意義，用于包裹某部分文字，修改特定樣式，例如：

這是<span style="color: red;font-size: 36px;">span</span>中的文字

img（圖片）：其常用屬性：①src:表示引用圖片的地址。

路徑地址的寫法：相對路徑：以當前文件為最準，去尋找圖片地址

a、與文件處于同一層的圖片，直接寫圖片名

b、圖片在當前文件下一層：文件名/圖片名

c、圖片在當前文件上一層：../圖片名

絕對路徑:file:///盤符：/文件夾/圖片名，但是嚴禁使用

圖片網(wǎng)址：網(wǎng)絡(luò)上的圖片鏈接，但是一般不用

②height和width：圖片的高度和寬度。可以用CSS樣式代替

③title：圖片標。當鼠標指上之后顯示的文字

④alt:當圖片無法顯示的時候，顯示的文字

<2>em（傾斜強調(diào)）

<3>strong（加粗強調(diào)）

<4>b（加粗）

<5>i（傾斜）

Strong、em、b、i的區(qū)別

1、Strong、em都表示強調(diào)，Strong為粗體，em為斜體，而Strong的強調(diào) 程度逗比em高

2、Strong和b都能加粗，em和i都能傾斜，，但是Strong和em多了一層強調(diào)的語義。H5要求標簽盡可能實現(xiàn)語義化。

<6>q（短引用）

<7>small/big（縮小/放大字體）：small和big分別是縮小和擴大字體，都可以多層嵌套直至上限或下限

<8>a（超鏈接）

1、href:超鏈接的路徑，可以是網(wǎng)絡(luò)鏈接，也可以是本地文件。

2、target:跳轉(zhuǎn)頁面打開的位置。_self自身頁面，_blank新頁面。

3、title:鼠標指在超鏈接上顯示的名稱。

4、Rel（被鏈接是當前的前/后一篇）:指定被鏈接文檔與當前文檔的關(guān)系,搜索引擎會利用該屬性獲取更多的有關(guān)鏈接的信息：

rel="prev"被鏈接文檔是當前文檔的前一篇文檔，

rel="next"被鏈接文檔是當前文檔的后一篇文檔,

rel="icon"被鏈接文檔是當前文檔的圖標

rel="stylesheet"被鏈接文檔是當前文檔的樣式表

5、Rev（當前是被鏈接的前/后一篇）

錨鏈接：

①本頁面錨鏈接:a、設(shè)置錨點：<a name="top"></a>

b、跳轉(zhuǎn)錨點：#name名

①頁面間錨鏈接:a、在即將跳轉(zhuǎn)頁面的指定位置設(shè)置錨點

b、跳轉(zhuǎn)錨點：頁面地址.html#name名

<a href="02_常見的塊級標簽.html#Hbuilder">頁面間錨鏈接</a><br/>

功能性鏈接： mailto用于給指定郵箱發(fā)送郵件

file：///e:/aaa.png打開本地文件

tencent://message/?uin=1315618220 給指定QQ發(fā)送息

<9>s標簽，有誤文本：刪除線

<s>這是S標簽中的文字</s><br />

<10>cite標簽：瀏覽器顯示為傾斜，常用于書、畫作、作品的引用

<cite>這是cite中的文本</cite><br />

<11>code:計算機代碼，不保留代碼格式

<pre>

</pre>

<12>bdo:表示文本方向，屬性：dir="ltr"表示從左往右，dir="rtl"表示從右往左

kbd:表示需要用戶用鍵盤輸入的內(nèi)容，瀏覽器顯示為等寬字體

請輸入“<kbd>Esc</kbd>”推遲系統(tǒng)<br />

<13>sup:上標文本，sub:下標文本

x<sub>6</sub><br />

? ? 空格

? ? 空格 <br />

<14>u:下劃線

<u>這是下劃線</u><br />

mark:高亮或標記文本，瀏覽器顯示為黃色背景

6、表格：表格的行：tr，每行中的列：td，表格的表頭：th

表格的常用屬性：

表格行列屬性：[tr和td的屬性]：

1、width/heigh：單元格的寬高

2、bgcolor:單元格的背景顏色

3、align:left center right 單元格中的文字水平對齊方式

4、valign:top center bottom 單元格中的文字垂直對其方式

5、nowrap:單元格中文字不換行

【注意】當表格屬性與行列屬性沖突時，行列屬性優(yōu)先級高

7、表單（form）

【兩個重要屬性】：action-表單提交的服務器地址 method-表單提交數(shù)據(jù)的方法（get/post）

get/post區(qū)別:

1>get使用URL傳參：http://服務器地址?name1=value1&name2=value2

（?表示傳遞參數(shù)，?后面采用name=value的形式傳遞，多個參數(shù)之間用&連接） ① URL傳參不安全，所有信息可在地址欄看到，并且別人可以很容易url注入，來攻擊自己的數(shù)據(jù)庫。

② URL傳參數(shù)據(jù)量有限，只能傳遞少量數(shù)據(jù)。

2>post:使用http請求傳遞數(shù)據(jù)。URL地址看不到數(shù)據(jù)信息，安全且傳遞信息量沒有限制

綜上所述：大部分使用post傳參，但是get傳參比Post快

【input標簽及屬性】

①type：input輸入框的類型，可選值有：

②name：input輸入框的別名，必填，因為傳參的時候采用name=value的形式傳遞。

③value：input輸入框的默認值

④placeholder:提示內(nèi)容，當輸入框有value時，提示內(nèi)容消失。

【input特殊屬性值】

① checked="checked"默認選中

② disabled="disabled"設(shè)置控制不能使用，按鈕上不能點擊，輸入框上不能修改，而且如果

輸入框時disabled，則輸入框信息不傳遞到后臺

③hidden=“hidden”隱藏。等同于<input type="hidden" name="username"value="1234" />

等同于配合disabled或根據(jù)其他需要，使用隱藏域傳遞信息.

【input-type屬性詳解】

①text：文本輸入框

②password：密碼輸入框，內(nèi)容不對外顯示

③radio：單選按鈕

checkbox:復選按鈕

a、單選按鈕，name和value屬性需同時存在，提交時，提交的是value中的屬性值

例如：<input type="radio" name="sex" value="男"/>提交顯示為"sex=男"

b、radio憑借name屬性區(qū)分是否為同一組，name相同為同組，且只能選擇一個

c、checked="checked"默認選中，（radio只可以選一個，checkbox可以選多個）

④submit：提交按鈕，提交表單數(shù)據(jù)

⑤reset：重置按鈕，重置為默認狀態(tài)

⑥file：文件上傳按鈕

⑦image：圖片提交按鈕，功能同submit，可以提交數(shù)據(jù)

⑧button：普通按鈕，沒什么軟用

⑨其他常用屬性值：見下圖

【select標簽】下拉選擇標簽

寫法：

</select>

常用屬性

①name屬性：寫在select里，所有選項只有一個name

②multiple屬性：multiple="multiple"設(shè)置select為多選，一般不用

③option常用屬性：value=""屬性，當option沒有value屬性時，往后臺傳遞的是<option></option>中間的文字，

當有value屬性時，傳遞的是value的屬性值。

title=""屬性,鼠標之上后現(xiàn)實的文字

select="select"默認屬性值

④optgroup屬性：用于option屬性分組，用lable屬性表示分組名。

</optgroup>

【textarea】:文本域，其常用屬性：

①設(shè)置寬度高度 style="width: 150px;height: 200px;

②readonly="readonly"：只讀模式，不允許修改編輯

③style="resize: none;"設(shè)置為寬度高度不允許修改

④style="overflow:;"設(shè)置文字超出區(qū)域時，如何處置，常用屬性值有：

hidden 超出區(qū)域的文字，隱藏無法顯示

scroll 無論文字多少，均顯示滾動

auto 自動，根據(jù)文字多少自動決定是否會顯示為滾動條

【fieldset 、legend】表單的邊框與標題

<fieldset> //邊框

<legend> //標題

</legend>

</fieldset>

如果想讓標題嵌入到邊框中，需將標題標簽寫到邊框標簽里面

一個表單可以有多組標題加邊框組合

【h5智能表單】

1、H5新增input的form屬性，用于指定特form表單的id，實現(xiàn)input無需放在form標簽之中，即可通過表單進行提交

……

</form>

2、 input元素的新增屬性：

Autocomplete：自動完成功能，記錄用戶之前輸入的內(nèi)容，并在用戶下次輸入時提示用戶輸入

》》》屬性值：on/off

》》》可以再form表單使用，對整個表單的所有控件進行自動完成的開關(guān)也可以在input上使用，

對特定輸入框進行修改

》》》絕大部分瀏覽器默認開啟

Autofocus：自動獲得焦點，autofocus="autofocus"只能獲得一個焦點

Form：所屬表單，通過id確認屬于哪個表單

Required：必填,required="required",設(shè)置必填，否則停止提交

Pattern：使用正則表達式驗證input的模式

Placeholder：提示，當有value時取消提示。

HTML5 是最近十年來 Web 開發(fā)標準最巨大的飛躍，目前蘋果、谷歌、微軟世界三大移動互聯(lián)網(wǎng)巨頭都支持了 HTML5，HTML5 的發(fā)展給移動互聯(lián)網(wǎng)應用帶來了全新的變化。HTML5 的出現(xiàn)，給移動互聯(lián)網(wǎng)帶來了新的變革，為移動互聯(lián)網(wǎng)中富媒體的應用提供了新的思路，并具有廣闊的應用前景。所以HTML5適應了目前的移動互聯(lián)網(wǎng)應用潮流。

Html5課程內(nèi)容主要包括以下八個方面：Web頁面制作基礎(chǔ)，UI網(wǎng)站設(shè)計，編程基礎(chǔ)技術(shù)，后端開發(fā)技術(shù)，移動互聯(lián)網(wǎng)應用，特效開發(fā)高級實戰(zhàn)，企業(yè)級應用開發(fā)以及網(wǎng)頁游戲開發(fā)。

兄弟連教育根據(jù)公司和行業(yè)發(fā)展的實際需要設(shè)計教學內(nèi)容，現(xiàn)行的課程體系包括四大階段和特級課：“基礎(chǔ)網(wǎng)頁布局與響應式布局”、“前端核心技術(shù)：Javascript”、“HTML5新特性”、”MEAN(MongoDB+Express+Angular.js+Node.js)全棧框架開發(fā)”，”特級課：微信開發(fā)”。

第一階段：基礎(chǔ)網(wǎng)頁布局與響應式布局

主要內(nèi)容：

1、HTML CSS

2、PS操作，網(wǎng)頁切圖

3、基本網(wǎng)頁布局

4、HTML5 語義標簽

5、HTML5 智能表單

6、CSS3

7、Media Query響應式布局

--------------------------------------------------分割符---------------------------------------------------------------------------

詳細內(nèi)容包括：

WEB開發(fā)構(gòu)件

系統(tǒng)及文件基本操作

基本的快捷鍵

描述 Windows Mac OS

編輯菜單 Alt + E Ctrl + F2 + F

文件菜單 Alt + F Ctrl + F2 + E

視圖菜單 Alt + V Ctrl + F2 + V

全選文本 Ctrl + A Cmd + A

復制文本 Ctrl + C Cmd + C

查找文本 Ctrl + F Cmd + F

查找替換文本 Ctrl + H Cmd + F

新建文檔 Ctrl + N Cmd + N

打開文件 Ctrl + O Cmd + O

打印選項 Ctrl + P Cmd + P

保存文件 Ctrl + S Cmd + S

粘貼文本 Ctrl + V Cmd + V

剪切文本 Ctrl + X Cmd + X

重做文本 Ctrl + Y Shift + Cmd + Z

撤銷文本 Ctrl + Z Cmd + Z

文本編輯描述 Windows Mac OS

光標移動操作

文本編輯操作

Web 瀏覽器操作

標簽/窗口管理

打印當前網(wǎng)頁

保存當前網(wǎng)頁

地址欄操作

書簽操作

屏幕截圖

WEB開發(fā)構(gòu)件

C/S結(jié)構(gòu)

B/S結(jié)構(gòu)

HTTP協(xié)議

傳輸數(shù)據(jù)方式：post,get

HTTP消息類型：2xx,4xx,5xx

URL組成

HTML介紹

HTML發(fā)展史

HTML5簡介

新標準

引入原生多媒體支持

引入可編程內(nèi)容

引入予以Web

http協(xié)議

HTTP消息類型：2xx,4xx,5xx

開發(fā)軟件

nodepad++

sublime

dreamweaver

HTML介紹

HTML發(fā)展史

HTML5介紹

HTML基本語法與規(guī)范

標簽

屬性

固有屬性

自定義屬性

通用屬性

元素

父元素（理解）

子元素

兄弟元素

后代元素

主體結(jié)構(gòu)

長度單位

顏色單位

基礎(chǔ)標簽

文本類標簽

文本格式化標簽

<b> 定義粗體文本

<strong> 定義加重語氣

<em> 定義著重文字

<i> 定義斜體字

<br> 換行標簽

<sub> 定義下標字

<sup> 定義上標字

<ins> 定義插入字

<del> 定義刪除字

<code> 定義計算機代碼

<kbd> 定義鍵盤碼

<samp> 定義計算機代碼樣本

<var> 定義變量

<pre> 定義預格式文本

<abbr> 定義縮寫

<address> 定義地址

<bdo> 定義文字方向

<blockquote> 定義長的引用

<q> 定義短的引用語

<cite> 定義引用、引證

<dfn> 定義一個定義項目。

計算機輸出類

語義，引用及標簽定義

鏈接<a>

標題Hn

HTML框架iframe

段落P

列表標簽

字符實體

空格    

< 小于號 < <

> 大于號 > >

& 和號 & &

" 引號 " "

' 撇號 ' (IE不支持) '

￠分 ¢ ¢

￡鎊 £ £

￥日元 ¥ ¥

€ 歐元 € €

§ 小節(jié) § §

? 版權(quán) © ©

? 注冊商標 ® ®

? 商標 ™ ™

× 乘號 × ×

÷ 除號 ÷ ÷

表格標簽

colgroup

caption

table

thead

col

span

tbody

colspan

rowspan

tfoot

頭部標簽

<!doctype html>

<head> 定義了文檔的信息

<title> 定義了文檔的標題

<base> 定義了頁面鏈接標簽的默認鏈接地址

charsetNew character_set 定義文檔的字符編碼。

content text 定義與 http-equiv 或 name 屬性相關(guān)的元信息。

http-equiv content-type

default-style

refresh 把 content 屬性關(guān)聯(lián)到 HTTP 頭部。

name application-name

author

description

generator

keywords 把 content 屬

多媒體標簽

1. img

1.1 導入一張圖片

1.2 屬性

src 圖片地址

width 設(shè)置圖片寬

height 設(shè)置圖片高

border 設(shè)置圖片邊框

alt 不顯示圖片時的提示信息

title 鼠標放上時顯示的圖片描述信息

usemap map標簽的name #name

2. map

2.1 給圖片劃分區(qū)域配合area

2.2 屬性

name 給map指定一個name

3. area

3.1 在map的配合下給圖片劃分指定形狀的區(qū)域

3.2 屬性

shape 劃分的形狀

coords 形狀的坐標·

href 要鏈接的地址

target 新網(wǎng)頁打開方式

4. audio

4.1 導入音頻的標簽 HTML5新標簽

4.2 屬性

src 音頻源的路徑必備

controls 顯示控制按鈕必備

autoplay 自動播放

loop 是否循環(huán)

preload 預加載不能跟autoplay屬性混用

4.3 audio標簽內(nèi)部加文字，如果瀏覽器支持這個標簽則文字不會顯示，如果不支持就會顯示

4.4 audio標簽的兩個格式

簡單格式

<audio src="../video/music.mp3" controls>您的破瀏覽器不支持，請升級瀏覽器

</audio>

完整格式視頻源單獨放到source標簽中

您的破瀏覽器不支持，請升級瀏覽器

</audio>

5. video

5.1 導入視頻的標簽 HTML5新標簽

5.2 屬性

src 路徑

controls 顯示控制按鈕

autoplay 自動播放屬性值 auto none

loop 是否循環(huán)播放

width 視頻的寬

height 視頻的高

poster 縮略圖地址

6. source

6.1 配合video標簽導入不同格式的視頻 HTML5新標簽

6.2 屬性

src 視頻地址

7. canvas 用于畫圖的標簽

8. embed

8.1 導入多媒體文件音頻視頻 HTML5新標簽

8.2 屬性

src 多媒體文件地址

width

height

HTML表單及智能表單

1. 表單相關(guān)標簽

1.1 form 客戶端跟服務器端進行交互，常用語登錄注冊調(diào)查問卷...

① 定義表單所有的表單控件放在form中

② 屬性

action 表單要提交的地址

method 提交方法 get（默認）提交的值會顯示在url上不安全而且傳遞的值數(shù)量有限 post 提交的內(nèi)容不會顯示在url上，傳遞的值范圍也比get方式的大，相對安全

target 打開新網(wǎng)頁的方式 _self _blank _top _parent

enctype="multipart/form-data" 傳文件必須加上

1.2 input

① 定義輸入框密碼框單選框復選框.....

② 屬性

type input的類型

name input的名字

value input的值

checked 默認radio和checkbox

size input框的大小 type:text password textarea

maxlength input最大輸入長度 type:text password

1.3 button

① 以標簽形式定義按鈕

② 屬性

type 設(shè)置submit（默認值），按鈕具有提交功能設(shè)置為button，普通按鈕 reset 重置

1.4 textarea

① 文本域雙標簽

② 屬性

name 指定名字

rows 指定行數(shù) 決定文本域高度

cols 指定列數(shù) 決定文本域?qū)挾?/p>

1.5 select

① 選擇框下拉框單選框

② 屬性

name 指定名字

multiple 設(shè)置為多選

1.6 option

① 定義select中的的選項

② 屬性

value 指定真正的值

selected 默認值

1.7 optgroup

① 給option分組不常用

1.8 fieldset 套在form的外部添加邊框不常用

1.9 legend 在邊框定義form的標題不常用

1.20 input select textarea button 稱作表單控件元素

1.21 通用屬性所有的表單控件元素都具有屬性 disabled enabled(默認)

2. form表單input中type類型

text 文本框 value設(shè)置默認值

password 密碼框 value設(shè)置默認值

radio 單選框所有的redio name相同才能單選 value設(shè)置真正提交的值默認的按鈕可以設(shè)置checked

checkbox 復選框 value設(shè)置真正提交的值設(shè)置默認添加checked屬性

image 提交按鈕，按鈕樣式來自圖片配合src屬性

submit 提交按鈕， value指定按鈕上的文字

reset 重置按鈕 value指定按鈕上的文字

button button按鈕 value指定按鈕上的文字

file 上傳框

hidden 隱藏域 name value

3. label標簽

用來嵌套input，點擊label嵌套的任何元素都可以激活label內(nèi)的input

屬性 for 指定 input的id

語義標簽

<header> 定義了文檔的頭部區(qū)域

<nav> 定義運行中的進度（進程）。

<article> 定義頁面獨立的內(nèi)容區(qū)域。

<figure> 規(guī)定獨立的流內(nèi)容（圖像、圖表、照片、代碼等等）。

<figcaption> 定義 <figure> 元素的標題

<aside> 定義頁面的側(cè)邊欄內(nèi)容。

<section> 定義文檔中的節(jié)（section、區(qū)段）。

<footer> 定義 section 或 document 的頁腳。

<address> 定義文檔作者或擁有者的聯(lián)系信息

<bdi> 允許您設(shè)置一段文本，使其脫離其父元素的文本方向設(shè)置。

<command> 定義命令按鈕，比如單選按鈕、復選框或按鈕

<details> 用于描述文檔或文檔某個部分的細節(jié)

<summary> 標簽包含 details 元素的標題

<dialog> 定義對話框，比如提示框

<mark> 定義帶有記號的文本。

<meter> 定義度量衡。僅用于已知最大和最小值的度量。

<progress> 定義任何類型的任務的進度。

<ruby> 定義 ruby 注釋（中文注音或字符）。

<rt> 定義字符（中文注音或字符）的解釋或發(fā)音。

<rp> 在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容。

<time> 定義日期或時間。

<wbr> 規(guī)定在文本中的何處適合添加換行符。

CSS基礎(chǔ)與規(guī)范知識

1. CSS的定義

Cascading Style Sheets 層疊樣式表（級聯(lián)樣式表）

2. CSS的作用

定義網(wǎng)頁外觀，如字體、背景、顏色等

3. CSS特點

① 精確的定位準確的控制頁面的任何元素

② 精細的控制可以做到像素級別的調(diào)整

③ 樣式與內(nèi)容的分離便于維護，便于重用

4. 發(fā)展歷程

① CSS1 作為一項W3C推薦，CSS1發(fā)布于 1996年12月17 日。1999 年1月11日，此推薦被重新修訂。

② CSS2 作為一項 W3C 推薦，CSS2發(fā)布于 1999年1月11日。CSS2添加了對媒介（打印機和聽覺設(shè)備）和可下載字體的支持。

③ CSS3 CSS3 計劃將 CSS 劃分為更小的模塊。2001年至今 HTML5+CSS3

CSS選擇器

HTML tag

Class

包含選擇器：div span a

組合選擇 div,span,a

任意選擇器（通配符選擇器）*

關(guān)系選擇器

包含選擇符

子選擇符

相鄰選擇符

兄弟選擇符

屬性選擇器

偽類選擇器

偽對象選擇器

CSS3屬性

尺寸

邊框

背景

內(nèi)補白

外補白

布局

定位

字體

文本

列表

表格

用戶界面

多欄

2D變換

過渡

動畫

Photoshop網(wǎng)頁設(shè)計基礎(chǔ)

I設(shè)計介紹

photoshop安裝與設(shè)置

位圖與矢量圖

網(wǎng)頁常用圖片格式

圖像大小與分辨率

選區(qū)創(chuàng)建和編輯

選區(qū)的創(chuàng)建

選區(qū)工具M

套鎖工具L

快速選區(qū)工具W和魔術(shù)棒W

鋼筆選區(qū)

創(chuàng)建矢量路徑

錨點操作

鋼筆工具

形狀轉(zhuǎn)選區(qū)ctrl+Enter

選區(qū)的編輯

選區(qū)的存儲

應用輔助功能

使用標尺ctrl+R

設(shè)置網(wǎng)格：視圖>顯示>網(wǎng)格ctrl+'

應用變換功能

選擇>可變換選區(qū)ctrl＋T

縮放

旋轉(zhuǎn)

扭曲

透視

變形

水平翻轉(zhuǎn)

垂直翻轉(zhuǎn)

應用內(nèi)容識別比例功能

操控變形

裁剪圖像

裁剪工具

基礎(chǔ)繪畫

了解繪畫和繪畫修飾工具

畫筆

顏色替換

涂抹工具

繪畫的基本技巧

繪制直線,按住shift

繪制曲線

定義顏色

使用拾色器

漸變工具

填充前景色：alt＋delete

填充背景色：control＋delete

為圖像填充顏色shift+f5

圖形、路徑計算

網(wǎng)頁布局規(guī)范

Web設(shè)計規(guī)范

banner設(shè)計

網(wǎng)頁柵格系統(tǒng)

網(wǎng)頁構(gòu)成

命名規(guī)范

導航設(shè)計

版式設(shè)計

網(wǎng)頁配色

Photoshop網(wǎng)頁切圖

網(wǎng)頁切圖及切圖常見問題

精靈圖片技術(shù)

專題頁設(shè)計

W3C盒子模型

div+css網(wǎng)頁布局

HTML5兼容性處理

使用 HTML5布局元素的布局

Media Query響應式布局

原生響應式布局

媒體查詢+尺寸屬性：百分比，max-width,max-height,min-width,min-height

--------------------------------------------------分割符---------------------------------------------------------------------------

可實現(xiàn)效果

1、表格制作個人簡歷

2、使用表單制作注冊頁面

3、div+css基本網(wǎng)頁布局

4、PS網(wǎng)頁設(shè)計

5、精靈圖片技術(shù)

6、語義化標簽布局

7、智能表單驗證

8、多媒體播放

9、css3:圓角邊框、邊框九宮格特效、多圖背景、動畫、漸變和倒影、多列屬性布局、服務器端字體

10、響應式網(wǎng)頁實現(xiàn)

--------------------------------------------------分割符---------------------------------------------------------------------------

第二階段：前端核心技術(shù)：Javascript

主要內(nèi)容：

1、Javascript

2、Ajax

3、JQuery

4、JS高級特效

--------------------------------------------------分割符---------------------------------------------------------------------------

詳細內(nèi)容：

JavaScript 腳本語言

什么是JavaScript？

1. JavaScript 是一種客戶端腳本語言（腳本語言是一種輕量級的編程語言）。

2. JavaScript 通常被直接嵌入 HTML 頁面。

3. JavaScript 是一種解釋性語言（就是說，代碼執(zhí)行不進行預編譯）。

特點：

1. 弱類型

2. 基于對象。(因為面向?qū)ο笮枰哂蟹庋b、繼承、多態(tài)的特征)

JavaScript語言中包含三個核心：ECMAScript基本語法、DOM、BOM

JavaScript是基于對象的腳本語言。

在HTML中如何使用JavaScript

1. 使用<script></script>標簽：

屬性：

charset（可選）字符集設(shè)置、

defer（可選執(zhí)行順序）值：defer、

language(已廢除)、

src（可選）使用外部的js腳本文件

type(必選)類型：值：text/javascript

<!--

javaScript語言

//-->

</script>

2. 在html標簽的事件中，超級鏈接里。

3. 外部導入方式（推薦）：

JavaScript的語法：

1.區(qū)分大小寫：變量名、函數(shù)名、運算符以及其他一切東西都是區(qū)分大小寫的。

2.他和php一樣屬于弱類型語言。

3.每行結(jié)尾的分號可有可無。(js中的每條語句之間的分割符可以是回車換行也可以是";"分號(推薦))

4.腳本注釋：

// 單行注釋

/* 多行注釋 */

5.括號表示代碼塊:{}

6.變量的定義：使用var關(guān)鍵字來聲明。

變量的命名規(guī)范是：字母數(shù)字，$符和下劃線構(gòu)成，但是不可以以數(shù)字開始。

變量名不可以使用關(guān)鍵字.

typeof函數(shù)獲取一個變量的類型：

7.JavaScript的數(shù)據(jù)類型：

undefined 類型

null 類型（對象）

boolean 類型

number 類型

object引用類型

8. 類型轉(zhuǎn)換：

JavaScript的運算符

1. 一元運算符

delete：用于刪除對象中屬性的如：delete o.name; //刪除o對象中的name屬性

void： void 運算符對任何值返回 undefined。沒有返回值的函數(shù)真正返回的都是 undefined。

++ --

一元加法和一元減法

2. 位運算符

位運算 NOT ~

位運算 AND &

位運算 OR |

位運算 XOR ^ (不同為1，相同則為0)

左移運算 <<

右移運算 >>

3. 邏輯運算符

邏輯 NOT ! 運算符非

邏輯 AND && 運算符與

邏輯 OR || 運算符或

4. 乘性運算符：*（乘） /(除) %（取模）求余

5. 加性運算符： + -

*其中+號具有兩重意思：字串連接和數(shù)值求和。

就是加號”+“兩側(cè)都是數(shù)值則求和，否則做字串連接

6. 關(guān)系運算符 > >= < <=

7. 等性運算符 == === != !==

8. 條件運算符 ? : (三元運算符)

9. 賦值運算符 = += -= *= /= %= >>= <<=

10 逗號運算符

用逗號運算符可以在一條語句中執(zhí)行多個運算。

var iNum1=1, iNum2=2, iNum3=3;

javaScript（語句流程控制）

1. 判斷語句 if語句； if... else ... if ... else if ... else...

2. 多分支語句： switch（）{。 case ：。。。。}

switch (i) {

case 20: alert("20");

break;

case 30: alert("30");

break;

case 40: alert("40");

break;

default: alert("other");

}

3. 循環(huán)語句（迭代語句）

for：

while

do...while

*for-in 語句: 語句是嚴格的迭代語句，用于枚舉對象的屬性。

var a = [10,20,30,40,50];

//迭代的是數(shù)組的下標。

for(i in a){

document.write(a[i]);

}

//輸出： 1020304050

4. break 和 continue 語句對循環(huán)中的代碼執(zhí)行提供了更嚴格的控制。

5. *with 語句用于設(shè)置代碼在特定對象中的作用域。

//擴充知識：

1. 在網(wǎng)頁文檔中獲取一個節(jié)點對象（HTML標簽）

document.getElementById("mid"); //獲取標簽id屬性值為mid的節(jié)點對象

2. 定時相關(guān)函數(shù)：

setTimeout(vCode, iMilliSeconds [, sLanguage]) -- 單次定時執(zhí)行指定函數(shù)

clearTimeout(iTimeoutID) -- 取消上面的單次定時

setInterval(vCode, iMilliSeconds [, sLanguage]) --無限次定時執(zhí)行指定函數(shù)

clearInterval(iIntervalID)-- 取消上面的多次定時

一、JavaScript的函數(shù)：

標準格式： function 函數(shù)名（[參數(shù)列表..]）{

函數(shù)體。。。

[return 返回值;]

}

JavaScript三種定義函數(shù)方法：

*第一種是使用function語句定義函數(shù)

如上面格式

第二種是使用Function()構(gòu)造函數(shù)來定義函數(shù)（不常用）

var 函數(shù)名 = new Function(“參數(shù)1”，”參數(shù)2”，”參數(shù)3”……”函數(shù)體”);

如：

var 函數(shù)名 = new Function(”x”,”y”,”var z=x+y;return z;”);

*第三種是在表達式中定義函數(shù)

var 函數(shù)名 = function(參數(shù)1，參數(shù)2，…){函數(shù)體};

//例如：

//定義

var add = function(a,b){

return a+b;

}

//調(diào)用函數(shù)

document.write(add(50,20));

arguments 對象

在函數(shù)代碼中，使用特殊對象 arguments，開發(fā)者無需明確指出參數(shù)名，就能訪問它們。

例如，在函數(shù) sayHi() 中，第一個參數(shù)是 message。用 arguments[0]

也可以訪問這個值，即第一個參數(shù)的值（第一個參數(shù)位于位置 0，

第二個參數(shù)位于位置 1，依此類推）。

關(guān)于變量和參數(shù)問題：

函數(shù)外面定義的變量是全局變量，函數(shù)內(nèi)可以直接使用。

在函數(shù)內(nèi)部沒有使用var定義的=變量則為全局變量，

*在函數(shù)內(nèi)使用var關(guān)鍵字定義的變量是局部變量，即出了函數(shù)外邊無法獲取。

js函數(shù)定義的參數(shù)沒有默認值（目前只有最新的火狐瀏覽器支持）

二、系統(tǒng)中常用的內(nèi)置函數(shù)：

escape() //字串編碼

unescape() //字串反編碼

*eval() //將參數(shù)字符串作為腳本代碼來執(zhí)行。

*isNaN() // is not a number (不是一個數(shù)值)

*parseInt()

*parseFloat()

三、JavaScript的對象的定義和使用

1.使用構(gòu)造函數(shù)創(chuàng)建內(nèi)置對象

var myObject = new Object();

myObject.name = “l(fā)ijie”;

myObject.age = 20;

myObject.say = function(){...}

2.直接創(chuàng)建自定義對象

var 對象名 = {屬性名1：屬性值，屬性名2：屬性值2，…….}

*3.使用自定義構(gòu)造函數(shù)創(chuàng)建對象

function pen(name,color,price){

//對象的name屬性

this.name = name;

//對象的color屬性

this.color = color;

//對象的piece屬性

this.price = price;

//對象的say方法

this.say = function(){};

}

var pen = new pen(“鉛筆”,”紅色”,20);

pen.say();

一、for…in語句

----------------------------------------

for(var i in window){

document.write(i+”----”+window[i]);

}

這種語句可以遍歷對象中的所有屬性或數(shù)組中的所有元素。

二、with語句

--------------------------------------------

如果使用with語句，就可以簡化對象屬性調(diào)用的層次。

document.write(‘test1’);

document.write(‘test2’);

document.write(‘test3’);

可以使用with來簡化：

with(document){

write(‘test1’);

write(‘test2’);

write(‘test3’);

}

三、JavaScript內(nèi)置對象

* Array（數(shù)組）

var a= new Array(); //創(chuàng)建一個空數(shù)組

a = new Array(10); //創(chuàng)建一個數(shù)組單元為10個的數(shù)組。

a = new Array(10,20,30);//創(chuàng)建一個指定數(shù)組單元的數(shù)組。

a=['a','b','c','d']; //快捷定義數(shù)組

常用屬性：

length--獲取長度。

常用方法：

toString() 把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。

sort() 對數(shù)組的元素進行排序

join() 把數(shù)組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。

pop() 刪除并返回數(shù)組的最后一個元素

push() 向數(shù)組的末尾添加一個或更多元素，并返回新的長度。

* Boolean 布爾值包裝類對象

方法：toSource() 返回該對象的源代碼。

toString() 把邏輯值轉(zhuǎn)換為字符串，并返回結(jié)果。

valueOf() 返回 Boolean 對象的原始值。

* Date

var dd = new Date();

getDate() 從 Date 對象返回一個月中的某一天 (1 ~ 31)。

getDay() 從 Date 對象返回一周中的某一天 (0 ~ 6)。

getMonth() 從 Date 對象返回月份 (0 ~ 11)。

getFullYear() 從 Date 對象以四位數(shù)字返回年份。

getYear() 請使用 getFullYear() 方法代替。

getHours() 返回 Date 對象的小時 (0 ~ 23)。

getMinutes() 返回 Date 對象的分鐘 (0 ~ 59)。

getSeconds() 返回 Date 對象的秒數(shù) (0 ~ 59)。

getMilliseconds() 返回 Date 對象的毫秒(0 ~ 999)。

getTime() 返回 1970 年 1 月 1 日至今的毫秒數(shù)。

同上還有很多set方法用來設(shè)置。

* Math 對象用于執(zhí)行數(shù)學任務。方法是靜態(tài)的。

abs(x) 返回數(shù)的絕對值。

ceil(x) 對數(shù)進行上舍入。

floor(x) 對數(shù)進行下舍入。

random() 返回 0 ~ 1 之間的隨機數(shù)。

round(x) 把數(shù)四舍五入為最接近的整數(shù)。

max(x,y) 返回 x 和 y 中的最高值。

min(x,y) 返回 x 和 y 中的最低值。

* Number

toString();

toFixed 把數(shù)字轉(zhuǎn)換為字符串，結(jié)果的小數(shù)點后有指定位數(shù)的數(shù)字。

* String 子串處理對象

anchor() 創(chuàng)建 HTML 錨。

*charAt() 返回在指定位置的字符。

charCodeAt()返回在指定的位置的字符的 Unicode 編碼。

*indexOf() 檢索字符串。

*lastIndexOf() 從后向前搜索字符串。

match() 找到一個或多個正在表達式的匹配。

*replace() 替換與正則表達式匹配的子串。

search() 檢索與正則表達式相匹配的值。

slice() 提取字符串的片斷，并在新的字符串中返回被提取的部分。

split() 把字符串分割為字符串數(shù)組。

substr() 從起始索引號提取字符串中指定數(shù)目的字符。

*substring() 提取字符串中兩個指定的索引號之間的字符。

toLocaleLowerCase() 把字符串轉(zhuǎn)換為小寫。

toLocaleUpperCase() 把字符串轉(zhuǎn)換為大寫。

*toLowerCase() 把字符串轉(zhuǎn)換為小寫。

*toUpperCase() 把字符串轉(zhuǎn)換為大寫。

* RegExp

exec()正則匹配

test()

match()

* Global

escape(string) -- 可對字符串進行編碼

unescape(string) -- 函數(shù)可對通過 escape() 編碼的字符串進行解碼。

encodeURI(URIstring) -- 函數(shù)可把字符串作為 URI 進行編碼。

decodeURI(URIstring) -- 函數(shù)可對 encodeURI() 函數(shù)編碼過的 URI 進行解碼。

*eval(string) -- 函數(shù)可計算某個字符串，并執(zhí)行其中的的 JavaScript 代碼。

getClass(javaobj) -- 函數(shù)可返回一個 JavaObject 的 JavaClass。

*isNaN(x) -- 函數(shù)用于檢查其參數(shù)是否是非數(shù)字值。

Number(object) --函數(shù)把對象的值轉(zhuǎn)換為數(shù)字。

*parseFloat(string) -- 函數(shù)可解析一個字符串，并返回一個浮點數(shù)。

*parseInt(string, radix)

事件處理

一、事件源: 任何一個HTML元素（節(jié)點） body, div , button p, a, h1 .......

二、事件: 你的操作

鼠標:

* click 單擊

dblclick 雙擊

contextmenu (在body) 文本菜單（鼠標右鍵使用）

要想屏蔽鼠標右鍵使用return false

window.document.oncontextmenu=function(ent){...}

* mouseover 放上(移入)

* mouseout 離開（移出）

mousedown 按下

mouseup 抬起

* mousemove 移動

鍵盤：

keypress 鍵盤事件

keydown 按下

文檔：(主要使用在body標簽中)

* load 加載

unload 關(guān)閉(為了兼容可使用下面函數(shù))

beforeunload 關(guān)閉之前

表單：

* focus 焦點

* blur 失去焦點

* submit 提交事件

* change 改變（如下拉框選擇事件）

其它：

* scroll 滾動事件(常用延遲加載、瀑布流技術(shù))

window.onscroll=function(){

document.documentElement.scrollTop;//獲取滾動條的上距離

document.documentElement.scrollLeft;//滾動條的左距離

}

selectd 事件

。。。。

三、事件處理程序

使用一個匿名或回調(diào)函數(shù)

有三種方法加事件

第一種：

格式： <tag on事件="事件處理程序" />

*第二種：

對象.on事件=事件處理程序

</script>

第三種：(火狐不兼容)

事件對象：

屬性：

1. srcElement

2. keyCode 鍵盤值

事件 event window.event

1. srcElement 代表事件源對象

2. keyCode 事件發(fā)生時的鍵盤碼 keypress , keydown keyup

3. clientX, clientY 坐標位置

4. screenX, screenY

5. returnValue

6. cancelBubble;

//為頁面添加鼠標右點擊事件

window.document.oncontextmenu=function(ent){

//兼容IE和火狐瀏覽器兼容

var event=ent || window.event;

//獲取事件坐標位置

var x=event.clientX;

var y=event.clientY;

...

}

一、BOM

1. window對象

常用的屬性：

*document ：對 Document 對象的只讀引用

*history ：對 History 對象的只讀引用。

*location：用于窗口或框架的 Location 對象

Navigator：對 Navigator 對象的只讀引用

*parent：返回父窗口。

length: 設(shè)置或返回窗口中的框架數(shù)量。

Screen: 對 Screen 對象的只讀引用

status: 設(shè)置窗口狀態(tài)欄的文本。

top: 返回最頂層的先輩窗口。

常用方法：

alert() 顯示帶有一段消息和一個確認按鈕的警告框。

confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。

prompt() 顯示可提示用戶輸入的對話框。

close() 關(guān)閉瀏覽器窗口。

open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。

scrollTo() 把內(nèi)容滾動到指定的坐標。

setTimeout() 在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式。

clearTimeout() 取消由 setTimeout() 方法設(shè)置的 timeout。

setInterval() 按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式。

clearInterval() 取消由 setInterval() 設(shè)置的 timeout。

2. Navigator 對象

Navigator 對象包含的屬性描述了正在使用的瀏覽器。可以使用這些屬性進行平臺專用的配置。

常用屬性：

with(document) {

write ("你的瀏覽器信息：<ul>");

write ("<li>代碼："+navigator.appCodeName+"</li>");

write ("<li>名稱："+navigator.appName+"</li>");

write ("<li>版本："+navigator.appVersion+"</li>");

write ("<li>語言："+navigator.language+"</li>");

write ("<li>編譯平臺："+navigator.platform+"</li>");

write ("<li>用戶表頭："+navigator.userAgent+"</li>");

write ("</ul>");

}

3. Screen 對象包含有關(guān)客戶端顯示屏幕的信息。

常用屬性：

document.write( "屏幕寬度："+screen.width+"px<br />" );

document.write( "屏幕高度："+screen.height+"px<br />" );

document.write( "屏幕可用寬度："+screen.availWidth+"px<br />" );

document.write( "屏幕可用高度："+screen.availHeight+"px" );

參考了解其他屬性信息獲取方式

網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth

網(wǎng)頁可見區(qū)域高： document.body.clientHeight

網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)

網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的高)

網(wǎng)頁正文全文寬： document.body.scrollWidth

網(wǎng)頁正文全文高： document.body.scrollHeight

網(wǎng)頁被卷去的高： document.body.scrollTop

網(wǎng)頁被卷去的左： document.body.scrollLeft

網(wǎng)頁正文部分上： window.screenTop

網(wǎng)頁正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的寬： window.screen.width

屏幕可用工作區(qū)高度： window.screen.availHeight

屏幕可用工作區(qū)寬度： window.screen.availWidth

4. History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。

5. Location 對象包含有關(guān)當前 URL 的信息。

講解DOM

一、基本概念

HTML DOM 定義了訪問和操作HTML文檔的標準方法。

HTML DOM 把 HTML 文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)（節(jié)點樹）。

DOM 被分為不同的部分：

1.Core DOM

定義了一套標準的針對任何結(jié)構(gòu)化文檔的對象

2.XML DOM

定義了一套標準的針對 XML 文檔的對象

3.HTML DOM

定義了一套標準的針對 HTML 文檔的對象。

節(jié)點：根據(jù) DOM，HTML 文檔中的每個成分都是一個節(jié)點。

DOM 是這樣規(guī)定的：

>整個文檔是一個文檔節(jié)點

>每個 HTML 標簽是一個元素節(jié)點

>包含在 HTML 元素中的文本是文本節(jié)點

>每一個 HTML 屬性是一個屬性節(jié)點

>注釋屬于注釋節(jié)點

節(jié)點彼此間都存在關(guān)系。

>除文檔節(jié)點之外的每個節(jié)點都有父節(jié)點。

>大部分元素節(jié)點都有子節(jié)點。

>當節(jié)點分享同一個父節(jié)點時，它們就是同輩（同級節(jié)點）。

>節(jié)點也可以擁有后代，后代指某個節(jié)點的所有子節(jié)點，或者這些子節(jié)點的子節(jié)點

>節(jié)點也可以擁有先輩。先輩是某個節(jié)點的父節(jié)點，或者父節(jié)點的父節(jié)點

查找并訪問節(jié)點

你可通過若干種方法來查找您希望操作的元素：

>通過使用 getElementById() 和 getElementsByTagName() 方法

>通過使用一個元素節(jié)點的 parentNode、firstChild 以及 lastChild childNodes屬性

節(jié)點信息

每個節(jié)點都擁有包含著關(guān)于節(jié)點某些信息的屬性。這些屬性是：

nodeName（節(jié)點名稱）

nodeValue（節(jié)點值）

nodeType（節(jié)點類型）

nodeName 屬性含有某個節(jié)點的名稱。

元素節(jié)點的 nodeName 是標簽名稱

屬性節(jié)點的 nodeName 是屬性名稱

文本節(jié)點的 nodeName 永遠是 #text

文檔節(jié)點的 nodeName 永遠是 #document

二、HTML DOM 對象參考

Document: 代表整個 HTML 文檔，可被用來訪問頁面中的所有元素

常用集合屬性：forms

Anchor : 代表 <a> 元素

Area : 代表圖像映射中的 <area> 元素

Base : 代表 <base> 元素

Body : 代表 <body> 元素

Button : 代表 <button> 元素

Event : 代表某個事件的狀態(tài)

Form : 代表 <form> 元素

Frame : 代表 <frame> 元素

Frameset: 代表 <frameset> 元素

Iframe : 代表 <iframe> 元素

Image : 代表 <img> 元素

Input button : 代表 HTML 表單中的一個按鈕

Input checkbox : 代表 HTML 表單中的復選框

Input file : 代表 HTML 表單中的文件上傳

Input hidden : 代表 HTML 表單中的隱藏域

Input password : 代表 HTML 表單中的密碼域

Input radio : 代表 HTML 表單中的單選按鈕

Input reset : 代表 HTML 表單中的重置按鈕

Input submit : 代表 HTML 表單中的確認按鈕

Input text : 代表 HTML 表單中的文本輸入域（文本框）

Link : 代表 <link> 元素

Meta : 代表 <meta> 元素

Object : 代表 <Object> 元素

Option : 代表 <option> 元素

Select : 代表 HTML 表單中的選擇列表

Style : 代表單獨的樣式聲明

Table : 代表 <table> 元素

TableData : 代表 <td> 元素

TableRow : 代表 <tr> 元素

Textarea : 代表 <textarea> 元素

AJAX

var xmlhttp;

1. 創(chuàng)建請求對象

if(window.XMLHttpRequest){

// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}else{

// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

2. 設(shè)置回調(diào)函數(shù)（監(jiān)聽）

xmlhttp.onreadystatechange=函數(shù)名；

或

xmlhttp.onreadystatechange=function(){

函數(shù)體。。。

}

3. 初始化：

xmlhttp.open("GET",url,true);

4. 發(fā)送：

xmlhttp.send();

其中：xmlhttp請求對象：

**屬性：

*readyState //請求狀態(tài)：0,1,2,3,4

*responseText//響應內(nèi)容

responseXML //xml響應對象

*status //瀏覽器響應狀態(tài)：200正常， 404 請求地址不存在 ,,

statusText //狀態(tài)內(nèi)容

*onreadystatechange //回調(diào)函數(shù)屬性

方法：

abort() //取消當前響應，關(guān)閉連接并且結(jié)束任何未決的網(wǎng)絡(luò)活動。

getAllResponseHeaders() //把 HTTP 響應頭部作為未解析的字符串返回。

getResponseHeader() //返回指定的 HTTP 響應頭部的值

*open() //初始化 HTTP 請求參數(shù)

*send() //發(fā)送 HTTP 請求，使用傳遞給 open() 方法的參數(shù)

*setRequestHeader() //向一個打開但未發(fā)送的請求設(shè)置或添加一個 HTTP 請求。

自定義Ajax實例使用

jQuery的基本語法

對象的訪問

each()

size()

length

selector

context

get()

index()

jQuery 屬性操作

屬性

attr

removeAttr

prop

removeProp

CSS

addClass

removeClass

toggleClass

HTML代碼/文本/值

html()

text()

val()

基礎(chǔ)知識

JQuery簡介

JQuery 安裝

JQuery語法

jQuery CSS 操作

css:css()

位置

offset()

position()

scrollTop()

scrollLeft()

尺寸

height()

width()

innerHeight()

innerWidth()

outerHeifht()

outerWIdth()

jQuery 選擇器

基本

層級

偽類

內(nèi)容

可見性

屬性

子元素

表單

表單對象屬性

jQuery 篩選

過濾

查找

串聯(lián)

jQuery HTML文檔處理

內(nèi)部插入

外部插入

包裹

替換

刪除

復制

jQuery 事件

頁面載入

事件處理

事件委派

事件切換

事件

jQuery效果

jQuery 隱藏顯示

jQuery 淡入淡出

jQuery 滑動

jQuery 動畫

jQuery停止動畫

jQuery Callback

Jquery chaining

jQuery Ajax

jQuery Ajax簡介

jQuery load()方法

jQuery get()/post()方法

jQuery 其他

jQuery noConflict()方法

jQuery JSONP

數(shù)組和對象操作

函數(shù)操作

測試操作

字符串操作

瀏覽器及特性檢測

URL

數(shù)據(jù)緩存

隊列機制

jQuery 插件

插件使用

jQuery 自定義插件方法

--------------------------------------------------分割符---------------------------------------------------------------------------

可實現(xiàn)效果

1、刷新改背景

2、獲取和設(shè)置時間

3、從URL中獲取文件名

4、簡單的計算器

5、滾動類效果

6、自定義菜單

7、下拉菜單

8、手風琴菜單

9、彈出層

10、瀑布流布局，滾動事件

11、選項卡開發(fā)

12、幻燈播放

13、拖拽效果

14、淘寶商品的放大效果

15、登錄注冊驗證

16、首頁多特效合成

17、后臺效果制作

18、瀑布流

19、點名器

20、抽獎

--------------------------------------------------分割符---------------------------------------------------------------------------

第三個階段：HTML5新特性

主要內(nèi)容：

1、視頻/音頻

2、地理定位

3、Web 存儲

4、應用緩存

5、拖放

6、文件讀取

7、Web Workers

8、畫布 SVG

9、CSS預處理

10、BootStrap 響應式框架

--------------------------------------------------分割符---------------------------------------------------------------------------

詳細內(nèi)容：

HTML5 多媒體

audio/video API操作

地理位置信息獲取

geolocation API操作

地球間兩點距離計算方法

地圖API調(diào)用

HTML5離線緩存

cache manifest規(guī)范及格式

HTML5本地存儲

localStorage - 沒有時間限制的數(shù)據(jù)存儲

sessionStorage - 針對一個 session 的數(shù)據(jù)存儲

拖放（Drag 和 drop）

FileReader

瀏覽器多線程

畫布 SVG 動畫實現(xiàn)

SASS使用

SASS的基本語法

Bootstrap配置

使用Bootstrap布局頁面

Bootstrap全局樣式

柵格系統(tǒng)原理

Bootstrap各種常用組件

Bootstrap常用插件應用

--------------------------------------------------分割符---------------------------------------------------------------------------

可實現(xiàn)效果：

制作屬于自己的音/視頻播放器

查看經(jīng)緯度

獲取公交路線

顯示路線導航

離線應用

多線程優(yōu)化用戶體驗

拖放歌曲列表

圖片拖放顯示

拖放照片墻

繪畫五角星

繪制時鐘

勻速、變速、圓周、曲線等物理運動

碰撞原理與實現(xiàn)

九大行星圍繞運動

鼠標交互特效

使用SASS制作動態(tài)CSS程序

使用UI框架實現(xiàn)響應式布局

--------------------------------------------------分割符---------------------------------------------------------------------------

第四階段：MEAN(MongoDB+Express+Angular.js+Node.js)全棧框架開發(fā)

主要內(nèi)容：

1、Node.js

2、MongoDB

3、Express

4、AngularJS

5、WEB APP制作

--------------------------------------------------分割符---------------------------------------------------------------------------

詳細內(nèi)容:

NodeJS與瀏覽器js的區(qū)別

NodeJS基礎(chǔ)

NodeJS安裝

模塊

require

exports

module

NPM

代碼的組織和部署

模塊路徑解析規(guī)則

包（package）

index.js

package.json

文件操作

Buffer（數(shù)據(jù)塊）

Stream（數(shù)據(jù)流）

File System（文件系統(tǒng)）

Path（路徑）

網(wǎng)絡(luò)操作

HTTP

HTTPS

URL

Query String

Zlib

Net

NPM/Bower依賴管理工具

Zepto.js庫

NodeJS文件操作

使用NodeJS搭建Web服務器

使用NodeJS搭建Socket服務器

數(shù)據(jù)倉庫：

SQL:結(jié)構(gòu)化查詢語言(Structured Query Language)

常見的SQL:MySQL Oracle MariaDB PostgreSQL等SQL

常見的NoSQL：MongoDB Redis Memcache

MongoDB：

C++語言編寫，基于分布式文件存儲的開源數(shù)據(jù)庫系統(tǒng)

BSON:類JSON對象（Binary JSON，二進制形式的存儲格式）

{"username":"zhangsan","age":20,"sex":"男"}

由"鍵值對"組成

結(jié)構(gòu)劃分：

數(shù)據(jù)庫(database) db

集合(collection)

文檔(document)

字段(field)

安裝MongoDB

1.針對庫的操作

查看所有庫

創(chuàng)建并進入數(shù)據(jù)庫

查看當前庫

刪除數(shù)據(jù)庫

2.集合操作

查看當前集合

3.針對文檔操作

插入數(shù)據(jù)

修改數(shù)據(jù)：

刪除

查詢數(shù)據(jù)

Express框架快速構(gòu)建WEB應用程序

Express簡介+MVC簡介

Express路由模塊

模板引擎 jade ejs handlebars

nosql數(shù)據(jù)庫MogoDB管理數(shù)據(jù)

使用mongoose操作MongoDB

Angular JS介紹

Angular JS 表達式

Angular JS簡介

Angular JS指令

Angular JS模型

Angular JS Scope(作用域)

Angular JS 控制器

Angular JS 過濾器

Angular JS Http

Angular JS 表格

Angular JS SQL

Angular JS HTML DOM

Angular JS 事件

Angular JS模塊

Angular JS表單

Angular JS輸入驗證

Angular JS Bootstrap應用

Angular JS 包含

Angular JS 應用

App介紹

WebApp/NativeApp/HybirdApp簡介

Cordova線下打包App

移動應用開發(fā)平臺云端打包App

--------------------------------------------------分割符---------------------------------------------------------------------------

可實現(xiàn)以下效果

使用Nodejs搭建

應用程序的服務端

使用Socket長連接實時網(wǎng)絡(luò)通信技術(shù)制作聊天室

帶有前后臺的簡單博客系統(tǒng)

使用AngularJS打造單頁面購物車應用

打包手機端應用

--------------------------------------------------分割符---------------------------------------------------------------------------

特級課：微信開發(fā)

主要內(nèi)容：微信開發(fā)

1、微信接口開發(fā)

2、微信應用開發(fā)

3、微信UI框架

4、原型設(shè)計

5、面試題講解

--------------------------------------------------分割符---------------------------------------------------------------------------

詳細內(nèi)容

微信JSSDK使用

分享接口

圖像接口

音頻接口

智能接口

設(shè)備信息

地理位置

界面操作

WEUI框架

原型設(shè)計

用戶體驗設(shè)計

面試題

--------------------------------------------------分割符---------------------------------------------------------------------------

可實現(xiàn)但不限于以下效果

微信測智商

測測上輩子是誰

測運勢

留言板

照片分享發(fā)送

語音識別

位置顯示

WEUI框架制作微信原生樣式界面

小編已盡力排版，如小伙伴們覺得依然較亂，請留言

用html標簽使用介紹

本文主要記錄常用的html標簽使用說明，用起來的時候偶爾查查。

常用html標簽列表

標簽	英文全拼	作用	特點
?<html></html>??	html	網(wǎng)頁的根標簽	所有的標簽都要寫在這一對根標簽里面
??<head></head>??	head	網(wǎng)頁的頭標簽	包括完檔的屬性和信息
??<body></body>??	body	網(wǎng)頁的主題	包含文檔的所有內(nèi)容
??<div></div>??	division	定義一個區(qū)域	瀏覽器通常會在??<div>??前后放置一個換行符
??<!-- 注釋 -->??	-	注釋	單標簽
??<br>或<br/>??	break	換行	單標簽，不會在其前后創(chuàng)建空白行
??<hr>或<hr/>??	horizontal rule	添加水平線	單標簽
??<img src="">??	image	添加圖片	單標簽
??<embed src="">??	embed	嵌入外部應用	單標簽
??<meta>??	meta	提供有關(guān)頁面的元信息	單標簽，??<meta>???標簽通常位于??<head>??區(qū)域內(nèi)
??<link>??	link	定義文檔與外部資源的關(guān)系	單標簽，??<link>???標簽只能存在于??<head>??區(qū)域內(nèi)，不過它可出現(xiàn)任何次數(shù)。
??<p></p>??	paragraph	定義段落	自動在其前后創(chuàng)建空白行
??<h1> to <h6>??	Header 1 to Header 6	定義標題	h1在一個頁面里只能出現(xiàn)一次
??<strong></strong>??	strong	文本加粗	加粗標記該文本
??<b></b>??	bold	文本加粗	加粗顯示文本，不推薦使用
??<em></em>??	emphasize	文本傾斜	傾斜標記文本
??<i></i>??	italic	文本傾斜	傾斜顯示文本，不推薦使用
??<del></del>??	delete	文本添加刪除線	-
??<s></s>??	strike	文本添加刪除線	不推薦使用
??<ins></ins>??	insert	文本添加下劃線	-
??<u></u>??	underline	文本添加下劃線	不推薦使用
??<a href="">填寫內(nèi)容</a>??	anchor	添加超鏈接	最好使用CSS來改變鏈接的樣式
??<ul></ul>??	unordered list	定義無序列表	通常與??<li>??標簽一起使用
??<ol></ol>??	ordered list	定義有序列表	通常與??<li>??標簽一起使用
??<li></li>??	list item	創(chuàng)建列表項	可與各種列表定義標簽一起使用
??<dl></dl>??	definition list	定義描述列表	通常與??<dt>???和??<dd>??一起使用
??<dt></dt>??	definition term	定義條目	定義描述列表的項目
??<dd></dd>??	definition description	定義描述	對描述列表中的項目進行描述
??<table></table>??	table	定義HTML表格	盡可能通過樣式改變表格外觀
??<tr></tr>??	table row	定義表格的行	一個??<tr>???標簽包含一個或多個??<th>???或??<td>??標簽
??<th></th>??	table headline	定義表格每一列的標題	該標簽的文本通常呈現(xiàn)為粗體且居中
??<td></td>??	table data	定義表格中的單元格數(shù)據(jù)	該標簽的文本呈現(xiàn)為普通且左對齊
??<caption>表格標題</caption>??	caption	定義整個表格的標題	??<caption>???標簽必須直接放在??<table>??標簽后
??<input type="">??	input	定義輸入控件	輸入字段可通過多種方式改變，取決于type屬性
??select??	select	定義下拉列表	??<select>???中的??<option>??標簽定義了列表中的可用選項
??<option></option>??	option	定義下拉列表中的可用項	??<option>??標簽不可自由定義寬高
??<optgroup></optgroup>??	options group	定義選項組	??<optgroup>??標簽用于把相關(guān)的選項組合在一起
??<textarea></textarea>??	textarea	定義多行的文本輸入控件	文本的默認字體是等寬字體
??<form></form>??	form	定義表單	??<form>??可以包含多個元素
??<fieldset></fieldset>??	field set	定義圍繞表單中元素的邊框	??<legend>???為??<fieldset>??定義標題
??<legend></legend>??	legend	為??<fieldset>??定義標題	??<legend>??通過css設(shè)定樣式
??<progress></progress>??	progress	定義運行中的任務進度	??<progress>???是HTML5中的新標簽，??<progress>??標簽不適合用來表示度量衡
??<meter></meter>??	meter	度量衡	??<meter>???是HTML5的新標簽，??<meter>??標簽不適合用來表示進度條
??<audio></audio>??	audio	添加音頻	??<audio>??標簽是HTML5的新標簽
??<video></video>??	video	添加視頻	??<video>??標簽是HTML5的新標簽
??<source>??	source	定義媒介資源	??<source>??標簽是HTML5中的新標簽

常用標簽使用說明

常用寫法：??<img src="" alt="" title=""width="" height=""??>
src：圖片的來源（必寫屬性）
alt：圖像不顯示時的替代文本
title：鼠標在移動到元素上的文本提示
width/height：圖片寬高，沒有定義寬高的時候，圖片按照百分之百比例顯示，更改圖片的寬度或者高度，圖片等比例縮放

普通用法

常用寫法：??<a href="" title="" target="">填寫內(nèi)容</a>??
href：去往的路徑（必寫屬性）
title：鼠標在移動到元素上的文本提示
target：規(guī)定在何處打開路徑

_blank：新頁面打開
_parent：在父窗口中打開鏈接
_self：當前頁面跳轉(zhuǎn)（默認值）
_top：在當前窗體打開鏈接，并替換當前的整個窗體

當href的值為javascript：void(0); 或 javascript：; ，表示超鏈接不做任何事情，不做任何跳轉(zhuǎn)
當href的值為#，表示超鏈接為空鏈接，點擊此鏈接時會跳轉(zhuǎn)到頁首的位置

錨點鏈接

錨點鏈接通過點擊超鏈接，自動跳轉(zhuǎn)到我們設(shè)置錨點的位置，類似于word的目錄導航。建立錨點的元素必須要有id或name屬性，最好兩個都有。這里只跳轉(zhuǎn)本頁面元素，其他頁面跳轉(zhuǎn)自行搜索。
具體做法如下：

給目標元素設(shè)置id值，如??<p id="id1"></p>??
設(shè)置錨點超鏈接，錨點的超鏈接路徑一定包含"#"，后面緊跟元素的id或者name，如??<a href="#id1"></a>??

示例如下。為了顯示效果，通過使用lorem自動生成隨機文本（具體使用方法搜索，一般直接輸入就行），lorem*50表示重復lorem15次。

<a href="#id2">a</a>

  <p id="id1">
    (lorem*15)
  </p>

     (lorem*15)

  <p id="id2">
     (lorem*15)
  </p>

超鏈接全局設(shè)置

在頁面head中寫入代碼可以設(shè)置超鏈接的全局跳轉(zhuǎn)設(shè)置

<head>
  <!-- 讓頁面所有的超鏈接新頁面打開 -->
  <base target="_blank">  
</head>

charset編碼

常用寫法： ??<meta charset="UTF-8">??
charset：定義文檔的字符編碼

ASCII/ANSI/Unicode：英語
GBK：亞洲通用字符集
GB2312：中文簡體
Big5：臺澳港繁體
UTF-8：世界通用字符集

name

關(guān)鍵字

常用寫法： ??<meta name="keywords" content="">??
描述：告訴搜索引擎網(wǎng)頁的關(guān)鍵字，盡量將重要的關(guān)鍵詞放在前面

網(wǎng)頁描述

常用寫法： ??<meta name="keywords" content="">??
描述：告訴搜索引擎網(wǎng)頁的主要內(nèi)容

作者

常用寫法： ??<meta name="author" content="">??
描述：告訴搜索引擎網(wǎng)頁的作者

文件檢索

常用寫法： ??<meta name="robots" content="all | none | index | noindex | follow | nofollow">??
描述：有時候會有一些站點內(nèi)容，不希望被ROBOTS抓取而公開。為了解決這個問題，ROBOTS開發(fā)界提供了兩個辦法：一個是robots.txt，另一個是The Robots META標簽。
content: 文件檢索方式

all：文件將被檢索，且頁面上的鏈接可以被查詢（默認值）
none：文件將不被檢索，且頁面上的鏈接不可以被查詢
index：文件將被檢索；
noindex：文件將不被檢索，但頁面上的鏈接可以被查詢
follow：頁面上的鏈接可以被查詢
nofollow：文件將不被檢索，頁面上的鏈接可以被查詢

網(wǎng)頁自動跳轉(zhuǎn)

常用寫法： ??<meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />??
描述：網(wǎng)頁5秒后自動跳轉(zhuǎn)到谷歌主頁
url：為空則刷新本頁
常用寫法：
描述：規(guī)定當前文檔與被鏈接文檔/資源之間的關(guān)系
rel：定義當前文檔與被鏈接文檔之間的關(guān)系。rel 是 relationship的英文縮寫（必寫屬性）
type：規(guī)定被鏈接文檔的類型
href：鏈接的文件路徑
示例：

鏈接外部樣式表：??<link rel="stylesheet" type="text/css" href="a.css">??
設(shè)置網(wǎng)頁icon圖標：??<link rel="icon" href="a.ico">??

列表

無序列表

無序列表使用粗體圓點進行標記。簡單示例如下。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        ...
    </ul>

有序列表

有序列表使用數(shù)字進行標記，我們可以通過整數(shù)值start指定列表編號的起始值。簡單示例如下。

<ol start="2">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        ...
    </ol>

描述列表

通過描述列表自定義列表，列表項內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。簡單示例如下。

<dl>
        <dt>A</dt> <!-- 小標題 -->
            <dd>A1</dd> <!-- 解釋標題 -->
            <dd>A2</dd> <!-- 解釋標題 -->
        <dt>B</dt> <!-- 小標題 -->
            <dd>B1</dd> <!-- 解釋標題 -->
            <dd>B2</dd> <!-- 解釋標題 -->
    </dl>

表格

基礎(chǔ)表格

常用寫法：??<table width="" height="" border="" cellspacing="" cellpadding=""></table>??
width：表格寬度
height：表格高度
border：邊框?qū)挾?/li>
cellspacing：單元格間距
cellpadding：內(nèi)容與邊框間距

簡單示例如下。

<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格標題</caption> <!-- 定義表格標題 -->

<tr>
    <!-- 定義表格的行 -->
    <td>A1</td> <!-- 定義表格該行第一列中的數(shù)據(jù) -->
    <td>B1</td>
    <td>C1</td>
</tr>
<tr>
    <!-- 定義表格的行 -->
    <th>A</th> <!-- 定義表格每一列的標題 -->
    <th>B</th>
    <th>C</th>
</tr>
<tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
</tr>
</table>

單元格合并

常用寫法：??<td colspan=“” rowspan=“”></td>??
描述：告訴表格該單元格可以橫跨colspan列，縱跨rowspan行

簡單示例如下。

<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格標題</strong></caption> <!-- 定義表格標題 -->
<tr height="100">
    <!-- 定義表格的行 -->
    <td colspan="2">A1</td> <!-- 定義該行可以橫跨兩列 -->
    <td>B1</td>
</tr>

<tr height="100">
    <td>A2</td>
    <td>B2</td>
    <td rowspan="2">C</td> <!-- 定義該行可以橫跨兩行 -->
</tr>

<tr height="100">
    <td>A3</td>
    <td>B3</td>
</tr>
</table>

對于??<input>??不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。

文本輸入框

常用寫法：??<input type="text" name="" maxlength="" readonly="" disabled="" value="">??
type：規(guī)定輸入字段的類型
name：輸入框的名字
maxlength：輸入文本長度
readonly：輸入框是否只讀
disabled：輸入框是否未激活
value：輸入框默認值

簡單示例如下。

<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用戶名">

密碼輸入框

常用寫法：??<input type="password" name="">??
type：規(guī)定輸入字段的類型
name：輸入框的名字
密碼輸入框的其他參數(shù)和文本輸入框一樣

簡單示例如下。

<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密碼">

單選框

常用寫法：??<input type="radio" name="" checked="checked">??
type：規(guī)定輸入字段的類型
name：輸入框的名字
checked：設(shè)定該輸入框被預先選定
想要多個單選框只能有一個被選中，設(shè)置所有單選框的name值相同即可實現(xiàn)

示例一，兩個單選框都可以被選中

<div>
    <input type="radio" name="man" checked="checked">男
</div>
<div>
    <input type="radio" name="woman">女
</div>

示例二，兩個單選框只能有一個被選中

<div>
    <input type="radio" name="gender" checked="checked">男
  </div>
  <div>
    <input type="radio" name="gender">女
  </div>

下拉列表

??<select>??

常用寫法：??<select multiple=""></select>??
multiple：當該屬性為true時，可選擇多個選項。

??<optgroup>??

常用寫法：??<optgroup label=""></optgroup>??
label：設(shè)定選項組的描述。

??<option>??

常用寫法：??<option value="" selected="">選項值</option>??
value：定義送往服務器的選項值。
selected：當該屬性為true時，該選項被默認選擇。

示例一，單選下拉列表

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c" selected='selected'>c</option>  <!-- 默認選中 -->
  </select>

示例二，帶組合的單選下拉列表

<select>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1">b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

示例三，帶組合的多選下拉列表

<select multiple=”multiple”>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1" selected='selected'>b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

多選框

常用寫法：??<input type="checkbox" checked="">??
type：規(guī)定輸入字段的類型
checked：設(shè)定該輸入框被預先選定

簡單示例如下。

<input type="checkbox"  checked="checked">A
  <input type="checkbox">B

文本框

常用寫法：??<textarea cols="" rows="" placeholder=""></textarea>??
cols：控制可見文本的列數(shù)
rows：控制可見文本的行數(shù)
placeholder：提示字符

簡單示例如下。

<textarea cols="5" rows="2" placeholder="text"></textarea>

文本上傳控件

常用寫法：??<input type="file" accept=""/>??
accept：規(guī)定提交的文件的類型

簡單示例如下。

<input type="file" accept="image/gif, image/jpeg"/>

其他類型按鈕

<input type="submit">文件提交按鈕
  <input type="button" value="">普通按鈕
  <input type="image" src="">圖片按鈕
  <input type="reset">重置按鈕
  <input type="url">網(wǎng)址控件
  <input type="date">日期控件 
  <input type="time">時間控件
  <!--email提供了郵箱的完整驗證，必須包含@和后綴，如果不滿足驗證，會阻止表單提交-->
  <input type="email">郵件控件
  <input type="number" step="3">數(shù)字控件
  <input type="range" step="100">滑塊控件
  <input type="color">顏色控件

表單

示例一，普通表單

<form>
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
  </form>

示例二，帶分組信息表單

<form>
    <fieldset>
      <legend>Personalia:</legend>
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="提交">
    </fieldset>

    First nameA: <input type="text" name="fname"><br>
    Last nameB: <input type="text" name="lname"><br>
  </form>

與

??<progress>???與??<meter>??主要區(qū)別和用法見??HTML5 progress和meter控件??

??<progress>??

常用寫法：??<progress value="" max=""></progress>??
value：規(guī)定進程的當前值
max：規(guī)定需要完成的值

簡單示例如下。

<progress value="60" max="100"></progress>

??<meter>??

常用寫法：??<meter min="" low="" high="" max="" value="" optimum=""></meter>??
value：規(guī)定度量的當前值
max：規(guī)定被界定為高的值的范圍
min：規(guī)定被界定為低的值的范圍
low：規(guī)定被界定為低的值的范圍
high：規(guī)定被界定為高的值的范圍
optimum：規(guī)定度量的最優(yōu)值
具體使用見meter標簽改變顏色規(guī)則

簡單示例如下

<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>

多媒體資源

??<audio>??

常用寫法：??<audio src="" controls autoplay loop></audio>??
src：規(guī)定音頻文件的url
controls：如果出現(xiàn)該屬性，顯示音頻播放器的控制面板（比如播放/暫停按鈕）
autoplay：如果出現(xiàn)該屬性，自動播放音頻
loop：如果出現(xiàn)該屬性，循環(huán)播放音頻

簡單示例如下

<audio src="demo.mp3" controls autoplay></audio>

??<video>??

常用寫法：??<video src="" width="" height="" poster="" controls autoplay loop></video>??
src：規(guī)定視頻文件的url
width：設(shè)置視頻播放器的寬度（pixels）
height：設(shè)置視頻播放器的高度（pixels）
poster：設(shè)置視頻未播放時展示的畫面
controls：如果出現(xiàn)該屬性，顯示音頻播放器的控制面板（比如播放/暫停按鈕）
autoplay：如果出現(xiàn)該屬性，自動播放音頻
loop：如果出現(xiàn)該屬性，循環(huán)播放音頻

簡單示例如下

<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

??<source>??

常用寫法：??<source src="" type="">??
src：規(guī)定媒體文件的url
type：規(guī)定媒體文件的類型
因為不同瀏覽器支持的媒體格式不同，當添加媒體文件時，需要考慮瀏覽器是否支持它們。我們可以準備多種不同格式的媒體文件，然后使用source 標簽，讓瀏覽器從上到下選擇支持的媒體格式

簡單示例如下

<video controls>
    <source src="demo.mp3" type="audio/mp3">
    <source src="demo.mp4" type="video/mp4">
    您的瀏覽器不支持video元素。
  </video>

特殊字符

??HTML特殊字符編碼對照表??

參考

??HTML基礎(chǔ)??
??HTML 參考手冊??
HTML中標簽對應的英文
meter標簽改變顏色規(guī)則
HTML5 progress和meter控件

在線咨詢

上一篇：js如何實現(xiàn)動態(tài)倒計時效果
下一篇：Web前端開發(fā)，HTML超鏈接標簽，不懂的可以學習一下

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

html5常用基本標簽

用html標簽使用介紹

常用html標簽列表

常用標簽使用說明

列表

表格

與

多媒體資源

特殊字符

參考

您的項目需求