Html基本理論與標簽使用

頁
網站是使用HTML等制作的用于展示特定內容相關的網頁集合
網頁是網站中的一“頁”，通常是HTML格式的文件，需要通過瀏覽器來閱讀。
網頁是構成網站的基本元素，它通常由圖片、連接、文字、聲音、視頻等元素組分。一般以.htm或.HTML為后綴名的文件，都是HTML文件。
什么是html
html是超文本標記語言，它是用來描述網頁的一種語言。
1、可以加入圖片、聲音、動畫、多媒體文件等內容。
2、還可以從一盒文件跳轉到另一個文件，與世界各地主機的文件連接。
網頁是由網頁元素組成，這些元素是利用html標簽描述出來的，通過瀏覽器顯示給用戶。
靜/動態區別：
靜態：
XX.htm、xx. Html
區分方式：網頁中數據的提取來源方式
動態：
Xx.jsp、xx.php、xx.asp、xx.cgi
頁面中的數據可以通過和數據庫等其他來源提取
動靜態交互使用

Html語句的語法的基本單位：

標簽、標記

tag<標簽單詞><標簽單詞屬性名1=”屬性值” 屬性名1=”屬性值”>

多數標簽成對使用，相對少數標簽非成對（獨立）使用<img>獨立使用

<a> ... </a> 制作超級鏈接

1. 創建文本文件

2. 書寫html代碼（標簽）

3. 保存文件

4. 文件名后綴改為.Html或.html

5. 瀏覽器打開以上網頁文件

標簽不能書寫中文，只能是英文

代碼中“空格”為縮進

嵌套

<html>

</html>

<font></font>修飾文字

字形face Font size=“1--7”字體大小 color顏色

<em></em>強調，斜體字

絕對路徑：”file：///D:/html/11.jpg”

相對路徑：”../src/1.html/11.jpg”

頁間跳轉

頁內跳轉（標簽需要成對出現）href=作為起點name=作為結尾需要去到的地方

..................

<a href=”..../#t1”

兩者結合使用<a href=”http://www.baidu.com/news/#變量名”>

...............

“彈幕”滾動標簽

標簽在不同瀏覽器當中打開時的內容是不一樣的

可用GRB單詞進行顏色查找

獨立使用標簽：<img>< hr>< br換行>在需要換行的地方輸入即可

空格在html中作為特殊符號使用：作為分隔符“ ”

Html中漢字不作為標簽符

<；&abc>；作為括號使用

字符集不同會出現亂碼

Align水平對齊屬性；left、right、center

注釋屏蔽代碼

Dos批處理在注釋前加上“rem”

Html <!-- 注釋的內容...... - ->

擴展<META>元數據標簽

標簽名稱、獨立使用、主要作用

放在<head></head>中執行部分功能在瀏覽器打開時就開始工作

Charset 字符集

Set 賦值

Set 集合

Th 保存表格數據的單位，等同于<td>。但自帶居中加粗顯示

Td、th單元格合并：

同行左右單元格合并colspan=”n”

同列上下單元格合并rowspan=”n”

家都知道我們前兩章的課程中，我們在寫標簽時候，在瀏覽器中顯示的效果跟我們需要的效果有很大差距，比如我們要改變一下文字的顏色，改變一下背景顏色，改變一下字體等，那應該辦呢？我們天天說HTML是結構，CSS是表現，應該怎么解釋這兩個概念呢？HTML是結構，也就是如是需要寫一個網頁了，得先看看要生成這個網頁需要那些標簽，也就是搭建一下頁面結構，結構搭好了，就像我們買了房子一樣，房子就是結構，如果房子搭建好了但不裝修，覺得還是不美觀，那應該怎么辦呢？那就得用CSS來修飾一下我們HTML標簽，所以CSS的主要作用就是修飾HTML標簽的。那我們一起來了解一下什么是CSS吧！

通過以下幾方面了解CSS：

√ CSS的概念

