快速帶你複習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
  • ASP.NET Core - 選項系統之源碼介紹
    .NET Core 選項系統的主要實現在 Microsoft.Extensions.Options 和 Microsoft.Extensions.Options.ConfigurationExtensions 兩個 Nuget 包。對於一個框架的源碼進行解讀，我們可以從我們常用的框架中的類或方法入手 ...
  • BitMap對象當前正在其他地方使用？加鎖也沒用？
    最近在工作中遇到一個問題,就是我有多個線程會調用bitmap對象，運行的時候報錯，對象當前正在其他地方使用。第一反應肯定是加鎖啊，於是我就在每個用到bitmap的地方都加了鎖，但是運行之後依然報這個錯 測試代碼如下 using System; using System.Drawing; using ...
  • 記一次 .NET 某感測器採集系統 線程爆高分析
    一：背景 1. 講故事 前段時間有位朋友微信找到我，說他的程式使用 hsl 庫之後，採集 plc 時記憶體溢出，讓我幫忙看一下怎麼回事，哈哈，貌似是分析之旅中的第二次和 hsl 打交道，既然找到我，那就上 windbg 說話吧。 二：WinDbg 分析 1. 為什麼會記憶體溢出 簡單觀察程式的提交記憶體之 ...
  • WPF日曆控制項
    在 IIS 上啟用 Websocket 在 Windows Server 2012 或更高版本上啟用對 WebSocket 協議的支持： 備註 使用 IIS Express 時無需執行這些步驟 通過“管理”菜單或“伺服器管理器”中的鏈接使用“添加角色和功能”嚮導。 選擇“基於角色或基於功能的安裝”。 ...
  • C#-垃圾回收機制(GC)
    C#-垃圾回收機制(GC) 什麼是GC 官網中有這麼一句話： The garbage collector is a common language runtime component that controls the allocation and release of managed memory ...
  • 交互觸摸大屏概念整理
    呆了2個大屏行業的公司，對大屏幕有一些瞭解，所以整理下所瞭解的觸摸屏相關概念。方便自己以及進入這個行業的小伙伴們，能有個系統、快速的認知。 觸摸屏詳細的知識點，網上其實都有。整理資料過程中，我也瞭解了更多的觸摸屏知識，像聲波屏、光學屏之類的之前就沒接觸。下麵分不同的模塊，給大家介紹 交互觸摸屏類型 ...
  • APS系統設計經驗分享(時間推導 - 2023.03)
    近段時間忙於各種項目和對【易排平臺】的優化，沒顧得上分享APS相關的小技巧，回頭看看小公眾號的關註人數早已達1500+，在此爭取時間寫一下這段時間在項目上及平臺優化過程中遇到的一些小技巧，以感謝諸位的關註。過去數月的解決的問題中，涉及最多的是規劃模型中，實現各種時間維度的功能，目前在平臺上也稍有成果 ...
  • Linux 伺服器大量的 log 日誌，如何正確看日誌快速定位錯誤？你必須學會！
    針對大量log日誌快速定位錯誤地方 動態查看日誌 tail -f catalina.ou 從頭打開日誌文件 cat catalina.ou 可以使用 >nanjiangtest.txt 輸出某個新日誌去查看 [[email protected] logs]# cat -n catalina.out |grep 7 ...
  • RocketMQ 學習
    前言 RocketMQ是阿裡巴巴旗下一款開源的MQ框架，經歷過雙十一考驗、Java編程語言實現，有非常好完整生態系統。RocketMQ作為一款純java、分散式、隊列模型的開源消息中間件，支持事務消息、順序消息、批量消息、定時消息、消息回溯等 本篇文章第一部分屬於一些核心概念和工作流程的講解；第二部 ...
  • python中類成員修飾符
    在java，c#類的成員修飾符包括，公有、私有、程式集可用的、受保護的。 對於python來說，只有兩個成員修飾符：公有成員，私有成員 成員修飾符是來修飾誰呢？當然是修飾成員了。那麼python類的成員包括什麼呢？ python成員： 欄位，方法，屬性 每個類成員的修飾符有兩種: 公有成員:內部外部 ...
所有分類