Web 前端課程 程 筆記

　簡介

　 - UI 設(shè)計

　色彩、設(shè)計

　布局、用戶體驗 - 頁面制作 - 功能添加

　動態(tài)效果

　業(yè)務(wù)邏輯和數(shù)據(jù)處理

　和服務(wù)器交互

　 ----------設(shè)計和前端------------ - 前端：用戶體驗度，上線速度；

　 - 服務(wù)端處理(Java、PHP、.NET) - 測試 - 推廣 （拉勾網(wǎng)）

　 ---------推廣（網(wǎng)絡(luò)營銷）--------

　 前端 web 界面設(shè)計與制作->實現(xiàn)產(chǎn)品界面與功能->優(yōu)化，兼容->與后端交互 (編寫->調(diào)試->實踐)

　課程設(shè)置

　第一階段：

　 - HTML5 基礎(chǔ)

　 - CSS3

　 - Web UI設(shè)計

　第二階段：

　 - JS

　 (javascript)

　 - DOM

　(文檔對象模型)

　 - Server

�。ǚ�務(wù)器）

　第三階段：

　 - HTML5 高級

　 - JQuery

　 - Ajax

�。ó惒� js和 xml->局部刷新）

　第四階段：

　 - Bootstrap

　 - Angular Js

　 - 階段項目

　目錄

　1 HTML5BASIC

　1.1 Unit01 1 ：

　Web b 基礎(chǔ)知 識

　、

　HTML L 快速入 門

　、

　文本

　 【W(wǎng)eb 基礎(chǔ)知識】

　web 又稱萬維網(wǎng)或環(huán)球網(wǎng)，即 Wide Web）,把信息和服務(wù)進(jìn)行無縫連接； - Web 與 Internet：Web 是運行在 Internet 的應(yīng)用；

　1.Internet：互聯(lián)網(wǎng)；信息共享；

　2.Internet 提供的主要服務(wù)：Telnet（遠(yuǎn)程登錄）、Email、(電子公告板：天涯論壇、百度貼吧)、FTP（上下傳協(xié)議、上傳、下載）；

　3.基本實現(xiàn)技術(shù)：

　 - 分組交換原理：信息在 Internet 上被分成許多小數(shù)據(jù)包（分組）進(jìn)行傳輸，到達(dá)目的后將數(shù)據(jù)包重組為信息；

　 - TCP/IP協(xié)議族：用于找到指定的服務(wù)器；

　4.web 簡介

　又稱萬維網(wǎng)或環(huán)球網(wǎng)，即 WWW

　把各種類型的信息與服務(wù)無縫連接，提供生動的圖形用戶界面（文檔）

　- 信息：文字、圖片、聲音、視頻等

　- 服務(wù)：News、、Mail等 - Web 的工作原理

　現(xiàn)在計算機(jī)應(yīng)用的程序結(jié)構(gòu)：

　1、c/s : Client / Server

　 客戶端/ 服務(wù)器 模型

　 通過指定的客戶端來訪問指定的服務(wù)器

　 代表：QQ，魔獸世界，酷狗音樂盒...

　2、B/S :Browser / Server

　瀏覽器 / 服務(wù)器 模型

　 可以通過瀏覽器來訪問指定服務(wù)器上的信息；

　B/S多于 C/S;

　 請求（request）

　瀏覽器---------HTTP 協(xié)議-------->服務(wù)器

　瀏覽器 <-------HTTP 協(xié)議------------服務(wù)器

　響應(yīng)（response）

　 3、PC：Personal Computer:個人計算機(jī)；

　4、通信協(xié)議采用的是 HTTP協(xié)議：Hypertext Transfer Protocol

　 FTP協(xié)議：

　只上傳或下載文件，不作文本傳輸；

　 HTTP協(xié)議：超級文本傳輸協(xié)議；

　 - 規(guī)定了如何傳遞數(shù)據(jù)

　 -

　以及傳遞的數(shù)據(jù)格式是什么

　 DNS:域名解析器；將域名解析為 IP地址

　5.web 主要以網(wǎng)頁的形式來發(fā)布多媒體信息；

　- 超文本標(biāo)記語言 HTML Hyper Text Markkup Language

