快速帶你複習html（超詳細）

来源:https://www.cnblogs.com/deyo/archive/2023/03/18/refenghtml.html
-Advertisement-
Play Games

此內容包含： html基礎 列表、表格 媒體元素 表單（重點） 1、HTML 基礎 目標： 會使用HTML5的基本結構創建網頁 會使用文本相關標簽排版文本信息 會使用圖像相關標簽實現圖文並茂的頁面 會使用標簽創建超鏈接、錨鏈接及功能性鏈接 1.1、什麼是HTML HTML：Hyper Text Ma ...


此內容包含：

  1. html基礎
  2. 列表、表格
  3. 媒體元素
  4. 表單（重點）

1、HTML 基礎

目標：

  • 會使用HTML5的基本結構創建網頁
  • 會使用文本相關標簽排版文本信息
  • 會使用圖像相關標簽實現圖文並茂的頁面
  • 會使用標簽創建超鏈接、錨鏈接及功能性鏈接

1.1、什麼是HTML

HTML：Hyper Text Markup Language（超文本標記語言）
超文本包括：文字、圖片、音頻、視頻、動畫等

1.2、發展史、優勢

常見的網頁編輯工具IDE：

  • 記事本
  • NotePad++
  • Sublime
  • VsCode
  • WebStorm
  • HBuidler
  • IDEA
    ....

1.3、HTML基本結構

HTML網頁基本結構

  1. 強調HTML標簽都以“< >”開始、“</ >”結束
  2. 說明網頁基本結構中這幾個標簽的用法
  3. 網頁中所有的內容都放在之間

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這是標題</title>
<meta charset="UTF-8">
<meta name="keywords" content="哈哈哈哈"/>
<meta name="description" content="哈哈哈哈"/>
</head>
<body>
</body>
</html>

1.4、網頁的基本標簽

1、標題標簽

  • 先講解標題標簽代碼寫法，說明標題標簽在網頁中的作用，通常用於標題或主題，體現標簽語義
    化。
  • h1最大，h6最小，對比效果圖講解
  • 最後演示示例，演示效果圖
<h1>熱風</h1>
<h2>熱風</h2>
<h3>熱風</h3>
<h4>熱風</h4>
<h5>熱風</h5>
<h6>熱風</h6>

2、段落標簽

3、換行標簽
換行標簽，查看效果圖,看段落標簽和換行標簽的不同

4、水平線標簽

5、字體樣式標簽

6、註釋和特殊符號
註釋
<!--我是註釋-->
特殊符號

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特殊符號</title>
</head>
<body>
<!--空格-->
<p>
熱風 Java<br/>
熱風 Java<br/>
熱風&nbsp;&nbsp;&nbsp;&nbsp;Java<br/>
</p>
<!--大於小於-->
<p>
> < <br>
&gt; &lt;
</p>
<!--引號-->
<p>
&quot;狂神&quot;
</p>
<!--版權-->
<p>
&copy; 2023 熱風
</p>
<!--萬能的公式 &符號+xxx -->
</body>
</html>

1.5、圖像標簽

常見的圖像格式：jpg、gif、png、bmp、
說明JPG、gif是網頁中最常用的格式，PNG受瀏覽器相容性的限制
說明：

  1. 先講解圖像語法，對每個參數詳細講解，並且強調說明alt屬性和title屬性在什麼情況下可以看到替
    代文字和提示文字，並且說明alt屬性常和src配合使用。
  2. 說明img標簽的與之前學習的< br/>標簽一樣，不是成對的標簽，直接在最後以“/”閉合，體現標簽
    的語義化。

1.6、鏈接標簽

  • 頁面間鏈接：從一個頁面鏈接到另外一個頁面
  • 錨鏈接
  • 功能性鏈接
    說明：
  • 講解語法，詳細說明每個參數的用法，強調一下路徑的表示方法，相對路徑和絕對路徑，說明target常用值為self和blank，還有其他值，以後用到再講。
  • 講解給出的例子代碼，一個文本超鏈接一個圖像超鏈接
  • 最後演示，只演示超鏈接效果即可，演示時更改target的參數，讓學員看到目標視窗打開的不同位置。

總結：

2、列表、表格與媒體元素

