前端開發規范（一、HTML篇）

本原則

結構、樣式、行為分離

盡量確保文檔和模板只包含 HTML 結構，樣式都放到樣式表里，行為都放到腳本里。

縮進

統一兩個空格縮進（總之縮進統一即可），不要使用 Tab 或者 Tab、空格混搭。

文件編碼

使用不帶 BOM 的 UTF-8 編碼。

在 HTML中指定編碼 <meta charset="utf-8"> ；

無需使用 @charset 指定樣式表的編碼，它默認為 UTF-8 （參考 @charset）；

一律使用小寫字母

省略外鏈資源 URL 協議部分

省略外鏈資源（圖片及其它媒體資源）URL 中的 http / https 協議，使 URL 成為相對地址，避免Mixed Content 問題，減小文件字節數。

其它協議（ftp 等）的 URL 不省略。

統一注釋

通過配置編輯器，可以提供快捷鍵來輸出一致認可的注釋模式。

HTML篇

標簽

自閉合（self-closing）標簽，無需閉合 ( 例如： img input br hr 等 )；
可選的閉合標簽（closing tag），需閉合 ( 例如：</li> 或 </body> )；
盡量減少標簽數量；

Class 與 ID

class 應以功能或內容命名，不以表現形式命名；
class 與 id 單詞字母小寫，多個單詞組成時，采用中劃線-分隔；
使用唯一的 id 作為 Javascript hook, 同時避免創建無樣式信息的 class；

屬性順序

HTML 屬性應該按照特定的順序出現以保證易讀性。

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

引號

屬性的定義，統一使用雙引號。

嵌套

a 不允許嵌套 div這種約束屬于語義嵌套約束，與之區別的約束還有嚴格嵌套約束，比如a 不允許嵌套 a。

嚴格嵌套約束在所有的瀏覽器下都不被允許；而語義嵌套約束，瀏覽器大多會容錯處理，生成的文檔樹可能相互不太一樣。

語義嵌套約束

<li> 用于 <ul> 或 <ol> 下；

<dd>, <dt> 用于 <dl> 下；

<thead>, <tbody>, <tfoot>, <tr>, <td> 用于 <table> 下；

嚴格嵌套約束

inline-Level 元素，僅可以包含文本或其它 inline-Level 元素;

<a>里不可以嵌套交互式元素<a>、<button>、<select>等;

<p>里不可以嵌套塊級元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。

更多詳情，參考WEB標準系列-HTML元素嵌套

布爾值屬性

HTML5 規范中 disabled、checked、selected 等屬性不用設置值。

語義化

沒有 CSS 的 HTML 是一個語義系統而不是 UI 系統。

通常情況下，每個標簽都是有語義的，所謂語義就是你的衣服分為外套，褲子，裙子，內褲等，各自有對應的功能和含義。所以你總不能把內褲套在脖子上吧。– 一絲

此外語義化的 HTML 結構，有助于機器（搜索引擎）理解，另一方面多人協作時，能迅速了解開發者意圖。

HEAD

文檔類型

為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的表現。

語言屬性

lang屬性的取值應該遵循 BCP 47 - Tags for Identifying Languages。

字符編碼

以無 BOM 的 utf-8 編碼作為文件格式;

指定字符編碼的 meta 必須是 head 的第一個直接子元素；

IE 兼容模式

優先使用最新版本的IE 和 Chrome 內核

SEO 優化

viewport

viewport: 一般指的是瀏覽器窗口內容區的大小，不包含工具條、選項卡等內容；

width: 瀏覽器寬度，輸出設備中的頁面可見區域寬度；

device-width: 設備分辨率寬度，輸出設備的屏幕可見寬度；

initial-scale: 初始縮放比例；

maximum-scale: 最大縮放比例；

為移動端設備優化，設置可見區域的寬度和初始縮放比例。

iOS 圖標

apple-touch-icon 圖片自動處理成圓角和高光等效果;

apple-touch-icon-precomposed 禁止系統自動添加效果，直接顯示設計原圖;

favicon

在未指定 favicon 時，大多數瀏覽器會請求 Web Server 根目錄下的 favicon.ico 。為了保證 favicon 可訪問，避免404，必須遵循以下兩種方法之一：

在 Web Server 根目錄放置 favicon.ico 文件；
使用 link 指定 favicon；

HEAD 模板

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

Html5課程內容主要包括以下八個方面：Web頁面制作基礎，UI網站設計，編程基礎技術，后端開發技術，移動互聯網應用，特效開發高級實戰，企業級應用開發以及網頁游戲開發。

兄弟連教育根據公司和行業發展的實際需要設計教學內容，現行的課程體系包括四大階段和特級課：“基礎網頁布局與響應式布局”、“前端核心技術：Javascript”、“HTML5新特性”、”MEAN(MongoDB+Express+Angular.js+Node.js)全?？蚣荛_發”，”特級課：微信開發”。

第一階段：基礎網頁布局與響應式布局

主要內容：

1、HTML CSS

2、PS操作，網頁切圖

3、基本網頁布局

4、HTML5 語義標簽

5、HTML5 智能表單

6、CSS3

7、Media Query響應式布局

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

詳細內容包括：

WEB開發構件

系統及文件基本操作

基本的快捷鍵

描述 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 瀏覽器操作

標簽/窗口管理

打印當前網頁

保存當前網頁

地址欄操作

書簽操作