　6.瀏覽器連接到 Web 服務(wù)器并獲取頁面； - Web 服務(wù)器

　1.主要功能：

　- 存儲 web上的信息，提供管理環(huán)境

　- 響應(yīng)瀏覽器請求，執(zhí)行服務(wù)器端程序

　 - 安全功能

　2.主要服務(wù)器產(chǎn)品：TOMCAT IIS APACHE...

　 - Web 瀏覽器

　1.主要功能

　- 提交請求

　- 作為 HTML 解釋器和內(nèi)嵌腳本程序執(zhí)行器

　- 用圖形化得方式顯示 HTML 文檔；

　2.主要 Web瀏覽器

　IE Firefox Chrome Opera Safari - Web 的相關(guān)技術(shù)

　client----Server-------DB（數(shù)據(jù)庫 ）

　1.服務(wù)器端技術(shù)<----->數(shù)據(jù)庫（DB）

　- PHP

　- JSP

　 - ASP

　- aspx

　請求 Request 與響應(yīng)（response）

　2.客戶端技術(shù)

　- 表現(xiàn)：HTML CSS

　 - 交互：JS

　【HTML 快速入門】

　1.HTML 概述：

　- web 是一個超文本文件的集合；

　- 超文本：超文本文件是 WEB 的基本組成單元，也稱為網(wǎng)頁或 HTML 文檔、web頁等，通常以.html 或.htm、.shtml 為后綴的文件；web 頁通過超鏈接組織在一起；

　- web 頁之間通過超文本中的超級鏈接組織在一起；

　HTML HyperText Markup Language

　超文本標(biāo)記語言

　- 使用帶尖括號的“標(biāo)記”將網(wǎng)頁的內(nèi)容逐一標(biāo)識出來；

　-由瀏覽器解釋執(zhí)行； 2.HTML 基本語法

　- 標(biāo)記導(dǎo)致不同的顯示效果；

　- 標(biāo)記必須使用尖括號括起來；

　1、HTML：超文本標(biāo)記語言

　2、HTML 文檔格式

　- 標(biāo)記有封閉類型（成對），也有非封閉類型；

　封閉：成對出現(xiàn)。有開始，有結(jié)束（雙標(biāo)簽）

　<a> :開始

　</a>：結(jié)束

　非封閉：只有開始沒有結(jié)束；（單標(biāo)簽）

　<br>

　:即表示開始，又可以表示結(jié)束；HTML5中可以這么寫。

　<br />:

　<p></p>:雙標(biāo)簽中,可以將一些文本寫在標(biāo)簽內(nèi)，這些文本收當(dāng)前標(biāo)簽樣式控制； **********注意：封閉標(biāo)簽。必須成對出現(xiàn)； 3.元素

　1.即標(biāo)記；

　- 元素可以包含文本內(nèi)容和其他元素，也可以是空的；

　元素嵌套：

　- 嵌套順序：用縮進(jìn)的方式進(jìn)行體現(xiàn)；

　<P>

　<a></a>

　 </p>

　2.屬性和值：

　屬性：用來修飾元素；

　- 屬性的聲明必須位于開始標(biāo)簽里；

　<標(biāo)記名稱 屬性名="屬性值" 屬性名="屬性值"></標(biāo)記名稱>

　- 一個標(biāo)簽內(nèi)、屬性可以有多個、不分先后順序、多個屬性間用空格區(qū)分；

　<p align="center">ppp</p>

　align 功能：控制文本在標(biāo)簽內(nèi)的水平對齊方式 left / center / right; **********標(biāo)準(zhǔn)屬性（公共屬性、通用屬性）：大部分標(biāo)簽所具備的屬性；

　- id

　: 定義所在標(biāo)簽唯一標(biāo)識名稱；

　- title ：鼠標(biāo)移到當(dāng)前標(biāo)簽所在區(qū)域時所顯示的文本；

　- class ：引用樣式表中的指定“類”樣式；

　- style ：定義當(dāng)前標(biāo)簽的行內(nèi)樣式；

　3.注釋：不會被瀏覽器或服務(wù)器所翻譯的內(nèi)容；

　- 解釋說明；

　<!--------html 注釋-------->