2.1、列表

無序列表和定義列表在網頁製作中應用非常廣泛

什麼是列表：
列表就是信息資源的一種展示形式。它可以使信息結構化和條理化，並以列表的樣式顯示出來，以便瀏覽者能更快捷地獲得相應的信息。

無序列表

<!--ul 聲明無序列表-->
<ul>
<!--li 聲明列表項-->
<li>語文</li>
<li>數學</li>
<li>英語</li>
<li>電腦</li>
</ul>

列表項中可以包含圖片、文本，還可以嵌套列表、其他標簽等
無序列表的特性

  • 沒有順序，每個< li>標簽獨占一行（塊元素）
  • 預設< li>標簽項前面有個實心小圓點
  • 一般用於無序類型的列表，如導航、側邊欄新聞、有規律的圖文組合模塊等

有序列表

<!--ol 聲明有序列表-->
<ol>
<li>語文</li>
<li>數學</li>
<li>英語</li>
<li>電腦</li>
</ol>

有序列表預設以數字序號顯示
有序列表與無序列表一樣，也可以嵌套列表、可以包含圖片、文本、其他標簽等
有序列表的特性

  • 有順序，每個< li>標簽獨占一行（塊元素）
  • 預設< li>標簽項前面有順序標記
  • 一般用於排序類型的列表，如試卷、問卷選項等

自定義列表

<!--dl 聲明定義列表-->
<dl>
<!--dt 聲明列表項-->
<dt>水果</dt>
<!--dd 定義列表項內容-->
<dd>蘋果</dd>
<dd>桃子</dd>
<dd>李子</dd>
</dl>

定義列表也可以嵌套列表、包含圖片、文本、其他標簽等
以後的網頁製作中經常會用到定義列表，特別是圖文混排的情況
定義列表的特性

  • 沒有順序，每個< dt>標簽、< dd>標簽獨占一行（塊元素）
  • 預設沒有標記
  • 一般用於一個標題下有一個或多個列表項的情況

小結：列表對比
列表之間可以互相嵌套，進行頁面的局部佈局

2.2、表格

為什麼使用表格

  • 簡單通用
  • 結構穩定
    基本結構
  • 單元格
  • 行
  • 列

表格的基本語法

<!--table表格標簽-->
<table border="1px">
<!--tr 行標簽-->
<tr>
<!--td 單元格標簽-->
<td>第1個單元格的內容</td>
<td>第2個單元格的內容</td>
……
</tr>
<tr>
<td>第1個單元格的內容</td>
<td>第2個單元格的內容</td>
……
</tr>
</table>

表格的跨列

<table>
<tr>
<!--colspan 所跨的列數-->
<td colspan="n">單元格內容</td>
</tr>
<tr>
<td>單元格內容</td>
……
</tr>
......
</table>

表格的跨行

<table >
<tr>
<!--rowspan 所跨的行數-->
<td rowspan="n">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

表格的跨行和跨列

<tr>
<!--跨列-->
<td colspan="3">學生成績</td>
</tr>
<tr>
<!--跨行-->
<td rowspan="2">張三</td>
<td>語文</td>
<td>98</td>
</tr>

總結：

3、表單

3.1、表單語法

method: 規定如何發送表單數據常用值：get post
在實際網頁開發中通常採用post方式提交表單數據
action: 表示向何處發送表單數據
<form method="post" action="result.html">
<p>名字：<input name="name" type="text" > </p>
<p>密碼：<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填"/>
</p>
</form>
  • 講解表單的創建方法，以及method和action的作用
  • 分別把method的值設置為get和post，然後提交表單，查看頁面效果；通過演示可看到method設置不同值時，表單數據在地址欄顯示的不同情況
  • 最後根據演示情況說明get和post兩者的區別
  • 最後總結：post方式提交的數據安全性要明顯高於get方式提交的數據。因此在實際開發中通常採
    用post方式提交表單數據。

3.2、13個表單元素

1、文本框

<!--type="text"
name：文本框名稱(必填)
value：文本框初始值
size：文本框長度
maxlength：文本框可輸入最多字元
-->
<input type="text" name="userName" value="用戶名" size="30" maxlength="20"/>

