basil_2020 ·HTML 與 CSS 基礎入門
正所謂，知己知彼，百戰(zhàn)不殆。我們爬蟲的爬取對象，就是各式各樣的網(wǎng)頁，只有對網(wǎng)頁的基本內容達到熟悉的程度，才能順利的書寫我們的爬蟲程序。
1. HTML 基礎
-
HTML（HyperText Markup Language）是一種超文本標記語言；
-
CSS（Cascading Style Sheets）簡稱為層疊樣式表。
大家如果只是看這兩個名字的定義，估計仍然是一頭霧水。這倆東西到底是干啥的？
我給大家舉一個例子就明白了，大家應該都畫過畫吧，即使沒有親自畫過應該也見過。畢竟吃豬肉和見豬跑你總得占一樣吧。
在畫畫的時候，我們首先會拿畫筆勾勒出圖形的樣式骨架，之后會涂上一些好看的顏色讓畫變的更美觀。我們寫網(wǎng)頁的時候也是一樣的道理，HTML 就相當于畫筆，用于勾勒頁面的骨架。CSS 則是好看的顏色，讓頁面的樣式更加美觀。
下面我們來認識一下頁面的骨架 HTML：
Tips： 可以新建一個 txt 文件，將下面的代碼復制進去，然后將文件的后綴名改為 .html ，然后使用瀏覽器打開就可以看到效果：
HTML 的標題
<!DOCTYPE html>
<html>
?
<head>
<title>歡迎訪問慕課網(wǎng)</title>
<head>
?
<body>
?
<h>這是一個標題</h>
<h3>
<bold>這是一個加粗的標題</bold>
</h3>
?
<!-- 段落 -->
<P>這是一個段落</P>
<button>這是一個按鈕</button>
</body>
?
</html>
效果如下圖所示：
HTML 中添加圖片
<!DOCTYPE html>
<html>
<head>
<title>歡迎訪問慕課網(wǎng)</title>
<head>
<body>
<h>這是一個標題</h>
<h3>
<bold>這是一個加粗的標題</bold>
</h3>
<!-- 段落 -->
<P>這是一個段落</P>
<button>這是一個按鈕</button>
<!-- 下面是慕課網(wǎng)圖片 -->
<img src="http://idcbgp.cn/static/img/index/logo.png" alt="圖片無法顯示！">
<!-- 超鏈接 -->
<a href="http://idcbgp.cn/">慕課網(wǎng)</a>
</body>
</html>
效果如下圖所示：
有序列表和無序列表
<!DOCTYPE html>
<html>
<head>
<title>歡迎訪問慕課網(wǎng)</title>
<head>
<body>
<h>這是一個標題</h>
<h3>
<bold>這是一個加粗的標題</bold>
</h3>
<!-- 段落 -->
<P>這是一個段落</P>
<br>
<br>
<br>
<button>這是一個按鈕</button>
<!-- 下面是慕課網(wǎng)圖片 -->
<img src="http://idcbgp.cn/static/img/index/logo.png" alt="圖片無法顯示！">
<img src="h" alt="圖片無法顯示！">
<!-- 屬性 href -->
<a href="http://idcbgp.cn/">慕課網(wǎng)</a>
<!-- 列表 -->
<ul>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
</body>
</html>
效果如下圖所示：
表格
<!DOCTYPE html>
<html>
<head>
<title>歡迎訪問慕課網(wǎng)</title>
<head>
<body>
<h>這是一個標題</h>
<h3>
<bold>這是一個加粗的標題</bold>
</h3>
<!-- 段落 -->
<P>這是一個段落</P>
<br>
<br>
<br>
<button>這是一個按鈕</button>
<!-- 下面是慕課網(wǎng)圖片 -->
<img src="http://idcbgp.cn/static/img/index/logo.png" alt="圖片無法顯示！">
<img src="h" alt="圖片無法顯示！">
<!-- 屬性 href -->
<a href="http://idcbgp.cn/">慕課網(wǎng)</a>
<!-- 列表 -->
<ul>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<!-- 表格 -->
<table>
<thead>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
</tr>
</tbody>
</table>
</body>
</html>
效果如下圖所示：
表單
<!DOCTYPE html>
<html>
<head>
<title>歡迎訪問慕課網(wǎng)</title>
<head>
<body>
<h>這是一個標題</h>
<h3>
<bold>這是一個加粗的標題</bold>
</h3>
<!-- 段落 -->
<P>這是一個段落</P>
<br>
<br>
<br>
<button>這是一個按鈕</button>
<!-- 下面是慕課網(wǎng)圖片 -->
<img src="http://idcbgp.cn/static/img/index/logo.png" alt="圖片無法顯示！">
<img src="h" alt="圖片無法顯示！">
<!-- 屬性 href -->
<a href="http://idcbgp.cn/">慕課網(wǎng)</a>
<!-- 列表 -->
<ul>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<!-- 表格 -->
<table>
<thead>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>002</td>
<td>003</td>
</tr>
</tbody>
</table>
<!-- 表單 -->
<form>
<div>
<label>aaaa</label>
<input type="text" name="ssss" placeholder="ssssss">
</div>
<input type="submit" name="submit" value="提交">
</form>
</body>
</html>
網(wǎng)頁顯示結果如下：
2. CSS 基礎
我們知道 CSS 是負責頁面的樣式，讓頁面更加的美觀，那么 CSS 到底是如何讓頁面更加的美觀呢，我們一起來看一下：
首先，我會給大家一個沒有添加任何樣式的 HTML，然后，我們一步一步的添加不同的樣式來展示層疊樣式表的效果。
首先，我們需要給 HTML 添加樣式，但是，HMTL 有那么多標簽，怎么給指定的標簽或者一組標簽更改樣式那。這就引入了選擇器的概念。通過選擇器我們可以定位到 HTML 里的任何一個元素。
<!DOCTYPE HTML>
<html>
<head>
<title>CSS</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
可以看到頁面中只有 Hello world！這樣的文本，并沒有任何樣式，如下圖所示。下面我們就來給 Hello world！增加一些樣式。
使用選擇器選擇 p 標簽
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
background: grey; //增加灰色背景
color:white; //改變字體顏色為白色
font-size: 10pt; //設置字體大小為10pt
} //使用選擇器選擇p標簽
</style>
</head>
<body>
<p>hello world!</p>
</body>
</html>
我們通過選擇器選擇了 P 標簽，然后給這個標簽增加了灰色背景，字體為藍色，字體大小為 10pt。
效果如下圖：
背景
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
background: grey; //添加灰色到背景顏色
}
</style>
</head>
<body>
<p>hello world!</p>
</body>
</html>
效果如下：
字體
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {
background: grey;
font-size: 30pt; //調大字體到30pt
}
</style>
</head>
<body>
<p>hello world!</p>
</body>
</html>
效果如下所示：
顏色
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
</body>
</html>
最終效果，如下圖所示：
Tips：CSS，其實有很多內容。我只是列出了最常用的五個部分來講，這些內容其實基本涵蓋了我們幾乎所有的爬蟲課所需要的知識。其他的更多高級內容，請大家移步到慕課網(wǎng)的相關內容進行學習。
3. 小結
這一個小節(jié)，我們通過幾個小例子，熟悉了 Html 和 CSS 的基本使用。讀者朋友們可以按照上述步驟，在自己的本機進行練習，來觀察頁面的樣式和字體的變化。
2025 imooc.com All Rights Reserved |