摘要：前端是一個全球性的計算機互聯(lián)網(wǎng)絡(luò)，中文名稱因特網(wǎng)國際互聯(lián)網(wǎng)網(wǎng)際網(wǎng)等等提供的服務(wù)等等基本實現(xiàn)技術(shù)分組交換原理信息在上被分成許多的小數(shù)據(jù)包分組進(jìn)行傳輸，到達(dá)目的地后將數(shù)據(jù)包組裝成信息協(xié)議簇和的關(guān)系是運行在上最流行的應(yīng)用之一，為提供了網(wǎng)絡(luò)環(huán)境

web前端

Internet：是一個全球性的計算機互聯(lián)網(wǎng)絡(luò)，中文名稱“因特網(wǎng)”、“國際互聯(lián)網(wǎng)”、“網(wǎng)際網(wǎng)”等等；

Internet提供的服務(wù)：http、ftp、Telnet、email、www、bbs等等；

基本實現(xiàn)技術(shù)：分組交換原理--信息在Internet上被分成許多的小數(shù)據(jù)包（分組）進(jìn)行傳輸，到達(dá)目的地后將數(shù)據(jù)包組裝成信息；
TCP/IP協(xié)議簇

Web和Internet的關(guān)系：web是運行在Internet上最流行的應(yīng)用之一，Internet為web提供了網(wǎng)絡(luò)環(huán)境；
因為web的出現(xiàn)，從而極大地推動了Internet的普及與推廣；

web的優(yōu)勢：傳輸快、成本低、用戶多、方便易用、形式多樣、便于反饋......
web的劣勢：虛假信息、病毒、網(wǎng)癮、數(shù)據(jù)丟失......

web：稱為萬維網(wǎng)或環(huán)球網(wǎng)，www（world wide web），上世紀(jì)90年代由歐洲核子研究中心的Bener.Lee，1992年正式上網(wǎng)；
把各類信息和服務(wù)無縫連接，提供生動的圖形用戶界面；
信息--文字、圖片、視頻、音頻...
服務(wù)--Telnet、email、ftp......
萬維網(wǎng)就是無數(shù)文檔的集合，駐留在因特網(wǎng)的某個地方

web的工作原理：
基于瀏覽器/服務(wù)器；由web服務(wù)器、瀏覽器和通信協(xié)議三部分組成；
通信協(xié)議采用的是http協(xié)議：超文本傳輸協(xié)議（hypertext transfer protocol）
通過瀏覽器發(fā)送請求到服務(wù)器，服務(wù)器響應(yīng)請求將數(shù)據(jù)發(fā)送到請求的瀏覽器，中間的過程是通過http協(xié)議執(zhí)行；

開發(fā)人員共具：
F12；右鍵--審查元素（檢查）

在web主要以網(wǎng)頁的形式來發(fā)布多媒體信息；
網(wǎng)頁采用超文本標(biāo)記語言HTML（hypertext markup language）編寫；
編輯--記事本、word、editplus、hbuilder、dw、sublime text、webstrom......

web服務(wù)器：
存儲web頁面上的信息，并提供管理環(huán)境；響應(yīng)瀏覽器的請求，執(zhí)行服務(wù)器端的程序；

主要的web服務(wù)器產(chǎn)品：
Tomcat、Apache、IIS

web瀏覽器：
提交請求；解析HTML和內(nèi)嵌腳本（js）；用圖形化的方式顯示HTML文檔；

主流的瀏覽器：
IE、firefox、chrome、opera、safari

服務(wù)器端技術(shù)：php、jsp、asp（asp.net）

前端技術(shù)（客戶端技術(shù)）：
HTML、CSS、JS(JavaScript)；

web是一個超文本文件的集合；超文本文件即是網(wǎng)頁/HTML文檔；通常是以.html或.htm為后綴的文檔

什么是HTML：
超文本標(biāo)記語言，一種純文本類型的語言；使用帶“尖括號”的“標(biāo)記”將網(wǎng)頁中的內(nèi)容標(biāo)識出來；

標(biāo)記語法：
HTML用于描述功能的符號稱為“標(biāo)記”；
標(biāo)記在使用時必須用“尖括號”括起來；

封閉標(biāo)記：
封閉標(biāo)記又叫雙標(biāo)記，必須成對出現(xiàn)；<標(biāo)記>內(nèi)容；

非封閉標(biāo)記：
又叫空標(biāo)記或者單標(biāo)記；<標(biāo)記 /> 或者 <標(biāo)記>

Xhtml于2000年1月成為W3C標(biāo)準(zhǔn)；Xhtml是更嚴(yán)格更純凈的HTML版本；

HTML文檔結(jié)構(gòu)：
1、聲明--文檔類型聲明；聲明必須寫在文檔的最開始部分；
2、頁面/文檔--
3、頁面頭部--主要裝載頁面的信息；
4、頁面主體--

文檔標(biāo)題：給頁面起一個名字；

每一個標(biāo)簽都有屬性，屬性可以是一個或者多個，多個屬性之間用空格隔開；
屬性的組成：屬性名=“屬性值”；
屬性必須寫在開始標(biāo)記內(nèi)部；

