web前端技術(shù)

web前端技術(shù)不是指的某一項(xiàng)技術(shù)，他是由w3c組織指定一系列技術(shù)的集合，主要包括：
1、結(jié)構(gòu)標(biāo)準(zhǔn)：html----頁面結(jié)構(gòu)的搭建：（布局和排版）
2、樣式標(biāo)準(zhǔn)：css-----頁面的樣式和外觀
3、行為標(biāo)準(zhǔn)：js------頁面的行為和特效

html發(fā)展歷史

標(biāo)簽書寫規(guī)則
1、標(biāo)簽名稱必須放到一對(duì)尖括號(hào)里面
2、成對(duì)出現(xiàn)
3、區(qū)分首尾：首標(biāo)記和尾標(biāo)記

html1.0-------------93起草了一個(gè)草案，純文本的格式
html2.0------------
html3.0------------過渡版本
html4.0------------xhtml1.0------規(guī)避之前版本的缺點(diǎn)：語法松散，不規(guī)范
html5.0-----------應(yīng)該是未來的一個(gè)發(fā)展趨勢
==學(xué)習(xí)版本：xhtml1.0==

網(wǎng)頁基本結(jié)構(gòu)

html-----整個(gè)網(wǎng)頁（人）-------作用：一個(gè)網(wǎng)頁
head----網(wǎng)頁頭部（人的頭部）------作用：承載的是給瀏覽器看的信息，默認(rèn)不可見
body----網(wǎng)頁主體（人的身體）-----作用：承載所有給用戶看的信息
Mate標(biāo)簽的補(bǔ)充

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

上面代表如果是用ie打開的當(dāng)前頁面，那么就使用最新的ie版本打開此頁面。

SEO優(yōu)化的設(shè)置:

<meta name="keywords" content="UI設(shè)計(jì),html5,css2,css3,js">

<meta name="description" content="麥殼UI,FE2職位遇見更棒的你。" >

Base標(biāo)簽

可以讓當(dāng)前頁面中的所有的a標(biāo)簽都擁有相同的屬性，比如targent屬性。

<base target="_blank">

title------網(wǎng)頁標(biāo)題（人的臉部）-----作用：網(wǎng)頁名稱

Link標(biāo)簽的常見用法

1.引入DNS預(yù)先解析

dns預(yù)解析(了解)

<link rel="dns-prefetch" >

2.引入網(wǎng)站icon圖標(biāo)：

<link rel="shortcut icon"  />

3.引入css樣式，【后面講】

<link rel="stylesheet" href="css/bg.css">

瀏覽器

兼容目標(biāo)：ie6-9；火狐；谷歌

瀏覽器編碼：
utf-8：國際編碼；集成了各個(gè)國家已經(jīng)被認(rèn)證的語言字體；
gb2312和gbk：國家碼：中文漢字和英文；

標(biāo)簽的作用：

1、選中目標(biāo)
2、設(shè)置屬性

標(biāo)簽屬性的規(guī)則：

鍵值對(duì)：color=”red”；k=”v” k=”v”
鍵值對(duì)之間用空格隔開

<font>:設(shè)置文字屬性的標(biāo)簽

文字三屬性：
1、字體：face
2、字號(hào)：size
3、顏色：color

鍵值對(duì)練習(xí)

寬度：width=”500”
高度：height=”300”
對(duì)齊方式：align=”left|center|right”
字體：face=”黑體”
字號(hào)：size=”7”
顏色：color=”red”

body屬性

背景色：bgcolor=””
背景圖：background=”圖片路徑”
小常識(shí)：背景圖和背景色共存的時(shí)候，背景圖在上，背景顏色在下。

BUI標(biāo)簽----無屬性標(biāo)簽

b：加粗
u：下劃線
i：傾斜

H1標(biāo)題標(biāo)簽

標(biāo)注當(dāng)前頁面中的文檔最重要的核心主題的文本
H1到 h6標(biāo)簽，相對(duì)于當(dāng)前文檔的重要性依次降低。注意h1標(biāo)簽在整個(gè)頁面中最多一次（當(dāng)然可以超過，但是不利于搜索SEO）。
H2以后的這些標(biāo)簽可以在一個(gè)頁面中有多個(gè)，但是不要濫用，濫用會(huì)導(dǎo)致網(wǎng)頁的SEO受影響，搜索引擎會(huì)認(rèn)為我們作弊。
H1 到H6 標(biāo)簽不是用于 字體大小的樣式設(shè)置，關(guān)鍵是文檔內(nèi)容的文字的重要性的體現(xiàn)，html是定義文檔內(nèi)容的，而樣式由后面我們學(xué)的css來設(shè)定。

