HTML基本知識學習html首先我們先看看HTML本質： web框架本質我們在學socket，我們創建一個socketserver，然後運行起來，有一個client客戶端要連接socket服務端，連接上之後，如果兩邊都沒有close，就一直不斷開，可以不斷的進行請求。那我們說一個網站，我們在服 ...

HTML基本知識

學習html首先我們先看看HTML本質：

web框架本質

我們在學socket，我們創建一個socketserver，然後運行起來，有一個client客戶端要連接socket服務端，連接上之後，如果兩邊都沒有close，就一直不斷開，可以不斷的進行請求。

那我們說一個網站，我們在伺服器端運行我們的網站，所有的客戶端就可以通過瀏覽器訪問我們寫的網站，所以我們用的iis,apache等它們本質上就是一個socket服務端，而我們打開的瀏覽器就是client端，進行數據傳輸。

我們如果基於TCP,客戶端和服務端連接之後，只要兩邊不close，也都可以一直不斷的訪問交互。但是網站瀏覽器瀏覽和這個是不一樣的。瀏覽器訪問了服務端，服務端給我們數據，瀏覽器得到了數據之後，連接就立馬斷開了，如果還想要拿數據，還得再次建立連接。即一次請求，一次響應，一次斷開。

我們下麵寫一個socket服務端：

 1 import socket
 2 
 3 def handle_request(client):
 4     buf = client.recv(1024)
 5     client.send(bytes("HTTP/1.1 200 ok\r\n\r\n",encoding="utf-8"))
 6     client.send(bytes("Hello,Charles",encoding="utf-8"))
 7 
 8 
 9 def main():
10     sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
11     sock.bind(('localhost',8000))
12     sock.listen(5)
13 
14     while True:
15         connection,addr = sock.accept()
16         handle_request(connection)
17         connection.close()
18 
19 if __name__ == '__main__':
20     main()

我們運行之後用瀏覽器訪問起來：

所以伺服器的本質根源就是這20行代碼，建立socket連接。

其實我網站的顯示內容本質上也就是一大堆的字元串，我們在send函數中發送了hello,clarles，在網站上就顯示了那個內容，如果我們加上一些標簽比如

<h1 style='background-color:red'>Hello,Charles</h1>

那麼瀏覽器中顯示的就是如下：

那所以客戶端和伺服器端進行交互的時候，服務端返回的永遠是字元串，這個字元串之所以我們在瀏覽器上能看到上圖的樣式，那是因為瀏覽器把這個字元串進行瞭解析。瀏覽器認識這種格式。

所以我們要學的html其實就是一套瀏覽器認識的規則，這個就是html本質。

而我們開發者要做的就是：

1.學習html規則|（充當模板的作用）

2.從資料庫中獲取數據，然後替換到html文件的指定位置,這個事情以後就由web框架來做

html標簽知識

註釋：

標簽分類：

1.自閉合標簽：<meta charset="utf-8">

2.主動閉合標簽：<title>測試</title>

head內的標簽

title

網頁頭部信息：<title>TItle</title>

Link

1.css

2.icon:網站圖標

Style

在頁面中寫樣式

例如：
<style type="text/css" >
.bb{
background-color: red;
}
</style>

Script

1.引進文件

2.寫js代碼

< script type="text/javascript" > ... </script >

body內的標簽

標簽一般分為兩種：塊級標簽和行內標簽

行內標簽：a、span、select 等

塊級標簽：div、h1、p 等

各種符號

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

空格：  小於號：> 大於號：<

1.p和br

p表示段落，預設段落之間是有間隔的！

br 是換行

<p>1231<br/>32132</p>
<p>123132132</p>
<p>123132132</p>

2.H 標簽

3.input系列:

a.text文本框：<input type="text" name="user" value="輸入框中的預設值"> ，顯示效果：

b.password密碼框:<input type="password" name="passwd">輸入的密碼是點,顯示效果：

c. submit提交按鈕:<input type="submit" value="提交">,顯示效果：