　/*********css注釋*********/

　- 注釋是不能嵌套；

　<!--

　 <!----錯誤----->

　-->

　- 注釋不能寫在標(biāo)簽聲明里；

　<a <!-----錯誤----->></a> 4.HTML 與 XHTML

　1999 年 12月 24 日，W3C 推薦標(biāo)準(zhǔn) HTML4.01；

　 XHTML1.0 于 2000 年的 1 月 26 日成為 W3C 標(biāo)準(zhǔn)

　- 與 HTML 幾乎相同；

　- 更嚴(yán)格、更純凈的 HTML 版本；

　<p>This is a<br>paragraph

　XHTML 元素必須被關(guān)閉，空標(biāo)記也要關(guān)閉；

　<p>This is a<br />paragraph</p>

　 HTML5:

　更為簡潔的 HTML 代碼；

　<p align="center">This is a<br />paragraph</p>

　html5:

　<p align=center>This is a<br>paragraph</p>

　********* 屬性值加的引號""和結(jié)束標(biāo)簽的"/" 最好加上； 5.文檔結(jié)構(gòu)

　1.文檔類型聲明：

　- 放在 DOCTYPE 標(biāo)簽里；

　- Strict DTD 嚴(yán)格類型；

　- Transitional DTD 過度類型；html4.01與 xhtml1.0 之間過度；

　- Frameset DTD 框架類型，（很少用）

　-HTML5 的文檔類型聲明：

　 <!DOCTYPE html>

　 charset：字符集

　 ISO-8859-1：支持英文編碼解析

　 utf-8:支持中文，支持英文

　 <meta charset="utf-8">

　2.html 頁面：

　 - <html></html>:整個網(wǎng)頁里有且只有這一對根元素； ******* - 按照嚴(yán)格版本，版本是“xhtml1.0”且是嚴(yán)格模式（Strict DTD）時，html 標(biāo)簽必須包括“命名空間標(biāo)識符”

　<html xmlns=""></html>

　-兩個子元素：

　<html>

　<head></head>

　<body></body>

　</html>

　1. 2 Unit02 2 ：

　圖像和鏈 接

　、

　表 格

　、

　結(jié)構(gòu)標(biāo)記

　 1.瀏覽器：解析 HTML 代碼以及 JS語言； 2.<head>元素：主要包含網(wǎng)頁的說明信息；

　1.網(wǎng)頁標(biāo)題

　2.網(wǎng)頁的編碼格式；

　3.聲明內(nèi)部樣式表；

　4.引入外部樣式表；

　5.聲明 JS腳本；

　6.引入外部腳本；

　7.聲明其它元素：關(guān)鍵字，描述等。

　- 標(biāo)題：<title></title>:標(biāo)簽頁，沒有任何屬性，只能出現(xiàn)在 head 里； 3.網(wǎng)頁編碼格式：

　1.默認(rèn)編碼：ISO-8859-1 -> 不支持中文；

　- 改編碼，通過 meta 標(biāo)簽

　<meta http-equiv="content-type" content="text/html; charset=utf-8" />

　 描述 描述內(nèi)容類型

　<meta charset="utf-8" />

　字符集

　utf-8

　2.添加的描述和關(guān)鍵字；

　meta：一般作說明信息的聲明；

　 - 常用屬性：

　 http-equiv 修改編碼

　charset

　修改編碼

　content

　name ******** - 添加"關(guān)鍵字"：

　 <meta name="keywords" content="html,css,js,web 前端" />

　面向搜索引擎；

　 - 添加"描述"：

　 <meta name="description" content="描述內(nèi)容" />

　搜索出來對標(biāo)題的解釋； 4. 特殊字符：

　通過轉(zhuǎn)義字符來標(biāo)識特殊符號；如空格、<、>;

　轉(zhuǎn)移字符：改變單詞原有的意思，被解釋成一種全新的意義；

　- & 與

　- &nbsp;空格

　- &lt; less than <

　- &gt; greater than >

　- 企業(yè)標(biāo)識：&copy; company

　- &yen;人民幣 5.文本樣式：

　 <b></b>

　 加粗

　<i></i>

　 傾斜

　<u></u>