案例：新聞

h標(biāo)記：align屬性（left|center|right）
瀏覽器只認(rèn)識(shí)標(biāo)簽語言，不認(rèn)識(shí)任何的回車和換行、空格
空格：

插入圖像

標(biāo)簽：img；單標(biāo)記；有一個(gè)原則性屬性：src=”圖片路徑”；
img插入的圖像是在頁面里面真真實(shí)實(shí)存在，是占位的；
img屬性：
邊框：border=”3”
寬度：width=”600”
高度：height=”200”
提示文本：title=”這是一張蒲公英圖片”
替換文本：alt=“蒲公英圖片不存在”
img相關(guān)知識(shí)點(diǎn)：被拉伸效果做法：同時(shí)設(shè)置寬高；等比縮放：只需任意設(shè)置一個(gè)寬度或者高度
Alt：圖片不顯示的時(shí)候，會(huì)顯示alt屬性的文本
Title：對(duì)網(wǎng)站的seo有很大的影響。當(dāng)鼠標(biāo)移上去的時(shí)候，圖片顯示的tip提示文本內(nèi)容。

圖片的選擇

jpg
色彩還原高，適合復(fù)雜顏色圖片，比如banner

gif
色彩效果最低，支持透明，支持動(dòng)畫，適合顏色比較少，不適合漸變色。

png
PNG的優(yōu)點(diǎn)是，清晰，無損壓縮，壓縮比率很高，可漸變透明，具備幾乎所有GIF的優(yōu)點(diǎn)；缺點(diǎn)是不如JPG的顏色豐富，同樣的圖片體積也比JPG略大。
PNG有著另一個(gè)優(yōu)點(diǎn)，那就是逐次逼近顯示(progressive display)：傳輸圖像文件的同時(shí)，可以先把整個(gè)輪廓顯示出來，然后逐步顯示圖像的細(xì)節(jié)，即先顯示低分辨率顯示圖像，從模糊到清晰，然后逐步提高它的分辨率。這是一個(gè)很好的用戶體驗(yàn)。

總結(jié)：
gif和png基本差不多，色彩比較少的直接gif，如果圖片動(dòng)畫用gif。對(duì)色彩要求高的用jpg。

相對(duì)路徑

1、同級(jí)查找：圖片和html在同一個(gè)根目錄里面

2、下級(jí)查找：只需要寫出圖片所在的文件夾/圖片名稱；

例如：src=”images/pic00.jpg”

3、上級(jí)查找：只需要寫../(返回上一級(jí))圖片名稱；

例如：src=”../pic.jpg”

拓展：既有上級(jí)又有下級(jí)

例如：src=”../../images/pic00.jpg”

Span標(biāo)簽

Span標(biāo)簽定義文檔中的一小節(jié)文本。語義不強(qiáng)。
Span標(biāo)簽可以跟其他的span標(biāo)簽共用一行。

Em標(biāo)簽

em標(biāo)簽是局部的文本的 加強(qiáng)語氣，或者是文本的強(qiáng)調(diào)的作用。
Em標(biāo)簽可以會(huì)改變局部的文檔的語義。
我更喜歡<em>小狗</em>和小貓咪。

Strong標(biāo)簽

是 針對(duì)整個(gè)文檔而言，進(jìn)行一個(gè)加強(qiáng)語氣的作用。例如：一篇文章中最重要的主題思想或者段落用strong標(biāo)簽進(jìn)行包裹。

Sub和sup標(biāo)簽

Del標(biāo)簽

知識(shí)點(diǎn)：凡是需要選中內(nèi)容標(biāo)簽都是雙標(biāo)記，不需要選中內(nèi)容的都是單標(biāo)記

URL協(xié)議

平時(shí)我們寫的 網(wǎng)址就是 url地址。
Url協(xié)議就是 規(guī)定 url地址的格式。

協(xié)議規(guī)定格式：協(xié)議名稱:// 域名（ip地址):80/路徑/文件a.htm

scheme - 定義因特網(wǎng)服務(wù)的類型。最常見的類型是 http, https,ftp
host - 定義域主機(jī)（http 的默認(rèn)主機(jī)是 www）
domain - 定義因特網(wǎng)域名，比如 w3school.com.cn
:port - 定義主機(jī)上的端口號(hào)（http 的默認(rèn)端口號(hào)是 80）
path - 定義服務(wù)器上的路徑（如果省略，則文檔必須位于網(wǎng)站的根目錄中）。
filename - 定義文檔/資源的名稱

