Python之路【第十八篇】:前端HTML

来源:https://www.cnblogs.com/hackerer/archive/2019/09/05/11470519.html
-Advertisement-
Play Games

一、前端概述 二、什麼是HTML? htyper text markup language 即超文本標記語言 超文本：就是指頁面內可以包含圖片、鏈接、甚至音樂、程式等非文字元素。 標記語言：標記(標簽)構成的語言 網頁==HTML文檔，由瀏覽器解析，用來展示的 靜態網頁：靜態的資源，比如test.h ...


一、前端概述

import socket

def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost',8089))
    sock.listen(5)

    while True:
        connection, address = sock.accept()
        buf = connection.recv(1024)

        connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))

        connection.sendall(bytes("<h1>Hello,World</h1>","utf8"))

        connection.close()

if __name__ == '__main__':

    main()

二、什麼是HTML?

htyper text markup language 即超文本標記語言

超文本：就是指頁面內可以包含圖片、鏈接、甚至音樂、程式等非文字元素。

標記語言：標記(標簽)構成的語言

 

網頁==HTML文檔，由瀏覽器解析，用來展示的

靜態網頁：靜態的資源，比如test.html

動態網頁：html代碼是由某種開發語言根據用戶請求動態生成的

html文檔樹形結構圖：

三、標簽

●  是由一對尖括弧包裹的單詞構成 例如: <html> *所有標簽中的單詞不可能以數字開頭.

●  標簽不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.

●  標簽分為兩部分: 開始標簽<a> 和 結束標簽</a>. 兩個標簽之間的部分 我們叫做標簽體.

●  有些標簽功能比較簡單.使用一個標簽即可.這種標簽叫做自閉和標簽.例如: <br/> <hr/> <input /> <img />

●  標簽可以嵌套.但是不能交叉嵌套. <a><b></a></b>

四、標簽的屬性

●  通常是以鍵值對形式出現的. 例如 name="simon"

●  屬性只能出現在開始標簽 或 自閉和標簽中.

●  屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="simon"

●  如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly

五、<!DOCTYPE html> 標簽

      由於歷史的原因，各個瀏覽器在對頁面的渲染上存在差異，甚至同一瀏覽器在不同版本中，對頁面的渲染也不同。在
W3C標準出台以前，瀏覽器在對頁面的渲染上沒有統一規範，產生了差異(Quirks mode或者稱為Compatibility
Mode)；由於W3C標準的推出，瀏覽器渲染頁面有了統一的標準(CSScompat或稱為Strict mode也有叫做Standars
mode)，這就是二者最簡單的區別。
      W3C標準推出以後，瀏覽器都開始採納新標準，但存在一個問題就是如何保證舊的網頁還能繼續瀏覽，在標準出來以前，
很多頁面都是根據舊的渲染方法編寫的，如果用的標準來渲染，將導致頁面顯示異常。為保持瀏覽器渲染的相容性，使以
前的頁面能夠正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產生了Quircks mode
和Standars mode，兩種渲染方法共存在一個瀏覽器上。

window.top.document.compatMode：
//BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。 
//CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。

這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那麼compatMode預設就是BackCompat,

這也就是惡魔的開始 -- 瀏覽器按照自己的方式解析渲染頁面，那麼，在不同的瀏覽器就會顯示不同的樣式。

    如果你的頁面添加了<!DOCTYPE html>那麼，那麼就等同於開啟了標準模式，那麼瀏覽器就得老老實實的按照W3C的

標準解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。

這就是<!DOCTYPE html>的作用。

六、head標簽

 <meta>

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

 

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

1 <meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
2  
3 <meta name="description" content="巨東公司牛B">

 

 2: http-equiv顧名思義，相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content，              content中的內容其實就是各個參數的變數值。

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

註意：X-UA-Compatible

每個主要版本IE新增的功能都是為了讓瀏覽器更容易使用、增加安全性及更支持業界標準。以這些作為IE的特色，其中
一個風險就是舊版本網站無法正確的顯示。

為了將這個風險降到最低，IE6允許網頁開發人員選擇IE編譯和顯示他們網頁的方式。"Quirks mode"為預設，這會
使頁面以舊版本瀏覽器的視點顯示，"Standards mode"(也稱為"strict mode")特點是支持業界標準最為完善。
然而要利用這個增強的支持功能，網頁必須包含恰當的<!DOCTYPE>指令。