　 下劃線

　<s></s>

　 刪除線

　 上標(biāo)

　 下標(biāo) 6.標(biāo)題元素：

　<h1></h1>

　<h6></h6> 一級標(biāo)題到六級標(biāo)題； 7、分區(qū)元素

　1.塊級元素：多數(shù)用于布局；

　 自己獨自占一行的元素都稱為塊級元素，

　 div

　 ,p

　 ,hn(h1-h6)、

　 hr、

　 ol

　 、ul

　 、li

　 2.行內(nèi)元素：

　包圍文本，方便為文本添加效果；

　 與其他的行內(nèi)元素可以在一行內(nèi)顯示，

　 span,

　 b,

　 u,

　 i

　 s

　 ********行內(nèi)元素寬和高是由內(nèi)容決定的，不受 width 和 height 控制； 8.水平線 ：<hr> horizontal

　常用屬性：

　- size:水平線的粗細(xì)

　- width:水平線的長度；數(shù)值/百分比；

　- align：水平對齊方式

　- color:顏色； 9.預(yù)格式化標(biāo)簽

　<pre></pre>:保留源文檔中的格式，保留原來的空格和換行； 【圖像和鏈接】

　目錄結(jié)構(gòu)：

　* 目錄就是 web 站點中文件夾的名稱；

　- 包含多個子目錄

　-

　 1.URL(統(tǒng)一資源定位符)：要需找的資源的地址；路徑 ；

　- 文件，圖片、音視頻、其他頁面。

　 相對路徑：相對于當(dāng)前頁面而言；

　平級用名字，子級進(jìn)目錄，父級向上返；

　Koala.jpg

　img/Koala.jpg

　../Koala.jpg

　根相對路徑：

　服務(wù)器上：以/開始

　 /images/user.jpg

　 絕對路徑：又叫全路徑，就是資源文件在計算機(jī)中的位置/文件從最高級目錄下開

　始的完整的路徑；無論當(dāng)前資源路徑是什么，使用絕對路徑總能找到需要的資源；

　 D:/向成云/Day02/img/Koala.jpg

　 組成：

　 1.協(xié)議：http://

　2.主機(jī)名/域名；

　 3.目錄路徑； img

　 4.請求的資源名；logo.png

　 2.圖像<img />；

　圖像格式：

　- JPEG

　- GIF

　- PNG

　 src 屬性：指定顯示的圖像的路徑

　width 屬性：圖像的寬

　height 屬性：圖像的高

　title 屬性：鼠標(biāo)移到圖片上顯示的文字

　alt

　3.鏈接；

　<a href="">點擊文本</a>

　<a href="test2.html">點擊文本</a>

　<a href="c/test2.html">點擊文本</a>

　目標(biāo)：target="_self"

　 在本頁打開

　 target="_blank"

　在新頁面打開

　a 標(biāo)簽也有 title 屬性； ********** name 屬性：定義錨點名稱；例子：“回到頂部”

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

　鏈接接的各種表現(xiàn)形式：

　 1.下載資源：

　<a href="test2.zip/rar">點擊文本</a>

　 2.網(wǎng)頁跳轉(zhuǎn)：

　 <a href="c/test2.html">點擊文本</a>

　 3.電子郵件鏈接：

　<a href="mailto:">聯(lián)系我們</a>

　 4.返回頁面的空鏈接；

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

　 5.鏈接到 javascript;

　6.<a href="2015-9-01 課堂筆記.txt">打印出 txt 文檔</a> 【錨點】

　通過 a 定義錨點：

　HTML 中的錨點相當(dāng)于 HTML 文檔中某個位置的記號；

　1.定義錨點；

　<a name="anchorName"></a>

　2.跳轉(zhuǎn)到錨點；

　<a href="#anchorName">跳轉(zhuǎn)到錨點</a>

　錨點也可以指向 id；

　 跳轉(zhuǎn)其它頁面錨點處：

　<a href="頁面 URL#anchorName">跳轉(zhuǎn)到錨點</a> 【table】

　 屬性：

　width

　height

　border

　bordercolor="color" ->邊框顏色

　align="center"

　->表格相對父元素的對齊方式

　cellspacing="10px"