HTML注釋：只有程序員自己看得見，而不會再網(wǎng)頁中顯示的內(nèi)容；

注釋內(nèi)容中一定不要存在--

再HTML頁面中無論敲多少空格，都只會顯示一個空格；
要想有多個空格，必須使用轉(zhuǎn)義字符；
轉(zhuǎn)義字符：
空格-- 
左尖括號<--<
右尖括號>-->
版權(quán)?--©
注冊商標(biāo)--®

換行標(biāo)記：

強制不換行標(biāo)記：不換行內(nèi)容

標(biāo)題標(biāo)記： n=1,2,3,4,5,6

段落標(biāo)記：

文本樣式標(biāo)簽：
文本加粗；
文本傾斜；
添加下劃線；
添加刪除線；
以上標(biāo)簽全部不推薦使用，已經(jīng)被廢棄；
強調(diào)文本，表現(xiàn)為文本加粗；
強調(diào)文本，表現(xiàn)為文本傾斜；
上標(biāo)標(biāo)記；
下標(biāo)標(biāo)記；

標(biāo)簽分類：
塊級標(biāo)簽：默認(rèn)情況下，塊級標(biāo)簽回獨占一行，元素的前后內(nèi)容都會自動換行；
、

行內(nèi)標(biāo)簽：不會換行，可以和其他行內(nèi)元素位于同一行；
b、i、u、s、strong、em、sup、sub

分區(qū)標(biāo)簽：

預(yù)格式化標(biāo)簽：

寫在該標(biāo)簽內(nèi)的內(nèi)容會按照編寫時的格式展示在網(wǎng)頁中；

頁面屬性：
背景顏色--bgcolor;
頁面文本顏色--text;

字體標(biāo)簽：

字體顏色--color；
字體--face；
字體大小--size；最小1，最大7；
該標(biāo)簽已被廢棄；

目錄結(jié)構(gòu)：
一個項目（web站點）下的所有文件所在的位置；一個web站點包含多個目錄，每個目錄包含站點的不同部分；web站點的主目錄稱為根目錄；位于根目錄下的其他文件夾稱為子目錄；每個子目錄都會包含具體功能的下一級子目錄；

所有的文件命名必須是英文、數(shù)字、下劃線（_）和連接線(-)組成；

URL：
uniform resource location 統(tǒng)一資源定位器；
用來標(biāo)識網(wǎng)絡(luò)中的任何資源
即路徑，指從當(dāng)前位置到目標(biāo)位置所經(jīng)過的路線；

URL分類：
1、絕對路徑：192.168.101.111
http:// www.baidu.com /images /img01.jpg
協(xié)議名 主機名 目錄路徑 文件名
用于指向其他設(shè)備上的文件；
2、相對路徑:
指目標(biāo)文件的位置是相對于當(dāng)前文件的位置；
目標(biāo)文件和當(dāng)前文件在同一個目錄下，直接寫文件名--img01.jpg
目標(biāo)文件所在的文件夾和當(dāng)前文件在同一個目錄下--文件夾名/文件名 images/img01.jpg
目標(biāo)文件和當(dāng)前文件不在同一目錄下，用../表示返回上一級目錄，一個../表示返回一級
../images/img01.jpg
../../images/img01.jpg
3、根相對路徑：
用于服務(wù)器

水平居中標(biāo)簽：

該標(biāo)簽已被廢棄；

標(biāo)簽的對齊屬性：
align="left"
align="right"
align="center"

水平分割線標(biāo)簽：

---

寬度--width，最好帶上單位px
高度--size，不用帶單位
對齊--align
顏色--color

圖像標(biāo)簽：
鏈接圖像地址--src="路徑"；
寬度--width，只給寬度表示定寬，高度自動等比變化；
高度--height，只給高度表示定高，寬度自動等比變化；
title--鼠標(biāo)移入后的提示文字，用于描述圖片；
alt--當(dāng)圖片無法正常顯示時所用的替代文字；

超鏈接標(biāo)簽：
鏈接屬性--href="路徑"
空鏈接：1、href="#",會有返回頂部的效果；
2、href="javascript:;"
圖片：href="圖片路徑"，可以將鏈接指向一張圖片；
壓縮包：href="XXX.rar",指向一個壓縮包，點擊之后會下載；
發(fā)郵件：href="mailto:郵箱地址"，可以給該郵箱發(fā)送郵件；
target--鏈接打開的目標(biāo)位置；
target="_blank",在新窗口打開鏈接；
target="_self",在當(dāng)前頁面打開鏈接；
錨點名稱--name，標(biāo)記，可以將鏈接指向該標(biāo)記，以達(dá)到跳轉(zhuǎn)到頁面指定位置的效果；

表格標(biāo)簽：

