1. HTML是網(wǎng)頁內(nèi)容的載體。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。

2. CSS樣式是表現(xiàn)。就像網(wǎng)頁的外衣。比如，標(biāo)題字體、顏色變化，或?yàn)闃?biāo)題加入背景圖片、邊框等。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。

3. JavaScript是用來實(shí)現(xiàn)網(wǎng)頁上的特效效果。如：鼠標(biāo)滑過彈出下拉菜單。或鼠標(biāo)滑過表格的背景顏色改變。還有焦點(diǎn)新聞（新聞圖片）的輪換。可以這么理解，有動(dòng)畫的，有交互的一般都是用JavaScript來實(shí)現(xiàn)的。

????????????????????Html和CSS的關(guān)系????????????????????????Hello?World!

上述代碼中設(shè)置字體大小，和顏色以及文字位置就是CSS的體現(xiàn)

下面解釋更多標(biāo)簽的含義

????????????????????這是主題????????????????勇氣????????三年級(jí)時(shí)，我還是一個(gè)膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯(cuò)了老師會(huì)批評(píng)我。就一直沒有這個(gè)勇氣來回答老師提出的問題。學(xué)校舉辦的活動(dòng)我也沒勇氣參加。????????到了三年級(jí)下學(xué)期時(shí)，我們班上了一節(jié)公開課，老師提出了一個(gè)很簡單的問題，班里很多同學(xué)都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環(huán)顧了四周，就我沒有舉手。

下面是效果圖

稱為根標(biāo)簽，所有的網(wǎng)頁標(biāo)簽都在中

標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有

、<div cdata_tag="script" cdata_data="%E3%80%81%E3%80%81%E7%AD%89%E6%A0%87%E7%AD%BE"><div cdata_tag="style" cdata_data="%E3%80%81%E3%80%81%E7%AD%89%E6%A0%87%E7%AD%BE"><link/>、<meta/>等標(biāo)簽</div></div>

和標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容

就是標(biāo)題標(biāo)簽，

是段落標(biāo)簽，就是放置圖片

注釋的方法是：

有了段落又有了標(biāo)題，如果想在一段話中強(qiáng)調(diào)某幾個(gè)文字，可以用XXX或者XXX標(biāo)簽

XXX可以改變文本樣式，如顏色

回車換行

?代表一個(gè)空格，注意不能漏分號(hào)

---

分隔線

代碼

加入大量代碼

????列表信息精彩少年??美麗突然出現(xiàn)??觸動(dòng)心靈的旋律???自帶序號(hào)的列表信息???信息???......

在網(wǎng)頁制作過程中，可以把一些獨(dú)立的邏輯部分劃分出來，放在一個(gè)

標(biāo)簽中，這個(gè)

標(biāo)簽的作用就相當(dāng)于一個(gè)容器，可以用id屬性來為

提供唯一的名稱，如：

? ?

熱門課程排行榜

? ?

? ? ? ?

• 前端開發(fā)面試心法

? ? ?

• 零基礎(chǔ)學(xué)習(xí)html

? ? ? ?

• javascript全攻略

? ?

? ?

web前端開發(fā)導(dǎo)學(xué)課程

? ?

? ? ? ?

• 網(wǎng)頁專業(yè)名詞大掃盲

? ? ? ?

• 網(wǎng)站職位定位指南

? ? ? ?

• 為您解密Yahoo網(wǎng)站制作流程

? ?

創(chuàng)建表格的四個(gè)元素：table、tbody、tr、th、td.

加上上面的代碼就可以添加黑色邊框

使用可實(shí)現(xiàn)超鏈接：鏈接顯示的文本

與用戶交互：

????????用戶名:????????????????密碼:

加入文本框：

? ?個(gè)人簡介：

? ?在這里輸入內(nèi)容...

? ?

? ?

?

單選框/復(fù)選框：

radio/checkbox

? ?性別:

? ?男

? ?

? ?女

? ?

下拉列表框：（在里加上就是多選）

? ?愛好:

? ?

? ? ?看書

? ? ?旅游

? ? ?運(yùn)動(dòng)

? ? ?購物

? ?

重置：

從上面的代碼中，我們看到了很多l(xiāng)abel標(biāo)簽