　->單元格間距

　cellpadding="20px"

　->單元格與內(nèi)容的邊距 padding

　bgcolor="#ccc"

　->背景顏色 ************* background="images/Lighthouse.jpg"->背景圖片

　tr屬性：

　height:

　align:

　 ->控制單元格里面的內(nèi)容水平對齊方式

　valign：top、middle、bottom ->垂直對齊方式

　td 屬性

　width

　height

　bgcolor="#ccc"

　->背景顏色

　background="images/Lighthouse.jpg"->背景圖片

　align:

　 ->控制單元格里面的內(nèi)容水平對齊方式/

　valign：top、middle、bottom ->垂直對齊方式

　 colspan

　 ->跨列 向右合并；

　rowspan

　 ->跨行 向下合并；

　表格標(biāo)題：

　 caption

　列標(biāo)題：

　 th：與 td 平級；

　行分組：

　 表頭行分組：

　thead

　 表主題行分組：tbody

　 表尾行分組：

　tfoot

　********如果 tr和 td 都設(shè)置了 width和 height：值大的有效； table 布局的缺點：網(wǎng)頁中要把所有的圖像等都下載完才顯示；

　【HTML5 結(jié)構(gòu)標(biāo)記】

　<header></header>

　頁頭

　<nav></nav>

　導(dǎo)航

　<section></section>主體內(nèi)容

　<article></article>引用的文章、帖子、博客.....

　<aside></aside>

　側(cè)導(dǎo)航、邊欄等

　<footer></footer>

　頁尾

　【列表】

　顯示多條相關(guān)信息的組件；

　1.有序列表；

　 ----type="i/a":序列類型

　 start="3" ：從 3 開始；

　<ol type="i" start="3">

　order list

　<li></li>

　列表項 list item

　 </ol>

　 2.無序列表；

　 -----type="square/circle/disk" 方塊/空心圓/實心圓

　 <ul type="square">

　<li></li>

　 </ul>

　 ol 和 ul 中間只能嵌套 li，li 里可以嵌套任何 html 標(biāo)簽；

　 3.定義列表：

　 <dl>

　<dt></dt> --標(biāo)題 / 圖

　<dd></dd> --文字描述

　 </dl>

　 圖文混排

　 1.3 Unit03 3 ：

　列 表

　、

　表 單

　、

　其他常用標(biāo)記

　【表單】

　1.表單標(biāo)簽：<form></form>

　作用：用于定義表單中的基本信息，如提交地址，提交方式等。

　*************** 如果表單元素沒有出現(xiàn)在 from里，是不能提交到服務(wù)器。

　屬性：

　 - action 提交地址 服務(wù)器處理數(shù)據(jù)的程序地址，由服務(wù)器端開發(fā)人員提供。默認(rèn)提交到本頁。

　 - method 表單以什么方式將數(shù)據(jù)提交給服務(wù)器（明文還是密文）

　默認(rèn)值是get；

　常用值：

　 1.post

　 - 密文

　 - 有密碼選 post 提交

　 - 不限傳遞數(shù)據(jù)長度

　 2.get

　- 明文

　 - 有傳遞數(shù)據(jù)長度限制

　IE：2KB；

　 - name

　定義表單名稱；方便使用 js來獲取表單；

　 - enctype 表單數(shù)據(jù)的編碼方式；

　不同的數(shù)據(jù)使用不同的方式，主要體現(xiàn)在“普通文本”傳輸和“文件”傳輸上；

　取值：

　-- application/x- 普通文本

　默認(rèn)按文本方式將數(shù)據(jù)傳遞；

　-- multipart/form-data 上傳文件時的編碼值

　-- text/plain 也是普通文本編碼方式 但有時候不符合規(guī)定不能傳；

　2.表單元素（控件）：用于接受用戶數(shù)據(jù)；

　- input：

　 屬性：

　 -- type：

　 用于區(qū)分不同的 input 元素的樣式和功能；

　 1.text

　->txt 文本框 沒有安全性；

　 2.password

　->txt 密碼框 密文/密碼錄入；

　 ---文本框和密碼框其他的屬性:

　maxlength:

　 readonly:

　***************** 3.checkbox