若一個網頁沒有包含<!DOCTYPE>指令，IE6會將它以quirks mode顯示。若網頁包含有效的<!DOCTYPE>指令但瀏
覽器無法辨識，IE6會將它以IE6 standards mode顯示。因為少數網站已經包含<!DOCTYPE>指令，相容性模式的
切換相當成功。這使網頁開發人員能選擇將他們的網頁轉移為standards mode的最佳時機。

隨著時間經過，更多網站開始使用standards mode。它們也開始使用IE6的特性和功能來檢測IE。舉例來說，IE6
不支持universal selector(即css之全局選擇器 * {})，一些網站便使用它來針對IE做特定的對應。

當 IE7增加了對全域選擇器的支持，那些依賴IE6特點的網站便無法偵測出這個新版本的瀏覽器。因此那些針對IE的
特定對應無法應用於IE7，造成這些網站便無法如他們預期的顯示。由於<!DOCTYPE>只支持兩種相容性模式，受到影
響的網站擁有者被迫更新他們的網站使其能支持IE7。

IE8 比之前的任何版本瀏覽器都更支持業界標準，因此針對舊版本瀏覽器設計的網頁可能無法如預期般呈現。為了幫
助減輕所有問題，IE8引入文件相容性的概念，使你能選擇你的網頁設計要對應的特定IE版本。文件相容性在IE8增加
了一些新的模式，這些模式能告訴瀏覽器如何解析和編譯一個網頁。若你的網頁無法在 ie8正確的顯示，你可以更新
你的網站使它支持最新的網頁標準(優先選項)或在你的頁面上新增一個meta元素用於告訴IE8如何依照舊版本瀏覽器
編譯你的頁面。

這能讓你選擇將你的網站更新支持IE8新特點的時機。

當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時，它將使用 <!DOCTYPE> 指令來確
定如何顯示該網頁。 如果該指令丟失或未指定基於標準的文檔類型，則 Internet Explorer 8 將以 IE5 模式
（Quirks 模式）顯示該網頁。

非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>:水平線

<div><span>

塊級標簽：<p><h1><table><ol><ul><form><div>

內聯標簽：<a><input><img><sub><sup><textarea><span>

block（塊）元素的特點

 總是在新行上開始；
 寬度預設是它的容器的100%，除非設定一個寬度。
 它可以容納內聯元素和其他塊元素

inline元素的特點

和其他元素都在一行上；
寬度就是它的文字或圖片的寬度，不可改變
內聯元素只能容納文本或者其他內聯元素

特殊字元

      &lt; &gt；&quot；&copy;&reg;

二 圖形標簽: <img> 

src: 要顯示圖片的路徑.

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

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

width: 圖片的寬

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

三 超鏈接標簽(錨標簽)<a>

href:要連接的資源路徑 格式如下: href="http://www.baidu.com" 

target: _blank : 在新的視窗打開超鏈接. 框架名稱: 在指定框架中打開連接內容.

name: 定義一個頁面的書簽.

用於跳轉 href : #id.（錨）

四 列表標簽：

複製代碼 
<ul>: 無序列表

<ol>: 有序列表
         <li>:列表中的每一項.

<dl>  定義列表

         <dt> 列表標題
         <dd> 列表項
複製代碼

五 表格標簽: <table>

border: 表格邊框.

cellpadding: 內邊距

cellspacing: 外邊距.

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

<tr>: table row

         <th>: table head cell

         <td>: table data cell

rowspan:  單元格豎跨多少行

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

<th>: table header <tbody>(不常用): 為表格進行分區.

 

六 表單標簽<form>

      表單用於向伺服器傳輸數據。

      表單能夠包含 input 元素，比如文本欄位、覆選框、單選框、提交按鈕等等。

      表單還可以包含textarea、select、fieldset和 label 元素。

1.表單屬性

　　HTML 表單用於接收不同類型的用戶輸入，用戶提交表單時向伺服器傳輸數據，從而實現用戶與Web伺服器的交互。表單標簽, 要提交的所有內容都應該在該標簽中.

            action: 表單提交到哪. 一般指向伺服器端一個程式,程式接收到表單提交過來的數據（即表單元素值）作相應處理，比如https://www.sogou.com/web

            method: 表單的提交方式 post/get 預設取值 就是 get（信封）

                          get: 1.提交的鍵值對.放在地址欄中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.

                          post:1.提交的鍵值對 不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.

                          get/post是常見的兩種請求方式.

2.表單元素

           <input>  標簽的屬性和對應值              