屏幕截圖

WEB開發構件

C/S結構

B/S結構

HTTP協議

傳輸數據方式：post,get

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

URL組成

HTML介紹

HTML發展史

HTML5簡介

新標準

引入原生多媒體支持

引入可編程內容

引入予以Web

http協議

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

開發軟件

nodepad++

sublime

dreamweaver

HTML介紹

HTML發展史

HTML5介紹

HTML基本語法與規范

標簽

屬性

固有屬性

自定義屬性

通用屬性

元素

父元素（理解）

子元素

兄弟元素

后代元素

主體結構

長度單位

顏色單位

基礎標簽

文本類標簽

文本格式化標簽

<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不支持) '

￠分 ¢ ¢

￡鎊 £ £

￥日元 ¥ ¥

€ 歐元 € €

§ 小節 § §

? 版權 © ©

? 注冊商標 ® ®

? 商標 ™ ™

× 乘號 × ×

÷ 除號 ÷ ÷

表格標簽

colgroup

caption

table

thead

col

span

tbody

colspan

rowspan

tfoot

頭部標簽

<!doctype html>

<head> 定義了文檔的信息

<title> 定義了文檔的標題

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

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

content text 定義與 http-equiv 或 name 屬性相關的元信息。

http-equiv content-type

default-style

refresh 把 content 屬性關聯到 HTTP 頭部。

name application-name

author

description

generator

keywords 把 content 屬

多媒體標簽

1. img

1.1 導入一張圖片

1.2 屬性

src 圖片地址

width 設置圖片寬

height 設置圖片高

border 設置圖片邊框

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

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

usemap map標簽的name #name

2. map

2.1 給圖片劃分區域配合area

2.2 屬性

name 給map指定一個name

3. area

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

3.2 屬性

shape 劃分的形狀

coords 形狀的坐標·

href 要鏈接的地址

target 新網頁打開方式

4. audio

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

4.2 屬性

src 音頻源的路徑必備

controls 顯示控制按鈕必備

autoplay 自動播放

loop 是否循環

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

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

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 是否循環播放

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. 表單相關標簽

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

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

② 屬性

action 表單要提交的地址

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

target 打開新網頁的方式 _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 設置submit（默認值），按鈕具有提交功能設置為button，普通按鈕 reset 重置

1.4 textarea

① 文本域雙標簽

② 屬性

name 指定名字

rows 指定行數決定文本域高度

cols 指定列數決定文本域寬度

1.5 select

① 選擇框下拉框單選框

② 屬性

name 指定名字

multiple 設置為多選

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設置默認值

password 密碼框 value設置默認值

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

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

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

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

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

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

file 上傳框

hidden 隱藏域 name value

3. label標簽

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

屬性 for 指定 input的id

語義標簽

<header> 定義了文檔的頭部區域

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

<article> 定義頁面獨立的內容區域。

<figure> 規定獨立的流內容（圖像、圖表、照片、代碼等等）。

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

<aside> 定義頁面的側邊欄內容。

<section> 定義文檔中的節（section、區段）。

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

<address> 定義文檔作者或擁有者的聯系信息

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

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

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

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

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

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

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

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

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

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

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

<time> 定義日期或時間。

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

CSS基礎與規范知識

1. CSS的定義

Cascading Style Sheets 層疊樣式表（級聯樣式表）

2. CSS的作用

定義網頁外觀，如字體、背景、顏色等

3. CSS特點

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

② 精細的控制可以做到像素級別的調整

③ 樣式與內容的分離便于維護，便于重用

4. 發展歷程

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

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

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

CSS選擇器

HTML tag

Class

包含選擇器：div span a

組合選擇 div,span,a

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

關系選擇器

包含選擇符

子選擇符

相鄰選擇符

兄弟選擇符

屬性選擇器

偽類選擇器

偽對象選擇器

CSS3屬性

尺寸

邊框

背景

內補白

外補白

布局

定位

字體

文本

列表

表格

用戶界面

多欄

2D變換

過渡

動畫

Photoshop網頁設計基礎

I設計介紹

photoshop安裝與設置

位圖與矢量圖

網頁常用圖片格式

圖像大小與分辨率

選區創建和編輯

選區的創建

選區工具M

套鎖工具L

快速選區工具W和魔術棒W

鋼筆選區

創建矢量路徑

錨點操作

鋼筆工具

形狀轉選區ctrl+Enter

選區的編輯

選區的存儲

應用輔助功能

使用標尺ctrl+R

設置網格：視圖>顯示>網格ctrl+'

應用變換功能

選擇>可變換選區ctrl＋T

縮放

旋轉

扭曲

透視

變形

水平翻轉

垂直翻轉

應用內容識別比例功能

操控變形

裁剪圖像

裁剪工具

基礎繪畫

了解繪畫和繪畫修飾工具

畫筆

顏色替換

涂抹工具

繪畫的基本技巧

繪制直線,按住shift

繪制曲線

定義顏色

使用拾色器

漸變工具

填充前景色：alt＋delete

填充背景色：control＋delete

為圖像填充顏色shift+f5

圖形、路徑計算

網頁布局規范

Web設計規范

banner設計

網頁柵格系統

網頁構成

命名規范

導航設計

版式設計

網頁配色

Photoshop網頁切圖

網頁切圖及切圖常見問題

精靈圖片技術

專題頁設計

W3C盒子模型

