快速帶你複習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
更多相關文章
  • Watchtower 是一個用於自動更新 Docker 容器的工具。它可以監視 Docker Hub 或私有倉庫中的鏡像,併在發現新的鏡像版本時自動更新容器。 ...
  • (文章目錄) 01、首先配置文件地址改了 地址為 ` /etc/NetworkManager/system-connections/網卡名 ` 網卡名可以使用 ip a查看,紅框中就是網卡名 網卡名 ls命令可以看到有以下配置文件 ` es160.nmconnection ` vi編輯 ` [con ...
  • 一、共用記憶體是什麼 在Linux系統中,共用記憶體是一種IPC(進程間通信)方式,它可以讓多個進程在物理記憶體中共用一段記憶體區域。 這種共用記憶體區域被映射到多個進程的虛擬地址空間中,使得多個進程可以直接訪問同一段物理記憶體區域中的數據,從而實現進程間的高速數據交換和通信。 二、共用記憶體的原理 共用記憶體基於 ...
  • 前騰訊工程師,經歷過大廠,也經歷過創業! 我已奔四,但我還在持續學習,持續成長! 我非常樂意把我的經驗和心得分享給你! 我是阿銘,關註我,和我一起成長為技術大牛! ↓↓↓↓↓ 關於DevOps這個概念,可能100個人能給出100個說法,這是因為每個人所接觸到的環境有所差異,不同的公司要解決的問題自然 ...
  • 案例現象 這天,監控系統發來一條告警消息,內容說某台伺服器根目錄磁碟占用空間達到閾值,超過百分之八十了 登上伺服器,df -Th 看一下,發現磁碟空間確實不夠用了 進入到根目錄,然後 du -sh * 可以看到,var 目錄下的磁碟空間已經占用了 75G 既然如此,刪除 var 目錄下一些占空間較大 ...
  • reactive reactive 創建一個深層的對象的響應式代理,即對象根屬性以及嵌套對象的屬性都是響應式的。如果使用 ES6 結構賦值,就會使得這個對象的響應式代理第一層(根屬性)屬性失去響應式,但其嵌套下的對象屬性還是響應式的。 shallowReactive 會創建淺層的對象的響應式代理,只 ...
  • 1 前言 最近有個需求,需要使用JS快速讀取外部大數據文件(60w條記錄的表)。筆者嘗試過使用JS讀取Excel文件,但是跑了十幾分鐘仍未出結果,後來筆者嘗試將原數據保存為TXT文件,再從TXT文件中讀取數據,只需幾秒鐘即可讀取完畢。在此分享一下,也留著以後備用。 2 案例 為方便快速理解,筆者挑選 ...
  • 前端常見的十種佈局方式 作為一個開發小白,也是第一次編寫博客文章,若有錯誤請各位大牛大佬指正,輕噴!!! 我在學校接觸最多的就是前端,然後最近在學習新的前端知識,發現前端佈局常見的有很多種,不同的應用場景有不同的佈局方式,下麵就來簡單介紹一下吧。 靜態佈局 浮動佈局 定位佈局 柵格佈局 table布 ...
一周排行
    -Advertisement-
    Play Games
  • 一個自定義WPF窗體的解決方案,借鑒了呂毅老師的WPF製作高性能的透明背景的異形視窗一文,併在此基礎上增加了滑鼠穿透的功能。可以使得透明窗體的滑鼠事件穿透到下層,在下層窗體中響應。 ...
  • 在C#中使用RabbitMQ做個簡單的發送郵件小項目 前言 好久沒有做項目了,這次做一個發送郵件的小項目。發郵件是一個比較耗時的操作,之前在我的個人博客裡面回覆評論和友鏈申請是會通過發送郵件來通知對方的,不過當時只是簡單的進行了非同步操作。 那麼這次來使用RabbitMQ去統一發送郵件,我的想法是通過 ...
  • 當你使用Edge等瀏覽器或系統軟體播放媒體時,Windows控制中心就會出現相應的媒體信息以及控制播放的功能,如圖。 SMTC (SystemMediaTransportControls) 是一個Windows App SDK (舊為UWP) 中提供的一個API,用於與系統媒體交互。接入SMTC的好 ...
  • 最近在微軟商店,官方上架了新款Win11風格的WPF版UI框架【WPF Gallery Preview 1.0.0.0】,這款應用引入了前沿的Fluent Design UI設計,為用戶帶來全新的視覺體驗。 ...
  • 1.簡單使用實例 1.1 添加log4net.dll的引用。 在NuGet程式包中搜索log4net並添加,此次我所用版本為2.0.17。如下圖: 1.2 添加配置文件 右鍵項目,添加新建項,搜索選擇應用程式配置文件,命名為log4net.config,步驟如下圖: 1.2.1 log4net.co ...
  • 之前也分享過 Swashbuckle.AspNetCore 的使用,不過版本比較老了,本次演示用的示例版本為 .net core 8.0,從安裝使用開始,到根據命名空間分組顯示,十分的有用 ...
  • 在 Visual Studio 中,至少可以創建三種不同類型的類庫: 類庫(.NET Framework) 類庫(.NET 標準) 類庫 (.NET Core) 雖然第一種是我們多年來一直在使用的,但一直感到困惑的一個主要問題是何時使用 .NET Standard 和 .NET Core 類庫類型。 ...
  • WPF的按鈕提供了Template模板,可以通過修改Template模板中的內容對按鈕的樣式進行自定義。結合資源字典,可以將自定義資源在xaml視窗、自定義控制項或者整個App當中調用 ...
  • 實現了一個支持長短按得按鈕組件,單擊可以觸發Click事件,長按可以觸發LongPressed事件,長按鬆開時觸發LongClick事件。還可以和自定義外觀相結合,實現自定義的按鈕外形。 ...
  • 一、WTM是什麼 WalkingTec.Mvvm框架(簡稱WTM)最早開發與2013年,基於Asp.net MVC3 和 最早的Entity Framework, 當初主要是為瞭解決公司內部開發效率低,代碼風格不統一的問題。2017年9月,將代碼移植到了.Net Core上,併進行了深度優化和重構, ...