查閱網頁內容

時間 2019-11-30

標籤查閱網頁內容欄目 HTML 简体版

原文原文鏈接

信息展現在網頁上。圖 14-1 展現了一個簡單的網頁（網址爲 data/simple-page.html），
包括標題和一個段落：
全部現代瀏覽器都支持這樣的網頁。用任意的文本編輯器打開 data/simple-page.html，
就會看到網頁背後的代碼，以下所示：
<!DOCTYPE html>
<html>
<head>
<title>Simple page</title>
</head>
<body>
<h1>Heading 1</h1>
<p>This is a paragraph.</p>
</body>
</html>
上述代碼是 HTML（Hyper Text Markup Language）的一個例子。HTML 是互聯網中使
用最普遍的語言。與其餘任何一種語言都不一樣的是：HTML 描述了網頁的佈局排版和內容，
瀏覽器則根據 Web 標準將代碼渲染到網頁上（而其餘語言最終都被轉換爲計算機指令）。
現代 Web 瀏覽器根據 HTML 的第一行決定使用哪一種標準進行網頁渲染。在上面的例子
中，使用的是最新標準 HTML 5。
通篇閱讀代碼，就會發現 HTML 是一些標籤的嵌套結構，這些標籤包括：<html>、
<title>、<body>、<h1> 和 <p>。每個標籤都是以<tag>開始，以</tag>結束。
事實上，網頁的這些標籤並非隨意命名的，也不能任意包含其餘標籤。每一個標籤對
瀏覽器都有特殊含義，且只容許包含一部分特定的標籤，或不容許包含任何標籤。
標籤 <html> 是全部 HTML 的根元素。HTML 一般也包括 <head> 和 <body>。其中，
標籤 <head> 一般包含 <title>，展現在標題欄上，包括瀏覽標籤和網頁元數據。
而 <body> 則在網頁內容和排版方面起主要做用。
在 <body> 標籤中，標籤能夠更自由地嵌套。最簡單的一個網頁能夠只包含一級標題
（<h1>）和一個段落（<p>）。這個網頁（圖 14-2）包含一個 2 行 2 列的表格。html

圖 14-1 瀏覽器

圖 14-2
網頁背後的 HTML 代碼存儲在 data/single-table.html 中：
<!DOCTYPE html>
<html>
<head>
<title>Single table</title>
</head>
<body>
<p>The following is a table</p>
<table id = "table1" border = "1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jenny</td>
<td>18</td>
</tr>
<tr>
<td>James</td>
<td>19</td>
</tr>
</tbody>
</table>
</body>
</html>
注意到，標籤<table>是按行構建的：<tr> 指表格的行，<th> 指表頭單元格，
<td> 指表格的單元格。
同時，HTML 元素，例如<table>，採
用<table attr1 = "value1" attr2 =
"value2"> 格式時，<table> 可能就會具備
其餘的屬性。這些屬性並非隨意定義的。相
反，根據相應的標準，每個屬性都有特定含
義。在前面的代碼中，id 是表格的標識符，
border 用於控制邊框寬度。
下面這個頁面（見圖 14-3）的內容樣式看
起來和前面的有所不一樣：網絡

