HTML-CSS基礎(chǔ)一

HTML

軟件架構(gòu)

C/S：C(客戶端，用戶通過客戶端來使用軟件)祸穷，S表示服務(wù)器拓提。一般軟件都是C/S架構(gòu)。
- 軟件使用前必須安裝
- 軟件更新時(shí)鸿吆，服務(wù)器與客戶端同時(shí)更新
- 不能跨平臺(tái)使用
- C/S架構(gòu)的軟件客戶端和服務(wù)器通信采用的是自有協(xié)議囤采，相對(duì)來說比較安全
B/S：B(瀏覽器)，B/S架構(gòu)軟件通過使用瀏覽器訪問網(wǎng)頁的形式惩淳，來使用軟件蕉毯。
- 軟件不需要安裝，直接使用瀏覽器訪問指定網(wǎng)址即可；
- 軟件更新時(shí)代虾，客戶端不需要更新
- 軟件可以跨平臺(tái)使用
- 客戶端和服務(wù)器之間通信采用的是通用HTTP協(xié)議进肯，相對(duì)來說不安全

軟件開發(fā)流程

網(wǎng)頁設(shè)計(jì)師根據(jù)需求設(shè)計(jì)網(wǎng)頁（PS）
前端工程師將設(shè)計(jì)做成靜態(tài)網(wǎng)頁（HTML）
后臺(tái)工程師將靜態(tài)網(wǎng)頁修改為動(dòng)態(tài)網(wǎng)頁（JSP）

網(wǎng)頁組成

結(jié)構(gòu)（HTML用于描述頁面的結(jié)構(gòu)）
表現(xiàn)（CSS用于控制頁面中元素的樣式）
行為（JavaScript用于響應(yīng)用戶操作）

亂碼

編碼：依據(jù)一定的規(guī)則，將字符轉(zhuǎn)換為二進(jìn)制編碼的過程棉磨；
解碼：一句一定的規(guī)則坷澡，將二進(jìn)制編碼轉(zhuǎn)換為字符的過程；

特殊符號(hào)稱為實(shí)體（轉(zhuǎn)義字符）含蓉，轉(zhuǎn)換用&實(shí)體名字频敛；

< <

©

圖片格式

JPEG（JPG）

JPEG圖片支持的顏色比較多，圖片可以壓縮馅扣，但是不支持透明
一般使用JPEG來保存照片等顏色豐富的圖片

GIF

GIF支持的顏色少斟赚，只支持簡單的透明，支持動(dòng)態(tài)圖
圖片顏色單一或者是動(dòng)態(tài)圖時(shí)可以使用GIF

PNG

PNG支持顏色多差油，并且支持復(fù)雜的透明
可以用來顯示顏色復(fù)雜的透明的圖片

圖片使用規(guī)則：

效果不一致拗军，使用效果好的
效果一致，使用容量小的

meta標(biāo)記作用

可以用來設(shè)置網(wǎng)頁關(guān)鍵字

<meta name="keywords" content="HTML5,JavaScript,前端蓄喇，后端发侵，Python" />
用來指定網(wǎng)頁的描述

搜索引擎在檢索頁面時(shí)，會(huì)同時(shí)檢索頁面中的關(guān)鍵詞和描述妆偏，但是這兩個(gè)值不會(huì)影響頁面在搜索引擎中的排名

<meta name="description" content="子在川上曰：逝者如斯夫刃鳄！"
可以用作請(qǐng)求重定向

<meta http-equiv="refresh" content="4(秒數(shù));url=http:www.baidu.com(目標(biāo)路徑)" />

src屬性配置

src屬性配置的是圖片的路徑，目前我們所要使用的路徑全是相對(duì)路徑

相對(duì)路徑：相對(duì)路徑指相對(duì)于當(dāng)前資源所在目錄的位置

語法規(guī)范

HTML中不區(qū)分大小寫
HTML中注釋不能嵌套
HTML標(biāo)簽必須結(jié)構(gòu)完整钱骂，要么成對(duì)出現(xiàn)叔锐，要么自結(jié)束標(biāo)簽
HTML標(biāo)簽可以嵌套，但是不能交叉嵌套
HTML標(biāo)簽中的屬性必須有值见秽，且值必須加引號(hào)

瀏覽器盡最大的努力正確的解析頁面愉烙，你所有的不符合語法規(guī)范的內(nèi)容，瀏覽器都會(huì)為你自動(dòng)修正解取，但是有些情況會(huì)修正錯(cuò)誤

內(nèi)聯(lián)框架