div+css網頁布局

HTML5兼容性處理

使用 HTML5布局元素的布局

Media Query響應式布局

原生響應式布局

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

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

可實現效果

1、表格制作個人簡歷

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

3、div+css基本網頁布局

4、PS網頁設計

5、精靈圖片技術

6、語義化標簽布局

7、智能表單驗證

8、多媒體播放

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

10、響應式網頁實現

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

第二階段：前端核心技術：Javascript

主要內容：

1、Javascript

2、Ajax

3、JQuery

4、JS高級特效

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

詳細內容：

JavaScript 腳本語言

什么是JavaScript？

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

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

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

特點：

1. 弱類型

2. 基于對象。(因為面向對象需要具有封裝、繼承、多態的特征)

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

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

在HTML中如何使用JavaScript

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

屬性：

charset（可選）字符集設置、

defer（可選執行順序）值：defer、

language(已廢除)、

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

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

<!--

javaScript語言

//-->

</script>

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

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

JavaScript的語法：

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

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

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

4.腳本注釋：

// 單行注釋

/* 多行注釋 */

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

6.變量的定義：使用var關鍵字來聲明。

變量的命名規范是：字母數字，$符和下劃線構成，但是不可以以數字開始。

變量名不可以使用關鍵字.

typeof函數獲取一個變量的類型：

7.JavaScript的數據類型：

undefined 類型

null 類型（對象）

boolean 類型

number 類型

object引用類型

8. 類型轉換：

JavaScript的運算符

1. 一元運算符

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

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

++ --

一元加法和一元減法

2. 位運算符

位運算 NOT ~

位運算 AND &

位運算 OR |

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

左移運算 <<

右移運算 >>

3. 邏輯運算符

邏輯 NOT ! 運算符非

邏輯 AND && 運算符與

邏輯 OR || 運算符或

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

5. 加性運算符： + -

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

就是加號”+“兩側都是數值則求和，否則做字串連接

6. 關系運算符 > >= < <=

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

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

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

10 逗號運算符

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

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. 循環語句（迭代語句）

for：

while

do...while

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

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

//迭代的是數組的下標。

for(i in a){

document.write(a[i]);

}

//輸出： 1020304050

4. break 和 continue 語句對循環中的代碼執行提供了更嚴格的控制。

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

//擴充知識：

1. 在網頁文檔中獲取一個節點對象（HTML標簽）

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

2. 定時相關函數：

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

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

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

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

一、JavaScript的函數：

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

函數體。。。

[return 返回值;]

}

JavaScript三種定義函數方法：

*第一種是使用function語句定義函數

如上面格式

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

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

如：

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

*第三種是在表達式中定義函數

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

//例如：

//定義

var add = function(a,b){

return a+b;

}

//調用函數

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

arguments 對象

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

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

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

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

關于變量和參數問題：

函數外面定義的變量是全局變量，函數內可以直接使用。

在函數內部沒有使用var定義的=變量則為全局變量，

*在函數內使用var關鍵字定義的變量是局部變量，即出了函數外邊無法獲取。

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

二、系統中常用的內置函數：

escape() //字串編碼

unescape() //字串反編碼

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

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

*parseInt()

*parseFloat()

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

1.使用構造函數創建內置對象

var myObject = new Object();

myObject.name = “lijie”;

myObject.age = 20;

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

2.直接創建自定義對象

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

*3.使用自定義構造函數創建對象

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]);

}

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

二、with語句

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

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

document.write(‘test1’);

document.write(‘test2’);

document.write(‘test3’);

可以使用with來簡化：

with(document){

write(‘test1’);

write(‘test2’);

write(‘test3’);

}

三、JavaScript內置對象

* Array（數組）

var a= new Array(); //創建一個空數組

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

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

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

常用屬性：

length--獲取長度。

常用方法：

toString() 把數組轉換為字符串，并返回結果。

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

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

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

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

* Boolean 布爾值包裝類對象

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

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

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

* Date

var dd = new Date();

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

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

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

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

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

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

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

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

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

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

同上還有很多set方法用來設置。

* Math 對象用于執行數學任務。方法是靜態的。

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

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

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

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

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

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

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

* Number

toString();

toFixed 把數字轉換為字符串，結果的小數點后有指定位數的數字。

* String 子串處理對象

anchor() 創建 HTML 錨。

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

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

*indexOf() 檢索字符串。

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

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

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

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

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

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

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

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

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

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

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

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

* RegExp

exec()正則匹配

test()

match()

* Global

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

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

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

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

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

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

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

Number(object) --函數把對象的值轉換為數字。

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

*parseInt(string, radix)

事件處理

一、事件源: 任何一個HTML元素（節點） 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 關閉(為了兼容可使用下面函數)

beforeunload 關閉之前

表單：

* focus 焦點

* blur 失去焦點

* submit 提交事件

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

其它：

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

window.onscroll=function(){

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

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

}

selectd 事件

。。。。

三、事件處理程序

使用一個匿名或回調函數

有三種方法加事件

第一種：

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

*第二種：

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

</script>

第三種：(火狐不兼容)

事件對象：

屬性：

1. srcElement

2. keyCode 鍵盤值

事件 event window.event

1. srcElement 代表事件源對象

2. keyCode 事件發生時的鍵盤碼 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: 設置或返回窗口中的框架數量。

Screen: 對 Screen 對象的只讀引用

