天天看點
傳回

前端知識之HTML部分

1、web服務的本質
浏覽器發請求-->HTTP協定-->服務端接收請求-->服務端傳回響應-->服務端把HTML檔案内容發給浏覽器-->浏覽器渲染頁面
之前學過用python方式實作C/S建立socket通信，浏覽器與服務端實作通信是B/S架構
服務端代碼：
    import socket
    server=socket.socket()
    server.bind(("127.0.0.1", 8081))
    server.listen(5)
    while True:
            conn, addr = server.accept()
            data = conn.recv(8096)
            conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
            conn.send(b"Hello world!")
            conn.close()
浏覽器：
    http://127.0.0.1:8081/
結果：
    Hello world!
2、HTML是什麼
HTML：超文本标記語言（Hypertext Markup Language）是一種用于建立網頁的标記語言。不是程式設計語言，跟我們使用的python不1
本質上是浏覽器可識别的規則，我們按照規則寫網頁，浏覽器根據規則渲染我們的網頁。
對于不同的浏覽器，對同一個标簽可能會有不同的解釋。（相容性問題）
網頁檔案的擴充名：.html或.htm
3、HTML文檔結構
    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
            <meta charset="UTF-8">
            <title>Title</title>
    </head>
    <body>
    </body>
    </html>
1)<!DOCTYPE html>聲明為HTML5文檔。必須是HTML文檔的第一行，它是訓示web浏覽器關于頁面使用哪個HTML版本進行編寫的指令
2)<html>、</html>是文檔的開始标記和結束的标記。是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）。
3)<head>、</head>定義了HTML文檔的開頭部分。它們之間的内容不會在浏覽器的文檔視窗顯示。包含了文檔的元（meta）資料。
4)<title>、</title>定義了網頁标題，在浏覽器标題欄顯示。
5)<body>、</body>之間的文本是可見的網頁主體内容。
注意：對于中文網頁需要使用 <meta charset="utf-8"> 聲明編碼，否則會出現亂碼。
          有些浏覽器會設定 GBK 為預設編碼，則你需要設定為 <meta charset="gbk">。
4、HTML标簽格式
HTML标簽是由尖括号包圍的關鍵字，如<html>, <div>等
HTML标簽通常是成對出現的，比如：<div>和</div>，第一個标簽是開始，第二個标簽是結束。結束标簽會有斜線。
也有一部分标簽是單獨呈現的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
标簽裡面可以有若幹屬性，也可以不帶屬性。
标簽的文法：
    <标簽名 屬性1=“屬性值1” 屬性2=“屬性值2”……>内容部分</标簽名>
    <标簽名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
幾個很重要的屬性：
    id：定義标簽的唯一ID，HTML文檔樹中唯一
    class：為html元素定義一個或多個類名（classname）(CSS樣式類名)
    style：規定元素的行内樣式（CSS樣式）
5、HTML注釋
<!--注釋内容-->(在pycharm裡面還是command+/快捷鍵)

二、HTML的常用标簽
1、head内常用的标簽
    1)<title></title>   這對标簽是定義網頁标題
    2)<style></style>   這對标簽定義内部樣式表，稍後學習的css相關的會寫在這個标簽裡面
    3)<script></script> 這對标簽定義JS代碼或引入外部JS檔案
    4)<link/>           引入外部樣式表檔案
    5)<meta/>           定義網頁原資訊
    meta>元素可提供有關頁面的原資訊（mata-information）,針對搜尋引擎和更新頻度的描述和關鍵詞。
    <meta>标簽位于文檔的頭部，不包含任何内容。
    <meta>提供的資訊是使用者不可見的。
    meta标簽的組成：meta标簽共有兩個屬性，分别是http-equiv和name，不同的屬性又有不同的參數值，這些不同的參數值就實作了不同的網頁功能。 
        (1)http-equiv屬性：相當于http的檔案頭作用，它可以向浏覽器傳回一些有用的資訊，以幫助正确地顯示網頁内容，與之對應的屬性值為content，content中的内容其實就是各個參數的變量值。
            <!--2秒後跳轉到對應的網址，注意引号-->
            <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
            <!--指定文檔的編碼類型-->
            <meta http-equiv="content-Type" charset=UTF8">
            <!--告訴IE以最進階模式渲染文檔-->
            <meta http-equiv="x-ua-compatible" content="IE=edge">
        (2)name屬性: 主要用于描述網頁，與之對應的屬性值為content，content中的内容主要是便于搜尋引擎機器人查找資訊和分類資訊用的。
            <meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
            <meta name="description" content="老男孩教育Python學院">
