前端開發 — HTML

  • 2020 年 6 月 29 日
  • 筆記

一、前端開發介紹

作為一枚程序員，如果想要開發網站，其本質就是在socket服務端接收瀏覽器請求並給其返回數據，並且返回數據格式要符合瀏覽器能識別的規則。

前端開發的課程目的就是帶大家去學習瀏覽器能識別的所有規則，這樣我們就可以服務端給瀏覽器返回特定規則的數據，從而控制用戶瀏覽器顯示的效果。

前端開發中瀏覽器所有能識別的規則分為三大類，分別是HTML，CSS，JavaScript。

其中HTML即超文本標記語言，是一種標識性的語言。它包括一系列標籤．通過這些標籤可以將網絡上的文檔格式統一，使分散的internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。

CSS（Cascading Style Sheets）稱為層疊樣式表，是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。概括來說，CSS可用於對頁面進行美化。

JavaScript是一種在網絡瀏覽器上運行的編程語言。它主要添加到使用HTML和CSS構建的網站中，並在實現各種頁面動態效果方面發揮作用。 例如，網頁上顯示的輪播模式和在諮詢平台上輸入內容後顯示的提示信息不正確等。另外，在商場網站上購物時，購物車的使用和成本估算也 需要JavaScript。 因此，即使不是很明顯，它仍然是編碼人員經常使用的語言。

 

二、HTML學習

2.1 本地查看

為了方便本地開發調試，在學習前端開發的過程，都會在本地瀏覽器直接打開編寫的html文件，例如：

  • 創建 s_h.html 文件（前端頁面一般都是以 .html 後綴結尾）。 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1>前端開發</h1>
    <div style='color:red'>HTML學習</div>
    <a href='//www.baidu.com'>基本結構</a>
</body>
</html>
  • 在本地找到s_h.html 文件，並用瀏覽器方式打開以查看文件內容。

          

2.2 基本結構

從這一部分開始，我們將正式開始學習HTML標籤。並在寫完效果之後在本地瀏覽器打開去查看效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    
</body>
</html>

每個html都應該包含上述部分，否則就是不規範（之前的示例僅為展示效果，編寫方式都是不規範）。

  •  <!DOCTYPE html>，指定文檔類型為html格式，瀏覽器會根據html格式去渲染下面的標籤.
  •  <html lang="en">...</html>，HTML文件內容區域，所有的內容都應該寫到它的內部。其中lang=」en」表示頁面是英文格式，翻譯頁面時會讀取此值來獲取當前頁面是什麼語言編寫。
  •  <head>...</head>，放一些描述信息。
  •  <body>...</body>，放希望瀏覽器呈現出的內容。

規範的編寫方式應該如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的網頁</title>
</head>
<body>
    <h1>前端開發</h1>
    <div style='color:red'>HTML學習</div>
    <a href='//www.baidu.com'>基本結構</a>
</body>
</html>

2.3 head 標籤

head標籤相當於人的大腦，內部可以放一些頁面的描述信息，該部分內容雖然不會在頁面展示，但也起到非常重要的作用。

2.3.1 title標題

title標籤用於指定網頁的標題，所有網站頁面標籤部分的文字都是基於title實現。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的網頁</title>
</head>
<body>
    
</body>
</html>

2.3.2 meta 文檔字符編碼

meta標籤可以定義文檔的字符編碼，即：瀏覽器會按照charset設置的編碼去讀取下面的文檔內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的網頁</title>
</head>
<body>
    
</body>
</html>

注意：1. 定義字符編碼的標籤必須放在最上方；2. 亂碼現象：文件編碼和charset字符串編碼不一致時，瀏覽器會根據charset定義去讀取內容，所以就會出現亂碼。

2.3.3 meta頁面刷新

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>標題</title>
        <meta http-equiv="Refresh" content="5" />
    </head>
    <body>
        <h1>ABCD</h1>
    </body>
</html>

<meta http-equiv=”Refresh” content=”5″ />  為頁面每五秒刷新一次。

同樣也可以經過特定的時間後跳轉到某個頁面，即 <meta http-equiv=”Refresh” content=”5;Url=//www.pythonav.com”/>

2.3.4 meta關鍵字

meta標籤可以設置關鍵字，用於搜索引擎收錄和關鍵字搜索。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>標題</title>
        <meta name="keywords" content="python,c,java,php" />
    </head>
    <body>
        <h1>code</h1>
    </body>