status: 設置窗口狀態欄的文本。

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

常用方法：

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

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

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

close() 關閉瀏覽器窗口。

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

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

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

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

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

clearInterval() 取消由 setInterval() 設置的 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 對象包含有關客戶端顯示屏幕的信息。

常用屬性：

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

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

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

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

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

網頁可見區域寬： document.body.clientWidth

網頁可見區域高： document.body.clientHeight

網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)

網頁可見區域高： document.body.offsetHeight (包括邊線的高)

網頁正文全文寬： document.body.scrollWidth

網頁正文全文高： document.body.scrollHeight

網頁被卷去的高： document.body.scrollTop

網頁被卷去的左： document.body.scrollLeft

網頁正文部分上： window.screenTop

網頁正文部分左： window.screenLeft

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

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

屏幕可用工作區高度： window.screen.availHeight

屏幕可用工作區寬度： window.screen.availWidth

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

5. Location 對象包含有關當前 URL 的信息。

講解DOM

一、基本概念

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

HTML DOM 把 HTML 文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。

DOM 被分為不同的部分：

1.Core DOM

定義了一套標準的針對任何結構化文檔的對象

2.XML DOM

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

3.HTML DOM

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

節點：根據 DOM，HTML 文檔中的每個成分都是一個節點。

DOM 是這樣規定的：

>整個文檔是一個文檔節點

>每個 HTML 標簽是一個元素節點

>包含在 HTML 元素中的文本是文本節點

>每一個 HTML 屬性是一個屬性節點

>注釋屬于注釋節點

節點彼此間都存在關系。

>除文檔節點之外的每個節點都有父節點。

>大部分元素節點都有子節點。

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

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

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

查找并訪問節點

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

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

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

節點信息

每個節點都擁有包含著關于節點某些信息的屬性。這些屬性是：

nodeName（節點名稱）

nodeValue（節點值）

nodeType（節點類型）

nodeName 屬性含有某個節點的名稱。

元素節點的 nodeName 是標簽名稱

屬性節點的 nodeName 是屬性名稱

文本節點的 nodeName 永遠是 #text

文檔節點的 nodeName 永遠是 #document

二、HTML DOM 對象參考

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

常用集合屬性：forms

Anchor : 代表 <a> 元素

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

Base : 代表 <base> 元素

Body : 代表 <body> 元素

Button : 代表 <button> 元素

Event : 代表某個事件的狀態

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. 創建請求對象

if(window.XMLHttpRequest){

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

xmlhttp=new XMLHttpRequest();

}else{

// code for IE6, IE5

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

}

2. 設置回調函數（監聽）

xmlhttp.onreadystatechange=函數名；

或

xmlhttp.onreadystatechange=function(){

函數體。。。

}

3. 初始化：

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

4. 發送：

xmlhttp.send();

其中：xmlhttp請求對象：

**屬性：

*readyState //請求狀態：0,1,2,3,4

*responseText//響應內容

responseXML //xml響應對象

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

statusText //狀態內容

*onreadystatechange //回調函數屬性

方法：

abort() //取消當前響應，關閉連接并且結束任何未決的網絡活動。

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

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

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

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

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

自定義Ajax實例使用

jQuery的基本語法

對象的訪問

each()

size()

length

selector

context

get()

index()

jQuery 屬性操作

屬性

attr

removeAttr

prop

removeProp

CSS

addClass

removeClass

toggleClass

HTML代碼/文本/值

html()

text()

val()

基礎知識

JQuery簡介

JQuery 安裝

JQuery語法

jQuery CSS 操作

css:css()

位置

offset()

position()

scrollTop()

scrollLeft()

尺寸

height()

width()

innerHeight()

innerWidth()

outerHeifht()

outerWIdth()

jQuery 選擇器

基本

層級

偽類

內容

可見性

屬性

子元素

表單

表單對象屬性

jQuery 篩選

過濾

查找

串聯

jQuery HTML文檔處理

內部插入

外部插入

包裹

替換

刪除

復制

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

數組和對象操作

函數操作

測試操作

字符串操作

瀏覽器及特性檢測

URL

數據緩存

隊列機制

jQuery 插件

插件使用

jQuery 自定義插件方法

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

可實現效果

1、刷新改背景

2、獲取和設置時間

3、從URL中獲取文件名

4、簡單的計算器

5、滾動類效果

6、自定義菜單

7、下拉菜單

8、手風琴菜單

9、彈出層

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

11、選項卡開發

12、幻燈播放

13、拖拽效果

14、淘寶商品的放大效果

15、登錄注冊驗證

16、首頁多特效合成

17、后臺效果制作

18、瀑布流

19、點名器

20、抽獎

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

第三個階段：HTML5新特性

主要內容：

1、視頻/音頻

2、地理定位

3、Web 存儲

4、應用緩存

5、拖放

6、文件讀取

7、Web Workers

8、畫布 SVG

9、CSS預處理

10、BootStrap 響應式框架

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

詳細內容：

HTML5 多媒體

audio/video API操作

地理位置信息獲取

geolocation API操作

地球間兩點距離計算方法

地圖API調用

HTML5離線緩存

cache manifest規范及格式

HTML5本地存儲

localStorage - 沒有時間限制的數據存儲

sessionStorage - 針對一個 session 的數據存儲

拖放（Drag 和 drop）

FileReader

瀏覽器多線程

畫布 SVG 動畫實現

