分享HTML中18個基礎的概念

1.HTML：

Hpyer Text Markup Langage

Hpyer Text：超文本語言（文字，圖片，鏈接，音頻，視訊等）

區分：普通文字－Word text（文字，表格，圖片）

#Markup：標籤

7869fffc88d04c3f1a2beed6cd5d0877< ;/標籤>

一個標籤可以有多個屬性，一個屬性可以有多個值，屬性和屬性之間，值和值之間用空格隔開

Langage：語言

HTML是用各種標籤將超文本內容包起來，然後按照順序來寫

#2.文檔流順序：

將瀏覽器視窗自上而下，分成一行一行的。每一行從左到右排列元素

將瀏覽器視窗自上而下，分成一行一行，每一行從左到右排列元素，就叫文檔流順序

3.HTML結構標籤

HTML：總標籤，告訴瀏覽器，這是一個HTML的文檔，一個頁面只能有一個

head：頭部標籤，包含文檔的相關訊息，在瀏覽器視窗不顯示，一個頁面只能有一個

body：身體標籤，包含所有超文本內容，在瀏覽器的視窗顯示，一個頁面只能有一個

meta：提供頁面的相關信息，一個頁面可以有多個。 b2f0d49c16306e60b5f5bbc3a6018943閉合方式特殊

title：描述頁面相關內容，一個頁面只能有一個

！ DOCTYPE：聲明標籤，告訴瀏覽器該文件所使用的規範符號W3C規範，沒有結束標籤，頁不寫入HTML內部

4.W3C規格：

# （1）標籤字母必須要小寫

（2）有開始標籤就要有結束標籤，標籤的閉合方式有兩種。

339a3febd5fdeb4ddbace974d1956c4ed96b3aebf5e82729845436b6c52bea59

ff8c231d319c485d80d61fdb8aa42a8c

#(3)標籤的值一定要用雙引號，如{< ;標籤屬性="值">d96b3aebf5e82729845436b6c52bea59}

（4）出現的所有符號必須是英文符號

#（5）標籤+內容=元素

5.三種CSS樣式：

CSS（cascading style sheets）層疊樣式表   

作用：用於定義HTML內容在瀏覽器內的顯示樣式

（1）內聯式CSS樣式：

f8366f7d437b4764385859ae85556fbc這裡的文字是紅色的f15adf03c0bcdb7e51e0c27d805a7f90531ac245ce3e4fe3d50054a55f265927之間。

（3）外部式CSS樣式（.css為副檔名）

外部式CSS寫在93f0f5c25f18dab9d176bd4f6de5d30e內

使用2cdf5bf648cf2f33323966d7f58a7f3f標籤將CSS樣式檔案連接到HTML檔案內

<link herf="   .css" rel="stylesheet" type="text/css"/>

CSS樣式遵循一個重要的原則－就近原則（但還需判斷權值的大小）

6.類別選擇器

.類別選擇器名稱{CSS樣式程式碼；}

eg：

<span>胆小如鼠</span>
<span class="stress">胆小如鼠</stress>
.stress{color:red;}

7.ID選擇器

ID選擇符的前面是「#」號，而不是類別名稱前的「.」

8.類別（.）和ID（#）選擇器的區別：

（1）ID選擇器只能在文件中使用一次，類別選擇器可以使用多次

（2）可使用類別選擇器次列表方法同時為一個元素設定多個樣式。 ID選擇器不行。

eg：

.stress{color:red;}
.size{font-size:25px;}
<p>到了<span class="stress size">三年级</span>下学期。。。</p>

上面的程式碼的作用是為「三年級」三個字設定文字顏色為紅色並且字號為25px

9.子選擇器

即大於符號">"，用於選擇指定標籤元素的第一代子元素

eg：

.aa > li {border:1px solid red;}

類別為aa的li元素加入1px紅色實線邊框

10.後位選擇器

.first span {color:red;}
<p class="first">.......<span>胆小如鼠</span></p>

即膽小如鼠被填滿為紅色

11.子選擇器與後代選擇器的區別：

（1）子選擇器：直接後代－">"

（2）後代選擇器：所有後代－空格

12.通用選擇器（*）

#符合HTML的所有標籤元素

13.分組選擇符(,)

h1,span{color:red;}

#14.繼承（CSS樣式）

不僅套用於某個特定的HTML標籤元素，而且應用於其後代。

eg:

p{color:red;}
<p>我小时候<span>胆小如鼠</span></p>

我小時候膽小如鼠，字體全部都是紅色，包括膽小如鼠。 （繼承關係）

15.特殊性：

eg:

p{color:red;}
.first{color:green;}
<p class="first">我小时候<span>胆小如鼠</span></p>

註：

p,. first都符合p標籤的CSS屬性，瀏覽器根據權值來判斷使用哪一種CSS的樣式

（標籤的權值為1；類別選擇符的權值為10；ID選擇器的權值為100）

eg:

代码                                                                                                      权值
p{color:red;}                                                                                             1
p span{ color:green;}                                                                             1+1=2
.warning{ color:white;}                                                                           10
p span .warning { color:purple;}                                                             1+1+10=12
#footer .note p { color:yellow;}                                                               100+10+1=111

16.重要性

CSS樣式設定最高權值－important

#eg:

p { color:red !important;}
p { color:green;}

則字體為紅色

註：

樣式優先權：

瀏覽器預設樣式aca859f2af1d745c708d22bb021a3fcf,d5fd7aea971a85678ba271703566ebfd

和其他元素都在一行上

元素的高度、宽度、行高及顶和底边距都不可设置

18.

转换成块级元素：   a { display:block;}

转换成内联元素：   a { display:inline;}

转换成内联块级元素：   a { display:inline-block;}

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费html在线视频教程

3. php.cn原创html5视频教程

以上是分享HTML中18個基礎的概念的詳細內容。更多資訊請關注PHP中文網其他相關文章！