√ CSS的作用

√ CSS的發展史

√ CSS的樣式的定義方式

√ CSS的樣式表

√ CSS的樣式表的優先級

√ CSS的選擇器分類

√ CSS的基本選擇器

√ CSS選擇器的優先級及權重

√ CSS的基本樣式

√ CSS的尺寸單位介紹

√ CSS的顏色值表示法

好了我們先來看一下CSS的概念：

一、 CSS的概念

CSS：層疊樣式表(Cascading Style Sheet)

二、 CSS的作用

用于控制網頁的外觀，修飾和美化html標簽的,實現了結構和形式的分離。另外大家注意我們采用的是DIV+CSS布局頁面，那相對以前傳統的TABLE網頁布局頁面有什么優勢呢？有以下三點：

1：表現和內容相分離

2：提高頁面瀏覽速度

3：易于維護和改版

好的我們再來了解一下CSS的發展史

三、 CSS的發展史

CSS3每個時間段又發布了那些屬性呢，我們看一下下面的介紹。

說了這么多，CSS到底是怎么定義的呢？

四、 CSS的樣式的定義方式

CSS樣式定義在樣式表中 ,然后再定義樣式：

選擇器{樣式1：樣式值1；樣式2：樣式值2；……}

寫到這里大家應該猜到我們接下來要講什么了吧，猜對了，就是要講CSS樣式表了！我們一起來看吧！

五、 CSS的樣式表

CSS的樣式表有那些呢？

1、行內樣式表：在HTML標記內，使用style屬性定義CSS樣式。

語法：<p style=”color:red;”></p>

style=” ” 這句話就是行內樣式表，雙引號里面寫的就CSS樣式（或者叫CSS屬性）及樣式值（CSS屬性值），這里的color是CSS屬性，red是CSS屬性值。這種樣式表用的比較少，因為沒有實現結構與表現的分離。

代碼：

<h3 style="color:red;">行內樣式表實現我變了顏色！</h3>
<p style="color:red;">行內樣式表實現我變了顏色！</p>

頁面顯示效果

2. 內嵌式樣式表：就是將CSS添加到<head>與</head>之間，并用<style></style>標記聲明的一種樣式表。這種樣式表用的比較少，因為沒有實現結構與表現的分離。

語法：<style>

/*這里寫css內容*/

</style>

代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式表</title>
<style type="text/css">
h3{
color:red;/*這里color是CSS屬性，red是CSS屬性值*/
}
p{
color:red;
}
</style>
</head>
<body>
<h3>內部樣式表實現我變了顏色！</h3>
<p>內部樣式表實現我變了顏色！</p>
</body>
</html>

頁面效果：

3. 外部鏈接式樣式表：在外部定義CSS樣式表，通過<link/>鏈接標記鏈接到頁面中的一種樣式表。經常使用，這種樣式表非常常用，不僅實現了結構與表現的分離，而且易于維護和改版。

語法： <link href="style.css" rel="stylesheet" type="text/css" />

HTML代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式表</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<h3>外部鏈接式樣式表實現我變了顏色！</h3>
<p>外部鏈接式樣式表實現我變了顏色！</p>
</body>
</html>

CSS代碼：

h3 {
color: red;/*這里color是CSS屬性，red是CSS屬性值*/
}
p {
color: red;
}

頁面顯示效果

4. 外部導入式樣式表：在外部定義css樣式表，通過導入方式鏈接到頁面中的一種樣式表，使用不多，因為語法不如鏈接式樣式表簡單。

語法：

<style>

@import url(CSS路徑);

</style>

HTML代碼:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式表</title>
<style>
@import url("css/style.css");
</style>
</head>
<body>
<h3>外部導入式樣式表實現我變了顏色！</h3>
<p>外部導入式樣式表實現我變了顏色！</p>
</body>
</html>

CSS代碼

h3 {
color: red;/*這里color是CSS屬性，red是CSS屬性值*/
}
p {
color: red;
}

