前端 -- HTML_ZenDei技術網路在線

一. HTML介紹: HTML是什麼? 超文本標記語言(Hypertext Markup Language),是一種用於創建網頁的標記語言,不是編程語言本質上是瀏覽器可識別的規則,我們按照規則寫網頁,瀏覽器根據規則渲染我們的網頁.對於不同的瀏覽器,對同一個標簽可能會有不同的解釋. (相容性問題) ...

一. HTML介紹:

HTML是什麼?
- 超文本標記語言(Hypertext Markup Language),是一種用於創建網頁的標記語言,不是編程語言
- 本質上是瀏覽器可識別的規則,我們按照規則寫網頁,瀏覽器根據規則渲染我們的網頁.對於不同的瀏覽器,對同一個標簽可能會有不同的解釋. (相容性問題)
- 網頁文件的擴展名: .html 或 .htm
HTML 文檔結構
```
<!DOCTYPE html> 
<html lang="zh-CN">   #這個lang表示語言，zh-CN是中文的意思，就是說，你整個文檔的內容以中文為主，如果以英文為主，就寫成lang='en'

<head> 
  <meta charset="UTF-8">  # 編碼
  <title>css樣式優先順序</title>
</head>
<body> 
     正文內容
</body>
</html>
```
- <!DOCTYPE html> 聲明為HTML5文檔
- <html> </html> 是文檔的開始標記和結束標記. 是HTML頁面的根元素,在它們之間的文檔的頭部(head) 和主體(body)
- <head> </head> 定義了HTML文檔的開頭部分,它們之間的內容不會在瀏覽器的文檔視窗顯示. 包含了文檔的元 (meta) 數據,配置信息等,是給瀏覽器看的,我們看到是在body標簽裡面寫的內容
- 註意: 對於中文網頁需要使用<meta charset = 'utf-8'>聲明編碼,否則會出現亂碼. 有些瀏覽器會設置GBK編碼,則需要設置為<meta charset = 'gbk'>

web伺服器本質　

import socket

sk = socket.socket()
sk.bind(('127.0.0.1',8008))
sk.listen()

while True:
    conn,addr = sk.accept()
    data = conn.recv(1024)
    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
    conn.send(b'<h1>hello word</h1>')
    conn.close()

瀏覽器發請求 --> HTTP協議 --> 服務端接收請求 --> 服務端返迴響應 --> 服務端把HTML文件內容發給瀏覽器 --> 瀏覽器渲染頁面

二. HTML標簽介紹

標簽的格式: 嚴格封閉的
- HTML標簽是由尖括弧包圍的關鍵字，如<html>, <div>等
- HTML標簽通常是成對出現的，比如：<div>和</div>，第一個標簽是開始，第二個標簽是結束。結束標簽會有斜線。
- 也有一部分標簽是單獨呈現的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
- 標簽裡面可以有若幹屬性，也可以不帶屬性。
標簽的語法
- <標簽名屬性1=“屬性值1” 屬性2=“屬性值2”……> 內容部分 </標簽名>
- <標簽名屬性1=“屬性值1” 屬性2=“屬性值2”…… />
標簽的分類:
- 內斂標簽(行內標簽) : 不獨占一行 (b / i / u / s / img / a / span / button 等),內斂標簽只能嵌套內斂標簽
- 塊級標簽(行外標簽) : 自己獨占一行 (h1- h6 / br / hr / p / div 等),可以嵌套內斂標簽和某些塊級標簽
- p標簽 : 不能嵌套p標簽,也不能嵌套塊級標簽

三. HTML常用標簽

head標簽中的標簽:
- <title> </title> : 定義網頁標題
- <style> </style> : 定義內部樣式表
- <script> </script> : 定義JS代碼或引入外部JS文件
- <link/> : 引入外部樣式表文件
- <meta/> : 定義網頁原信息
  - meta標簽共有兩個屬性,分別是http_equiv屬性和name屬性,不同的屬性又有不同的參數值,這些不同的參數值就實現了不同的網頁功能
  - http_equiv屬性: 相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變數值。
