整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
頁
網(wǎng)站是使用HTML等制作的用于展示特定內容相關的網(wǎng)頁集合
網(wǎng)頁是網(wǎng)站中的一“頁”，通常是HTML格式的文件，需要通過瀏覽器來閱讀。
網(wǎng)頁是構成網(wǎng)站的基本元素，它通常由圖片、連接、文字、聲音、視頻等元素組分。一般以.htm或.HTML為后綴名的文件，都是HTML文件。
什么是html
html是超文本標記語言，它是用來描述網(wǎng)頁的一種語言。
1、可以加入圖片、聲音、動畫、多媒體文件等內容。
2、還可以從一盒文件跳轉到另一個文件，與世界各地主機的文件連接。
網(wǎng)頁是由網(wǎng)頁元素組成，這些元素是利用html標簽描述出來的，通過瀏覽器顯示給用戶。
靜/動態(tài)區(qū)別：
靜態(tài)：
XX.htm、xx. Html
區(qū)分方式：網(wǎng)頁中數(shù)據(jù)的提取來源方式
動態(tài)：
Xx.jsp、xx.php、xx.asp、xx.cgi
頁面中的數(shù)據(jù)可以通過和數(shù)據(jù)庫等其他來源提取
動靜態(tài)交互使用
Html語句的語法的基本單位：
標簽、標記
tag<標簽單詞><標簽單詞 屬性名1=”屬性值” 屬性名1=”屬性值”>
多數(shù)標簽成對使用，相對少數(shù)標簽非成對（獨立）使用<img>獨立使用
<a> ... </a> 制作超級鏈接
1. 創(chuàng)建文本文件
2. 書寫html代碼（標簽）
3. 保存文件
4. 文件名后綴改為.Html或.html
5. 瀏覽器打開以上網(wǎng)頁文件
標簽不能書寫中文，只能是英文
代碼中“空格”為縮進
嵌套
<html>
<head> </head>
<body> </body>
</html>
<font></font>修飾文字
字形face Font size=“1--7”字體大小 color顏色
<em></em>強調，斜體字
<p>段落文字</p>
<img src=”圖片文件名”alt=”xxxxx”width=”像素寬度”height=”像素高度”>
絕對路徑：”file：///D:/html/11.jpg”
相對路徑：”../src/1.html/11.jpg”
<a>超鏈接</a>
頁間跳轉
<a href=”http://www.baidu.com”>文字、圖片</a>
<a href=”../src/1.html”>文字、圖片</a>
頁內跳轉（標簽需要成對出現(xiàn)）href=作為起點name=作為結尾需要去到的地方
<a Href=”#變量名”>....</a>
..................
<a name=”變量名”>xxx</a>
<a href=”..../#t1”
兩者結合使用<a href=”http://www.baidu.com/news/#變量名”>
...............
<a name=”變量名”></a>
“彈幕”滾動標簽
標簽在不同瀏覽器當中打開時的內容是不一樣的
可用GRB單詞進行顏色查找
獨立使用標簽：<img>< hr>< br換行>在需要換行的地方輸入即可
空格在html中作為特殊符號使用：作為分隔符“ ”
Html中漢字不作為標簽符
<；&abc>；作為括號使用
字符集不同會出現(xiàn)亂碼
Align水平對齊屬性；left、right、center
注釋 屏蔽代碼
Dos批處理 在注釋前加上“rem”
Html <!-- 注釋的內容...... - ->
擴展<META>元數(shù)據(jù)標簽
標簽名稱、獨立使用、主要作用
放在<head></head>中執(zhí)行 部分功能在瀏覽器打開時就開始工作
Charset 字符集
Set 賦值
Set 集合
Th 保存表格數(shù)據(jù)的單位，等同于<td>。但自帶居中加粗顯示
Td、th單元格合并：
同行左右單元格合并colspan=”n”
同列上下單元格合并rowspan=”n”
家都知道我們前兩章的課程中，我們在寫標簽時候，在瀏覽器中顯示的效果跟我們需要的效果有很大差距，比如我們要改變一下文字的顏色，改變一下背景顏色，改變一下字體等，那應該辦呢？我們天天說HTML是結構，CSS是表現(xiàn)，應該怎么解釋這兩個概念呢？HTML是結構，也就是如是需要寫一個網(wǎng)頁了，得先看看要生成這個網(wǎng)頁需要那些標簽，也就是搭建一下頁面結構，結構搭好了，就像我們買了房子一樣，房子就是結構，如果房子搭建好了但不裝修，覺得還是不美觀，那應該怎么辦呢？那就得用CSS來修飾一下我們HTML標簽，所以CSS的主要作用就是修飾HTML標簽的。那我們一起來了解一下什么是CSS吧！
通過以下幾方面了解CSS：
√ CSS的概念
√ CSS的作用
√ CSS的發(fā)展史
√ CSS的樣式的定義方式
√ CSS的樣式表
√ CSS的樣式表的優(yōu)先級
√ CSS的選擇器分類
√ CSS的基本選擇器
√ CSS選擇器的優(yōu)先級及權重
√ CSS的基本樣式
√ CSS的尺寸單位介紹
√ CSS的顏色值表示法
好了我們先來看一下CSS的概念：
一、 CSS的概念
CSS：層疊樣式表(Cascading Style Sheet)
二、 CSS的作用
用于控制網(wǎng)頁的外觀，修飾和美化html標簽的,實現(xiàn)了結構和形式的分離。 另外大家注意我們采用的是DIV+CSS布局頁面，那相對以前傳統(tǒng)的TABLE網(wǎng)頁布局頁面有什么優(yōu)勢呢？有以下三點：
1：表現(xiàn)和內容相分離
2：提高頁面瀏覽速度
3：易于維護和改版
好的我們再來了解一下CSS的發(fā)展史
三、 CSS的發(fā)展史
CSS3每個時間段又發(fā)布了那些屬性呢，我們看一下下面的介紹。
說了這么多，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屬性值。這種樣式表用的比較少，因為沒有實現(xiàn)結構與表現(xiàn)的分離。
代碼：
<h3 style="color:red;">行內樣式表實現(xiàn)我變了顏色！</h3>
<p style="color:red;">行內樣式表實現(xiàn)我變了顏色！</p>
頁面顯示效果
2. 內嵌式樣式表：就是將CSS添加到<head>與</head>之間，并用<style></style>標記聲明的一種樣式表。這種樣式表用的比較少，因為沒有實現(xiàn)結構與表現(xiàn)的分離。
語法：<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>內部樣式表實現(xiàn)我變了顏色！</h3>
<p>內部樣式表實現(xiàn)我變了顏色！</p>
</body>
</html>
頁面效果：
3. 外部鏈接式樣式表：在外部定義CSS樣式表，通過<link/>鏈接標記鏈接到頁面中的一種樣式表。經(jīng)常使用，這種樣式表非常常用，不僅實現(xiàn)了結構與表現(xiàn)的分離，而且易于維護和改版。
語法： <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>外部鏈接式樣式表實現(xiàn)我變了顏色！</h3>
<p>外部鏈接式樣式表實現(xiàn)我變了顏色！</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>外部導入式樣式表實現(xiàn)我變了顏色！</h3>
<p>外部導入式樣式表實現(xiàn)我變了顏色！</p>
</body>
</html>
CSS代碼
h3 {
color: red;/*這里color是CSS屬性，red是CSS屬性值*/
}
p {
color: red;
}
頁面效果
通過以上四種樣式表的比較，以后我們最常用的樣式表就是鏈接式樣式表，另外假如幾種樣式表如果同時存在的話，那就應該識別誰的樣式呢？我們一起來看一下CSS樣式表的優(yōu)先級。
六CSS樣式表的優(yōu)先級
假如行內樣式表和內部樣式表同時存在時，應該識別是誰的樣式呢？當然是行內樣式表了！
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式表</title>
<style>
h3{color: blue;}
</style>
</head>
<body>
<h3 style="color: red;">行內樣式表和內部樣式表，行內的優(yōu)先級高！</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屬性值*/
}
頁面顯示效果
總之一句話樣式表的優(yōu)先級遵循的原則就是：就近原則！
好了， 我們掌握了樣式表，我們知道樣式是寫在樣式表里的，我們大家還記得樣式的語法嗎？回顧一下：
樣式的寫法：
選擇器{樣式1：樣式值1；樣式2：樣式值2；……}
那CSS的選擇器有哪些呢？明天，我們將繼續(xù)學習選擇器。
ss就如同一件化妝品，能夠使得單調的網(wǎng)頁變得豐富多彩。在這裝飾網(wǎng)頁的背后，本質上就是對一個一個html標簽進行修飾，如何選擇特定的html標簽，這就尤其關鍵。
目標
如果想改變一張圖片的某個部分的顏色，例如將下面圖片左側頭發(fā)改變?yōu)榧t色，或者將左側的衣服改為黑色。
首先肯定是先選擇一個目標（頭發(fā)，衣服），然后對這個目標進行樣式的修改。
對比圖
一個網(wǎng)頁里，往往包含了眾多的html標簽，因為有選擇器存在，你才能夠選擇特定的目標（html標簽）來進行樣式的修改。
這種選擇器是css最基本的選擇器類型，以html標簽作為選擇器
優(yōu)點：簡單明了，可以對全局標簽做統(tǒng)一樣式標準
缺點：所有同一個標簽都只能使用同一個樣式，無法對特定標簽做差異化
html標簽
標簽選擇器
效果
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式，這個標識如同人的身份證，具有唯一性。
HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。
雖然瀏覽器現(xiàn)允許多個相同id出現(xiàn)，但十分不建議這樣，因為在js里，它無法知道哪個是真的id 選擇器。
優(yōu)點：可以對某個元素指定特定的樣式
缺點：無法對樣式復用，只能用于一個元素
html標簽
id選擇器
效果
Class選擇器是css經(jīng)常使用的選擇器類型，用于描述一組元素的樣式，class 選擇器有別于id選擇器，class最大的特點是可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示
優(yōu)點：可以對某個元素指定特定的樣式；可以對多個元素使用同一個樣式，達到復用效果
缺點：無
html標簽
class選擇器
基本選擇器總結
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