2、body内常用标簽 
1)基本标簽（塊級标簽和内聯标簽）
    <b>加粗</b>
    <i>斜體</i>
    <u>下劃線</u>
    <s>删除</s>
    <p>段落标簽</p>
    标題1
    <h2>标題2</h2>
    <h3>标題3</h3>
    <h4>标題4</h4>
    <h5>标題5</h5>
    <h6>标題6</h6>
    <!--換行--><br>
    <!--水準線--><hr>
2)特殊字元
    空格  &nbsp;
    >   &gt;
    <   &lt;
    &   &amp;
    ¥   &yen;
    版權  &copy;
    注冊  &reg;
3)div标簽和span标簽
    div标簽用來定義一個塊級元素(一個占一行)，并無實際的意義。主要通過CSS樣式為其賦予不同的表現。
    span标簽用來定義内聯(行内，多個可以占一行)元素，并無實際的意義。主要通過CSS樣式為其賦予不同的表現。
塊級元素與行内元素的差別：
    所謂塊元素，是以另起一行開始渲染的元素，行内元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面産生任何的影響。
    這兩個元素是專門為定義CSS樣式而生的。
    關于标簽嵌套：通常塊級元素可以包含内聯元素或某些塊級元素，但内聯元素不能包含塊級元素，它隻能包含其它内聯元素。
    p标簽不能包含塊級标簽。
4)img标簽
    <img src="圖檔的路徑" alt="圖檔未加載成功時的提示資訊" title="滑鼠懸浮時提示資訊" width="寬" height="高(寬高兩個屬性隻用一個會自動等比縮放)">
5)a标簽(超連結标簽)
    所謂的超連結是指從一個網頁指向一個目标的連接配接關系，這個目标可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖檔，一個電子郵件位址，一個檔案，甚至是一個應用程式。
    <a rel="nofollow" href="http://www.oldboyedu.com" target="_blank" >點我</a>
    href屬性指定目标網頁位址。該位址可以有幾種類型：
        絕對URL - 指向另一個站點（比如 href="http://www.jd.com）
        相對URL - 指目前站點中确切的路徑（href="index.htm"）
        錨URL - 指向頁面中的錨（href="#top"）
    target：
        _blank表示在新标簽頁中打開目标網頁
        _self表示在目前标簽頁中打開目标網頁
6)清單标簽
(1)無序清單：
    <ul type="disc">
        <li>第一項</li>
        <li>第二項</li>
    </ul>
type屬性：
    disc（實心圓點，預設值）
    circle（空心圓圈）
    square（實心方塊）
    none（無樣式）
(2)有序清單：
    <ol type="1" start="2">
        <li>第一項</li>
        <li>第二項</li>
    </ol>
type屬性：
    1 數字清單，預設值
    A 大寫字母
    a 小寫字母
    Ⅰ 大寫羅馬
    ⅰ 小寫羅馬
(3)标題清單：
    <dl>
        <dt>标題1</dt>
        <dd>内容1</dd>
        <dt>标題2</dt>
        <dd>内容1</dd>
    </dl>
7)表格标簽
表格是一個二維資料空間，一個表格由若幹行組成，一個行又有若幹單元格組成，單元格裡可以包含文字、清單、圖案、表單、數字元号、預置文本和其它的表格等内容。
表格最重要的目的是顯示表格類資料。表格類資料是指最适合組織為表格格式（即按行和列組織）的資料。
表格的基本結構：
    <table border="1" cellpadding="10" cellspacing="10">
        <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>愛好</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Egon</td>
            <td>杠娘</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Yuan</td>
            <td>日天</td>
        </tr>
        </tbody>
    </table>