2、密碼框
向密碼框中輸入字元時，顯示的效果，密碼字元以黑色實心的圓點來顯示。

<!--type="password"
name：密碼框名稱(必填)
size：密碼框長度
-->
<input type="password" name="pass" size="20"/>

3、單選按鈕
同一組單選按鈕，name屬性值必須相同，才能在選中單選按鈕時達到互斥

<!--type="radio"
name：單選框名稱(必填)，一組的名稱需要相同
checked：單選按鈕選中狀態
value：單選框的值
-->
<input name="gen" type="radio" value="男" checked />男
<input name="gen" type="radio" value="女" />女

4、覆選框
同一組覆選框，根據需要可設置name屬性值相同

<!--type="checkbox"
name：覆選框名稱(必填)，一組的名稱需要相同
checked：覆選按鈕選中狀態
value：覆選框的值
-->
<input type="checkbox" name="interest" value="sports"/>運動
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戲

5、下拉列表框
一個<select>中至少包含一下<option>
希望在頁面載入時有預設選中的選中項，則必須使用selected屬性，如果沒有預設選中項則第一個選項預設被選中；演示時改變size的值和selected預設值，看到顯示效果，加深對這兩個屬性的理解。

<!--select:下拉列表框-->
<!--option：選項-->
<select name="列表名稱" size="行數">
<option value="選項的值" selected="selected">…</option >
<option value="選項的值">…</option >
</select>

6、按鈕

<!--重置按鈕-->
<input type="reset" name="butReset" value="reset按鈕">
<!--提交按鈕-->
<input type="submit" name="butSubmit" value="submit按鈕">
<!--普通按鈕-->
<input type="button" name="butButton" value="button按鈕"/>
<!--圖片按鈕-->
<input type="image" src="images/login.gif" />

7、多行文本域
改變cols和rows的值，讓學員看到由於這兩個值的改變，文本框內容顯示的改變。強調多行文本域的內容是在標簽之間。

textarea：多行文本域
cols：顯示的列數
rows：顯示的行數
<textarea name="showText" cols="x" rows="y">文本內容 </textarea>

8、文件域
在表單中使用文件域時，必須設置表單的“enctype”編碼屬性為“multipart/form-data”，表示將表單數據分為多部分提交。未來文件上傳和下載會詳細講解，現在瞭解即可！

enctype：表單編碼屬性
<form action="" method="post" enctype="multipart/form-data">
<p>
<!--type="file" 文件域-->
<input type="file" name="files" />
<input type="submit" name="upload" value="上傳" />
</p>
</form>

9、郵箱
會自動驗證Email地址格式是否正確

郵箱:<input type="email" name="email"/>
<input type="email" name="email"/>

10、網址
會自動驗證URL地址格式是否正確

請輸入你的網址:<input type="url" name="userUrl"/>

11、數字

min：最小值
max：最大值
step：步長
請輸入數字:<input type="number" name="num" min="0" max="100" step="10"/>

13、搜索框
type值為search即為搜索框。

請輸入搜索的關鍵詞:<input type="search" name="sousuo"/>

3.3、表單的高級應用

在某些註冊頁面或本圖片中訂單信息頁面，必須同意一些條款按鈕才能使用等等

  • 隱藏域
    在瀏覽器中看不到隱藏域，但是在提交表單時可以看到隱藏域的內容被提交至伺服器
    <input type="hidden" value="666" name="userid">
  • 只讀、禁用

W3C HTML5標準中，規定對於布爾類型的屬性，屬性值可以省略

講解只讀和禁用的語法，強調不能單寫readonly或disabled，
必須寫readonly＝”readonly”和disabled=“disabled”，介紹只讀和禁用的使用場合
<input name="name" type="text" value="張三" readonly>
<input type="submit" disabled value="保存" >
  • 表單元素的標註
    增強滑鼠的可用性
    自動將焦點轉移到與該標註相關的表單元素上
<!--它的for屬性對應的id與表單元素id一致-->
<label for="id">標註的文本</label>
<input type="radio" name="gender" id="male"/>

表單初級驗證的方法

  • placeholder
    提示語預設顯示，當文本框中輸入內容時提示語消失