使用內(nèi)聯(lián)框架可以引入一個(gè)外部的頁面步责，使用iframe來創(chuàng)建一個(gè)內(nèi)聯(lián)框架，屬性：

src:指向一個(gè)外部頁面的路徑禀苦，可以使用相對(duì)路徑
width:
height:
name:可以為內(nèi)聯(lián)框架指定一個(gè)name屬性

在現(xiàn)實(shí)開發(fā)中不推薦使用內(nèi)聯(lián)框架蔓肯，因?yàn)閮?nèi)聯(lián)框架的內(nèi)容不會(huì)被搜索引擎所檢索

<iframe src="demo2.html" name="tom"></iframe>

a標(biāo)簽

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

如果鏈接地址設(shè)為#，則點(diǎn)擊超鏈接以后伦忠，會(huì)自動(dòng)跳轉(zhuǎn)到當(dāng)前頁面頂部省核。id是html中屬性作為標(biāo)簽的唯一標(biāo)識(shí)，id屬性在同一頁面中只能有一個(gè)不能重復(fù)昆码。

1.<a id="1" href="#">回到頂部</a>

2.<a href="#1">回到底部</a>

通過2可以快速到1的地方

還可以發(fā)送電子郵件的超鏈接，點(diǎn)擊超鏈接以后可以自動(dòng)打開計(jì)算機(jī)中默認(rèn)的郵件客服端href=”mailto:123@nik.com“；當(dāng)點(diǎn)擊這個(gè)超鏈接時(shí)赋咽，會(huì)默認(rèn)打開計(jì)算機(jī)的默認(rèn)電子郵件客服端旧噪，并且將收件人設(shè)置為mailto后的郵件地址；

CSS

層疊樣式表（Cascading Style Sheets）,css可以用來為網(wǎng)頁創(chuàng)建樣式表脓匿，通過樣式表可以對(duì)網(wǎng)頁進(jìn)行裝飾淘钟。

可以將CSS樣式編寫到元素的style屬性中，將樣式直接編寫到style屬性中陪毡，這種樣式稱為內(nèi)聯(lián)樣式米母，內(nèi)聯(lián)樣式只對(duì)當(dāng)前的元素中的內(nèi)容起作用，內(nèi)聯(lián)樣式不方便復(fù)用毡琉，內(nèi)聯(lián)樣式屬于結(jié)構(gòu)與表現(xiàn)耦合铁瞒，不方便后期維護(hù)，不推薦使用

CSS樣式

內(nèi)聯(lián)樣式：
內(nèi)部樣式：

  ......
    <style type="text/css">
    p{
    ?   color:red;
    ?   font-size:40px;
    }
    </style>
    ......

外部樣式表：將樣式表寫到外部的CSS文件中桅滋，然后通過link標(biāo)簽來將外部的CSS文件引入到當(dāng)前頁面中慧耍，這樣外部文件中的CSS樣式表將會(huì)應(yīng)用到當(dāng)前頁面中。將CSS樣式統(tǒng)一編寫到外部的樣式表中丐谋，完全使結(jié)構(gòu)和表現(xiàn)分離芍碧，可以是樣式表可以在不同的頁面使用，最大限度的使樣式可以進(jìn)行復(fù)用号俐，將樣式表統(tǒng)一寫在樣式表中泌豆，然后通過link標(biāo)簽引入，可以利用瀏覽器的緩存加快用戶訪問的速度提高用戶體驗(yàn)吏饿，所以在開發(fā)中我們推薦使用的方式就是外部的CSS文件践美；

<link rel="stylesheet" type="text/css" href="style.css(style文件)" />

CSS注釋

/* */作用和HTML注釋類似，只不過它必須編寫在style標(biāo)簽中找岖，或者是css文件中

CSS的語法

選擇快
- 通過選擇器可以選中頁面中指定的元素陨倡，并且將聲明塊中的樣式應(yīng)用到選擇其對(duì)應(yīng)的元素上
聲明塊
- 聲明塊緊跟在選擇器的后邊，使用一對(duì){}括起來许布，聲明塊中實(shí)際上就是一組一組的名值對(duì)結(jié)構(gòu)兴革，這一組一組的名值對(duì)我們稱為聲明，在一個(gè)聲明塊中可以寫多個(gè)聲明蜜唾，多個(gè)聲明之間使用;隔開杂曲，聲明的樣式名和樣式值之間使用:來連接。

IDE

nodep++

sublime

HBuilder（免費(fèi)袁余、國產(chǎn)）

webstorm（收費(fèi)）

塊元素和內(nèi)聯(lián)元素