Demo：

http://news.sina.com.cn/c/zg/2015-10-27/doc-ifxizwsm2427861.shtml
http協(xié)議，    域名： news.sina.com.cn
服務(wù)器上： /c/zg/2015-10-27/路徑下面的  ：doc-ifxizwsm2427861.shtml

URL編碼

為什么要有URL編碼呢？

如果我寫的一==個(gè)中文的網(wǎng)頁要在 阿拉伯國家的電腦上進(jìn)行顯示==。

中文字符在阿拉伯國家的電腦上會(huì)正常顯示嗎？

Url在線編碼的工具：http://tool.chinaz.com/

列表

無序列表：比較常用

整體管理，它一種思想，涉及計(jì)算機(jī)方方面面，很有意義。

結(jié)構(gòu)

ul嵌套li，ul標(biāo)記無序列表整體，li列表的某一項(xiàng)。

li列表項(xiàng)前的符號(hào)叫做列表樣式或者項(xiàng)目符號(hào)

disc：圓點(diǎn)，默認(rèn)值
circle：空心圈。
square：矩形塊。

超鏈接

a 標(biāo)記

雙標(biāo)記，它有一個(gè)原則性屬性：href=”路徑/url”

==超鏈接默認(rèn)樣式：藍(lán)色并且有下劃線==

主要包括：文字鏈接、圖片鏈接

文字鏈接：
鏈接線上網(wǎng)址
鏈接到本地文件：href=”相對(duì)路徑查找到的文件名”

彈出新窗口打開文件：href=“”，多加了一個(gè)屬性：

target=”_blank”

假鏈接：href=”#” 跳轉(zhuǎn)到當(dāng)前頁面（回到頁頭）
空鏈接：href=”javascrip:void(0)” 不做跳轉(zhuǎn)只保留a的樣式（常用）

圖片鏈接：href路徑和文字鏈接一樣，把文字替換成圖片

有序列表

ol嵌套li，ol有序列表整體，li表示列表項(xiàng)，同時(shí)可以用type來設(shè)置項(xiàng)目符號(hào)

項(xiàng)目列表（自定義列表）

項(xiàng)目列表和有序、無序列表迥然不同，
結(jié)構(gòu)：
dl嵌套dt和dd，dl表示項(xiàng)目列表的整體，dt表示項(xiàng)目（項(xiàng)目名稱），

dd表示項(xiàng)目詳情

項(xiàng)目列表可以被應(yīng)用在圖文混排效果

==dl里面只能包含dt和dd，dt和dd里面可以放任何標(biāo)簽==

拓展使用方法：
1.dl里面可以同時(shí)存在多對(duì)dt和dd
2.dl里面可以同時(shí)存在一個(gè)dt和多個(gè)dd

表格

它引領(lǐng)了一個(gè)時(shí)代，可以用做布局，但現(xiàn)在用div布局

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

table嵌套tr，tr嵌套td；table表示表格整體，
tr表示行，td表示單元格

==表格是一個(gè)彈性容器，默認(rèn)情況下尺寸受內(nèi)容控制==
想要幾行設(shè)置幾個(gè)tr，想要幾列設(shè)置幾個(gè)td；

表格默認(rèn)情況下是沒有邊框線，設(shè)置方法：border。

table屬性：

邊框線：border
寬度：width
高度height
背景色：bgcolor
背景圖：background
對(duì)齊方式：align
外邊距：單元格和單元格之間的距離：cellspacing;設(shè)置值為正整數(shù)，最小為0
內(nèi)邊距：內(nèi)容與邊框的距離：cellpadding,數(shù)值設(shè)置于外邊距一樣
tr屬性：是table的孫子級(jí)。瀏覽器解析時(shí)會(huì)自動(dòng)加上中間省略tbody.
valign　設(shè)置一行中單元格垂直對(duì)齊方式
height 高度；(注意無寬度，因?yàn)閷挾纫话阌蓆able決定)
align 水平對(duì)齊方式；
bgcolor 背景色

td屬性