<input type="search" name="sousuo" placeholder="請輸入要搜索的關鍵字"/>
  • required
    規定文本框填寫內容不能為空，否則不允許用戶提交表單
<input type="text" name="username" required/>
  • pattern
    用戶輸入的內容必須符合正則表達式所指的規則，否則就不能提交表單
<input type="text" name="tel" required pattern="^1[358]\d{9}" />

3.4 小結

本文來自博客園，作者：自律即自由-，轉載請註明原文鏈接：https://www.cnblogs.com/deyo/p/refenghtml.html


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

-Advertisement-
Play Games
更多相關文章
  • [ Docker ] 使用 Watchtower 自動更新容器
    Watchtower 是一個用於自動更新 Docker 容器的工具。它可以監視 Docker Hub 或私有倉庫中的鏡像，併在發現新的鏡像版本時自動更新容器。 ...
  • centos 9 設置靜態ip
    (文章目錄) 01、首先配置文件地址改了 地址為 ` /etc/NetworkManager/system-connections/網卡名 ` 網卡名可以使用 ip a查看，紅框中就是網卡名 網卡名 ls命令可以看到有以下配置文件 ` es160.nmconnection ` vi編輯 ` [con ...
  • linux驅動創建節點文件(device和class方式)
    一、共用記憶體是什麼 在Linux系統中，共用記憶體是一種IPC（進程間通信）方式，它可以讓多個進程在物理記憶體中共用一段記憶體區域。 這種共用記憶體區域被映射到多個進程的虛擬地址空間中，使得多個進程可以直接訪問同一段物理記憶體區域中的數據，從而實現進程間的高速數據交換和通信。 二、共用記憶體的原理 共用記憶體基於 ...
  • DevOps到底是個什麼鬼
    前騰訊工程師，經歷過大廠，也經歷過創業！ 我已奔四，但我還在持續學習，持續成長！ 我非常樂意把我的經驗和心得分享給你！ 我是阿銘，關註我，和我一起成長為技術大牛！ ↓↓↓↓↓ 關於DevOps這個概念，可能100個人能給出100個說法，這是因為每個人所接觸到的環境有所差異，不同的公司要解決的問題自然 ...
  • 為什麼文件刪除了但磁碟空間沒有釋放？
    案例現象 這天，監控系統發來一條告警消息，內容說某台伺服器根目錄磁碟占用空間達到閾值，超過百分之八十了 登上伺服器，df -Th 看一下，發現磁碟空間確實不夠用了 進入到根目錄，然後 du -sh * 可以看到，var 目錄下的磁碟空間已經占用了 75G 既然如此，刪除 var 目錄下一些占空間較大 ...
  • 談談 Vue toRef 和 reactive
    reactive reactive 創建一個深層的對象的響應式代理，即對象根屬性以及嵌套對象的屬性都是響應式的。如果使用 ES6 結構賦值，就會使得這個對象的響應式代理第一層（根屬性）屬性失去響應式，但其嵌套下的對象屬性還是響應式的。 shallowReactive 會創建淺層的對象的響應式代理，只 ...
  • 使用JS快速讀取TXT文件
    1 前言 最近有個需求，需要使用JS快速讀取外部大數據文件（60w條記錄的表）。筆者嘗試過使用JS讀取Excel文件，但是跑了十幾分鐘仍未出結果，後來筆者嘗試將原數據保存為TXT文件，再從TXT文件中讀取數據，只需幾秒鐘即可讀取完畢。在此分享一下，也留著以後備用。 2 案例 為方便快速理解，筆者挑選 ...
  • 前端常見的十種佈局
    前端常見的十種佈局方式 作為一個開發小白，也是第一次編寫博客文章，若有錯誤請各位大牛大佬指正，輕噴！！！ 我在學校接觸最多的就是前端，然後最近在學習新的前端知識，發現前端佈局常見的有很多種，不同的應用場景有不同的佈局方式，下麵就來簡單介紹一下吧。 靜態佈局 浮動佈局 定位佈局 柵格佈局 table布 ...
一周排行
    -Advertisement-
    Play Games
  • .net下優秀的MQTT框架MQTTnet使用方法，物聯網通訊必備
    MQTTnet 是一個高性能的MQTT類庫，支持.NET Core和.NET Framework。 MQTTnet 原理： MQTTnet 是一個用於.NET的高性能MQTT類庫，實現了MQTT協議的各個層級，包括連接、會話、發佈/訂閱、QoS（服務質量）等。其原理涉及以下關鍵概念： MqttCli ...
  • WPF 綁定binding都有哪些事件
    在WPF中，源屬性（Source Property）指的是提供數據的屬性，通常是數據模型或者其他控制項的屬性，而目標屬性（Target Property）則是數據綁定的目標，通常是綁定到控制項的屬性，例如TextBlock的Text屬性。數據綁定將源屬性的值自動更新到目標屬性中。 主要包含以下幾個事件： ...
  • C#中await /async 的使用場景，優點，使用方法介紹
    async/await 是 C# 中非同步編程的關鍵特性，它使得非同步代碼編寫更為簡單和直觀。下麵深入詳細描述了 async/await 的使用場景、優點以及一些高級使用方法，並提供了相應的實例源代碼。 使用場景： I/O 操作： 非同步編程特別適用於涉及 I/O 操作（如文件讀寫、網路請求等）的場景。在 ...
  • 淺談WPF之控制項拖拽與拖動
    使用過office的visio軟體畫圖的小伙伴都知道，畫圖軟體分為兩部分，左側圖形庫，存放各種圖標，右側是一個畫布，將左側圖形庫的圖標控制項拖拽到右側畫布，就會生成一個新的控制項，並且可以自由拖動。那如何在WPF程式中，實現類似的功能呢？今天就以一個簡單的小例子，簡述如何在WPF中實現控制項的拖拽和拖動，... ...
  • 在winform中使用blazor hybrid構建頁面
    1、Blazor Hybrid簡介 Blazor Hybrid 使開發人員能夠將桌面和移動本機客戶端框架與 .NET 和 Blazor 結合使用。在 Blazor Hybrid 應用中，Razor 組件在設備上是本機運行的。 這些組件通過本地互操作通道呈現到嵌入式 Web 視圖控制項。 組件不在瀏覽器 ...
  • 【scikit-learn基礎】--『數據載入』之樣本生成器
    除了內置的數據集，scikit-learn還提供了隨機樣本的生成器。通過這些生成器函數，可以生成具有特定特性和分佈的隨機數據集，以幫助進行機器學習演算法的研究、測試和比較。 目前，scikit-learn庫（v1.3.0版）中有20個不同的生成樣本的函數。本篇重點介紹其中幾個具有代表性的函數。 1. ...
  • 從0到1，手把手帶你開發截圖工具ScreenCap------002實現設置預設保存的圖片位置
    從0到1，手把手帶你開發截圖工具ScreenCap------002實現通過文件對話框，選擇合適的文件夾，自定義預設的圖片保存位置，簡單易學 ...
  • 快速認識什麼是：Kubernetes
    每次談到容器的時候，除了Docker之外，都會說起 Kubernetes，那麼什麼是 Kubernetes呢？今天就來一起學快速入門一下 Kubernetes 吧！希望本文對您有所幫助。 Kubernetes，一種用於管理和自動化雲中容器化工作負載的工具。 想象一下你有一個管弦樂隊，將每個音樂家視為 ...
  • Windows伺服器，通過Nginx部署VUE+Django前後端分離項目
    目錄 基本說明 安裝 Nginx 部署 VUE 前端 部署 Django 後端 Django admin 靜態文件（CSS，JS等）丟失的問題 總結 1. 基本說明 本文介紹了在 windows 伺服器下，通過 Nginx 部署 VUE + Django 前後端分離項目。本項目前端運行在 80 埠 ...
  • 從0到1，手把手帶你開發截圖工具ScreenCap------003實現最小化程式到托盤運行
    從0到1，手把手帶你開發截圖工具ScreenCap------003實現最小化程式到托盤運行，- 為了方便截圖乾凈，實現最小化程式到托盤運行，簡潔，勿擾，實現最小化程式到托盤運行， 實現托盤菜單功能，實現回顯主窗體， 實現托盤開始截屏， 實現氣泡信息提示，實現托盤程式提示，實現托盤退出程式， 封裝完... ...
所有分類