圖 14-3
若是查看 data/simple-products.html 的源代碼，就會發現一些新的標籤，例如 <div>（章
節）、<ul>（無序列表）、<li>（列表項目）和 <span>（應用樣式的章節）；此外，許
多 HTML 元素還有一個屬性，稱爲 style，用於定義這些元素的樣式外觀：
<!DOCTYPE html>
<html>
<head>
<title>Products</title>
</head>
<body>
<h1 style = "color: blue;">Products</h1>
<p>The following lists some products</p>
<div id = "table1" style = "width: 50px;">
<ul>
<li>
<span style = "font-weight: bold;">Product-A</span>
<span style = "color: green;">$199.95</span>
</li>
<li>
<span style = "font-weight: bold;">Product-B</span>
<span style = "color: green;">$129.95</span>
</li>
<li>
<span style = "font-weight: bold;">Product-C</span>
<span style = "color: green;">$99.95</span>
</li>
</ul>
</div>
</body>
</html>
style 中的值以這樣的方式編寫：property1: value1; property2: value2;。可是，
列表項目的樣式有點繁瑣，由於全部的產品名稱都共享同一個樣式，產品價格亦是如此。下面這
個 HTML（data/products.html）使用 CSS（Cascading Style Sheets）來避免冗長的樣式定義：
<!DOCTYPE html>
<html>
<head>
<title>Products</title>
<style>
h1 {
color: darkblue;
}
.product-list {
width: 50px;
}
.product-list li.selected .name {
color: 1px blue solid;
}
.product-list .name {
font-weight: bold;
}
.product-list .price {
color: green;
}
</style>
</head>
<body>
<h1>Products</h1>
<p>The following lists some products</p>
<div id = "table1" class = "product-list">
<ul>
<li>
<span class = "name">Product-A</span>
<span class = "price">$199.95</span>
</li>
<li class = "selected">
<span class = "name">Product-B</span>
<span class = "price">$129.95</span>
</li>
<li>
<span class = "name">Product-C</span>
<span class = "price">$99.95</span>
</li>
</ul>
</div>
</body>
</html>
注意到，咱們在<head>中添加了<style>來聲明網頁的全局樣式表。也將 style 轉
換爲 class，以便內容元素（div、li 和 span）使用這些預約義的樣式。咱們藉助下述
代碼簡要介紹一下 CSS 的語法。
匹配全部<h1> 元素：
h1 {
color: darkblue;
}
匹配全部屬於 product-list 類的元素：
.product-list {
width: 50px;
}
先匹配全部屬於 product-list 類的元素，再從中匹配全部屬於 name 類的嵌套元素：
.product-list .name {
font-weight: bold;
}
先匹配全部屬於 product-list 類的元素，再從中匹配全部屬於 selected 類的嵌
套 <li> 元素，最後從這些嵌套元素中匹配屬於 name 類的：
.product-list li.selected .name {
color: 1px blue solid;
}
要提醒的是，單純使用 style 不能實現
上述目標。圖 14-4 展現了網頁的渲染效果。
每一個 CSS 元素都包含一個 CSS 選擇器
（例如 .product-list）用來匹配 HTML 元素
和樣式（例如 color：red）以便渲染應用。
CSS 選擇器不只用於應用樣式，也經常使用於提取
網頁內容，以便咱們感興趣的 HTML 元素能夠
被正確地匹配，這是網絡爬蟲背後的底層技術。
CSS 的內容比上述代碼展現出來的要豐
富得多。對於網絡爬蟲，咱們使用下面這些例
子展現最經常使用的 CSS 選擇器，如表 14-1 所示。
表 14-1
語法匹配
* All elements
h1, h2, h3 <h1>,<h2>,<h3>
#table <* id="table1">編輯器

圖 14-4
續表
語法匹配
.product-list <* class="product-list">
div#container <div id="container">
div a <div> <a>and<div> <p> <a>
div > a <div> <a>but not<div> <p> <a>
div > a.new <div> <a class="new">
ul > li:first-child First <li> in <ul>
ul > li:last-child Last <li> in<ul>
ul > li:nth-child(3) 3rd <li> in <ul>
p + * Next element of <p>
img[title] <img>with title attribute
table[border=1] <table border="1">
每一個級別上，tag#id.class[ ] 能夠和可選項：tag、#id.class 和 [ ] 一塊兒使用。
更多關於 CSS 選擇器的信息，請訪問 https://developer.mozilla.org/en-US/docs/Web/CSS/
CSS_Selectors。想了解更多關於 HTML 的標籤，能夠訪問 http://www.w3schools.com/tags/。佈局

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。