複製代碼 
type:        text 文本輸入框

             password 密碼輸入框

             radio 單選框

             checkbox 多選框  

             submit 提交按鈕            

             button 按鈕(需要配合js使用.) button和submit的區別？

             file 提交文件：form表單需要加上屬性enctype="multipart/form-data"   

 name:    表單提交項的鍵.註意和id屬性的區別：name屬性是和伺服器通信時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客
          戶端編程，而在css和javascript中使用的
 value:   表單提交項的值.對於不同的輸入類型，value 屬性的用法也不同：
1 2 3 4 5 type="button", "reset", "submit" - 定義按鈕上的顯示的文本   type="text", "password", "hidden" - 定義輸入欄位的初始值   type="checkbox", "radio", "image" - 定義與輸入相關聯的值　　 
 checked:  radio 和 checkbox 預設被選中

 readonly: 只讀. text 和 password

 disabled: 對所用input都好使.
複製代碼

上傳文件註意兩點：

 1 請求方式必須是post

 2 enctype="multipart/form-data"

          <select> 下拉選標簽屬性

複製代碼 
          name:表單提交項的鍵.

          size：選項個數

          multiple：multiple 

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

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

                 <optgroup>為每一項加上分組
複製代碼

          <textarea> 文本域              

name:    表單提交項的鍵.

cols:    文本域預設有多少列

rows:    文本域預設有多少行

    <label>    

    <fieldset>

　　


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • jQuery源碼學習一： 創建一個jquery實例
    前言： jquery是每個前端都會的基礎技能，眾所周知，jquery返回的是jquery實例方法，但是我們似乎是直接使用$就可以獲取到jquery的方法啦，可以在瀏覽器中判斷一下 window.$ 和window.jQuery,jQuery 之間的關係，就會發現他們之間是全等的； 不使用new方法調 ...
  • Fundebug前端異常監控插件更新至2.0.0，全面支持TypeScript
    摘要： 是時候支持TS了！ Fundebug前端異常監控服務 "Fundebug" 提供專業的前端異常監控服務，我們的插件可以提供全方位的異常監控，可以幫助開發者第一時間定位各種前端異常，包括但不限於JavaScript執行錯誤以及HTTP請求錯誤。 並且，Fundebug支持Source Map還 ...
  • 設計模式六大原則：單一職責原則
    單一職責原則： 對象不應承擔太多功能，正如一心不能而用，比如太多的工作(種類)會使人崩潰。唯有專註才能保證對象的高內聚；唯有唯一，才能保證對象的細粒度。 解決問題： 假如有A和B兩個類，當A需求發生改變需要修改時，不能導致B類出問題。 現狀： 在實際情況很難去做到單一職責原則，因為隨著業務的不斷變更 ...
  • 架構設計原則
    架構設計原則 合適原則 合適優於業界領先 簡單原則 簡單優於複雜 演化原則 演化優於一步到位 ...
  • 探索JAVA併發 - 終於搞懂了sleep/wait/notify/notifyAll
    > sleep/wait/notify/notifyAll分別有什麼作用？它們的區別是什麼？wait時為什麼要放在迴圈里而不能直接用if？ ## 簡介 首先對幾個相關的方法做個簡單解釋，Object中有幾個用於線程同步的方法：wait、notify、notifyAll。 ```java public ...
  • Java連載26-方法（語法結構）
    一、方法 1.返回值類型如果不是void，表示這個方法執行結束之後必須返回一個具體的數值，當方法執行結束的時候沒有返回任何數值，編譯器會報錯，怎麼返回值呢？並且要求“值”的數據類型必須和“方法的返回值類型”是一致的，不然編譯器報錯。 2.返回值類型是void的時候，在方法體中不能編寫"return ...
  • SpringCloud（二）服務註冊與發現
    離上一篇微服務的基本概念已經過去了幾個月，在寫那篇博客之前，自己還並未真正的使用微服務架構，很多理解還存在概念上。後面換了公司，新公司既用了SpringCloud也用了Dubbo+Zookeeper，就像上一篇文章說的，當一個服務是面向外部或者是直接提供給前端調用的，那麼就使用SpringCloud ...
  • PHP文件基礎操作
    文件的基本操作:（ "更多" ） fopen():文件打開 fopen()函數的參數是目標文件的路徑和文件的讀寫模式；同時fopen函數也會在打開文件時候發現沒有文件會自動創建一個文件但是模式必須是讀寫或寫入的模式 fread():文件讀取 fread()函數的參數是需要讀取的文件和文件讀取的最大字 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類