```
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
# 兩秒後跳轉到相應的網址,如果把URL和後面的內容刪掉,就是兩秒中刷新一次

<meta http-equiv="content-Type" charset="UTF8"> 
# 指定編碼的類型 
```
  - name屬性: 主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。　
    - 紅框就是描述的信息

body標簽中的基本標簽　(塊級標簽和內聯標簽)

<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除</s>

<p>
    段落標簽  # 獨占一個段落
</p>

<button>一個按鈕</button>

<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
# 從上到下,字體依次變小

<!--換行-->
<br>

<!--水平線 / 分割線-->
<hr>

div標簽和span標簽(常用)
- 這兩個標簽是沒有特別的樣式的。<div>xxxx</div>，但是這是兩個標簽最大的特點，可以通過CSS來控制，就像咱們畫畫一樣，在一個白紙上畫好，還是在一個報紙上畫好啊，對不對。打開個網頁通過f12看一下，就發現多數都是div和span。
- div標簽用來定義一個塊級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現。
- span標簽用來定義內聯(行內)元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現。
- 塊級元素與行內元素的區別：所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門為定義CSS樣式而生的。
img標簽
- 圖片標簽
- 屬性:
  - src = '圖片路徑' # 網路地址的絕對路徑或者本地的相對路徑
  - alt = '圖片未載入成功時的提示'
  - title = '滑鼠懸浮時提示信息'
  - width = '設置圖片的寬'
  - height = '設置圖片的高'
- ```
# 示例:
<img src="1.jpg" alt="這是個美女,請稍等.." title="美女" width="200" height="200">
```
a標簽
- 超鏈接標簽
- 屬性:
  - href : 超鏈接的地址
  - target : 是否新建視窗
    - target = '_self' 當前視窗打開某個路徑對應的html頁面
    - target = '_bland' 新建視窗打開某個路勁對應的html頁面
- ```
<a href="https://www.baidu.com" target="_blank">
   <button>點擊進入百度</button>
</a>
```

列表標簽

無序列表
- type屬性:
  - disc : 實心圓點(預設值)
  - circle : 空心圓圈
  - square : 實心方塊
  - none : 無樣式
- ```
<ul type = 'disc'>
    <li>太白</li>
    <li>alex</li>
    <li>wusir</li>
</ul>
```

有序列表

start屬性 : 是從數字幾開始
type屬性:
- 1 : 數字列表.預設值
- A : 大寫字母
- a : 小寫字母
- I : 大寫羅馬
- i : 小寫羅馬

<ol type="A" start="2">
    <li>太白</li>
    <li>alex</li>
    <li>wusir</li>
</ol>
# 表示按照大寫字母進行排序,從B開始

標題列表標簽

就像大綱一樣,有一個層級效果

<dl>
    <dt>標題1</dt>
    <dd>內容1</dd>
    <dt>標題2</dt>
    <dd>內容1</dd>
    <dd>內容2</dd>
</dl>

表格標簽

屬性:
- border : 表格邊框 (邊框高度)
- cellpadding : 內邊距 (內邊框和內容距離)
- cellspacing : 外邊距 (內外邊框的距離)
- width : 像數百分比 (最好通過css來設置長寬)
- rowspan : 單元格豎跨多少行 (寫在td裡面)
- colspan : 單元格橫跨多少列(即合併單元) (寫在td裡面)

<table border="5" cellpadding="5" cellspacing="2">
    <thead>   # 表格的標題(頭)
        <tr>  # 一行
            <th>姓名</th>  # 一個單元格的內容
            <th>年齡</th>
            <th>愛好</th>
        </tr>
    </thead>

    <tbody>   # 表格的正文內容
        <tr>
            <td>alex</td>
            <td>83</td>
            <td>抽煙</td>
        </tr>
        <tr>
            <td>wusir</td>
            <td>74</td>
            <td>喝酒</td>
        </tr>
    </tbody>
</table>

input標簽

