前端知識之html基礎

時間 2019-12-04

標籤前端知識 html 基礎欄目 HTML 简体版

原文原文鏈接

前端知識之html內容

web服務本質css

瀏覽器發送請求-->http協議-->服務端接收請求-->服務端返回響應-->服務端把html文件內容發給瀏覽器-->瀏覽器渲染頁面html
實例簡單的一個socket前端

import socket
sk = socket.socket()
sk.bind(("127.0.0.1", 9000))
sk.listen()
while 1:
    conn, addr = sk.accept()
    data = conn.recv(9000)
    print(data)
    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
    conn.send('hello'.encode('utf8'))
    conn.close()

html是什麼html5
- 超文本標記語言（html）是一種用於建立網頁的標記語言，它不屬於編程語言python
- 本質是瀏覽器可識別的規則web
- 最基本的html文檔編程
  1. <!DOCTYPE html> 聲明爲html5文檔瀏覽器
    
    <!DOCTYPE>指web瀏覽器關於頁面使用哪一個html版本進行編寫的指令服務器
  2. <html> </html>是文檔的開始和結束標記，是html的根源素，在他們之間是head（頭部）和body（身體）dom
  3. <head> </head>head>定義了html文檔的開頭部分，他們之間的內容不會顯示在瀏覽器的文檔窗口上，包含文檔的meta（元）數據
  4. <title> </title>定義了網頁標題，在瀏覽器標題欄顯示
  5. <body> </body>之間的文本是可見的網頁主體內容
  6. 註釋語法 
    
    注意：對於中文網頁須要使用<meta charset='utf8'>聲明編碼，不然會出現亂碼，有些瀏覽器會設置gbk爲默認編碼，則你須要將聲明的編碼改爲gbk的樣子
- ```
<!DOCTYPE html>

<html lang="zh-CN">
<head>
    
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
```
html標籤格式
html標籤
- 由尖括號包圍的關鍵字造成
- 標籤一般是成對出現，例<div>和</div>
- 部分標籤是單獨呈現的例<br>換行的意思
- 標籤裏面能夠有若干屬性，也能夠不帶屬性
標籤語法
- <標籤名屬性1=「屬性值1」屬性2=「屬性值2」>內容部分</標籤名>
- <標籤名屬性1=「屬性值1」>
幾個很重要的屬性
- id 定義標籤的惟一id，一個html文檔中惟一
- class 爲html元素定義一個或多個類名（classname）（css樣式類名）
- style：規定元素的行內樣式（css樣式）

html經常使用標籤

head經常使用標籤
- <title>網頁標題</title>定義網頁標題
- <style>內部樣式</style>定義內部樣式表
- <script></script>定義js代碼或引入外部js文件
- <link>引入外部樣式表文件
- <meta>定義網頁元信息
  - 可提供有關頁面的原信息，針對搜索引擎和更新頻繁的描述和關鍵字
  - 位於head（頭部），不包含任何內容
  - 提供的信息時用戶不可見的
  - 含有http-equiv屬性和name屬性，（瞭解）
body內經常使用標籤
- ```
<b>加粗</b>
<i>斜體字</i>
<u>下劃線</u>
<s>刪除文字中間一橫槓</s>

<p>段落標籤，該標籤的內容爲一段落</p>
<h1>標題</h1>
<h6>標題6</h6>

<br>

<hr>
```
  經常使用特殊字符（百度html特殊字符表）
```

&nbsp;

&gt;

&lt;

&amp;

&yen;

&copy;

&reg;
```
- div標籤和span標籤
  - 相同點：
    - 沒有自帶的樣式
    - 能夠經過使用css來調整樣式
  - 不一樣點
    - div是塊級元素，獨佔一行
    - span是行內（內聯）元素，不會另起一行
  - 注意：塊級標籤支持嵌套
    - 一般塊級元素能夠包含內聯元素或某些塊級元素，可是內聯元素不能包含塊級元素
    - p段落標籤不能包含塊級元素，也不能包含p標籤
- 塊級標籤和內聯（行內）標籤
  - 塊級標籤
    - P段落標籤
    - h1~h6標題標籤
    - hr 水平線標籤
    - div標籤
  - 內聯標籤
    - span標籤
    - b加粗標籤，i斜體標籤，u下劃線標籤，s刪除標籤
- img標籤
  - ```
  <img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">
```
- a超連接標籤
  - 定義：指從一個網頁指向一個目標的連接關係
  - ```
  <a href="http://www.oldboyedu.com" target="_blank" >點我</a>
```
  target屬性值
  - _blank 表示在新標籤頁中打開目標網址
  - _self表示在當前標籤中打開目標網址
- 列表標籤
  - 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屬性
    - 默認數字，A大寫字母，a小寫字母，I大寫羅馬，i小寫羅馬
    - start屬性：排序從start是幾開始
  - 標題列表
    - ```
    <dl>
      <dt>標題1</dt>
      <dd>內容1</dd>
      <dt>標題2</dt>
      <dd>內容1</dd>
      <dd>內容2</dd>
    </dl>
```
- 表格標籤
  - ```
  <table>
    <thead>
    <tr>
      <th>序號</th>
      <th>姓名</th>
      <th>愛好</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>1</td>
      <td colspan="1">Egon</td>
      <td>槓娘</td>
    </tr>
    <tr>
      <td>2</td>
      <td rowspan="2">Yuan</td>
    </tr>
    </tbody>
  </table>
```
  屬性：
  - border :表格邊框
  - cellpadding 內邊框
  - cellpacing 外邊距
  - width 像素百分比（最好同過css來設置長寬）
  - rowspan 單元格豎跨多少行
  - colsapn 單元格橫跨多少列（合併單元格）
- 獲取用戶輸入的標籤form
  - 功能：
    - 用於向服務器傳輸數據，從而實現用戶與web服務器的交互
    - 包含input系列標籤，例文本字段，複選框，提交按鈕等
    - 包含textarea,select,fieldset和label標籤
    - 表單屬性
      - accept-charset 規定在被提交表單中使用的字符集(默認：頁面字符集)
      - action 規定向何處提交表單的地址
      - autocomplete 規定瀏覽器應該自動完成表單（默認開啓）
      - enctype 規定被提交數據的編碼(默認 url-encoded)
      - method 規定在提交表單是所用的http方法默認get
      - name 規定識別表單的名稱（對於dom使用document.forms.name)
      - novalidate 規定瀏覽器不驗證表單
      - target 規定action屬性中地址的目標
      - <form action="http://127.0.0.1:9000" method="post" enctype="multipart/form-data">
  - input標籤
    - 一般和label標籤配合使用
      
      例
```
<p>
    <label for="i1">用戶名：</label>
  <input id="i1" type="text" name="username">
</p>

<p>
    <label>密碼：
        <input type="password" name="pwd">
    </label>
</p>
```
    - type屬性
      1. text 單行輸入文本
      2. password 密碼輸入框（密文）
      3. date 時間輸入框
      4. checkbox 複選框<input type="checkbox" checjed="checked" >
      5. radio 單選框 <input type="radio">
      6. submit 提交按鈕 <input type="submit" value="提交">
      7. reset 重置按鈕 input type="reset" value="重置按鈕" >
      8. button 普通按鈕 <input type="button" value="普通按鈕" >
      9. hidden 隱藏輸入框 <input type="hidden">
      10. file 文本選擇框 <input type="file">