為什麼要了解HTML

網頁所展現出來的資訊, 都是由瀏覽器解析html後所顯示出來的東西. 想爬取別人的東西, 當然就需由html著手. 了解html是邁入爬蟲的第一步.

別人寫出來的網頁, 通常都有反爬蟲的機制. 在還沒什麼功力之前, 就想爬別人的東西, 想都別想. 想要練功力, 當然是自已寫一個沒有反爬蟲的網頁, 當作練習的對像.

html 組成

<html>
    <head>
        <title>這是網頁標題</title>
    </head>
    <body>
        <a href=">超級網站</a>
    </body>
</html>

網頁由一連串的標籤組成, 如 <html>, <head>, <title>, <a>, 這些標籤又稱為節點. 最上層的<html>稱為根節點, 也是head, body標籤的父節點

每個節點有其屬性, 比如 <a>節點的屬性為 href=…”

中文亂碼

瀏覽網頁時, 中文變成亂碼的原因很多, 不是只有一種因素. 需足步解決
請參照本人所寫中文亂碼

一開始可以試試在 html 的 head 中加入如下設定

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MahalJsp</title>
</head>

總結二件事
1. apache 設定檔加入 addDefaultCharset utf-8
2. 網頁檔案存成 utf-8

文字方塊

<label>姓名</label>
<input type="text" name="txt1"/>

姓名

圖片

<img src="tiger.jpg" width="400" height="300"/>

表格

由<table>表格, <tr>列及 <td>儲存格所組成的, 每個標籤都可以有bgcolor, width等屬性, 如下代碼

<table width="50%" align="center" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td bgcolor="#00ffff">第一格</td>
        <td>第二格</td>
        <td>第三格</td>
    </tr>
    <tr bgcolor="#ffff00">
        <td colspan="2">第四格</td>
        <td>第五格</td>
    </tr>
</table>

第一格	第二格	第三格
第四格		第五格

超連結

由<a>標籤組成, target屬性是指要開啟的視窗名稱, 若要在新視窗開啟, 則使用 “_blank”

<a href="http://tw.yahoo.com" target="_blank">奇摩站</a>

圖片超連結

圖片超連結, 只需超連結中的文字, 使用圖片取代可

<a href="http://tw.yahoo.com" target="_blank">
    <img src="tiger.jpg" width="100" height="100"/>
</a>

選項按鈕(Radio Button)

屬性 : checked : 預設

<label><input name="language" type="radio" value="繁中" checked>繁中</label>
<label><input name="language" type="radio" value="韓文">韓文</label>
<label><input name="language" type="radio" value="日文">日文</label>

繁中韓文日文

下拉式選單

屬性 : selected :預設

<select name="country">
    <option value="台灣">台灣</option>
    <option value="韓國" selected>韓國</option>
    <option value="日本">日本</option>
</select>

Form表單

<form>表單可以傳送資料, 傳送的方式有Get及 Post二種

<form name="form1" action="b.php" method="get">
    <label>姓名</label>
    <input type="text" name="txt1" />
    <input type="submit" value="傳送" />
</form>

上述使用 get方式傳送, 則會在網址後面加上 “?” , 然後再加入 “參數名=值”, 多個參數時,使用 “&”隔開, 如下
?txt1=Thomas&parm2=value&parm3=value

表單若使post的方式傳遞, 則會開啟另一條連線用於專門的資料傳輸, 此時就無法在網址看到這些資料. 必需於後端伺服器才可接收看到

PHP接收

<form> 使用 post傳送出去的資料, 到了php網頁後, 使用 $_POST[“元件名稱”]來接收, 所以只需將此變數列印出即可

請注意, 此php網頁檔案一定要放在web server的根目錄下, 這樣才會讓apache解讀執行. 如果是放在一般的資料夾, 則只會把底下的純文字直接列印出來而以.

<?php
    echo "A網頁傳來的資料為 : ".$_POST["txt1"];
?>

div

div的高度需先定出來，才能使用 overflow:auto顯示捲軸。不過這樣就無法垂直置中

<div style="height:100%;overflow:auto;background:#a0ffff;">
<img src='data:image/png;base64,{{img}}' style="max-width:100%;vertical-aling:center;"/>
</div>

圖片置中

max-width:100%是整個關鍵處

<img src='data:image/png;base64,{{img}}' style="max-width:100%;vertical-aling:center;"/>

圖片依body置中放大

這是唯一覺的好用的，但會跟隨body大小一起運作

<style>
    html, body {
        margin:0; padding:0; height:100%;
    }
    .img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
</style>

HTML簡介