頁面效果

通過以上四種樣式表的比較，以后我們最常用的樣式表就是鏈接式樣式表，另外假如幾種樣式表如果同時存在的話，那就應該識別誰的樣式呢？我們一起來看一下CSS樣式表的優先級。

六CSS樣式表的優先級

假如行內樣式表和內部樣式表同時存在時，應該識別是誰的樣式呢？當然是行內樣式表了！

HTML代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式表</title>
<style>
h3{color: blue;}
</style>
</head>
<body>
<h3 style="color: red;">行內樣式表和內部樣式表，行內的優先級高！</h3>
</body>
</html>

頁面顯示效果

內部樣式表和鏈接式樣式同時存在時，誰的高呢？當然是誰離所修飾的HTML標簽近，誰就高。（遵循的原則就是就近原則）

HTML代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式表</title>
<style>
h3{color: blue;}
</style>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<h3>內部樣式表和外部樣式表，誰離我近我識別誰的顏色！</h3>
</body>
</html>

CSS代碼

h3 {
color: red;/*這里color是CSS屬性，red是CSS屬性值*/
}

頁面顯示效果

仔細看看上面的代碼，再來看看下面的代碼

HTML代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式表</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<style>
h3{color: blue;}
</style>
</head>
<body>
<h3>內部樣式表和外部樣式表，誰離我近我識別誰的顏色！</h3>
</body>
</html>

CSS代碼

h3 {
color: red;/*這里color是CSS屬性，red是CSS屬性值*/
}

頁面顯示效果

總之一句話樣式表的優先級遵循的原則就是：就近原則！

好了，我們掌握了樣式表，我們知道樣式是寫在樣式表里的，我們大家還記得樣式的語法嗎？回顧一下：

樣式的寫法：

選擇器{樣式1：樣式值1；樣式2：樣式值2；……}

那CSS的選擇器有哪些呢？明天，我們將繼續學習選擇器。

ss就如同一件化妝品，能夠使得單調的網頁變得豐富多彩。在這裝飾網頁的背后，本質上就是對一個一個html標簽進行修飾，如何選擇特定的html標簽，這就尤其關鍵。

目標

選擇器的意義？
3種基本選擇器的用法

選擇器的意義

如果想改變一張圖片的某個部分的顏色，例如將下面圖片左側頭發改變為紅色，或者將左側的衣服改為黑色。

首先肯定是先選擇一個目標（頭發，衣服），然后對這個目標進行樣式的修改。

對比圖

一個網頁里，往往包含了眾多的html標簽，因為有選擇器存在，你才能夠選擇特定的目標（html標簽）來進行樣式的修改。

標簽選擇器

這種選擇器是css最基本的選擇器類型，以html標簽作為選擇器

優點：簡單明了，可以對全局標簽做統一樣式標準

缺點：所有同一個標簽都只能使用同一個樣式，無法對特定標簽做差異化

html標簽

標簽選擇器

效果

ID選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式，這個標識如同人的身份證，具有唯一性。

HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。

雖然瀏覽器現允許多個相同id出現，但十分不建議這樣，因為在js里，它無法知道哪個是真的id 選擇器。

優點：可以對某個元素指定特定的樣式

缺點：無法對樣式復用，只能用于一個元素

html標簽

id選擇器

效果

Class選擇器

Class選擇器是css經常使用的選擇器類型，用于描述一組元素的樣式，class 選擇器有別于id選擇器，class最大的特點是可以在多個元素中使用。

class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示

優點：可以對某個元素指定特定的樣式；可以對多個元素使用同一個樣式，達到復用效果

缺點：無

html標簽

class選擇器

總結

基本選擇器總結

在線咨詢

上一篇：CSS 父元素中的絕對定位
下一篇：html簡單的二級菜單制作

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Html基本理論與標簽使用

選擇器的意義

標簽選擇器

ID選擇器

Class選擇器

總結

您的項目需求