快速帶你複習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 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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類