bgcolor 設(shè)置行單元格背景顏色；
background 背景圖；
align　設(shè)置單元格對(duì)齊方式
valign　設(shè)置單元格垂直對(duì)齊方式
width　設(shè)置單元格寬度
height　設(shè)置單元格高度
表格標(biāo)簽table
快捷鍵： ctrl+{ 進(jìn)行左縮進(jìn)， ctrl+} 進(jìn)行右縮進(jìn)

關(guān)于表格的合并單元格

Rowspan 行方向上合并單元格
Column 列方向合并單元格

<table border="1">
    <thead>
        <tr>
            <th>姓名</th><th>年齡</th><th>成績</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <!-- rowspan：一個(gè)單元格占用兩行進(jìn)行顯示 -->
            <td rowspan="2">張三</td><!-- <td>14</td> -->
            
            <!-- colspan=2 將一行中的 一個(gè)單元格 占用兩個(gè)列進(jìn)行顯示。     -->
            <td colspan="2">24</td>
        </tr>
        <tr>
            <!-- <td>89</td> --><td>6</td><td>呵呵</td>
        </tr>
    </tbody>    
</table>

表單form

Form標(biāo)簽，表單的域標(biāo)簽，用于包裹整個(gè)表單的內(nèi)容。表單就是用戶提交數(shù)據(jù)到后臺(tái)的一個(gè)虛擬單子。

表單一般由 文本框、下拉列表、單選、多選、文本域等組成。

屬性：

action-------服務(wù)器地址，用于指定當(dāng)前表單 提交的時(shí)候指向后臺(tái)的地址。項(xiàng)目初期不需要指定。

method------設(shè)置發(fā)送方式，有兩個(gè)值：get：明文發(fā)送；post：密文發(fā)送。
表單總結(jié)
Form：包裹標(biāo)簽，action：#

表單將標(biāo)簽分為兩類：input標(biāo)簽和非input標(biāo)簽

input標(biāo)簽：

文本框：type屬性值為text；
密碼：type屬性值為password；
普通按鈕：type屬性值為button；
單選框：type屬性值為radio；
擴(kuò)大觸發(fā)區(qū)域：label；
默認(rèn)選中：checked=”checked”（復(fù)選框設(shè)置默認(rèn)選中也是用次方法）
實(shí)現(xiàn)單選：為不同input標(biāo)簽設(shè)置相同name屬性值（name=”sex”）
復(fù)選框：type屬性值為checkbox。
提交按鈕：type屬性值為submit，設(shè)置默認(rèn)值用value=”提交“
重置按鈕：type屬性值為reset
上傳文件：type屬性值為file
圖片按鈕：type屬性值為image，原則性src屬性===圖片按鈕的路徑

非input標(biāo)簽：

下拉菜單：

select嵌套o(hù)ption，select表示下拉菜單整體，option表示下拉菜單的選項(xiàng)。

分組：<optgroup label=”組名稱”></optgroup>
默認(rèn)值：option設(shè)置selected=”selected“
分組的情況下：optgroup嵌套o(hù)ption
value值只有在后臺(tái)有用。Option包裹的內(nèi)容是顯示的選項(xiàng)的文本。例如：

 <select name="" id="" multiple>
              <option value="1">公歷</option>
              <option value="2">農(nóng)歷</option>
              <option value="2">農(nóng)歷</option>
              <option value="2">農(nóng)歷</option>
 </select>    

Multipe:也是一個(gè)單屬性。值只有一個(gè)multiple。設(shè)置了此屬性表示select標(biāo)簽表現(xiàn)為 列表標(biāo)簽。否則表示下拉列表標(biāo)簽。

文本域：

textarea，cols設(shè)置水平方向?qū)挾?、水平顯示的列數(shù)
rows設(shè)置垂直方向高度，垂直方向顯示的行數(shù)

設(shè)置領(lǐng)域：
設(shè)置領(lǐng)域：fieldset嵌套legend（領(lǐng)域名稱【注冊(cè)信息】）
fieldset標(biāo)簽沒有任何發(fā)送數(shù)據(jù)的功能，只是設(shè)置了前臺(tái)的顯示樣式。

Lable標(biāo)簽

for屬性指向要提供服務(wù)的 標(biāo)簽的id值。
Lable直接包裹標(biāo)簽，可以實(shí)現(xiàn)點(diǎn)擊標(biāo)簽的文字內(nèi)容，讓包裹的表單標(biāo)簽 標(biāo)簽獲得焦點(diǎn)。

< label for="txtName">文本框獲得焦點(diǎn)< / label >

< label>< input type="button" value="普通的按鈕" > 選中按鈕</label>