label標(biāo)簽不會(huì)向用戶呈現(xiàn)任何特殊效果，它的作用是為鼠標(biāo)用戶改進(jìn)了可用性。如果你在 label 標(biāo)簽內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說，當(dāng)用戶單擊選中該label標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上（就自動(dòng)選中和該label標(biāo)簽相關(guān)連的表單控件上）

CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、顏色、字體加粗等

如：

span{

? ?color:blue;

}

? ?

慕課網(wǎng)，超酷的互聯(lián)網(wǎng)、IT技術(shù)免費(fèi)學(xué)習(xí)平臺(tái)，創(chuàng)新的網(wǎng)絡(luò)一站式學(xué)習(xí)、實(shí)踐體驗(yàn)；服務(wù)及時(shí)貼心，內(nèi)容專業(yè)、有趣易學(xué)。專注服務(wù)互聯(lián)網(wǎng)工程師快速成為技術(shù)高手！

CSS中，注釋用/* ?.... ?*/

CSS樣式代碼插入的形式來看基本分為以下3種：內(nèi)聯(lián)式、嵌入式和外部式三種。

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

這里文字是紅色。

嵌入式：

外部式：?

優(yōu)先級(jí)：內(nèi)聯(lián)式>嵌入式>外部式

ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個(gè)HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次

可以使用類選擇器詞列表方法為一個(gè)元素同時(shí)設(shè)置多個(gè)樣式

正確代碼：

.stress{color:red; } .bigsize{font-size:25px; }到了三年級(jí)下學(xué)期時(shí)，我們班上了一節(jié)公開課...

錯(cuò)誤代碼：

#stressid{color:red; } #bigsizeid{font-size:25px; }到了三年級(jí)下學(xué)期時(shí)，我們班上了一節(jié)公開課...

偽類選擇符：它允許給html不存在的標(biāo)簽設(shè)置樣式，比如說我們給html中一個(gè)標(biāo)簽元素的鼠標(biāo)滑過的狀態(tài)來設(shè)置字體顏色：

a:hover{color:red;}CSS的某些樣式是具有繼承性的 p{color:red;}三年級(jí)時(shí)，我還是一個(gè)膽小如鼠的小女孩。

可見右側(cè)結(jié)果窗口中p中的文本與span中的文本都設(shè)置為了紅色。但注意有一些css樣式是不具有繼承性的。如border:1px solid red;

p{border:1px?solid?red;}三年級(jí)時(shí)，我還是一個(gè)膽小如鼠的小女孩。

在上面例子中它代碼的作用只是給p標(biāo)簽設(shè)置了邊框?yàn)?像素、紅色、實(shí)心邊框線，而對(duì)于子元素span是沒用起到作用的。

有些特殊情況需要為某些樣式設(shè)置具有最高權(quán)限，這時(shí)可以使用!important來解決

可以使用css樣式為網(wǎng)頁中的文字設(shè)置字體、字號(hào)、顏色等樣式屬性。下面我們來看一個(gè)例子，下面代碼實(shí)現(xiàn)：為網(wǎng)頁中的文字設(shè)置字體為宋體。

body{font-family:"宋體";}

將字體設(shè)置為斜體：

p?a{font-style:italic;}

設(shè)置下劃線：

p?a{text-decoration:underline;}

設(shè)置刪除線：

?.oldPrice{text-decoration:line-through;}

段落前面空兩個(gè)空格：

p{text-indent:2em;}

行間距（行高）：

p{line-height:2em;}

文字間隔：h1{letter-spacing:20px;}

英文字間隔：h1{word-spacing:20px;}

設(shè)置居中、居左、居右：

div{text-align:center;}、div{text-align:left;}、div{text-align:right;}

在CSS中，html中的標(biāo)簽元素大體被分為三種不同的類型：塊狀元素、內(nèi)聯(lián)元素(又叫行內(nèi)元素)和內(nèi)聯(lián)塊狀元素。

常用的塊狀元素有：

、

、

...

、

、

• 、

  • 、、

、、

常用的內(nèi)聯(lián)元素有：

、、
、、、、、、、、

常用的內(nèi)聯(lián)塊狀元素有：

、

在html中

、

、

、、、