　->復(fù)選框

　 注意：作為一組復(fù)選框，name 屬性值必須一致；

　4.radio

　 ->rdo 單選按鈕

　-- name 分組

　注意：如果一組單選按鈕中只有一個能被選上，他們的 name 屬性必須一樣；

　 Gender

　性別

　 Male

　 FeMale

　-- checked

　5.submit

　-> 用于提交表單到服務(wù)器；

　reset

　 -> 將所有表單元素恢復(fù)到默認(rèn)值；

　button

　-> 執(zhí)行自定義的腳本內(nèi)容；

　6.隱藏域

　-> 在頁面看不見的地方保存一段信息；如用戶注冊的id 號；

　hidden

　-> 一般情況下，會將安全系數(shù)較高的并且不想讓用戶看見的數(shù)據(jù)保存在隱藏域中；

　文件框

　-> 能實現(xiàn)文件選擇的功能；

　 ->上傳文件；

　******************* file

　注意：上傳文件必須把 form的屬性 enctype改成：multipart/form-data；

　 -- name：

　 當(dāng)前表單元素的名稱，用于提交給服務(wù)器使用；

　-- valve：

　默認(rèn)值；

　 -- disabled 禁用控件

　- textarea 多行文本域

　<textarea></textarea> 使用場合：注冊信息時的詳細(xì)條款等。

　 屬性：

　 cols：指定文本區(qū)域的列數(shù) 一行顯示多少個字；

　 rows：指定文本區(qū)域的行數(shù) 顯示多少行；

　超出顯示滾動條；

　- select 與 option : 從下拉框選擇內(nèi)容；

　<select>

　<option>1</option>

　<option>2</option>

　<option>3</option>

　</select>

　分類：

　 1.下拉列表

　 2.滾動列表

　select 屬性 sel

　name：

　size：顯示被選信息數(shù)量 大于等于 3 條就顯示滾動條；

　multiple:是否多選；

　option 屬性

　 value：

　 選項值

　selected：預(yù)選中

　- 其他元素

　 1.label: 與表單元素相關(guān)聯(lián)；點擊該 lable 時如同點擊關(guān)聯(lián)的表單元素；

　 <label>文本</label>

　 屬性：

　 for：關(guān)聯(lián)表單元素的 id；

　 2.為空間分組：

　 fieldset：為控件分組；

　 legend

�。悍纸M的標(biāo)題；

　【其他常用標(biāo)記】

　1.浮動框架：在一個頁面中顯示多個 html 文檔內(nèi)容，也就是將其他的頁面嵌入到當(dāng)前頁面中；

　<iframe></iframe>

　屬性：

　src :浮動框架中的網(wǎng)頁 url；一個頁面可以出現(xiàn)多個 iframe

　height：

　width：

　 frameborder:邊框

　2.摘要與細(xì)節(jié)：

　作用：將網(wǎng)頁一部分信息通過類似于下拉列表的方式進(jìn)行顯示與隱藏；

　 <details></details> 用于定義細(xì)節(jié)

　<summary></summary> 顯示當(dāng)前 details的標(biāo)題

　注意：summary必須要出現(xiàn)在 details的第一個子元素的位置；

　3.度量元素：

　<meter></meter>

　多數(shù)進(jìn)度的顯示、比例的顯示。

　屬性：

　min：范圍的最小值；默認(rèn)為 0；

　max：范圍的最大值；默認(rèn)為 1；

　value：度量值；默認(rèn)為 0；

　4.時間元素：

　<time>顯示內(nèi)容</time> 定義公歷時間 24 小時制；或日期；

　屬性：

　datetime：規(guī)定日期和時間；日期與時間通過“T”來表示分割；

　5.高亮顯示文本元素：

　<mark>文本</mark>

　突出顯示文本； 2 CSS3BASIC

　2.1 Unit01 1 ：

　CSS

　概 述

　、

　CSS

　語 法

　、

　尺寸與邊框

　【css : Cascading Style sheet】

　層疊樣式表

　級聯(lián)樣式表 1、作用：

　已統(tǒng)一的方式為頁面定義外觀；

相關(guān)熱詞搜索：學(xué)習(xí)筆記 整理