SASS使用

SASS的基本語法

Bootstrap配置

使用Bootstrap布局頁面

Bootstrap全局樣式

柵格系統原理

Bootstrap各種常用組件

Bootstrap常用插件應用

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

可實現效果：

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

查看經緯度

獲取公交路線

顯示路線導航

離線應用

多線程優化用戶體驗

拖放歌曲列表

圖片拖放顯示

拖放照片墻

繪畫五角星

繪制時鐘

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

碰撞原理與實現

九大行星圍繞運動

鼠標交互特效

使用SASS制作動態CSS程序

使用UI框架實現響應式布局

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

第四階段：MEAN(MongoDB+Express+Angular.js+Node.js)全?？蚣荛_發

主要內容：

1、Node.js

2、MongoDB

3、Express

4、AngularJS

5、WEB APP制作

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

詳細內容:

NodeJS與瀏覽器js的區別

NodeJS基礎

NodeJS安裝

模塊

require

exports

module

NPM

代碼的組織和部署

模塊路徑解析規則

包（package）

index.js

package.json

文件操作

Buffer（數據塊）

Stream（數據流）

File System（文件系統）

Path（路徑）

網絡操作

HTTP

HTTPS

URL

Query String

Zlib

Net

NPM/Bower依賴管理工具

Zepto.js庫

NodeJS文件操作

使用NodeJS搭建Web服務器

使用NodeJS搭建Socket服務器

數據倉庫：

SQL:結構化查詢語言(Structured Query Language)

常見的SQL:MySQL Oracle MariaDB PostgreSQL等SQL

常見的NoSQL：MongoDB Redis Memcache

MongoDB：

C++語言編寫，基于分布式文件存儲的開源數據庫系統

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

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

由"鍵值對"組成

結構劃分：

數據庫(database) db

集合(collection)

文檔(document)

字段(field)

安裝MongoDB

1.針對庫的操作

查看所有庫

創建并進入數據庫

查看當前庫

刪除數據庫

2.集合操作

查看當前集合

3.針對文檔操作

插入數據

修改數據：

刪除

查詢數據

Express框架快速構建WEB應用程序

Express簡介+MVC簡介

Express路由模塊

模板引擎 jade ejs handlebars

nosql數據庫MogoDB管理數據

使用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

移動應用開發平臺云端打包App

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

可實現以下效果

使用Nodejs搭建

應用程序的服務端

使用Socket長連接實時網絡通信技術制作聊天室

帶有前后臺的簡單博客系統

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

打包手機端應用

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

特級課：微信開發

主要內容：微信開發

1、微信接口開發

2、微信應用開發

3、微信UI框架

4、原型設計

5、面試題講解

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

詳細內容

微信JSSDK使用

分享接口

圖像接口

音頻接口

智能接口

設備信息

地理位置

界面操作

WEUI框架

原型設計

用戶體驗設計

面試題

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

可實現但不限于以下效果

微信測智商

測測上輩子是誰

測運勢

留言板

照片分享發送

語音識別

位置顯示

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

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

言：萬物之始，大道至簡，演化至繁。水滴不染塵世浮華，方能純凈如冰川靈動如絲絨。落紅不逐春日絢爛，方有一年春盡一年春。

一、html5的介紹

1.1介紹

html號稱超文本標記語言，代表著瀏覽器技術發展的一個階段。html版本1到版本5的更新迭代都是由組織W3C管理的。當時到html4.1的時候，W3C組織就聲稱不再更新版本了。而改用XHTML。但是由于瀏覽器的各種不兼容的問題，于是乎W3C這個組織就和其他的瀏覽器產商一起聯合起來將這門語言再次更新到html5

比喻：

html5 >機器人的骨骼

css3 >機器人的外在修飾

js > 機器人的行為如行走、抬腿

Jquery > 封裝好的控制行為的庫，可以提高效率

1.2優勢

易用性
支持視頻和音頻
互動性高
支持移動設備
未來的趨勢

1.3開發工具

HBuild、WebStrom、sublime Text

二、代碼規范

2.1代碼規范

新建一個Web項目

相比html4來說，html5的語法更加簡潔并且在規定上也更加寬松。

單標簽不用寫關閉符號
雙標簽省略結束標簽
html、head、body、colgroup、tbody可以完全省略
刪除其中一些，打開瀏覽器的檢查元素功能，也不會報錯

三、各類標簽

3.1文本標簽