type屬性	表現形式	對應代碼
text	單行輸入文本	`<input type = 'text' />`
password	密碼輸入框(不顯示明文)	`<input type = 'password' />`
date	日期輸入框	`<input type = 'date' />`
checkbox	覆選框	`<input type = 'checkbox' name = 'x' />`
radio	單選框	`<input type = 'radio' name = 'x' />`
submit	提交按鈕	`<input type = 'submit' value = '提交' />`
reset	重置按鈕	`<input type = 'reset' value = '重置' />`
button	普通按鈕	`<input type = 'button' value = '普通按鈕' />`
hidden	隱藏輸入框	`<input type = 'hidden' />`
file	文本選擇框	`<input type = 'file' />`

type屬性 : 控制輸入框的樣式
name屬性 : 分組,攜帶數據key 傳給後臺的是: key:value
value : 表單提交時對應項的值
- type="button", "reset", "submit"時，為按鈕上顯示的文本內容
- type="text","password","hidden"時，為輸入框的初始值
- type="checkbox", "radio", "file"，為輸入相關聯的值
readonly : 只讀,針對的是輸入框如:text,password
disabled : 不允許操作,所有的input都可以設置
設置了readonly的標簽,它的數據可以被提交到後臺,設置了disabled的數據,是不能提交到後臺的
submit : 發送瀏覽器上輸入標簽中的內容,配合form表單使用,頁面會刷新
reset : 頁面不會刷新,將所有內容清空

form表單

<form action="http://127.0.0.1:8008">    # action: 指定數據提交的路徑
    用戶名:<input type="text" name = 'username'>
    密碼:<input type="password" name = 'password'>
    <br>
    <input type="radio" name = 'sex' value="1">男  # 傳給後臺的數據是 : sex:1
    <input type="radio" name = 'sex' value="2">女
    <br> 
    <input type="checkbox" name = 'hobby' value="a">喝酒  # 傳給後臺的數據是: hobby:a
    <input type="checkbox" name = 'hobby' value="b">抽煙
    <input type="checkbox" name = 'hobby' value="c">燙頭
    <input type="submit" value = '提交按鈕'>
    <br>
    <input type="date">
    <input type="button" value = '提交按鈕'>
    <input type="reset" value = '重置'>
    <input type="hidden">
    <input type="file">
</form>

註意:form表單觸發提交數據的操作,必須寫在form表單標簽裡面,寫在外面就是普通按鈕
- <input type='submit'>
- <button>提交按鈕</button>
checked預設選中
- <input type="radio" name="sex" value="2" checked>女 #簡寫方式,當屬性名和屬性值相同時可簡寫預設選中 : 女
- <input type="checkbox" name="hobby" value="a">喝酒
- <input type="checkbox" name="hobby" value="b" checked="checked">抽煙
- <input type="checkbox" name="hobby" value="c" checked="checked">燙頭
- 預設選中了 : 抽煙,喝酒

select標簽下拉選擇框

# 單選
<select name="city">
    <option value="1">北京</option>
    <option value="2" selected='selected'>上海</option>  # 預設選中上海
    <option value="3">深圳</option>
</select>

# 多選:multiple
<select name="city" multiple>
    <option value="1">北京</option>
    <option value="2" selected>上海</option>  # # 預設選中上海
    <option value="3">深圳</option>
</select>

multiple：布爾屬性，設置後為多選下拉框，否則預設單選
disabled：禁用
selected：預設選中該項
value：定義提交時的選項值

label標簽

標識標簽的功能

方式一: for:執行對哪個標簽進行標識
效果: 點擊label標簽中的文字.就能讓標識的標簽獲得游標
<label for="username">用戶名</label>
<input id="username" type="text" name="username" value="alex">

方式二:
<label>
    密碼:<input type="password" name="password" value="111" disabled>
</label>

說明:
- label 元素不會向用戶呈現任何特殊效果,但是點擊label標簽裡面的文本,那麼和他關聯的input標簽就獲得了游標,讓你輸入內容
- label標簽的for屬性值應當與相關元素的id屬性值相同

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  預設內容
</textarea>
name：名稱
rows：行數   #相當於文本框高度設置
cols：列數   #相當於文本框長度設置
disabled：禁用