HTMl基礎

時間 2019-11-13

標籤 html 基礎欄目 HTML 简体版

原文原文鏈接

import socket

def main():

    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost',8081))
    sock.listen(5)

    while True:
        print("server is working.....")
        conn, address = sock.accept()

        request = conn.recv(1024)

        conn.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n<h1>Hello Yuan</h1>","utf8"))
        conn.close()

if __name__ == '__main__':

    main()

python socket服務

　　html是什麼javascript

超文本標記語言（Hypertext Markup Language，HTML）經過標籤語言來標記要顯示的網頁中的各個部分。一套規則，瀏覽器認識的規則
瀏覽器按順序渲染網頁文件，而後根據標記符解釋和顯示內容。但須要注意的是，對於不一樣的瀏覽器，對同一標籤可能會有不徹底相同的解釋（兼容性）
靜態網頁文件擴展名：.html 或 .htm

HTML的結構

<!DOCTYPE html> 告訴瀏覽器使用什麼樣的html或者xhtml來解析html文檔
<html></html>是文檔的開始標記和結束標記。此元素告訴瀏覽器其自身是一個 HTML 文檔，在它們之間是文檔的頭部<head>和主體<body>。
<head></head>元素出如今文檔的開頭部分。<head>與</head>之間的內容不會在瀏覽器的文檔窗口顯示，可是其間的元素有特殊重要的意義。
<title></title>定義網頁標題，在瀏覽器標題欄顯示。
<body></body>之間的文本是可見的網頁主體內容

html標籤格式介紹

標籤的語法：php

<標籤名屬性1=「屬性值1」屬性2=「屬性值2」……>內容部分</標籤名>
<標籤名屬性1=「屬性值1」屬性2=「屬性值2」…… />css

經常使用標籤

<!DOCTYPE>標籤

<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。html

做用：聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。

document.compatMode：java

BackCompat：怪異模式，瀏覽器使用本身的怪異模式解析渲染頁面。
CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。

這個屬性會被瀏覽器識別並使用，可是若是你的頁面沒有DOCTYPE的聲明，那麼compatMode默認就是BackCompatpython

<head>內經常使用標籤

<meta>標籤

meta介紹
<meta>元素可提供有關頁面的元信息（meta-information），針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>標籤位於文檔的頭部，不包含任何內容。
<meta>提供的信息是用戶不可見的web

meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。編程

(1)name屬性: 主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。瀏覽器

<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
 
<meta name="description" content="老男孩培訓機構是由一個很老的男孩建立的">

(2)http-equiv屬性：至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。安全

<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意後面的引號，分別在秒數的前面和網址的後面)
 
<meta http-equiv="content-Type" charset=UTF8">
 
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />

非meta標籤

    <title>oldboy</title>
    <link rel="icon" href="http://www.jd.com/favicon.ico">
    <link rel="stylesheet" href="css.css">
    <script src="hello.js"></script>

<body>內經常使用標籤

基本標籤（塊級標籤和內聯標籤）

'''
<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.

<p>: 段落標籤. 包裹的內容被換行.而且也上下內容之間有一行空白.

<b> <strong>: 加粗標籤.

<strike>: 爲文字加上一條中線.

<em>: 文字變成斜體.

<sup>和<sub>: 上角標 和 下角表.

<br>:換行.

<hr>:水平線

特殊字符：
      &lt; &gt；&quot；&copy;&reg;

'''

<div>和<span>

<div></div> ： <div>只是一個塊級元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現. 
<span></span>： <span>表示了內聯行(行內元素),並沒有實際的意義,主要經過CSS樣式爲其賦予不一樣的表現.

塊級元素與行內元素的區別
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門爲定義CSS樣式而生的。

圖形標籤: <img>

'''
src: 要顯示圖片的路徑.

alt: 圖片沒有加載成功時的提示.

title: 鼠標懸浮時的提示信息.

width: 圖片的寬

height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

'''

在線練習

在線練習

超連接標籤(錨標籤): <a> </a>

什麼是超級連接？
所謂的超連接是指從一個網頁指向一個目標的鏈接關係，這個目標能夠是另外一個網頁，也能夠是相同網頁上
的不一樣位置，還能夠是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序

什麼是URL？
URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱爲網頁地址，是因特網上標準的資源的地址。
URL舉例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分組成
第1部分：爲協議：http://、ftp://等 
第2部分：爲站點地址：能夠是域名或IP地址
第3部分：爲頁面在站點中的目錄：stu
第4部分：爲頁面名稱，例如 index.html
各部分之間用「/」符號隔開。

什麼是URL？

<a href="" target="_blank" >click</a>

href屬性指定目標網頁地址。該地址能夠有幾種類型：

    絕對 URL - 指向另外一個站點（好比 href="http://www.jd.com）
    相對 URL - 指當前站點中確切的路徑（href="index.htm"）
    錨 URL - 指向頁面中的錨（href="#top"）

<a href="http://www.xiaohuar.com/hua/">點我啊</a>

<a href="http://www.xiaohuar.com/hua/">
    <img src="meinv.jpg" alt="美女"  title="美女">
</a>

