前端基礎學習（1） HTML基本概念 HTML標籤
前端基礎學習（1） HTML基本概念 HTML標籤
一、今日內容
- 前端基本介紹
- HTML基本結構
- HTML標籤
二、前端基本介紹
前端的學習路徑主要包含HTML、CSS、JavaScript、jQuery、bootstrap、django、crm等；
我們日常使用的瀏覽器，本質上就是一個客戶端，能夠與伺服器的socket服務端連線交換資料；URL（Uniform Resource Locator），即統一資源定位器，就是我們日常在瀏覽器位址列輸入的內容，經過DNS解析可以變成特定的服務端IP，從而完成瀏覽器的訪問功能；我們將瀏覽器的動作定義為：
- 請求：瀏覽器中socket客戶端給服務端發訊息；
- 響應：服務端socket給客戶端回覆訊息；
我們可以建立一個socket服務端，來親自感受一下瀏覽器客戶端與socket客戶端的連線：
import socket sk = socket.socket() sk.bind(('127.0.0.1', 9000)) sk.listen() while True: conn, addr = sk.accept() msg = conn.recv(1024).decode('utf-8') print(msg) # 響應格式：b'HTTP/1.1 200 ok\r\n\r\n'後面再加上內容 conn.send(b'HTTP/1.1 200 ok\r\n\r\n') conn.send(b'hello') conn.close() sk.close()
執行server.py後，我們開啟瀏覽器，在位址列輸入：http://127.0.0.1:9000/，顯示如下：
並且我們的服務端也接收到了瀏覽器客戶端發來的請求：
而在現實中，我們一般不會只在網頁放置簡單的text文字，所以平時需要將網頁的html程式碼（Hyper Text Markup Language，超文字標記語言）放置在.html檔案中，socket服務端讀取.html檔案並將檔案傳送至瀏覽器客戶端，瀏覽器完成解析後顯示在瀏覽器頁面中。所以這時我們的socket服務端需要這麼寫：
import socket sk = socket.socket() sk.bind(('127.0.0.1', 9000)) sk.listen() while True: conn, addr = sk.accept() msg = conn.recv(1024).decode('utf-8') print(msg) conn.send(b'HTTP/1.1 200 ok\r\n\r\n') with open('1.html', mode='rb') as file_handler: r = file_handler.read() conn.send(r) conn.close() sk.close()
三、HTML基本結構
.html檔案的基本格式如下：
<!--基本格式-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
<!--主要內容-->
</body>
</html>
其中：
<!DOCTYPE html>宣告本檔案為一個.html檔案；<html lang="en">宣告語言為英語；<head></head>定義HTML的開頭部分，它包含的內容不會再瀏覽器頁面中直接顯示，主要包含文件的元資料、配置資訊等；<meta>即元資料，定義了網頁的元資料，<meta charset="UTF-8">即宣告網頁的編碼方式為UTF-8，如不宣告網頁編碼方式，可能會出現亂碼，尤其是中文網頁；<body></body>是文字可見的網頁主體內容；<!--content-->為註釋內容，註釋的內容不會在網頁上顯示出來；
四、HTML標籤
HTML標籤是由尖括號包圍的關鍵字，如<html>，<div>等；HTML標籤通常是成對出現的，比如：<div>和</div>，第一個標籤是開始，第二個標籤是結束。也有一部分標籤單是單獨呈現的，標籤裡面可以帶有若干屬性，也可以不帶屬性；
有幾個很重要的屬性：
- id：定義標籤的唯一ID，在HTML文件樹中唯一；
- class：為HTML元素定義一個或多個類名（CSS樣式類名）；
- style：規定元素的行內樣式（CSS樣式）；
下面介紹部分重要的標籤：
-
meta標籤
meta標籤可提供有古納頁面的元資訊，針對搜尋引擎和更新頻度的描述和關鍵詞；其位於文件的頭部；主要包含兩個屬性，分別為
http-equiv和name屬性，不同的屬性又有不同的引數值，這些不同的引數值就實現了不同的網頁功能；-
http-equiv屬性：相當於http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以幫助正確地顯示網頁內容，與之對應的屬性值為conrent，代表各個引數的變數值；<!--表示2s後引導進入該URL--> <meta http-equiv="refresh" content="2; URL=https://www.baidu.com"> <!--表示2s重新整理一次--> <meta http-equiv="refresh" content="2"> <!--指定文件的編碼型別--> <meta http-equiv="content-Type" charset=”UTF8"> <!--告訴IE以最高階模式來渲染文件--> <meta http-equiv="x-ua-compatible" content="IE=edge"> -
name屬性：主要用於描述網頁，對應屬性為content，content中的內容主要是便於搜尋引擎機器人查詢資訊和分類資訊用的；<!--關鍵字，也就是別人是可以通過這些關鍵字搜尋到我這個文章的--> <meta name="keywords" content="meta總結, html meta, meta屬性, meta跳轉"> <!--文件描述，如百度頁面的顯示內容--> <meta name="description" content="meta總結, html meta, meta屬性, meta跳轉">
-
-
body中的基本標籤body中標籤根據其顯示型別，可以主要分為：- 內斂標籤（行內標籤）：不獨佔一行，b\i\u\s\button\a\img等標籤屬於這種型別；
- 塊級標籤（行外標籤）：自己獨佔一行，h1-h6\br\hr\p\div等標籤屬於這種型別；
注意：內斂標籤只能巢狀內斂標籤，塊級標籤可以巢狀內斂和某些塊級標籤，p標籤不可以巢狀任何標籤。
表示方法 含義 標籤型別 <b></b> 加粗 bolt 內斂標籤 <i></i> 斜體 italic 內斂標籤 <u></u> 下劃線 underline 內斂標籤 <s></s> 刪除線 strickthrough 內斂標籤 <button></button> 按鈕 button 內斂標籤 <span></span> 無特殊效果 內斂標籤 <hr> 水平分割線 horizontal tag 塊級標籤 <br> 換行 break 塊級標籤 <h1></h1> 一級標題 heading 塊級標籤 <h2></h2> 二級標題 heading 塊級標籤 <h3></h3> 三級標題 heading 塊級標籤 <h4></h4> 四級標題 heading 塊級標籤 <h5></h5> 五級標題 heading 塊級標籤 <h6></h6> 六級標題 heading 塊級標籤 <p></p> 段落（行間距與普通換行越有不同） paragraph 塊級標籤 <div></div> 層（無特殊效果） division 塊級標籤 下面再詳細介紹幾個標籤：
-
img標籤
即圖片標籤，為內斂標籤；主要使用格式為：
<img src="" alt="" title="" width="" height="">，其中：- src屬性可以是網路位置也可以是相對路徑，但不可以是絕對路徑；
- alt(alternative)屬性是載入過程中的文字解釋，可以為空；
- title是滑鼠懸停時對圖片的介紹；
- width和height分別表示圖片的寬度和高度；
-
a(anchor)標籤
即連結標籤，為內斂標籤；主要使用格式為：
<a href="" target="_blank"></a>，其中：- herf（hypertext reference）屬性時連結指向的地址；
- 將target設定為
"_blank"可以新開視窗； - 將target設定為
"_self"即預設狀況為在當前視窗開啟；
-
無序列表標籤
為塊級標籤，主要使用格式為：
<ul> <li>第一項</li> <li>第二項</li> </ul>其中ul(unorder list)的type屬性可以設定為：
- disc：實心遠點；
- circle：空心圓圈；
- square：實心方塊；
- none：無樣式；
-
有序列表標籤
為塊級標籤，主要使用格式為：
<ol> <li>第一項</li> <li>第二項</li> </ol>其中ol(order list)的type屬性可以設定
"a"、"1"、"Ⅰ"等，表示列表的序列表示方法；與之對應的start屬性可以設定為"b"等，表示列表從b開始； -
標題列表標籤
為塊級標籤，主要使用格式為：
<dl> <dt>第一項</dt> <dd>第二項</dd> </dl>其中dt(defined title)子標籤為自定義列表標題，dd(defined detail)子標籤為自定義詳情；
-
表格標籤
為塊級標籤，主要使用格式為：
<table border="1" cellpadding="10" cellspacing="10"> <thead> <tr> <th>真</th> <th>訥</th> <th>到</th> </tr> </thead> <tbody> <tr> <th>真</th> <th>訥</th> <th>到</th> </tr> <tr> <th>大壯</th> <th>抽菸</th> <th>喝酒</th> </tr> </tbody> </table>其中table的屬性主要包含：
- border：表示邊框的粗細；
- cellpadding：表示表格內元素與表格邊框的距離；
- cellspacing：表示表格最外層邊框的厚度；
thead子標籤表示表頭；tbody子標籤表示表身；tr(table row)子標籤表示每一行；th(table header cell)子標籤表示每一個表格內元素；
-
form標籤
又稱為表單標籤，是一種較為複雜的標籤，其中夾雜著許多其他標籤的應用，其基本使用格式為：
<form action="http://127.0.0.1:9000"> <textarea name="" cols="30" rows="10"></textarea> <hr> <label for="username">使用者名稱</label> <input id="username" type="text" name="username" value="耳機"> <label> 密碼：<input type="password" name="password" value="耳耳耳耳機" disabled> </label> 男<input type="radio" name="sex" value="1" readonly> 女<input type="radio" name="sex" value="2"> 抽菸<input type="checkbox" name="hobby" value="a"> 喝酒<input type="checkbox" name="hobby" value="b" checked="checked"> 燙頭<input type="checkbox" name="hobby" value="c" checked> <button>提交耳機</button> <input type="submit"> <hr> <input type="date"> <input type="button" value="葉斯摩拉"> <input type="reset"> <input type="hidden"> <input type="file"> <input type="submit"> <select name="name" id="" multiple> <option value="1" selected>耳機</option> <option value="2">葉斯摩拉</option> <option value="3">獼猴桃</option> </select> 按住CTRL多選 </form>其action屬性代表表單提交路徑；並且其中包含多個標籤，主要為：
-
input標籤
主要代表表單的輸入，是瀏覽器客戶端和服務端交流的工具，主要包含以下幾種：
<!--1.text純文字--> 使用者名稱：<input id="username" type="text" name="username" value="耳機"> <!--2.password密碼--> 密碼：<input type="password" name="password" value="耳耳耳耳機" disabled> <!--3.radio單選--> 男<input type="radio" name="sex" value="1" readonly> 女<input type="radio" name="sex" value="2"> <!--4.checkbox多選--> 抽菸<input type="checkbox" name="hobby" value="a"> 喝酒<input type="checkbox" name="hobby" value="b" checked="checked"> 燙頭<input type="checkbox" name="hobby" value="c" checked> <!--5.submit提交--> <input type="submit"> <!--6.date日期--> <input type="date"> <!--7.button提交2--> <input type="button" value="葉斯摩拉"> <!--8.reset重置--> <input type="reset"> <!--9.hidden隱藏--> <input type="hidden"> <!--10.file檔案--> <input type="file">在瀏覽器頁面中分別顯示為：
其中屬性主要包含：
- name為名稱標記，即表單提交的鍵；
- value為表單提交時對應項的值，如button為按鈕顯示的內容，text為輸入框的初始值，而checkbox和radio為提交表單所選值的標記；
- id為input元素的唯一標識，方便label標籤標記；
- checked為預設的選中項；
- readonly為只讀（對radio和checkbox不生效）；
- disabled為廢除；
-
typearea多行文字標籤
主要使用方式為：
<textarea name="" cols="30" rows="10"></textarea>，其在瀏覽器頁面中顯示如下：其中cols表示列，row表示行；
-
select標籤
主要使用方式為：
<select name="city" id="city"> <option value="1">北京</option> <option selected="selected" value="2">上海</option> <option value="3">廣州</option> <option value="4">深圳</option> </select>其在瀏覽器頁面中顯示如下：
也可以將在select標籤中新增multiple標籤，完成多選下拉選單，在多選時按住CRTL鍵多選即可；
-
-
一些常用特殊字元
特殊字元 表示方法 space < < > > & & ￥ ¥ © © ® ®