div就是一個(gè)塊元素擎勘，塊元素就是會(huì)獨(dú)占一行的元素，無論有多少內(nèi)容颖榜，他都會(huì)獨(dú)占一行棚饵。
div標(biāo)簽沒有任何語義煤裙，就是純粹的塊元素，并且不會(huì)為它里邊的元素設(shè)置任何的默認(rèn)樣式噪漾，div元素主要用來對(duì)頁面進(jìn)行布局的硼砰。
p hn

span是一個(gè)內(nèi)聯(lián)元素（行內(nèi)元素），所謂的行內(nèi)元素欣硼，是指只占自身大小的元素题翰，不會(huì)占用一行常見的內(nèi)聯(lián)元素
span沒有任何語義，span標(biāo)簽專門用來選中文字诈胜，然后為文字來設(shè)置樣式
a img iframe span

塊元素主要用來做頁面的布局豹障，內(nèi)聯(lián)元素主要用來選中文本設(shè)置樣式，一般情況下只使用塊元素去包含內(nèi)聯(lián)元素焦匈，而不會(huì)使用內(nèi)聯(lián)元素去包含一個(gè)塊元素血公。a元素可以包含任意元素，除了它本身括授。p元素不可以包含任何塊元素坞笙。

元素選擇器

作用：通過元素選擇器可以選擇頁面中的所有指定元素
語法：標(biāo)簽名{}
id選擇器
- 通過元素的id屬性值選中唯一的一個(gè)元素
- 語法：#id屬性值{}
類選擇器
- 通過元素的class屬性值選中一組元素
- 語法：.class屬性值{}
選擇分組（并集選擇器）
- 通過選擇器分組可以同時(shí)選中多個(gè)選擇器對(duì)應(yīng)的元素
- 語法：選擇器1，選擇器2荚虚，選擇器N{}
通配選擇器
- 他可以用來選中頁面的所有元素
- 語法：*{}
復(fù)合選擇器（交集選擇器）
- 可以選中同時(shí)滿足多個(gè)選擇器的元素
- 語法：選擇器1選擇器2選擇器N{}

元素關(guān)系

父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或間接包含后代元素的元素薛夜，父元素也是祖先元素
后代元素：直接或間接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：擁有相同父元素的元素叫做兄弟元素
后代元素選擇器
- 作用：選中指定元素的指定后代元素
- 語法：祖先元素后代元素{}
子元素選擇器
- 作用：選中指定父元素的指定元素
- 語法：父元素 > 子元素

偽類

偽類專門用來表示元素的一種特殊的狀態(tài)版述，當(dāng)我們需要為處在這些特殊狀態(tài)的元素設(shè)置樣式時(shí)梯澜，就可以使用偽類

a:link{color:red;}表示正常鏈接

a:visited{color:blue;}表示訪問過的鏈接

a:hover{color:yellow;}表示鼠標(biāo)滑過的鏈接

a:active{color:green;}表示的是超鏈接被點(diǎn)擊的狀態(tài)

瀏覽器是通過歷史記錄來判斷一個(gè)鏈接是否訪問過，由于涉及到用戶的隱私問題渴析，所以使用visited味蕾只能設(shè)置字體的顏色

:hover和:active也可以對(duì)其他元素設(shè)置

IE6中不支持對(duì)超鏈接外的元素設(shè)置:hover和:active

-:focus{}表示獲取焦點(diǎn)

-:before{}表示指定元素前

-:after{}表示指定元素后

-::selection{}表示選中的元素

-:first-letter{}表示首字母

-:first-line{}表示首行

屬性選擇器

title屬性晚伙，這個(gè)屬性可以給任何標(biāo)簽指定，當(dāng)鼠標(biāo)移入到元素上時(shí)俭茧，元素中的title屬性的值將會(huì)作為提示文字顯示

作用：可以根據(jù)元素中的屬性或?qū)傩灾祦磉x取指定元素
語法：
- [屬性名]選取含有指定屬性的元素
- [屬性名=”屬性值”]選擇含有指定屬性值的元素
- [屬性名^=”屬性值”]選取屬性值以指定內(nèi)容開頭的元素
- [屬性名$=”屬性值”]選取屬性值以指定內(nèi)容結(jié)尾的元素
- [屬性名*=”屬性值”]選取屬性值以包含指定內(nèi)容元素

例：p[title]{background-color:red;}

? p[title="屬性值"]{color:red;}

? p[title^="屬性值"]{color:red;}

? p[title$="屬性值"]{color:red;}

子元素的偽類

