1.HTML：
Hpyer Text Markup Langage
Hpyer Text：超文本語言（文字，圖片，鏈接，音頻，視訊等）
區分：普通文字－Word text（文字，表格，圖片）
#Markup：標籤
<標籤屬性=「值」>< ;/標籤>
一個標籤可以有多個屬性，一個屬性可以有多個值，屬性和屬性之間，值和值之間用空格隔開
Langage：語言
HTML是用各種標籤將超文本內容包起來，然後按照順序來寫
#2.文檔流順序：
將瀏覽器視窗自上而下，分成一行一行的。每一行從左到右排列元素
將瀏覽器視窗自上而下，分成一行一行，每一行從左到右排列元素，就叫文檔流順序
3.HTML結構標籤
HTML：總標籤，告訴瀏覽器，這是一個HTML的文檔，一個頁面只能有一個
head：頭部標籤，包含文檔的相關訊息，在瀏覽器視窗不顯示，一個頁面只能有一個
body：身體標籤，包含所有超文本內容，在瀏覽器的視窗顯示，一個頁面只能有一個
meta：提供頁面的相關信息，一個頁面可以有多個。 閉合方式特殊
title：描述頁面相關內容，一個頁面只能有一個
！ DOCTYPE：聲明標籤，告訴瀏覽器該文件所使用的規範符號W3C規範，沒有結束標籤，頁不寫入HTML內部
4.W3C規格：
# （1）標籤字母必須要小寫
（2）有開始標籤就要有結束標籤，標籤的閉合方式有兩種。
<標籤>
<標籤/>
#(3)標籤的值一定要用雙引號，如{< ;標籤屬性="值">}
（4）出現的所有符號必須是英文符號
#（5）標籤+內容=元素
5.三種CSS樣式：
CSS（cascading style sheets）層疊樣式表
作用：用於定義HTML內容在瀏覽器內的顯示樣式
（1）內聯式CSS樣式：
這裡的文字是紅色的
（2）嵌入式css樣式
嵌入式CSS樣式必須寫在之間。
（3）外部式CSS樣式（.css為副檔名）
外部式CSS寫在
內
使用標籤將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;}登入後複製
則字體為紅色
註：
樣式優先權：
瀏覽器預設樣式< 網頁製作者樣式<使用者自行設定的樣式
17.元素分類
HTML中的標籤元素大體被分成三種不同的類型：
#（1 ）區塊級元素：——用來建構框架
每个块级元素都从新的一行开始，并且其后的元素另起一行。（独占一行）
元素的高度，宽度，行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。
eg:
<p> <p> <h1>...<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>
登入後複製
（2）内联元素：——修饰细节
自左向右排列，直到排不下自动换行。宽高无效，随内容而定。
eg:
<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>
登入後複製
（3）内联块级元素——![]()
,
和其他元素都在一行上
元素的高度、宽度、行高及顶和底边距都不可设置
18.
转换成块级元素： a { display:block;}
转换成内联元素： a { display:inline;}
转换成内联块级元素： a { display:inline-block;}
【相关推荐】
1. 特别推荐：“php程序员工具箱”V0.1版本下载
2. 免费html在线视频教程
3. php.cn原创html5视频教程
以上是分享HTML中18個基礎的概念的詳細內容。更多資訊請關注PHP中文網其他相關文章！