• 就是塊級(jí)元素。設(shè)置display:block就是將元素顯示為塊級(jí)元素。如下代碼是將內(nèi)聯(lián)元素a轉(zhuǎn)換為塊狀元素，從而使a元素具有塊狀元素特點(diǎn)：

a{display:block;}

塊級(jí)元素特點(diǎn)：

每個(gè)塊級(jí)元素都從新的一行開始，并且其后的元素也另起一行。

元素的高度、寬度、行高以及頂點(diǎn)和底邊距都可設(shè)置。

元素寬度在不設(shè)置的情況下，是它本身父容器的100%，除非設(shè)定一個(gè)寬度。

將塊狀元素div轉(zhuǎn)換為內(nèi)聯(lián)元素，從而使div元素具有內(nèi)聯(lián)元素特點(diǎn)：div{display:inline;}

內(nèi)聯(lián)元素特點(diǎn)：

和其他元素都在一行上；

元素的高度，寬度以及頂部和底部邊距不可設(shè)置；

元素的寬度就是它包含的文字或圖片的寬度，不可改變。

內(nèi)聯(lián)塊狀元素（inline-block）就是同是具備內(nèi)聯(lián)元素、塊狀元素的特點(diǎn) ，代碼：display:inline-block

盒子模型的邊框就是圍繞著內(nèi)容及不敗的線，這條線你可以設(shè)置它的粗細(xì)、樣式和顏色（邊框三個(gè)屬性）。

如：div{border:2px solid red;}

上面是border代碼的縮寫形式，可以分開寫：

div{border-width:2px;

border-style:solid;

border-color:red;

}

border-style（邊框樣式）常見樣式有：dashed（虛線）、dotted（電線）、solid（實(shí)線）

border-color（邊框顏色）中的顏色可設(shè)置為十六進(jìn)制顏色，如：border-color：#888（井號(hào)不能漏）

元素內(nèi)容與邊框之間是可以設(shè)置距離的，稱之為“填充”。填充也可分為上、右、下、左(順時(shí)針)。如下代碼：

div{padding:20px 10px 15px 30px;}

順序一定不要搞混。可以分開寫上面代碼：

div{

? ?padding-top:20px;

? ?padding-right:10px;

? ?padding-bottom:15px;

? ?padding-left:30px;

}

如果上、右、下、左的填充都為10px;可以這么寫

div{padding:10px;}

如果上下填充一樣為10px，左右一樣為20px，可以這么寫：

div{padding:10px 20px;}

元素與其它元素之間的距離可以使用邊界（margin）來設(shè)置。邊界也是可分為上、右、下、左。如下代碼：

div{margin:20px 10px 15px 30px;}

也可以分開寫：

div{

? ?margin-top:20px;

? ?margin-right:10px;

? ?margin-bottom:15px;

? ?margin-left:30px;

}

如果上右下左的邊界都為10px;可以這么寫：

div{ margin:10px;}

如果上下邊界一樣為10px，左右一樣為20px，可以這么寫：

div{ margin:10px 20px;}

總結(jié)一下：padding和margin的區(qū)別，padding在邊框里，margin在邊框外。

CSS包含3種基本的布局模型，用英文概括為：Flow(流動(dòng)模型)、Layer(層模型)、Float(浮動(dòng)模型)

層模型有三種形式：

1、絕對(duì)定位(position: absolute)

2、相對(duì)定位(position: relative)

3、固定定位(position: fixed)

fixed：表示固定定位，與absolute定位類型類似，但它的相對(duì)移動(dòng)的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身。由于視圖本身是固定的，它不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化，除非你在屏幕中移動(dòng)瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響，這與background-p_w_upload:fixed屬×××相同。以下代碼可以實(shí)現(xiàn)相對(duì)于瀏覽器視圖向右移動(dòng)100px，向下移動(dòng)50px。并且拖動(dòng)滾動(dòng)條時(shí)位置固定不變。

#div1{

? ? width:200px;

? ? height:200px;

? ? border:2px red solid;

? ? position:fixed;

? ? left:100px;

? ? top:50px;

}

轉(zhuǎn)載于:https://blog.51cto.com/11838641/1894596

總結(jié)

以上是生活随笔為你收集整理的HTML+CSS的学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。