<a href="lesson1.html">點我</a>

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

        #part1{
            background-color: red;
            height: 500px;
            color: white;
            font-size: 30px;
        }
        #part2{
            background-color: green;
            height: 500px;
            color: white;
            font-size: 30px;
        }

        #part3{
            background-color: gold;
            height: 500px;
            color: white;
            font-size: 30px;
        }



    </style>
</head>
<body>

<p id="part1">第一章</p>

<p id="part2">第二章</p>

<p id="part3">第三章</p>

<a href="#part1">返回第一章</a>

</body>
</html>

錨

列表標籤（）

<ul>: 無序列表 [type屬性：disc(實心圓點)(默認)、circle(空心圓圈)、square(實心方塊)]
<ol>: 有序列表
         <li>:列表中的每一項.
<dl>  定義列表
         <dt> 列表標題
         <dd> 列表項

<!--無序列表  有序列表  定義列表-->


<!--無序列表   unorder list-->

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>

<!--有序列表  order list-->

<ol>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

<!--定義列表 define list-->

<dl>
    <dt>標題</dt>      define title
    <dd>item</dd>      define data
    <dd>item</dd>
    <dd>item</dd>
</dl>

例子

表格標籤: <table>

表格概念

表格

表格由 <table> 標籤來定義。每一個表格均有若干行（由 <tr> 標籤訂義），每行被分割爲若干單元格（由 <td> 標籤訂義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格能夠包含文本、圖片、列表、段落、表單、水平線、表格等等。

表格最重要的目的是顯示錶格類數據。表格類數據是指最適合組織爲表格格式（即按行和列組織）的數據。
表格的基本結構：

 <table border="1">
<tr>
　　<td>row 1, cell 1</td>
　　<td>row 1, cell 2</td>
</tr>
<tr>
　　<td>row 2, cell 1</td>
　　<td>row 2, cell 2</td>
</tr>
</table>

效果以下
row 1, cell 1    row 1, cell 2
row 2, cell 1    row 2, cell 2

屬性練習地址：http://www.w3school.com.cn/html/html_tables.asp

<tr>: table row

<th>: table head cell   表格的表頭使用 <th> 標籤進行定義

<td>: table data cell


屬性:

    border: 表格邊框.

    cellpadding: 內邊距

    cellspacing: 外邊距.

    width: 像素 百分比.（最好經過css來設置長寬）

    rowspan:  單元格豎跨多少行

    colspan:  單元格橫跨多少列（即合併單元格）

<table border="2px" cellpadding="10px" cellspacing="3px">


    <!--table data-->
    <!--<tr>-->
        <!--<td>語文</td>-->
        <!--<td>數學</td>-->
        <!--<td>音樂</td>-->
    <!--</tr>-->

    <tr>
        <th>語文</th>   ----table head
        <th>數學</th>
        <th>音樂</th>
    </tr>
     <tr>
        <td>111</td>
        <td colspan="2">222</td>

    </tr>
     <tr>
        <td rowspan="2">444</td>
        <td>555</td>
        <td>666</td>
    </tr>
     <tr>

        <td>888</td>
        <td>999</td>
    </tr>


</table>

例子

表單標籤: <form>

功能：表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互

表單可以包含input系列標籤，好比文本字段、複選框、單選框、提交按鈕等等。

表單還能夠包含textarea、select、fieldset和 label標籤。

表單屬性

action: 表單提交到哪.通常指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）做相應處理，好比https://www.sogou.com/web

method: 表單的提交方式 post/get默認取值就是get

屬性                描述
accept-charset    規定在被提交表單中使用的字符集（默認：頁面字符集）。
action            規定向何處提交表單的地址（URL）（提交頁面）。
autocomplete      規定瀏覽器應該自動完成表單（默認：開啓）。
enctype           規定被提交數據的編碼（默認：url-encoded）。
method            規定在提交表單時所用的 HTTP 方法（默認：GET）。
name              規定識別表單的名稱（對於 DOM 使用：document.forms.name）。
novalidate        規定瀏覽器不驗證表單。
target            規定 action 屬性中地址的目標（默認：_self）。

什麼時候使用 GET？
您可以使用 GET（默認方法）：

若是表單提交是被動的（好比搜索引擎查詢），而且沒有敏感信息。

當您使用 GET 時，表單數據在頁面地址欄中是可見的：

action_page.php?firstname=Mickey&lastname=Mouse
註釋：GET 最適合少許數據的提交。瀏覽器會設定容量限制。

什麼時候使用 POST？
您應該使用 POST：

若是表單正在更新數據，或者包含敏感信息（例如密碼）。

POST 的安全性更加，由於在頁面地址欄中被提交的數據是不可見的。

表單元素

基本概念：
HTML表單是HTML元素中較爲複雜的部分，表單每每和腳本、動態頁面、數據處理等功能相結合，所以它是製做動態網站很重要的內容。
表單通常用來收集用戶的輸入信息
表單工做原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，而後按某個按鈕提交。這些信息經過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理，若是有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤後，服務器反饋一個輸入完成的信息

<input>系列標籤

<input> 元素根據不一樣的 type 屬性，能夠變化爲多種形態。