用於表單的提交

d.button按鈕:<input type="button" value="登錄">,顯示效果：

僅僅只是一個按鈕，沒有辦法進行表單的提交

e. radio單選框：<input type="radio" value="登錄" name="gender">,

name屬性如果都相同，則互斥

value屬性用於後臺獲取選擇的值

<form>
        <div>
            <p>請選擇性別：</p>
        男：<input type="radio" name="gender" value="1"/>
        女：<input type="radio" name="gender" value="2"/>
        </div>
        <input type="submit" value="提交"/>
    </form>

f.checkbox多選框：<input type="checkbox" value="1" name="hobby">

<p>愛好</p>
籃球：<input type="checkbox" name="hobby" value="1"/>
足球：<input type="checkbox" name="hobby" value="2"/>
排球：<input type="checkbox" name="hobby" value="3"/>
網球：<input type="checkbox" name="hobby" value="4"/>
<p>技能</p>
 python：<input type="checkbox" name="skill" value="python"/>
 php：<input type="checkbox" name="skill" value="php"/>

效果:

如果需要預設選中的話：加一個屬性：checked="checked"

g.file上傳文件：<input type="file" name="fname">

如果你要用上傳文件功能，你再form表單中一定要加一個屬性：enctype='multipart/form-data'

h:reset內容重置:<input type="reset" name="重置">

4.textarea多行文本:

<textarea name="meno">asdfasdf</textarea>

多行文本的預設值寫在中間

5.select下拉框：

<select name="city" size="10" multiple="multiple">
      <option value="1">北京</option>
       <option value="2" selected="selected">上海</option>
       <option value="3">南京</option>
       <option value="4">廣州</option>
       <option value="5">深證</option>
</select>

顯示效果：

參數解釋：

size設置一次顯示多少個值
multiple可以多選，按住control鍵
selected="selected"：預設選擇的值

分組顯示：optgroup，但是這些江蘇省，湖南省沒有辦法選中

<select name="city2" size="5">
     <optgroup label="江蘇省">
             <option>宿遷</option>
             <option>蘇州</option>
     </optgroup>
     <optgroup label="湖南省">
             <option>湘潭</option>
             <option>長沙</option>
     </optgroup>
</select>

效果如圖：

6. a標簽

作用：

跳轉
錨點 :href="#某個標簽的id"標簽的ID不允許重覆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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>

這個就是一個錨的效果：點擊第一章，跳轉到本頁面的第一章位置；點擊第二章，跳轉到本頁面的第二個位置

7.img標簽

註意：預設img標簽，有一個1px的邊框，在使用的時候應該先用border:0；把邊框去掉

8.列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul style="background-color: red">
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
    </ul>
    <ol style="background-color: green">
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
    </ol>
    <dl style="background-color: yellow">
        <dt>asdf</dt>
            <dd>asdf12</dd>
            <dd>asdf12</dd>
        <dt>asdf</dt>
            <dd>asdf12</dd>
            <dd>asdf12</dd>
    </dl>
</body>
</html>

顯示效果如圖：

9.表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>主機名</td>
            <td>ip</td>
            <td>埠號</td>
        </tr>
        <tr>
            <td>localhost</td>
            <td>192.168.1.1</td>
            <td>8080</td>
        </tr>
    </table>
    <!--最規範的寫法，有表頭，有內容-->
    <table border="1">
        <thead>
            <tr>
                <th>主機名</th>
                <th>ip</th>
                <th>埠號</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>localhost</td>
                <td>192.168.1.1</td>
                <td>8080</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

效果顯示：

要註意代碼的規範性！！

合併單元格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--最規範的寫法，有表頭，有內容-->
    <table border="1">
        <thead>
            <tr>
                <th>表頭1</th>
                <th>表頭2</th>
                <th>表頭3</th>
                <th>表頭4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td colspan="2">1</td>
                <td>1</td>
            </tr>
            <tr>
                <td rowspan="2">2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

行合併用：rowspan 列合併用：colspan