論HTML和CSS之間的關系-硬核解答！

站分靜態網站和動態網站，相信小伙伴們對這兩個詞略有耳聞或者已經了解，那么小編還是啰嗦一下這兩種網站有什么區別。

01

網頁上的內容是隨著數據庫讀取出來的內容不一樣或者用戶操作不一樣而改變的，舉個例子，比如網頁上的用戶登錄，剛訪問網頁的時候用戶登錄狀態是無登錄狀態，當用戶點擊登錄，彈出輸入賬號密碼的窗口的時候，這還不算是動態，還屬于靜態，那么接下來，用戶點擊登錄按鈕，網頁將賬號密碼提交到服務器后臺，服務器把賬戶密碼拿去跟數據庫里面存的做比較，如果一樣，則登錄成功，網頁顯示登錄成功狀態，如果核對沒有完全一致，則登錄失敗，網頁保持無登錄狀態。

像這種隨著用戶操作而改變內容的網站，才稱之為動態網頁。

02

看了上面的動態網站，其實對靜態網站也能有一定理解了，不理解也沒關系，這里再詳細說明下！靜態網站是指網站無論用戶操作什么，都是一模一樣的，不會有任何改變，那么有小伙伴可能又要問了，有些網站上有導航欄，我點擊首頁，會跳轉到首頁，點擊關于我們，又換了一個頁面，這難道不是動態嗎？不是的，這是靜態，你無論怎么操作，你會發現你跳轉來跳轉去的網頁長得一摸一樣，沒有任何改變。

其實除了看網頁變化來判斷是靜態網頁還是動態網頁之外，還有個方法，看網頁地址欄的擴展名，如果.html就是靜態網頁，如果是.asp或者.php那就是動態網頁。但是這種說法并不完全正確，現在可以動靜分離，可以理解為有沒有數據庫支持！

如圖所示是我在網絡上找到的一個asp動態網站。Html網站網上非常多一抓一大把，php也不少，有興趣的小伙伴可以自己上網搜索下！

接下來進入主題，我們先來看看我們今天要實現的效果是什么？

鼠標經過有效果對吧。

我們先看看效果圖：

這是一個網站的導航欄

接下來我們把鼠標放上去看看會發生什么？

這種神奇的效果要如何設計呢？大家都知道網頁設計的三大利器是什么？

答案：HTML+CSS+JavaScript

本章的這個案例我們只需要用到HTML+CSS，還是很簡單的，我們先來看看導航欄怎么寫：

<!DOCTYPE html>
<html>
<head>
<title>August精彩編程</title>
</head>
<body>
<div class="header">
<a href="#"><img src="logo.png"></a>
<div class="header-word">
<ul>
<a href="#"><li>CONTACT</li></a>
<a href="#"><li>EVENTS</li></a>
<a href="#"><li>FACULTY</li></a>
<a href="#"><li>GALLERY</li></a>
<a href="#"><li>ABOUT</li></a>
<a href="#"><li>HOME</li></a>
</ul>
</div>
</div>
<div class="clear"></div>
</body>
</html>

這樣寫我們的導航欄就寫出來了，但是效果是什么樣的呢？

我們需要對這個頁面加上CSS（層疊樣式表）。代碼如下：

<!DOCTYPE html>
<html>
<head>
<title>August精彩編程</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
}
html{
height: 2400px;
}
.header{
width: 100%;
height: 100px;
background:#07cbc9;
}
.header img{
height: 48px;
width: 260px;
padding: 26px 26px;
padding-left: 10%;
float: left;
}
a{
color: #fff;
text-decoration: none;
}
.header .header-word{
padding-right:75px;
}
.header .header-word ul li{
float: right;
font-size: 16px;
font-family: "微軟雅黑";
padding-right: 10px;
padding-left: 10px;
list-style: none;
line-height: 100px;
color: #fff;
}
</style>
</head>
<body>
<div class="header">
<a href="#"><img src="logo.png"></a>
<div class="header-word">
<ul>
<a href="#"><li>CONTACT</li></a>
<a href="#"><li>EVENTS</li></a>
<a href="#"><li>FACULTY</li></a>
<a href="#"><li>GALLERY</li></a>
<a href="#"><li>ABOUT</li></a>
<a href="#"><li>HOME</li></a>
</ul>
</div>
</div>
<div class="clear"></div>
</body>
</html>