</html>

2.3.5 meta 網站描述

meta標籤可以設置網站描述信息，用於在搜索引擎搜索時，顯示網站基本描述信息。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>nba</title>
        <meta name="keywords" content="kobe,lebron,durant,curry" />
        <meta name="description" content="nba是美國職業籃球聯盟" />
    </head>
    <body>
        <h1>一起打球吧！</h1>
    </body>
</html>

關於網站描述與關鍵字，我們可以以騰訊NBA官網為例。

 

 

2.3.6 link標籤

link標籤可以設置網頁標題上的圖標。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>標題</title>
    <link rel="shortcut icon" href="圖標文件路徑">
    </head>
    <body>
        <h1>123456</h1>
    </body>
</html>

 

 2.3.7 meta IE瀏覽器

因為IE遵循自己的標準而其他瀏覽器遵循另一套標準，所以同樣的代碼在其他瀏覽器都可以運行，唯獨IE需要特殊設置。

以下是專門針對IE瀏覽器設置，在IE瀏覽器上運行時，按照最新的默認渲染頁面，例如：使用 IE10 瀏覽器訪問頁面，如果在IE瀏覽器兼容中切換到IE8，倘若沒有設置X-UA-Compatible，那麼頁面就會按照IE8模式去顯示頁面，而設置X-UA-Compatible之後，瀏覽器永遠會按照最新的默認來對頁面進行渲染。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>標題</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    </head>
    <body>
        <h1>IE瀏覽器</h1>
    </body>
</html>

 

以上就是關於head部分的最常用設置。

 

2.4 body標籤

在使用瀏覽器查看html頁面時候，看得到內容都是body標籤中呈現出來。body中所有標籤可以劃分為兩類：

  • 塊級，標籤自己獨佔整行。
  • 行內，標籤內容有多少就佔多少空間。

2.4.1 div與span標籤

這兩個標籤屬於html中最素的，他們本身沒有攜帶太多的樣式：

  • div，僅塊級標籤樣式。
  • span，僅行內標籤樣式。

也恰恰正是因為他們是最素的，所以之後在對標籤進行定製時會很方便，所以應用也會很廣，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    asdfasdf
    <div>
        <div>div1</div>
        <div>div2</div>
        <span>span1</span>
        <span>span2</span>
    </div>
</body>
</html>

可看到頁面：

 

 

2.4.2 br標籤與p標籤

br標籤用來換行，p標籤用於表示段落，段落和段落之間有些間距，一般用於多內容多段落展示，例如：文章、作文、博客等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
</head>
<body>
    <p>12asdfasdfasdfasdfa<br />sdfasdfasdfasdf3</p>
    <p>123</p>

    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>

    <div>1</div>
    <div>2</div>
    <div>3</div>

</body>
</html>

 

 

2.4.3 h標題系列

h標籤用於展示標題數據（加大加粗的樣式），h系列標籤共有6種，從h1~h6依次變小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
</head>
<body>

    <h1>title</h1>
    <h2>title</h2>
    <h3>title</h3>
    <h4>title</h4>
    <h5>title</h5>
    <h6>title</h6>

</body>
</html>

 

 

2.4.4 a超鏈接

a標籤主要有兩個作用：分別是做超鏈接，點擊之後可以跳轉到指定地址；做錨點，點擊後跳轉到頁面指定位置。

  • 做超鏈接，點擊之後可以跳轉到指定地址
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>老男孩</title>
    <link rel="shortcut icon" href="1.jpg">
</head>
<body>
    <a href="//www.baidu.com">老男孩</a>
</body>
</html>
  • 做錨點，點擊後跳轉到頁面指定位置。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" href="1.jpg" />
</head>
<body>
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>

    <div id="i1" style="height:600px;">第一章的內容</div>
    <div id="i2" style="height:600px;">第二章的內容</div>
    <div id="i3" style="height:600px;">第三章的內容</div>
    <div id="i4" style="height:600px;">第四章的內容</div>
</body>
</html>

2.4.5 ul列表系列

在html中 ul、ol、dl用於展示列表數據。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
    </ul>

    <ol>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
    </ol>

    <dl>
        <dt>ttt</dt>
        <dd>ddd</dd>
        <dd>ddd</dd>
        <dd>ddd</dd>
        <dt>ttt</dt>
        <dd>ddd</dd>
        <dd>ddd</dd>
        <dd>ddd</dd>
    </dl>
