HTML 基礎

来源:https://www.cnblogs.com/midworld/archive/2019/05/10/10847286.html
-Advertisement-
Play Games

1. HTML 定義 BS 模式：Browser、Server，即瀏覽器與伺服器模式。 HTML（Htyper Markup Language）即超文本標記語言，超文本（頁面內可以包含圖片、鏈接、引用、甚至程式 ），標記語言：標記（標簽）構成的語言。 網頁 網頁即 HTML文檔，由瀏覽器解析並展示出 ...


1. HTML 定義

BS 模式：Browser、Server，即瀏覽器與伺服器模式。

HTML（Htyper Markup Language）即超文本標記語言，超文本（頁面內可以包含圖片、鏈接、引用、甚至程式 ），標記語言：標記（標簽）構成的語言。

網頁

網頁即 HTML文檔，由瀏覽器解析並展示出來，網頁分為：

  • 靜態網頁：不能與用戶交互
  • 動態網頁：HTML代碼是由某個開發語言根據用戶請求動態生成的

HTML 文檔樹

1.1 標簽

由一對尖括弧包裹的單詞構成，標簽由開始標簽（如：<h1>）和結束標簽(如：</h1>）以及中間標簽包裹部分的標簽體（如：<h1>一級標題</h1>）構成。

還有一些標簽沒有隻有一個標簽，這種標簽稱為 自閉標簽，如：<br/>、<input/>、<hr/>、<img/> 等。

1.2 標簽屬性

標簽屬性通常用來描述標簽屬性的某個功能，有如下要求：

  • 只能出現在開始標簽或自閉標簽中
  • 以鍵值對形式出現，如：id=content
  • 屬性值必須用單或雙引號包裹
  • 當屬性名與屬性值相同時，可以只寫屬性名

1.3 <DOCTYPE html> 標簽

瀏覽器解析渲染 HTML 頁面有兩種模式 ：BackCompat（怪異模式，預設，舊標準） 、CSS1Compa（標準模式，W3C 新標準）。

瀏覽器預設按照 BackCompat 模式渲染頁面，如若要按照 W3C 新標準就需要在 HTML 文檔最開頭加上這一句：<DOCTYPE html> 。

2. head 標簽

head 標簽被稱為頭標簽，不會呈現在頁面上。

2.1 meta 標簽

meta 標簽有兩個屬性：http-equiv、name

name 屬性

用於描述網頁，屬性值 content 中的內容主要便於搜索引擎機器人查詢信息和分類信息用。

<meta name="keywords" content="python, html">   <!--keywords 為搜索關鍵詞-->
<meta name="description" content="描述文本">   <!--description 為在搜索每個網頁時的每個網頁的描述信息-

http-equiv 屬性

相當於 http 的文件頭作用，向瀏覽器傳回一些有用信息，以幫助精確地顯示網頁內容。

<!-- 用於刷新網頁，2s後跳轉到 Python 官網 -->
<meta http-equiv="Refresh" content="2; URL=https://python.org">
<!-- 編碼類型 -->
<meta http-equiv="content-type" charset="utf8">
<!-- 相容其他瀏覽器，如：IE6、Edge（IE=Edge） -->
<meta http-equiv="X-UA-Compatible" content="IE-EmulateIE6" />

2.2 其他 head 標簽

<!-- 網頁標題標簽 -->
<titile>Python</title>

<!-- 引入外部 css 文件 -->
<link rel='stylesheet' type='text/css' href='xxx.css'>   

<!-- 在html文檔中插入css文件 -->
<style type='text/css'></style>

<!-- 網頁圖標 -->
<link rel='icon' sizes='any' href='xxx.png'>

<!-- 插入外部 js 文件 -->
<script src='xxx.js'></script>

<!-- 在html文檔中插入js文件 -->
<script type='text/javascript'></script>

3. 基本標簽

3.1 hx 標簽

hx 標簽（h1...h6），用於表示 HTML 文檔標題

<h1>一級標題</h1>

3.2 p 標簽

段落標簽，包裹的內容被換行，並且上下文間有空白

<p>春蠶到死絲方盡</p>
<p>蠟炬成灰淚始乾</p>

3.3 b 和 strong 標簽

b 和 strong 標簽都是用於加粗文本，b 標簽逐漸被淘汰

<b>文本加粗</b>
<strong>文件加粗</strong>

3.4 strike 標簽

strike 標簽為刪除線標簽

<strike style="background: black">刪除線</strike>

3.5 em 標簽

文本斜體

<em>斜體</em>

3.6 sup 和 sub 標簽

上下角標簽

2<sub>3</sub>
2<sup>3</sup>

3.7 br 標簽

換行標簽

<br />      <!--可不加 /-->

3.8 hr 標簽

分隔線標簽

<hr>

3.9 span 標簽

為文本設置單獨的樣式，沒有別的語義，與 div 類似，但是是內聯標簽

<span>文本</span>

<!--將 Python 設置為藍色-->
<style type="text/css">
    span{color: blue}
</style>
<p><span>Python</span>是一種電腦程式設計語言。是一種動態的、面向對象的腳本語言，最初被設計用於編寫自動化腳本(shell)，隨著版本的不斷更新和語言新功能的添加，越來越多被用於獨立的、大型項目的開發。</p>

3.10 div 標簽

div 標簽沒有特定的語義，一般作為容器包裹其他標簽，也不會顯示在網頁上。

<div><p>xxx</p></div>

3.11 塊級標簽和內聯標簽

塊級標簽：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

內聯標簽：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

  • 塊級標簽特點：
    • 獨占一行
    • 寬度為容器的 100%，但可以設置寬度
    • 可以包含內聯、其他塊標簽
    • hx、p、dt 標簽不能包含塊級標簽，只能包含內聯標簽
  • 內聯標簽特點：
    • 與其他標簽在同一行
    • 寬度是其文本或圖片本身的寬度，不可變
    • 只能包含文本、圖片或其他內聯標簽

特殊字元：

&lt;        <    
&gt;        >
&quot;      "
&copy;      ©
&reg;       ®
&ensp;      一個空格

4. 圖形標簽 img

img 標簽用於顯示圖片，其屬性如下：

  • src：圖片路徑
  • alt：圖片載入失敗時顯示的信息
  • title：滑鼠懸浮在圖片上的提示信息
  • width、height：圖片寬度、高度，若只用一個會自動等比縮放
<img src='https://raw.githubusercontent.com/hj1933/img/master/img/AlanTuringNotebook_EN-AU7743633207_1920x1080.jpg' alt='載入失敗' title='書籍'>

5. 超鏈接標簽 a

a 標簽為超鏈接標簽，可以在頁面內跳轉（錨 #），以及跳轉外部超鏈接，屬性如下：

  • href：超鏈接
  • target：要跳轉的框架，預設在當前頁面打開，當設置為 _blank 時會在新的視窗打開
  • name、id：錨（anchor）的名稱

  • ：錨，頁面內定位，與 id 配合使用

<a href='https://www.python.org' target='_blank' name=>Python 官網</a>

<!--利用錨回到頂部-->
<p id='abc'>頂部</p>
<a href='#abc'></a>         

<!--圖片鏈接-->
<a href='xxx.com'><img src='xxx.img'></a>

利用錨在頁面內定位：

<div>
    <h2>HTML 教程</h2>
    <li><a href="#c1">第一章</a></li>
    <li><a href="#c1">第二章</a></li>
    <li><a href="#c1">第三章</a></li>

    <h3><a name="#c1">第一章 head標簽</a></h3>
    <p>head標簽為頭標簽</p>

    <h3><a name="#c1">第二章 圖形標簽</a></h3>
    <p>img標簽為圖形標簽</p>

    <h3><a name="#c1">第三章 超鏈接標簽</a></h3>
    <p>a標簽為超鏈接標簽</p>
</div>

點擊第一章、第二章可以跳轉到相應內容區：

6. 列表標簽

列表分為無序列表（ul）、有序列表（ol）以及自定義列表（dl）。

無序列表

<ul>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
</ul>

有序列表

<ol>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
</ol>

自定義列表

<dl>    <!--定義列表-->
    <dt>1 head標簽</dt>       <!--列表標題-->
    <dd>1.1 meta標簽</dd>     <!--列表項-->
    <dd>1.2 title標簽</dd>
</dl>

7. 表格標簽 table

創建表格的六個標簽元素：table、thead、tbody、tr、th、td

  • thead：通常用來包裹表頭，可省略
  • tbody：用於包裹表格內容，可省略
  • tr：表格的行
  • th：表頭
  • td：表格的一個單元格，一行中包含幾個 td，說明這一行中就有幾列

table 標簽屬性

  • border：表格邊框，單位像素（px）
  • cellpadding：內邊距
  • cellspacing：外邊距
  • width：寬度，單位（像素、百分比），一般用 CSS 來設置

td / tr 標簽屬性

  • rowspan：合併單元格（行）
  • colspan：合併單元格（列）
<tr>
    <td rowspan="2">1</td>        <!--合併行-->
    <td colspan="2">電腦</td>     <!--合併列-->
    
</tr>

<tr>
                    <!--要刪除一個單元格-->
    <td>手機</td>     
    <td>80000</td>
</tr>

Tips：合併單元格，需要先刪除其中一個單元格，再將設置另外一個單元格的 rowsapn 屬性

示例：

<table border="1px">
    <caption>表格標題</caption>     <!--設置表格標題-->
    <thead>
        <tr>
            <th>序號</th>
            <th>產品名稱</th>
            <th>庫存量</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>電腦</td>
            <td>10000</td>
        </tr>

        <tr>
            <td>2</td>
            <td>手機</td>
            <td>80000</td>
        </tr>
    </tbody>
</table>

8. 表單標簽 form

表單用於向伺服器傳輸數據，包括input、textarea、select、fieldset 和 label 等元素。

表單屬性

表單接收不同類型的用戶輸入，要提交給伺服器的內容都包含在其中，屬性如下：

  • action：表單要提交到的地方，一般為伺服器的一個程式，程式對錶單提交過來的數據做相應處理，如：https://baidu.com/web
  • method：表單提交的方式（post、get）
    • get：提交的鍵值對，放在地址欄中 URL 後面，安全性相對較差，對提交內容長度有限制
    • post：提交的鍵值對，不在地址欄，安全性相對較高，提交的內容長度無限制（在Chrome-檢查-network-Form-Data 中可以查看）
<form action='http://127.0.0.1:8080' method='post'></form>

8.1 input 標簽

input 屬性和對應值：

  • type
    • text：文本輸入框
    • password：密碼框
    • radio：單選框
    • checkbox：多選框
    • submit：提交按鈕
    • botton：按鈕
    • reset：重置
    • placeholder：提供可描述輸入欄位預期值的提示信息，即在框中顯示預期值
    • readonly：readonly=readonly，只讀
    • disable：disable=disable，禁用，對所有 input 都有用
    • file：提交文件（需要在 form 表單要加上屬性 enctype="multipart/form-data" ）
  • checked：當 checked=checked 時，該選項預設被選中
  • name：表單提交項的鍵，是和伺服器通訊時的名稱，id 是瀏覽器端使用的名稱，常用於 css 和 js
  • value：表單提交項的值，不同的輸入類型，value 屬性用法也不同。
<form action='http://127.0.0.1:8080' method='post'>
        <p>姓名 <input type="text" name="username"></p>       
        <p>密碼 <input type="password" name="password"></p>
        
        <p>愛好</p>
        <input type="checkbox" name="hobby" value="music">音樂
        <input type="checkbox" name="hobby" value="movie">電影

        <p>性別</p>
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女

        <p><input type="submit" value="提交"></p>

    </form>

# 提交給服務端的數據格式類似於字典形式
{'username': 'xxx', 'password': 'xxx', 'hobby': ['music', 'movie'], 'gender': 'male'}

上傳文件：必須是 post 形式，必須在 form 表單中添加 enctype="multipart/form-data" 屬性

<form action='http://127.0.0.1:8080' method='post' enctype="multipart/form-data" >
    <input type="file" name="file">
</form>

服務端：
req.FILES 中

伺服器端：

def index(request):
    print request.POST
    print request.GET
    print request.FILES
    for item in request.FILES:
        fileObj = request.FILES.get(item)
        f = open(fileObj.name, 'wb')
        iter_file = fileObj.chunks()
        for line in iter_file:
            f.write(line)
        f.close()
    return HttpResponse('ok')

8.2 select 標簽

select 標簽下拉列表，屬性如下：

select 屬性

  • name：表單提交的鍵
  • size：選項顯示個數
  • multiple：multiple，選擇多個選項
  • disabled：disabled，禁用下拉列表

option 標簽屬性

  • value：表單提交項的值
  • selected：selected 預設被選中

optgroup 為每一項添加分組

// select標簽的 value 屬性：value=1，等於選擇第一個 option
愛好
<select name="hobby">
    <option value="music">音樂</option>
    <option value="movie">電影</option>
    <option value="moutain">爬山</option>
</select>   <br>

省份
<select name='province'>
    <optgroup label="湖南省">
        <option value="changsha">長沙</option>
        <option value="xiangtan">湘潭</option>
        <option value="zhuzhou">株洲</option>
    </optgroup>
</select>

8.3 textarea 標簽

textarea 文本域，通常用作填寫簡介，屬性：

  • name：表單提交項的鍵
  • clos：文本域列
  • rows：文本域行
簡介
<textarea name="decs" cols="20px" rows="6px"></textarea>

8.4 label 標簽

無其他特殊含義，for 屬性可以把 label 綁定到另外一個標簽上，使滑鼠獲得焦點。

<!--for 屬性將 label 與 input 綁定，for 的值必須與 id 一致。從而使得 input 標簽，滑鼠只需點擊 用戶名 三個字即可獲得焦點-->
<label for='abc'>用戶名</label>
<input id='abc' type='text'>

8.5 fieldset 標簽

將表單內相關元素分組，屬性：

  • legend 標簽：為 fieldset 元素定義標題
  • disabled：禁用 fieldset
  • name：表單提交項鍵
<form>
    <fieldset>
        <legend>健康信息</legend>
        身高：<input type="text" />
        體重：<input type="text" />
    </fieldset>
</form>
<p>如果表單周圍沒有邊框，說明您的瀏覽器太老了。</p>


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

-Advertisement-
Play Games
更多相關文章
  • Matlab函數裝飾器
    info.m ff.m 測試代碼 ...
  • 基於【 springBoot +springCloud+vue】的項目之一 || 後端搭建
    緣起 本項目是基於之前學習的一個Dubbo+SSM分散式項目進行升級，基於此項目對前後端分離項目、微服務項目進一步深入學習。之前學習了vue、springBoot、springCloud後，沒有進行更多實戰練習，藉助此機會，整合之前所學知識，搭建一套微服務電商系統。本項目純屬個人學習總結，如有錯誤之 ...
  • c語言的全排列
    在c語言中實現全排列，對於剛接觸c語言，還沒學習演算法的人來說，比較困難了吧。估計大佬也不會看這種基礎的東西，全排列實現的辦法很多，在c++中有一個專門的函數可以使用，但是在c中實現就有點困難了。如果你想出用一個迴圈使一個數字每一位都不相同，那麼你就走進了死衚衕，這種辦法運算量巨大，往往到了高位就會超 ...
  • PHP在無限分類時註意的一些問題(不保證代碼完全正確哦)
    轉自：PHP在無限分類時註意的一些問題(http://lxiaoke.cn) (註意：代碼使用的是原生PHP，旨在提供解決思路)1 無限分類的查找（獲取所有節點） 代碼： /** * 無限分類查詢，預設 pid 為 0 * @param $pid * @return array $res */ pr ...
  • JAVA基礎之流程語句
    JAVA流程語句有幾下幾種： 一、if語句： 1.if語句：如果滿足條件語句，則執行執行語句； if(條件語句){ 執行語句； ....； } 2.if....else語句：如果滿足判斷語句，則執行執行語句1，否則執行執行語句2； if(判斷語句{ 執行語句1； .....; }else{ 執行語句 ...
  • C語言----選擇結構（基礎篇三）
    大家好，忙裡抽空更新一下自己的博客，算是自己的一個進步，C語言視頻啟蒙我早就看完啦，只是覺得這個視頻真不錯，所以給大家分享一下，同時自己還有很多沒有理解透徹，寫寫博客算是一個筆記更是對自己所學的知識的吸收，廢話不多直接開始今天的主題,"C語言的選擇結構" 關係運算符 小於：< 大於：> 等於：= = ...
  • Java併發之等待/通知機制
    描述Object wait()/notify()跟Condition await()/signal()的基本用法，三連問：解釋為什麼wait() 要放在while裡面？為什麼wait()方法放在Object對象中？為什麼wait()必須在同步方法/代碼塊中調用？以及這兩種通知/等待機制的區別 ...
  • 使用php的fork進行父子進程代碼編寫，你至少需要對linux fork有這幾點基礎的理解。--- 記一次組內同學的fork問題排查
    昨天組內同學在使用php父子進程模式的時候遇到了一個比較詭異的問題 簡單說來就是：因為fork，父子進程共用了一個redis連接、然後父子進程在發送了各自的redis請求分別獲取到了對方的響應體。 復現示例代碼: testFork.php PowerSpawn.php 主要用戶進程fork管理工作 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類