然后效果就出來啦，如圖所示：

接下來就是今天我們所學內容最核心的內容，涉及到4個CSS的鏈接偽類。

鏈接偽類，是指鏈接的四個狀態：激活狀態（active）、已訪問狀態（visited）、未訪問狀態（link）、鼠標經過狀態（hover）。

那么我們今天要使用的就是鼠標經過狀態（hover），怎么使用呢？看已下這段CSS：

.header .header-word ul li:hover{
float: right;
font-size: 16px;
font-family: "Microsoft YaHei UI";
padding-right: 10px;
padding-left: 10px;
list-style: none;
line-height: 100px;
background: #000;
color: #fff;
}

是噠，這樣就完成了我們今天要制作的效果。

接下來附上完整代碼：

<!DOCTYPE html>
<html>
<head>
<title>August精彩編程</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
}
html{
height: 2400px;
}
.header{
width: 100%;
height: 100px;
background:#07cbc9;
}
.header img{
height: 48px;
width: 260px;
padding: 26px 26px;
padding-left: 10%;
float: left;
}
a{
color: #fff;
text-decoration: none;
}
.header .header-word{
padding-right:75px;
}
.header .header-word ul li{
float: right;
font-size: 16px;
font-family: "微軟雅黑";
padding-right: 10px;
padding-left: 10px;
list-style: none;
line-height: 100px;
color: #fff;
}
.header .header-word ul li:hover{
float: right;
font-size: 16px;
font-family: "Microsoft YaHei UI";
padding-right: 10px;
padding-left: 10px;
list-style: none;
line-height: 100px;
background: #000;
color: #fff;
}
</style>
</head>
<body>
<div class="header">
<a href="#"><img src="logo.png"></a>
<div class="header-word">
<ul>
<a href="#"><li>CONTACT</li></a>
<a href="#"><li>EVENTS</li></a>
<a href="#"><li>FACULTY</li></a>
<a href="#"><li>GALLERY</li></a>
<a href="#"><li>ABOUT</li></a>
<a href="#"><li>HOME</li></a>
</ul>
</div>
</div>
<div class="clear"></div>
</body>
</html>

04

那么小伙伴們可能有疑問了，如何才能學好HTML和CSS呢？

首先！

HTML是最容易讓人堅持學下去的編程語言。

因為HTML寫的網頁隨時可以看到效果。

首先，就拿C語言舉例子，C語言學過的都知道，初學是在黑色的命令行窗口運行，除非掌握特別好，很精通那種，否則基本上只跟黑色窗口打交道了。

那有沒有可能你也學到那個地步呢？

可能的，但是這讓我想起某大學數據結構課程的老師的頭頂光滑程度。

但是HTML和CSS就不一樣了，哪怕只有10行代碼，你都可以在瀏覽器看到你開發的網頁！

差距就是這么大。

前端開發中HTML和CSS可以說是非常重要的內容了。

那如何學好HTML，為今后參與工作（或者說是防止掛科）打下基礎呢？

這還用說，學習唄！

廢話不多說，小編送你們HTML和CSS課程，有案例有答疑還不用錢，轉發本文，然后私信小編，小編就發給你??????

.行內式

直接在標簽后面添加該標簽的屬性值

例如:

二.嵌入式

在title標簽后添加<style type="text/css"></style>

注意：需要將樣式放入<head></head>中

例如：

<!DOCTYPE html>

<head>

<title>css樣式使用</title>

body{

background-color: antiquewhite;

}

background-color: aqua;

}

</style>

</head>

<body>

<h1>CSS使用規則</h1>

<p>CSS使用規則/p>

</body>

三.導入式

創建css樣式表如mystyle.css，再在HTML中鏈接此mystyle.css樣式表。

@import"mystyle.css"

</style>

四.鏈接式

創建css樣式表如style.css，再在HTML中鏈接此style.css樣式表。

例如：

HTML例子：

<!DOCTYPE html>

<head>

<title>css樣式使用</title>

</head>

<body>

<h1>CSS使用規則</h1>