</body>
</html>

 

 

2.4.5 table表格

table標籤用於在html頁面展示表格，一般在網站中看到的表格都是基於table標籤實現。

  • 表格基本顯示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標題</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
                <th>愛好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Kobe</td>
                <td>18</td>
                <td>看書</td>
            </tr>
            <tr>
                <td>lebron</td>
                <td>18</td>
                <td>rap</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

  •  合併單元格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr>
        <td>主機名</td>
        <td>端口</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>1.1.1.1</td>
        <td>80</td>
        <td>
            <a href="s2.html">查看詳細</a>
            <a href="#">修改</a>
        </td>
    </tr>
    <tr>
        <td>1.1.1.1</td>
        <td>80</td>
        <td>第二行，第3列</td>
    </tr>
</table>

<table border="1">
    <thead>
    <tr>
        <th>表頭1</th>
        <th>表頭1</th>
        <th>表頭1</th>
        <th>表頭1</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td colspan="3">1</td>
    </tr>
    <tr>
        <td rowspan="2">1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    </tbody>
</table>
<textarea>文本內容寫在這裡...</textarea>

</body>
</html>

 

 

2.4.6 img圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="//www.baidu.com">
        <img src="1.jpg" title="nike" style="height: 200px;width: 400px;" alt="NBA">
    </a>
</body>
</html>

 

 2.4.7 input系列

 input系列中共有5個至關重要的標籤，他為瀏覽器提供了數據交互的功能，即：用戶可以在瀏覽器上輸入數據和選擇選項，以後可以把輸入和選擇的內容提交給後端。

  • text，文本框。
  • password，密碼框。
  • radio，單選框（必須設置name屬性相同，否則無法實現）。
  • checkbox，複選框。
  • file，文件上傳。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h3>文本框</h3>
    <input type="text">
    <h3>密碼框</h3>
    <input type="password">
    <h3>單選框</h3>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <h3>複選框</h3>
    <input type="checkbox">籃球
    <input type="checkbox">足球
    <input type="checkbox">橄欖球
    <h3>上傳文件</h3>
    <input type="file">
</body>
</html>

 

 

2.4.8 select下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>下拉框</title>
</head>
<body>
    <h3>單選</h3>
    <select>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
    <h3>多選</h3>
    <select multiple>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
</body>
</html>

 

 

2.4.9 textarea多行文本框

textarea用於在瀏覽器上展示多行文本輸入框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>多行文本</title>
</head>
<body>
    <textarea>文本內容寫在這裡...</textarea>
</body>
</html>

 

 

2.4.10 form表單

如果想要再瀏覽器上把輸入的內容提交到後台，則需要表單與提交按鈕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>form表單</title>
</head>
<body>
    <form action="//www.x.cn" method="get">
        <p>用戶名：<input type="text" name="user"></p>
        <p>密  碼：<input type="password" name="pwd"></p>
        <p>性別：
            <input type="radio" name="gender" value="2">男
            <input type="radio" name="gender" values="3">女
        <p/>
        <p>愛好：
            <input type="checkbox" name="favor" value="2">籃球
            <input type="checkbox" name="favor" value="8">足球
            <input type="checkbox" name="favor" value="10">橄欖球
        </p>
        <p>城市：
            <select name="city">
                <option value="1">上海</option>
                <option value="2">北京</option>
            </select>
        </p>
        <p>備註：<textarea> name="memo"></textarea></p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
</body>
</html>

 

 

在使用form表單進行提交數據時，需要注意以下幾點：

  • 提交時，只會提交form標籤內部【用戶交互】相關的標籤。

  • <input type="submit" value="提交">用於提交當前所在的表單。

  • <input type="reset" value="重置">用於重置當前標籤中的選項。

  • form標籤內置屬性

    • action="/xx/" ，表示表單要提交的地址。

    • method="get"，表示表單的提交方式（get 或 post）。

    • enctype="multipart/form-data"，如果form內部有文件上傳，必須加上此設置。

  •  form內部【用戶交互】相關標籤必須設置name，不然提交數據後後端無法獲取。
  • radio、checkbox、select 除了要設置name屬性以外，還必須設置value屬性，因為這三中標籤在form表單提交時，不會把看到的內容提交到後台，而是把選擇選項對應的value值提交到後台。

 

VirMach 便宜 VPS

QNews

QNews