HTML介紹1.1 web1.2 HTML是什么：1.3 HTML不是什么？1.4 HTML檔案結構1.5 HTML標簽格式1.6 HTML注釋1.7 標簽2.0 HTML常用標簽2.2 body 內常用標簽

HTML介紹

1.1 web

b/s

瀏覽器和服務器互動流程：瀏覽器發送請求》HTTP協議》服務端接收請求》服務端回傳回應》服務端把HTML檔案內容發送給瀏覽器》瀏覽器渲染頁面簡單代碼如下：

import socket
sk = socket.socket()
sk.bind(    ('127.0.0.1', 8085))
sk.listen(5)
while True:    
  conn, addr = sk.accept()    
  data = https://www.cnblogs.com/zfb123-/p/conn.recv(8095)    
  conn.send(b"HTTP/1.1 200 OK\r\n\r\n")    
  conn.send(b"<h1>Hello world!</h1>")    
  conn.close()

在網頁輸入：127.0.0.1:8085 顯示結果： Hello world

1.2 HTML是什么：

是一種用于創建網頁的標記語言超文本語言，本質上是瀏覽器可識別的規則，按照規則寫網頁，瀏覽器根據規則渲染網頁，對于不同的瀏覽器對同一個標簽可能會有不同的解釋，這是因為兼容性問題，網頁檔案的擴展名： .html和 .htm

1.3 HTML不是什么？

是一種標記語言，不是編程語言，

1.4 HTML檔案結構

最基礎的HTML檔案

<!DOCTYPE html>
<html 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）資料，
<title>、<title> 定義了網頁標題，在瀏覽器標題欄顯示，
<body>、<body>之間的文本是可見的網頁主題內容

注意：對于中文網頁需要使用<meta charset="UTF-8"> 宣告編碼，否則會出現亂碼，有些瀏覽器會設定gbk為默認編碼，需要你設定 <meta charset="gbk">，

1.5 HTML標簽格式

HTML標簽是由尖括號包圍的關鍵字，如<html>，<head>等
HTML標簽通常是成對出現的，如<body>和</body>，第一個標簽是開始，第二個是結束，結束標簽有斜線，
也有一部分標簽是單獨呈現的如<hr/>等，
標簽里面可以有若干屬性，也可以不帶屬性

標簽的語法

<標簽名屬性1="屬性1" 屬性2="屬性2"......>內容部分</標簽名>
<標簽名屬性1="屬性1" 屬性2="屬性2"......>

幾個很重要的屬性：

id：定義標簽的唯一id，HTML檔案樹中唯一
class：為html元素定義一個或多個類名（classname）（css樣式類名）
style: 規定元素的行內樣式（css樣式）

1.6 HTML注釋

<!-- 注釋內容-->
?

注釋是代碼之母，

1.7 標簽

<!DOCTYPEl>宣告必須是HTML檔案在第一行，位于<html>標簽之前，

<!DOCTYPEl>宣告不是HTML標簽，它是指示web瀏覽器關于頁面是用哪個HTML版本進行撰寫的指令，

2.0 HTML常用標簽

標簽	意義
<title><title>	定義網頁標題
<style> <style>	定義內部樣式表
<script> <script>	定義js代碼或引入外部js檔案
<link>	引入外部樣式表示檔案或網站圖示
<meta>	定義網頁原資訊

Meta標簽

meta標簽介紹：

<meta>元素可提供有關頁面的元資訊(meta-information),針對搜索引擎和更新頻度的描述和關鍵詞，
<meta>標簽位于檔案的頭部，不包含任何內容，
<meta>提供的資訊是用戶不可見得，

meta標簽的組成：meta標簽共有兩個屬性，他們分別是http-equiv屬性和name屬性，不同的屬性又有不同的引數值，這些不同的引數值就實作了不同的網頁功能，

http-equiv屬性：相當于HTTP的檔案頭作用，他可以向瀏覽器傳回一些有用的資訊，以幫助正確的顯示網頁內容，預支對應的屬性值為content，content中的內容其實就是引數的變數值，

<meta http-equiv="content-Type"charset=UTF8"
<meta http-equiv="refresh"content="2;URL=https://www.https://oldboyedu.com">
<meta http-equiv="x-ua-compatible" content="IE=edge">