p:first-child{background-color:red}可以選中第一個(gè)元素

p:last-child{background-color:red}可以選中最后一個(gè)元素

p:nth-child（3）{background-color:red}可以選中任意位置的元素咆疗，3表示是第三個(gè)元素，even表示偶數(shù)位置的元素母债，odd表示是奇數(shù)位置的元素午磁。

child是在所有的子元素中排列，而type是在當(dāng)前類型的子元素中排列毡们。

p:first-of-type{background-color:red;}表示第一個(gè)p元素背景設(shè)置為熱點(diǎn)迅皇。

p:last-of-type{background-color:red;}表示最后一個(gè)p元素背景設(shè)置為熱點(diǎn)。

p:nth-of-type（even）{background-color:red;}表示任意位置的p元素衙熔。

兄弟選擇器

– 查找后邊一個(gè)兄弟元素
? 兄弟元素 + 兄弟元素{}

– 查找后邊所有的兄弟元素
? 兄弟元素 ~ 兄弟元素{}

否定偽類

作用：可以從已選中的元素中剔出某些元素
語法：p:not(.hello（選擇器）){background-color：red登颓；}

樣式繼承

? 就像父親的財(cái)產(chǎn)會(huì)遺傳給兒子一樣，在 CSS 中祖先元素的樣式同樣也會(huì)被子元素繼承红氯。
? 繼承是指應(yīng)用在一個(gè)標(biāo)簽上的那些 CSS 樣式會(huì)同時(shí)被應(yīng)用到其內(nèi)嵌標(biāo)簽上框咙。
? 比如為父元素設(shè)置了字體顏色咕痛，子也會(huì)應(yīng)用上相同的。比如為父元素設(shè)置了字體顏色扁耐，子也會(huì)應(yīng)用上相同的暇检。比如為父元素設(shè)置了字體顏色产阱，子也會(huì)應(yīng)用上相同的婉称。
? 當(dāng)然并不是所有的樣式都會(huì)被繼承，這一點(diǎn)我們講到具體時(shí)构蹬，再去討論王暗。

權(quán)重（優(yōu)先級(jí)）

當(dāng)使用不同的選擇器，選中同一個(gè)元素時(shí)并且設(shè)置相同的樣式時(shí)庄敛，這樣樣式之間產(chǎn)生沖突俗壹，最終到底采用哪個(gè)選擇器定義的樣式，由選擇器的優(yōu)先級(jí)（權(quán)重）決定藻烤，優(yōu)先級(jí)高的優(yōu)先運(yùn)行

優(yōu)先級(jí)的規(guī)則

內(nèi)聯(lián)樣式：優(yōu)先級(jí)1000
id選擇器：優(yōu)先級(jí)100
類和偽類：優(yōu)先級(jí)10
元素選擇器：優(yōu)先級(jí)1
通配*：優(yōu)先級(jí)0

繼承的樣式?jīng)]有優(yōu)先級(jí)

當(dāng)選擇器中包含多種選擇器時(shí)绷雏，需要將多種選擇器的優(yōu)先級(jí)相加然后再比較，但是選擇器優(yōu)先級(jí)計(jì)算不會(huì)超過他的最大數(shù)量級(jí)怖亭，如果選擇器的優(yōu)先級(jí)一樣涎显，則使用靠后的樣式。

并集選擇器的優(yōu)先級(jí)是單獨(dú)計(jì)算兴猩，可以在樣式的最后添加一個(gè)!important,則此時(shí)該樣式將會(huì)獲得一個(gè)最高的優(yōu)先級(jí)期吓，將會(huì)優(yōu)先于所有的樣式顯示甚至超過內(nèi)聯(lián)樣式，但是在開發(fā)中盡量避免使用!important

偽類的順序

l v h a

文本標(biāo)簽

和這兩個(gè)標(biāo)簽都表示一個(gè)強(qiáng)調(diào)的內(nèi)容倾芝，主要表示語氣上的強(qiáng)調(diào)讨勤，在瀏覽器中默認(rèn)使用斜體顯示

表示強(qiáng)調(diào)的內(nèi)容，比更強(qiáng)烈晨另，默認(rèn)使用粗體顯示

標(biāo)簽中的內(nèi)容會(huì)以斜體顯示,標(biāo)簽中的內(nèi)容會(huì)以粗體顯示

表示比父元素小的字號(hào)潭千。<cite></cite>標(biāo)簽可以指明對(duì)其內(nèi)容的應(yīng)用或參考。

<q></q>表示加引號(hào)借尿，<blockquote></blockquote>表示