b標簽：表示關鍵字和產品名稱。<b>html</b>其實它的實際作用就是將一段文字加粗。但是并不是特別強調它的重要性。比如說：在一段文字當中出現的某些關鍵字或者產品的名稱就可以用b標簽
strong標簽：表示比較重要的文字<strong>html</strong>它的作用也是加粗，只是它在強調一段比較重要的文本
br單標簽：換行
wbr標簽：安全換行you've no idea how worried <wbr> i was當用戶對網頁進行縮放的時候可能會有一些單詞被擠到下一行。如果不行某個單詞被分離的話，可以使用安全換行標簽
i標簽：傾斜。em標簽語義一樣，但em表示強調<i>傾斜標簽</i>它用于表示外文詞匯或科技術語
s標簽：刪除線。del標簽表示強調。<s>html</s>刪除線
u標簽：給文字加下劃線。ins標簽表示強調<u>html</u>下劃線
small標簽：添加小號字體<small>放小一號</small>將文本放小一號。通常用于免責聲明和澄清聲明。
sub和sup標簽：添加上標和下標X<sub>5</sub>和Y<sup>2</sup>（sub和sup長差不多，這個要如何去記憶呢？大家可以看到b的肚子在下面，所以呢它是下標，而p的頭部在上方，所以記錄是上標。那這樣一來是不是就感覺清晰了許多呢）
q標簽：引用來自其它出處的內容<q>有朋自遠方來</q>
ruby標簽：語言元素。常用于幫助讀者正確發音。<ruby>夔<rp>（</rp><rt>kui</rt><rp>）</rp></ruby><rp><rt>用來幫助讀者掌握表意語言文字的正確發音。比如說漢語拼音在文字的上方。
bdo標簽：設置文字方向<bdo dir="rtl">設置文字方向</bdo>dbo必須使用屬性dir才可以設置，一共兩個值：rtl從右到左和ltr從左到右。一般默認是ltr。還有一個bdi元素也是處理方向的，由于是特殊語言的效果，并且主流瀏覽器有些不支持，所以可以忽略。
mark標簽：突出顯示文本<mark>突出顯示文本</mark>加上一個黃色的背景，黑色的字。從語義上來看，與上下文相關而突出的文本，用于記號。
a標簽：超鏈接a元素屬于文本元素，有一些私有屬性。
href屬性 <a >百度</a> 這個屬性是必須的，否則a元素就變得毫無意義。它的屬性值意味著點擊跳轉到指定的外部網站去。
target屬性<a target="_blank">百度</a> 這個屬性告訴瀏覽器希望打開的新窗口顯示在哪里。_blank表示在新窗口中打開文檔。_self表示在當前窗口打開文檔。默認_self。(_parent和_top這些要結合框架來使用，但是基本上用得已經很少了。)
錨點設置：用于將同一個文檔中的另一個元素移入視野。說通俗一點就是通過點擊這個錨點定位到頁面中的某個位置。

</br>

==========以下全都是分隔符============</br>

<a name="1">第一節的內容我?應該說點啥的。

==========以下全都是分隔符============</br>

</a>

==========以下全都是分隔符============</br>

……以上省略一萬行……

==========以下全都是分隔符============</br>

<a name="2">第二節的內容我?應該說點啥的。

==========以下全都是分隔符============</br>

</a>

3.2分組標簽

顧名思義，分組元素就是用來組織相關內容的html元素，對它們進行清晰有效的分類。

p標簽：表示段落<p>這是一個段落</p> <p>這是一個段落</p>p標簽就是將內部包含的文本形成一個段落。它們可以自動換行，而且段落與段落之間保持一定量的空隙。
div標簽：通用分組<div>這是一個塊標簽</div> <div>這是另一個塊標簽</div>在早期的版本中經常用到，用div將其他數據或標簽包裹起來，進而進行布局。但是在html5中，漸漸被其他元素替代。（它與p標簽的區別就是兩段文本間沒有空隙?？障堕g隔和br標簽換行一樣）
blockquite標簽：引用大段其他地方的內容<blockquote>引用別人的內容的輔導費打發打發可以換行哦他也有首尾縮進的效果</blockquote>有段落空隙的功能，還包含了首尾縮進的功能。
pre標簽：按照原格式展示數據<pre> 我就是長這樣的參差不齊 </pre>（有時候某些文字就想要按照原來的格式顯示出來就要用到pre標簽。它就是將數據原封不動的顯示出來）
hr標簽：單標簽。添加一條分割線。
ul和li標簽：添加無限列表

<ul>

</ul>

ul標簽表示無序列表（就像咱們平時說的無符號整形，在前面也是加了一個u），而li標簽則表示內部的列表項

ol和li：表示有序列表
start屬性：表示從第幾個序列開始統計。<ol start="2">
reversed屬性：是否倒序排列。<ol reversed>（不過這個屬性有很多的瀏覽器不支持，所以要謹慎使用）
type屬性：表示列表的編號的類型 <ol type="A">
value屬性：這是屬于li的屬性。表示強行設置某個項目的編號。<li value="7">安琪拉</li>
dl、dt、dd：列表標簽

<dl>

<dt>第一份內容</dt>

<dd>第一行詳細內容</dd>

<dd>第二行詳細內容</dd>

<dl>

雖然說這三個標簽是一個整體，但是dt和dd標簽并非都必須出現

figure和figcaption標簽：使用插圖的意思。一般用于圖片的布局。

<figcaption>這里有一張圖哦</figcaption>

</figure>

3.3表格標簽

表格的用途是以網格的形式顯示二維數據。開發者可以對表格中的元素標簽設置不同的屬性如邊框寬度、顏色等使表格呈現出不同的效果。

3.3.1 標簽

table：表示表格標簽
tr：代表某一行
td：代表一個單元格。

</tr>

</tr>

</table>

th：代表標題單元格。代表標題，作用是將內部文字居中且加粗。

<tr>

</tr>

thead：代表表頭。（某些時候，網頁上的表頭是由js動態生成的。有可能沒按照先后的順序排列，如此一來表頭就有可能顯示到第二行、第三行甚至是表尾。用thead將tr括起來可以讓數據永遠顯示在第一行）

<thead>

<tr>

</tr>