name屬性：主要用于描述網頁，預支對應的屬性值content，content中的內容主要是邊緣搜索引擎機器人查找資訊和分類資訊用的，

<meta name="keywords" content="meta總結，html meta, meta屬性，meta跳轉">
<meta name="description" content="老男孩教育python學院">

2.2 body 內常用標簽

基本標簽（塊級標簽和行內標簽）

<b>加粗<b>
<i>斜體<i>
<U>下劃線<u>
<p>段落<p>
<s>洗掉<s>
<h1>標題1<h1>
<h2>標題2<h2>
.......
?
 <!--換行-->
  <br>
 <!--水平線-->
<hr>

特殊字符

內容	對應代碼
空格
>	>
<	&lt ;
&	&
￥	￥
著作權	?
注冊	?

div標簽和span標簽

div標簽用來定義一個塊級元素，斌顧問實際意義，主要通過css樣式為其賦予不同的表現，

span標簽用于定義行內元素（行內），并無實際意義，主要通過css樣式為其賦予不同的表現，

塊級元素與行內元素的區別：

塊級元素是另起一行開始渲染的元素，行內元素則不需要另起一行，如果單獨在網頁中插入這兩個元素，不會對頁面產生任何影響，

這兩個元素都是專門為定義css樣式而生的，

注意：

關于標簽嵌套：通常塊級元素可以包含行內元素或者某些塊級元素，但行內元素不能包括塊級元素，他只能包含期行內元素，

p標簽不能包含塊級標簽，p標簽也不能包含p標簽，

img標簽

<img src=https://www.cnblogs.com/zfb123-/p/”圖片路徑“
     alt="圖片未加載成功時的提示"
     title="滑鼠懸浮時提示資訊"
     width="寬"
     height="高"(寬高兩個屬性只用一個會自動等比縮放)“>

a標簽

超鏈接標簽

所謂的超鏈接是指從一個網頁指向另一個目標的關系，這個目標可以使另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個郵件地址，一個檔案，甚至是一個應用程式，

URL:

URL是統一源定位器，也被稱為網頁地址是因特網上標準的資源的地址，

URL 地址由四部分組成

1.協議：http://、 ftp://等

2.站點地址：可以是域名或者IP地址

3.為頁面在站點中的目錄：stu

4.為頁面名稱，例如 index.html

href 屬性指定目標網頁地址，該地址可以有幾種型別：

絕對URL - 指向另一個站點
相對URL - 指向前站店中確切的路徑
錨URL - 指向頁面中的錨

target：

_ blank 表示在新標簽頁中打開目標網頁
_self 表示在當前標簽頁中打開目標網頁

串列

1.無序串列

<ul type='disc'>
  <li>第一項</li>
  <li>第二項</li>
</ul>

type 屬性：

disc (實心圓點，默認值)
circle(空心圓點)
square(實心方塊)
none(無樣式)

有序串列

<ol type="1" start="2">
    <li>第一項</li>
    <li>第二項</li>
</ol>

type 屬性：

1 數字串列，默認值
A大寫字母
a小寫字母
I大寫羅馬
i小寫羅馬

標題串列

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

表格

表格是一個二維資料空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里可以包括文字、串列、圖案、表單、數字符號、預置文本和其他的表格等內容，

表格最終要的目的是顯示表格資料，表格類資料是指最是個組織為表格格式(即按行和列組織)的資料，

表的基本結構：

<table>
    <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>Yen</td>
            <td>太低</td>
        </tr>
    </tbody>
</table>

屬性：

border: 表格邊框
cellpadding: 內邊距
cellspacing：外邊距
width：像素，百分比
rowspan: 單元格豎跨多少行
colspan：單元格橫跨多少行

form

功能：

表單用于向服務器傳輸資料，從而實作用戶與web服務器的互動

表單能夠包含input系列標簽，比如文本段，復選框，單選框，提交按鈕等，

表單還可以包含textarea、select、 fieldset、label 標簽，

表單屬性

屬性	描述
accept-charset	規定在被提交表但中是用的字符集（默認：頁面字符集）
action	規定向何處提交表單的地址（URL）（提交頁面）
autocomplete	規定瀏覽器應該自動完成表單（默認：開啟）
enctype	規定被提交資料的編碼（默認：url-encoded).如果上傳檔案需要將enctype="multipart/from-data"
method	規定在提交表單時所用的HTTP方法（默認：GET）
name	規定識別表單的名稱（對于DOM使用：document.forms.name)，
novalidate	規定瀏覽器不驗證表單
target	規定action屬性中地址的目標（默認：——self），