表格--背景色：bgcolor
邊框：border
寬度：width
高度：height
邊框色：bordercolor
邊框深色：bordercolordark（廢棄）
邊框淺色：bordercolorlight（廢棄）
單元格間距：cellspacing，不用帶單位
內(nèi)邊距：cellpadding，要帶單位
對齊：align
單元行--高度：height，百分比
水平對齊：align；left、center、right
垂直對齊：valign；top、middle、bottom
單元格--寬度：width，百分比
水平對齊：align；left、center、right
垂直對齊：valign；top、middle、bottom
跨行：rowspan
跨列：colspan

表格分區(qū)：
:劃分出表格的頭部
:劃分出表格的主體
:劃分出表格的底部

表格標(biāo)題：
為表格定義一個標(biāo)題，默認(rèn)在表格外的最上方水平居中顯示；
caption必須位于table的正下方，緊挨著table；

表頭：
不能包含td，表頭只能包含在tr中，默認(rèn)表頭內(nèi)的文字居中顯示并加粗；

表單：
用于顯示、收集信息，并提交信息到服務(wù)器；
組成部分：
1、實現(xiàn)數(shù)據(jù)交互的可見的用戶界面，比如：文本框、提交等；
2、提交后的表單處理；
使用

標(biāo)記創(chuàng)建表單；在該標(biāo)記中添加其他表單可以包含的控件；

：用于收集用戶信息；
類型--type：text文本類型；
password密碼類型
radio單選類型
checkbox多選類型
submit提交按鈕
reset重置按鈕
button普通按鈕
輸入框（文本類型和密碼類型）--name設(shè)置輸入框提交后對應(yīng)的信息的名稱
value一般是用于設(shè)置提示信息，也可以用于填寫的信息的收集
maxlength限制輸入的最大字符長度
readonly設(shè)置為“只讀”
required設(shè)置為“必填”
disabled設(shè)置為“禁用”

單選和多選--name設(shè)置選項組的名稱，單選的name必須一樣，多選的name可以不同（最好相同）
value確認(rèn)和收集選項信息，提交到服務(wù)器
checked設(shè)置默認(rèn)選擇項

按鈕--value設(shè)置按鈕的文本
name設(shè)置按鈕名稱

:將文本于控件聯(lián)系在一起，點擊文本就可以觸發(fā)控件；
for=“控件的id”就可以和控件綁定；

選項框：
name--設(shè)置選項框的名稱
size--設(shè)置顯示的選項數(shù)目，大于1則變?yōu)闈L動列表
multiple--設(shè)置多選，按住Ctrl多選
選項：
value--確認(rèn)和收集選項的信息，提交到服務(wù)器
selected--設(shè)置默認(rèn)選項

多行文本框：
name--設(shè)置名稱
cols--設(shè)置內(nèi)容的列數(shù)，相當(dāng)于設(shè)置了寬度
rows--設(shè)置內(nèi)容的行數(shù)，相當(dāng)于設(shè)置了高度
readonly--只讀
required--必填
disabled--禁用

input其他類型：email--郵箱類型，輸入錯誤的郵箱地址，提交時會報錯，只會檢測有沒有“@”；

form表單屬性：
enctype：指定表單的數(shù)據(jù)類型（數(shù)據(jù)進(jìn)行編碼的方式）
method：指定表單數(shù)據(jù)提交的方式；
get--將數(shù)據(jù)附加在地址中提交；最大缺點是缺乏安全性、上傳的信息不完全；優(yōu)點是數(shù)據(jù)的傳輸速度快；
post--將數(shù)據(jù)打包提交到服務(wù)器；安全性非常好、數(shù)據(jù)傳輸完整；傳輸速度相對較慢；
action：定義表單提交時發(fā)生的動作，包含服務(wù)器腳本的URL（jsp、php...）

控件分組：

為控件分組

為分組指定標(biāo)題

有序列表：

列表項：

代碼：

屬性--type：1，數(shù)字類型；
a，小寫字母類型；
A，大寫字母類型；
i，小寫羅馬數(shù)字類型；
I，大寫羅馬數(shù)字類型；
start：設(shè)置序列號的起始；

無序列表：

列表項：

屬性--type：disc實心圓（默認(rèn)）；
circle空心圓（圓圈）；
square實心舉行；

定義列表：

用于給出一類實物的定義，如：名詞解釋、解釋說明、字典等等

指定一個名詞或術(shù)語

對dt當(dāng)中的內(nèi)容進(jìn)行解釋說明
dt下面的dd是對該dt的解釋說明，一個dt下面可以有多個dd；一個dl中可以有多個dt；

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

用于定義頁面頭部或者某一個區(qū)域的頭部
用于定義頁面的導(dǎo)航信息

定義某一個區(qū)域的主體

用于定義某一篇文章、博客、論壇帖子等等

定義頁面的底部或者某一個區(qū)域的底部
定義頁面的額外信息，比如：側(cè)邊欄、廣告欄等等

摘要與細(xì)節(jié)

用于定義細(xì)節(jié)

用于定義細(xì)節(jié)的標(biāo)題

度量標(biāo)記：

value設(shè)置電量的值
min設(shè)置最小取值范圍
max設(shè)置最大取值范圍

文本高亮顯示標(biāo)記：

?