tfoot:表示表尾：與表頭相反
tbody:表示表格的主體部分
(這里非常建議用分主體、表頭、表尾的方式寫。因為到后期使用CSS樣式的時候只要拿到某個標簽就可以設置總體的樣式了，這樣就會非常方便)
caption:添加表格的標題
colgroup:群組。用于設置列的屬性。默認設置第一個（有的時候需要設置單獨列的屬性，如果說我只想設置第二列的屬性，則需要把第一列的設置成白色）

col：群組的子標簽。更加靈活的設置列屬性。通過占位符設置不需要的屬性。

</colgroup>

3.3.2屬性

border:表示邊框的寬度 <table border="1"></table>
style:通用屬性。在css中做詳解。
colspan：合并列 <td colspan="3">統計</td>這句代碼表示共占三個單元格
rowspan:合并行

<tr>

</tr>

3.3文檔元素

文檔元素的主要作用是劃分各個不同的內容，讓整個布局更加清晰。進入代替div。讓整個布局元素都具有語義。

header標簽：表示頁面頭部。通常包括標題或導航等內容。下面內容會換行（在頁面中一般會用樣式將它設置到居中）
footer標簽:表示頁面的尾部，一般用于版權聲明、友情鏈接等。
h1-h6標簽：標題標簽，有字體加粗的效果。從1-6字號依次減小

<h1>這里是一個大標題</h1> <h3>這里是一個副標題</h3>

hgroup:組合標題。hgroup的作用就是當多個標題出現，干擾到一對或多個本身需要整合的標題。

<h1>這里是一個大標題</h1>

<h3>這里是一個副標題</h3>

</hgroup>

</header>

<h4>這里是尾部的副標題</h4>

</footer>

如上面那段代碼，頭部的h4標題就能與h1綁定起來，從而和尾部的h4分離。

section標簽: 定義一個文檔的主題內容
nav標簽: 給文檔頁面添加一個導航
aritcle標簽：添加一個獨立成篇的文檔（像平常看到的論壇，貼吧，評論都有自己的頭、尾和內容等）

</header>

</article>

aside標簽：生成注釋欄。

<aside>這是一個注釋欄</aside>

address表示文檔或者是article元素的聯系信息
<address>聯系信息</address>
本身有傾斜的效果。如果是在article元素下表示其下的聯系信息，如果是在body元素下表示整個文檔的聯系信息

3.4嵌入元素

嵌入元素主要功能是把外部的一些資源插入到html中。

img標簽：用于顯示圖片
src：嵌入圖像的url
alt：（如果圖片能正常顯示則沒有任何效果。若圖片加載不成功會出現備用內容）
width/height:定義圖片的寬度和高度,單位是像素<img src="img.png" alt="風景圖" width="320" height="400"/>
ismap:獲取到圖片區域的像素點加入了ismap屬性之后，點擊圖片在瀏覽器中就會獲得圖片被點擊的地方的像素點。（把文件在目錄中打開，講文件拷貝到谷歌瀏覽器打開就能看見）

</a>

usemap:創建分區的響應圖。比如說點擊圖片的某一部分，可以跳轉到某一個網頁。（當點擊了coords這塊區域時，跳轉到指定的網頁）

</map>

iframe標簽：嵌入另一個文檔。表示在一個頁面內建立一個區域引入另一個頁面。

<a href="index.html" >index</a>

progress標簽：用于顯示進度
該標簽會產生一個進度條，一般我們會用js代碼來控制其內部的值。(當前值用value來表示，而最大值用max來表示)

meter標簽：顯示范圍里的值（類似于進度條,可以規定最大值和最小值max/min。low值規定它的值過低，high表示值過高。而optimun表示最佳值，但是這個屬性是呈現不出效果的）

3.5音頻和視頻標簽

音頻和視頻文件其實都只是一個容器文件。視頻文件包含了音頻軌道、視頻軌道和其他一些元數據。視頻播放時，音頻軌道和視頻軌道是綁定在一起的。元數據包含了視頻的封面、標題字幕等信息。在網頁實現中，有很多的瀏覽器廠商都有自己的標準，所以html5規范也沒有強制指定編解碼器了。所以在網頁上嵌入視頻和音頻時，最好提供mp4格式和webM格式的視頻。否則有可能由于瀏覽器不兼容的問題導致視頻不能播放。

video標簽: 視頻標簽屬性：
src:視頻資源的url
width：視頻寬度
height:視頻高度
<video src="test.mp4" width="320" height="400"></video>
controls:設置后顯示播放控件（未設置這個屬性時，視頻就像一張圖片，設置controls之后才能顯示視頻播放控件）
<video src="test.mp4" width="320" height="400" controls></video>
autoplay:表示立即播放視頻
loop:反復播放視頻（也就是說在播放結束之后會重新播放視頻）
muted:設置之后，視頻會處于靜音狀態
poster:指定視頻數據載入時顯示的圖片。（相當于視頻的一個封面）

<video src="test.mp4" width="320" height="400" controls

poster="img_5.jpg"></video>

preload:預加載。不設置會在第一次播放自動緩存。如果值為none會直到用戶點擊時再加載視頻。如果值為metadata表示播放之前只加載第一幀。auto是默認的，表示要求瀏覽器盡快的加載視頻。
兼容多個瀏覽器 source標簽

</video>

audio標簽：用于嵌套音頻內容。屬性與視頻元素類似。只是沒有寬高設置和圖片。
<audio src="test.mp3" controls></audio>

3.6表單標簽