'''
<1> 表單類型

type:        text 文本輸入框 供文本輸入的單行輸入字段

             password 密碼輸入框  定義密碼字段：

             radio 單選框

             checkbox 多選框  

             submit 提交按鈕        定義提交表單數據至表單處理程序的按鈕。

　　　　　　　　　　　　　　　　　　　　　　表單處理程序（form-handler）一般是包含處理輸入數據的腳本的服務器頁面。

　　　　　　　　　　　　　　　　　　　　　　在表單的 action 屬性中規定表單處理程序（form-handler）：

             button 按鈕(須要配合js使用.) button和submit的區別？<button> 元素定義可點擊的按鈕：

             file 提交文件：form表單須要加上屬性enctype="multipart/form-data" 
            
            上傳文件注意兩點：請求方式必須是post  enctype="multipart/form-data"

　　　　　　　reset 重置
　　　　　　　　
　　　　　　　hiden 隱藏 頁面不顯示

　　　　　

 <2> 表單屬性

 name:    表單提交項的鍵.

           注意和id屬性的區別：name屬性是和服務器通訊時使用的名稱；
           而id屬性是瀏覽器端使用的名稱，該屬性主要是爲了方便客戶端編程，而在css和javascript中使用的

value:    表單提交項的值.對於不一樣的輸入類型，value 屬性的用法也不一樣：

                type="button", "reset", "submit" - 定義按鈕上的顯示的文本
                 
                type="text", "password", "hidden" - 定義輸入字段的初始值
                 type="checkbox", "radio", "image" - 定義與輸入相關聯的值 


radio    定義單選按鈕。 checked屬性 默認選中
checkbox 定義複選框。    checked屬性，默認選中

readonly: 只讀.readonly 屬性規定輸入字段爲只讀（不能修改）
　　　　　　readonly 屬性不須要值。它等同於 readonly="readonly"。
 　　　　　　text 和 password

　　　　　　<input type="text" name="firstname" value="John" readonly>

disabled: 對所用input都好使.  '''

select標籤

<select> 元素定義下拉列表：

'''
 <select> 下拉選標籤屬性


          name:表單提交項的鍵.

          size：選項個數

          multiple：multiple 
                 <optgroup>爲每一項加上分組

                 <option> 下拉選中的每一項 屬性：

                       value:表單提交項的值.   
                       selected: selected下拉選默認被選中

'''

<textarea> 多行文本框

<textarea> 元素定義多行輸入字段（文本域）：

'''

<form id="form1" name="form1" method="post" action="">
        <textarea cols=「寬度」 rows=「高度」 name=「名稱」>
                   默認內容
        </textarea>
</form>

'''

<label>標籤

定義：<label> 標籤爲 input 元素定義標註（標記）。
說明：
1 label 元素不會向用戶呈現任何特殊效果。
2 <label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。

'''

<form method="post" action="">

        <label for=「username」>用戶名</label>
        <input type=「text」 name=「username」 id=「username」 size=「20」 />
</form>

'''

<fieldset>標籤

<fieldset> 元素組合表單中的相關數據

<legend> 元素爲 <fieldset> 元素定義標題。

'''

<fieldset>
    <legend>登陸吧</legend>
    <input type="text">
</fieldset>

'''

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

<h1>用戶註冊</h1>

<form action="/index/" method="post">
    
    <p>姓名:<input type="text" name="username" value="yuan"></p>
    <p>密碼:<input type="password" name="pwd"></p>

    <p>愛好：籃球<input type="checkbox" name="aihao" value="basktball" checked="checked">
             足球<input type="checkbox" name="aihao" value="football">
             乒乓球<input type="checkbox" name="aihao" value="pingpang"></p>

    <p>性別  男<input type="radio" name="sex" value="men">女<input type="radio" name="sex" value="women">其餘<input type="radio" name="sex" value="fang"></p>

    <p><input type="hidden" name="data" value=""></p>
    <p><input type="file" name="filename"></p>
    <p><input type="button" value="button"></p>

    <select name="province" size="2" multiple>
        <optgroup label="中國">
                <option value="hebei" selected="selected">河北省</option>
                <option value="henan">河南省</option>
                <option value="shanxi">陝西省</option>
                <option value="sanxi">山西省</option>
        </optgroup>
    </select>

    <p>簡介:</p>

    <p>
        <textarea name="jianjie" rows="8" cols="32"></textarea>
    </p>
    <label for="username">用戶名</label>
    <input type="text" name="username" id="username">

    <fieldset>
        <legend>登陸吧</legend>
        <input type="text">
    </fieldset>

    <p><input type="submit" value="submit"></p>


</form>

</body>
</html>

例子

HTML5 表單元素

HTML5 增長了以下表單元素：

<datalist>
<keygen>
<output>

註釋：默認地，瀏覽器不會顯示未知元素。新元素不會破壞您的頁面。

HTML5 <datalist> 元素

<datalist> 元素爲 <input> 元素規定預約義選項列表。

用戶會在他們輸入數據時看到預約義選項的下拉列表。

<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性。

實例

經過 <datalist> 設置預約義值的 <input> 元素：

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>