table的屬性：
    border: 表格邊框.
    cellpadding: 内邊距
    cellspacing: 外邊距.
    width: 像素百分比.（最好通過css來設定長寬）
    rowspan: 單元格豎跨多少行
    colspan: 單元格橫跨多少列（即合并單元格）
8)form标簽(表單)
功能：
    表單用于向伺服器傳輸資料，進而實作使用者與Web伺服器的互動
    表單能夠包含input系列标簽，比如文本字段、複選框、單選框、送出按鈕等等。
    表單還可以包含textarea、select、fieldset和 label标簽。
表單屬性：
    accept-charset  規定在被送出表單中使用的字元集（預設：頁面字元集）。
    action  規定向何處送出表單的位址（URL）（送出頁面）。
    autocomplete    規定浏覽器應該自動完成表單（預設：開啟）。
    enctype 規定被送出資料的編碼（預設：url-encoded）。
    method  規定在送出表單時所用的 HTTP 方法（預設：GET）。
    name    規定識别表單的名稱（對于 DOM 使用：document.forms.name）。
    novalidate  規定浏覽器不驗證表單。
    target  規定 action 屬性中位址的目标（預設：_self）
表單元素：
HTML表單是HTML元素中較為複雜的部分，表單往往和腳本、動态頁面、資料處理等功能相結合，是以它是制作動态網站很重要的内容。一般用來收集使用者的輸入資訊、
表單工作原理：通路者在浏覽有表單的網頁時，可填寫必需的資訊，然後按某個按鈕送出。
    這些資訊通過Internet傳送到伺服器上，伺服器上專門的程式對這些資料進行處理。
    如果有錯誤會傳回錯誤資訊，并要求糾正錯誤。
    當資料完整無誤後，伺服器回報一個輸入完成的資訊。
9)input标簽
<input> 元素會根據不同的 type 屬性，變化為多種形态。
    text    單行輸入文本  <input type=text" />
    password    密碼輸入框   <input type="password"  />
    date    日期輸入框   <input type="date" />
    checkbox    複選框 <input type="checkbox" checked="checked"  />
    radio   單選框 <input type="radio"  />
    submit  送出按鈕    <input type="submit" value="送出" />
    reset   重置按鈕    <input type="reset" value="重置"  />
    button  普通按鈕    <input type="button" value="普通按鈕"  />
    hidden  隐藏輸入框   <input type="hidden"  />
    file    文本選擇框   <input type="file"  />
屬性說明:
    name：表單送出時的“鍵”，注意和id的差別
    value：表單送出時對應項的值
    type="button", "reset", "submit"時，為按鈕上顯示的文本年内容
    type="text","password","hidden"時，為輸入框的初始值
    type="checkbox", "radio", "file"，為輸入相關聯的值
    checked：radio和checkbox預設被選中的項
    readonly：text和password設定隻讀
    disabled：所有input均适用
10)select标簽
    <form action="" method="post">
        <select name="city" id="city">
            <option value="1">北京</option>
            <option selected="selected" value="2">上海</option>
            <option value="3">廣州</option>
            <option value="4">深圳</option>
        </select>
    </form>
屬性說明：
    multiple：布爾屬性，設定後為多選，否則預設單選
    disabled：禁用
    selected：預設選中該項
    value：定義送出時的選項值
11)lable标簽
定義：<label> 标簽為 input 元素定義标注（标記）。
說明：
label 元素不會向使用者呈現任何特殊效果。<label> 标簽的 for 屬性值應當與相關元素的 id 屬性值相同。
    <form action="">
        <label for="username">使用者名</label>
        <input type="text" id="username" name="username">
    </form>
12)textarea多行文本
    <textarea name="memo" id="memo" cols="30" rows="10">
        預設内容
    </textarea>
屬性說明：
    name：名稱
    rows：行數
    cols：列數
    disabled：禁用
前端知識 html 部分
上一篇: Locale 類|學習筆記
下一篇: 如何找到适合你的那片雲

繼續閱讀