表單標簽是用于獲取用戶的輸入數據的。

form標簽：表示定義html表單。用該標簽包含的標簽具有提交功能。也就是說，在瀏覽器的地址欄里面能獲取到用戶的信息。(如果不定義表單，那么它是無法提交數據的)

<form>

用戶名：<input name="user">

</form>

屬性

action:表示表單提交到的頁面(也就是要把數據傳入到哪個頁面中)
method:表示表單的提交方式。默認是get。而get和post請求的區別就是post后面不跟請求體。也就是用戶信息。相對來說更加的安全。（一般來說，get是用于超鏈接提交居多，post用作表單提交居多）
<form method="post" action="http://www.haosou.com"></from>
enctype:表示瀏覽器對發送給服務器的數據采用的編碼格式。有三種格式。默認是不能將文件上傳到服務器”application/x-www-form-urlencoded“、multipart/form-data用于將文件上傳到服務器、text/plain不建議使用
name:設置表單名稱，以便程序調用
target:提交的目標，與超鏈接無異
autocomplete:設置瀏覽器記錄用戶輸入的信息。分為on和off兩個值。默認為on。
novalidate：設置是否執行客戶端數據有效性檢查
input標簽：表示用來收集用戶輸入數據的控件。它默認會出現一個單行的文本框。
type:文本框的類型。值為text時表示單行文本框；值為password表示密碼框；值為search時，除了火狐瀏覽器的其他瀏覽器外，會顯示一個叉來取消搜索內容，值為number時，表示只限于數字輸入；值為range時，生成一個數值范圍文本框；當type為date系列時，可以獲取日期和時間的值，有六種形態date、month、time、week、datetime、datetime-local；當值為color代表可以獲取不同的顏色；當值為checkbox、radio時表示復選框和單選。單選的name值必須一樣。checked表示默認勾選狀態值為img是表示產生一張圖片按鈕，后面可以接src,alt,width等熟悉值為email,tel,url時表示輸入電子郵件、電話和網址格式值為hidden時，生成一個隱藏控件（看不見，但提交的時候會顯示，一般用于關聯主鍵id提交）值為file的時候，表示上傳文件。accept屬性表示限制文件<input type="text">

音樂<input type="checkbox" checked>

體育<input type="checkbox">

<input type="radio" name="sex" value="男" checked>男

<input type="radio" name="sex" value="女">女

maxlength:設置文本框最大字符長度
readonly:設置文本框為只讀狀態。可以提交但是不能修改文本框的值。
placeholder:占位符
size:設置文本框的寬度
required:表明用戶必須輸入一個值，否則無法通過輸入驗證
<input type="text" list="abc" required>
autofocus:讓光標聚焦在某個input元素上，方便用戶直接輸入。<input name="user" autofocus>
disabled:禁止input元素（連點擊都不能）
list：為文本框提供建議值

<form>

</form>

</datalist>

value:默認在輸入框內出現的值
form：與表單外的數據掛鉤一遍提交

用戶名：<input name="user">

</form>

年齡：<input name="age" form="register">

label標簽:把文字和input標簽包裹起來可以方便設置樣式，并且當用戶點擊文字的時候，光標會自動移入到對應的input框。（如果只是設置了文字用label包裹，又想點擊文字將標簽自動移入對應的框，可以將label的屬性for的值設置成與input的id設置成一樣）

fieldset標簽:對表單進行編組。三個屬性name、form、disabled
legend標簽：添加分組說明的標簽（也就是說給分組加上一個標題）

</fieldset>

button標簽:創建一個按鈕。type屬性有三個值，submit表示提交，reset表示重置，也就是把input的值變成初始值。button表示一個普通的按鈕。
select標簽：下拉列表。需要和option標簽配合使用。
name屬性：設定提交時的名稱
disabled屬性：將下拉列表禁用
form屬性：將表單外部與內部掛鉤
size屬性：下拉列表的個數
multiple屬性：設置是否可以多選
required:選擇驗證，必須選擇后才能通過

</select>

optgroup標簽:對列表進行分組選擇。

</optgroup>

<option value="4" selected>微微一笑很傾城</option>

</optgroup>

</select>

</form>

textarea標簽:生成一個可變大小的多行文本框

pattern：正則表達式。開頭和結尾用^和$ novalidate屬性表示不要驗證該表單

html對網頁頁面的布局或者是表單驗證等功能都相對簡陋，并且不同的瀏覽器支持的成熟度是不盡相同的。因此在大部分情況下，還是要借助js或jqury等前端庫，來呈現豐富多彩的驗證效果。

在線咨詢

上一篇：PHP基礎知識講座：第2課，如何在HTML頁面中嵌入PHP代碼
下一篇：學習HTML5的五個原因

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端開發規范（一、HTML篇）

本原則

結構、樣式、行為分離

縮進

文件編碼

一律使用小寫字母

省略外鏈資源 URL 協議部分

統一注釋

HTML篇

標簽

Class 與 ID

屬性順序

引號

嵌套

布爾值屬性

語義化

HEAD

語言屬性

字符編碼

IE 兼容模式

SEO 優化

viewport

為移動端設備優化，設置可見區域的寬度和初始縮放比例。

iOS 圖標

HEAD 模板

您的項目需求

前端開發規范（一、HTML篇）

結構、樣式、行為分離

為移動端設備優化，設置可見區域的寬度和初始縮放比例。