快速帶你複習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 6 C#中System.IO.Path類的用法
    1. 說明 /* Performs operations on System.String instances that contain file or directory path information. These operations are performed in a cross-pla ...
  • 使用WebApi+Vue3從0到1搭建《許可權管理系統》:二、搭建JWT系統鑒權
    視頻地址：【WebApi+Vue3從0到1搭建《許可權管理系統》系列視頻：搭建JWT系統鑒權-嗶哩嗶哩】 https://b23.tv/R6cOcDO qq群:801913255 一、在appsettings.json中設置鑒權屬性 /*jwt鑒權*/ "JwtSetting": { "Issuer" ...
  • 實戰指南：使用 xUnit 和 ASP.NET Core 進行集成測試【完整教程】
    引言 集成測試可在包含應用支持基礎結構（如資料庫、文件系統和網路）的級別上確保應用組件功能正常。 ASP.NET Core 通過將單元測試框架與測試 Web 主機和記憶體中測試伺服器結合使用來支持集成測試。 簡介 集成測試與單元測試相比，能夠在更廣泛的級別上評估應用的組件，確認多個組件一起工作以生成預 ...
  • .NET Emit 入門教程：第六部分：IL 指令：9：詳解 ILGenerator 指令方法：運算操作指令（指令篇結束）
    在.NET Emit編程中，我們探討了運算操作指令的重要性和應用。這些指令包括各種數學運算、位操作和比較操作，能夠在動態生成的代碼中實現對數據的處理和操作。通過這些指令，開發人員可以靈活地進行算術運算、邏輯運算和比較操作，從而實現各種複雜的演算法和邏輯......本篇之後，將進入第七部分：實戰項目 ...
  • WPF多表頭表格實現
    前言 多表頭表格是一個常見的業務需求，然而WPF中卻沒有預設實現這個功能，得益於WPF強大的控制項模板設計，我們可以通過修改控制項模板的方式自己實現它。 一、需求分析 下圖為一個典型的統計表格，統計1-12月的數據。 此時我們有一個需求，需要將月份按季度劃分，以便能夠直觀地看到季度統計數據，以下為該需求 ...
  • gRPC入門學習之旅（七）
    如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目 在當下這個年代 SPA 已是主流，人們早已忘記了 MVC 以及 Razor 的故事。但是在某些場景下 SSR 還是有意想不到效果。比如某些靜態頁面，比如追求首屏載入速度的時候。最近在項目中回歸傳統效果還是不錯。 有的時候我們希望將 ...
  • System.AggregateException: 發生一個或多個錯誤.....
    System.AggregateException: 發生一個或多個錯誤。 > Microsoft.WebTools.Shared.Exceptions.WebToolsException: 生成失敗。檢查輸出視窗瞭解更多詳細信息。 內部異常堆棧跟蹤的結尾 > (內部異常 #0) Microsoft ...
  • 精通中間件測試：Asp.Net Core實戰指南，提升應用穩定性和可靠性
    引言 在上一章節我們實戰了在Asp.Net Core中的項目實戰，這一章節講解一下如何測試Asp.Net Core的中間件。 TestServer 還記得我們在集成測試中提供的TestServer嗎？ TestServer 是由 Microsoft.AspNetCore.TestHost 包提供的。 ...
  • Case表達式
    在發現結果為真的WHEN子句時,CASE表達式的真假值判斷會終止,剩餘的WHEN子句會被忽略: CASE WHEN col_1 IN ('a', 'b') THEN '第一' WHEN col_1 IN ('a') THEN '第二' ELSE '其他' END 註意: 統一各分支返回的數據類型. ...
  • 揭秘：C#語法中“_ =” 是什麼？
    在C#編程世界中，語法的精妙之處往往體現在那些看似微小卻極具影響力的符號與結構之中。其中，“_ =” 這一組合突然出現還真不知道什麼意思。本文將深入剖析“_ =” 的含義、工作原理及其在實際編程中的廣泛應用，揭示其作為C#語法奇兵的重要角色。 一、下劃線 _：神秘的棄元符號 下劃線 _ 在C#中並非 ...
所有分類