<p>CSS使用規則/p>

</body>

</html>

CSS例子：

body{

background-color: antiquewhite;

font-size: 17px;

}

結果圖：

五.采用導入式和鏈接式還是有不同的區別的：

1.使用鏈接式時，會在加載頁面主體部分之前裝載CSS文件，這樣顯示出來頁面一開始就是帶有樣式效果的；

使用導入式時，會在整個頁面裝載完成后在裝載CSS文件，對于有的瀏覽器來說，在一些情況下，如果網頁文件體積比較大的的時候，則會出現先顯示無樣式的頁面，閃爍一下在出現設置樣式后的效果，對于瀏覽者的感受，這是導入式的一個缺陷。

2.對于一些較大的網站，為了便于維護，可能會希望把所有的CSS樣式分類別放到幾個CSS文件中，如果這樣使用鏈接式引入，就需要幾個語句分別導入CSS文件。如果要調整CSS文件的分類，就需要同時調整HTML文件。這對于維護工作來說，是一個巨大的缺陷。如果使用導入式，則可以只引進一個總的CSS文件，在這個文件中在導入其他獨立的CSS文件；而鏈接式則不具備這個功能。

因此，建議如果需要引入一個CSS文件，則使用鏈接方式；如果需要引入多個CSS文件，則首先用鏈接方式引入一個“目錄”CSS文化，在這個“目錄”CSS文件中再使用導入式引入其他CSS文件。

但是，若是希望通過JavaScript來動態決定引入哪個CSS文件，則必須使用鏈接方式才能實現。

TML教程

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。

您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

在本教程中，您將學習如何使用 HTML 來創建站點。

HTML 很容易學習！相信您能很快學會它！

本教程包含了數百個 HTML 實例。

使用本站的編輯器，您可以輕松實現在線修改 HTML，并查看實例運行結果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孫叫獸的博客</title>
    </head>
    <body>
        <h1>我的第一個標題</h1>
        <p>我的第一個段落。</p>
    </body>
</html>

HTML 文檔的后綴名

.html

.htm

都可以。

HTML 簡介

實例：

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</header>
<body>
<h1>這是我的標題</h1>
<p>這是我的段落</p>
</body>
</html>

實例解析

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數據，如 <meta charset=“utf-8”> 定義網頁編碼格式為 utf-8。
<title> 元素描述了文檔的標題
<body> 元素包含了可見的頁面內容
<h1> 元素定義一個大標題
<p> 元素定義一個段落

什么是HTML？

HTML 是用來描述網頁的一種語言。
HTML 指的是超文本標記語言: HyperText Markup Language
HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網頁
HTML 文檔包含了HTML 標簽及文本內容
HTML文檔也叫做 web 頁面
HTML 標簽
HTML 標記標簽通常被稱為 HTML

標簽

HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>

HTML 標簽通常是成對出現的，比如 <b> 和 </b>

標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽

開始和結束標簽也被稱為開放標簽和閉合標簽

<標簽>內容</標簽>

html元素

“HTML 標簽” 和 “HTML 元素” 通常都是描述同樣的意思.

但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例:

HTML 元素:

<p>這是一個段落</p>

web瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于讀取HTML文件，并將其作為網頁顯示。

瀏覽器并不是直接顯示的HTML標簽，但可以使用標簽來決定如何展現HTML頁面的內容給用戶

html網頁結構

<html>
    <head>
        <title>頁面標題</title>
    </head>
    <body>
        <h1>這是一個標題</h1>
        <p>這是一個段落。</p>
        <p>這是另外一個段落。</p>
    </body>
</html>

html的版本：

<!DOCTYPE>聲明

<!DOCTYPE>聲明有助于瀏覽器中正確顯示網頁。

網絡上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網頁內容。

doctype 聲明是不區分大小寫的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

html5

<!DOCTYPE html>

html4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">

xhtml1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文編碼

目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字符聲明為 UTF-8。

在線咨詢

上一篇：HTML 簡單的<li> 標簽
下一篇：前端三大技術 HTML、CSS、JavaScript 快速入門手冊

您的項目需求

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

整合營銷服務商

論HTML和CSS之間的關系-硬核解答！

01

02

04

您的項目需求