表單元素

基本概念：

HTML表單是HTML元素中較為復雜的部分，表單往往和腳本，動態頁面，資料處理等功能相結合，因此他是制作動態網站很重要的內容，

表單一般用來收集用戶的輸入資訊

表單洪作原理：

訪問者在瀏覽有表單的網頁時，可填寫必須的資訊，然后按照某個按鈕提交，這些資訊用過Internet傳送到服務器上，

服務器上專門的程式對這些資料進行處理，如果有錯誤會回傳錯誤，并要求就成錯誤，當資料完整無誤后，服務器反饋一個輸入完成的資訊，

from django.conf.urls import url
from django.shortcuts import HttpResponse
?
?
def upload(request):
    print("request.GET:", request.GET)
    print("request.POST:", request.POST)
?
    if request.FILES:
        filename = request.FILES["file"].name
        with open(filename, 'wb') as f:
            for chunk in request.FILES['file'].chunks():
                f.write(chunk)
            return HttpResponse('上傳成功')
    return HttpResponse("收到了！")
?
urlpatterns = [
    url(r'^upload/', upload),
]

input

<input> 元素會根據不同的type 屬性，變化為多種形態，

type屬性值	表先形式	對應代碼
text	單行輸入文本	<input type="text"/>
password	密碼輸入框	<input tyoe="password"/>
date	日期輸入框	<input type="date"/>
checkbox	復選框	<input type="checkbox"checked="checked"/>
radio	單選框	<input type="radio"/>
submit	提交按鈕	<input type="submit"value="https://www.cnblogs.com/zfb123-/p/提交">
reset	重置按鈕	<input type="reset"value="https://www.cnblogs.com/zfb123-/p/重置"/>
button	普通按鈕	<input type="button"value="https://www.cnblogs.com/zfb123-/p/普通按鈕"/>
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均適用

select

<form action="" method="post">
  <select name="city" id="city">
    <option value=https://www.cnblogs.com/zfb123-/p/"1">北京</option>
    <option selected="selected" value=https://www.cnblogs.com/zfb123-/p/"2">上海</option>
    <option value=https://www.cnblogs.com/zfb123-/p/"3">廣州</option>
    <option value=https://www.cnblogs.com/zfb123-/p/"4">深圳</option>
  </select>
</form>

屬性說明：

multiple：布爾屬性，設定后為多選，否則默認單選
disabled：禁用
selected：默認選中該項
value：定義提交時的選項值

label標簽

定義：<lable>標簽為input元素定義標注（標記），

說明：

label 元素不會向用戶呈現任何特殊效果，
<label> 標簽的for 屬性值應當與相關元素的id屬性值相同，

<form action="">
  <label for="username">用戶名</label>
  <input type="text" id="username" name="username">
</form>

textarea多行文本

<textarea name="memo" id="memo" cols="10">默認內容</textarea>

屬性說明：

name：名稱
rows：行數
cols：列數
disabled：禁用

標簽的總結

塊級元素：塊級大多為結構性標記

標題一級

標題二級

......

標題六級

水平分割線 ? ?

段落

定義串列

無序串列

有序串列表格 ... 行內元素：行內大多為描述性標記 ?

...

連接

換行

加粗

<img>圖片

斜體

~~洗掉線~~

下劃線

? ?

塊級元素：

總是從新的一行開始
高度，寬度都是可控的
寬度沒有設定時，默認為100%
塊級元素中可以包括塊級元素和行內元素

行內元素：

和其他元素都在一行
高度，寬度以及內邊距都是不可控的
寬高就是內容的高度，不可以改變
行內元素只能行內元素，不能包含塊級元素

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/118239.html

標籤：Html/Css

上一篇：JavaScript與函式式編程

下一篇：css設定全屏背景圖，background-size 屬性

前端之html

HTML介紹

1.1 web

1.2 HTML是什么：

1.3 HTML不是什么？

1.4 HTML檔案結構

1.5 HTML標簽格式

1.6 HTML注釋

1.7 標簽

2.0 HTML常用標簽

2.2 body 內常用標簽

標題一級

標題二級

標題六級