?2.快速了解HTML5的標簽類型

?

??HTML5 的標簽類型豐富多樣,每種類型都有其獨特的功能和用途,以下是一些常見的 HTML5 標簽類型介紹:

🦋結構標簽

  • 🪭<html>它是 HTML 文檔的根標簽,所有其他標簽都包含在這個標簽內,就像一個大容器,把整個網頁的內容都包裹起來。
  • 🪭<head>這個標簽里包含的是關于網頁的元信息,比如網頁的標題、引入的外部樣式表、腳本等,這些信息不會直接顯示在網頁頁面上,但對網頁的顯示和功能起著重要的作用。
  • 🪭<body>網頁中實際顯示的內容都放在<body>標簽里,比如文字、圖片、按鈕等所有能被用戶看到的元素都在這個標簽內部。
  • 🪭<header>通常用來表示網頁或頁面中某個區域的頭部部分,比如網站的 logo、導航欄等內容可以放在<header>標簽里。
  • 🪭<footer><header>相對,用于表示網頁或頁面中某個區域的底部部分,一般包含版權信息、聯系方式等內容。

🦋文本標簽

  • 🪭<h1>?-?<h6>這是標題標簽,<h1>是最大的標題,<h6>是最小的標題。它們用于突出顯示網頁中的不同級別標題,使內容結構更清晰,便于用戶快速了解網頁的主要內容。
  • 🪭<p>段落標簽,用于定義文本段落。只要是一段連續的文本,就可以把它放在<p>標簽里,瀏覽器會自動在段落之間添加一些間距,使文本看起來更有條理。
  • 🪭<span>它是一個行內標簽,主要用于在不改變文本結構的情況下,對部分文本進行樣式設置或添加腳本行為。比如你想給一段文字中的某個詞設置特殊顏色,就可以把這個詞放在<span>標簽里,然后對<span>標簽設置樣式。
  • 🪭<em>用于強調文本,通常會以斜體的形式顯示。比如你想突出某個重要的詞語或句子,就可以把它放在<em>標簽里。
  • 🪭<strong>也是用于強調文本,但它的強調程度比<em>更強,一般會以粗體的形式顯示。

🦋多媒體標簽

  • 🪭<img>用于在網頁中插入圖片。通過設置src屬性來指定圖片的路徑,alt屬性來提供圖片的描述信息,當圖片無法顯示時,就會顯示alt屬性中的文字。
  • 🪭<audio>用于在網頁中嵌入音頻文件,支持多種音頻格式。可以通過src屬性指定音頻文件的路徑,還可以設置controls屬性來顯示音頻播放控制按鈕,讓用戶能夠播放、暫停、調節音量等。
  • 🪭<video>用來在網頁中播放視頻,同樣支持多種視頻格式。通過src屬性指定視頻文件的路徑,controls屬性來顯示視頻播放控制欄,還可以設置widthheight屬性來指定視頻的寬度和高度。

🦋表單標簽

  • 🪭<form>表單標簽,用于創建用戶輸入信息的表單。它可以包含各種表單元素,如文本輸入框、下拉菜單、單選按鈕、復選框等,用戶在表單中輸入的信息可以提交到服務器進行處理。
  • 🪭<input>這是最常用的表單元素之一,它可以根據不同的type屬性值創建不同類型的輸入框,比如type="text"創建文本輸入框,type="password"創建密碼輸入框,type="checkbox"創建復選框,type="radio"創建單選按鈕等。
  • 🪭<select>用于創建下拉菜單,用戶可以從下拉列表中選擇一個選項。<select>標簽內部,通過<option>標簽來定義下拉菜單中的每個選項。
  • 🪭<textarea>用于創建多行文本輸入框,用戶可以在其中輸入大量的文本內容,比如留言、評論等。

🦋布局標簽

  • 🪭<div>這是一個非常常用的布局標簽,它就像一個容器,可以把網頁中的不同部分劃分成不同的區域,然后通過 CSS 樣式來對這些區域進行布局和樣式設置。
  • 🪭<ul>?和?<li><ul>是無序列表標簽,<li>是列表項標簽,它們通常一起使用來創建無序列表,比如項目符號列表。每個<li>標簽代表列表中的一個項目。
  • 🪭<ol>?和?<li><ol>是有序列表標簽,和<ul>類似,但它創建的是有序列表,比如數字編號列表。<li>同樣用于定義列表中的每個項目。

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/70146.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/70146.shtml
英文地址,請注明出處:http://en.pswp.cn/web/70146.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

eNSP防火墻綜合實驗

一、實驗拓撲 二、ip和安全區域配置 1、防火墻ip和安全區域配置 新建兩個安全區域 ip配置 Client1 Client2 電信DNS 百度web-1 聯通DNS 百度web-2 R2 R1 三、DNS透明代理相關配置 1、導入運營商地址庫 2、新建鏈路接口 3、配置真實DNS服務器 4、創建虛擬DNS服務器 5、配置D…

Linux 配置交換空間(Swap)解決內存不足

&#x1f680; 作者主頁&#xff1a; 有來技術 &#x1f525; 開源項目&#xff1a; youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template &#x1f33a; 倉庫主頁&#xff1a; GitCode︱ Gitee ︱ Github &#x1f496; 歡迎點贊 &#x1f44d; 收藏 ?評論 …

個人shell腳本分享

在周一到周五做增量備份&#xff0c;在周六周日做完全備份 #!/bin/bash定義變量 SRC“/path/to/source” # 源目錄 BKUP“/backup” # 備份主目錄 FUL“KaTeX parse error: Expected EOF, got # at position 22: …ull" #? 完全備份目錄 INC"BKUP/inc” # 增量備份…

Django 5 實用指南(一)安裝與配置

1.1 Django5的背景與發展 Django 自從2005年由Adrian Holovaty和Simon Willison在 Lawrence Journal-World 新聞網站上首次發布以來&#xff0c;Django 一直是 Web 開發領域最受歡迎的框架之一。Django 框架經歷了多個版本的演進&#xff0c;每次版本更新都引入了新功能、改進了…

百度搜索融合 DeepSeek 滿血版,開啟智能搜索新篇

百度搜索融合 DeepSeek 滿血版&#xff0c;開啟智能搜索新篇 &#x1f680; &#x1f539; 一、百度搜索全量接入 DeepSeek &#x1f539; 百度搜索迎來重要升級&#xff0c;DeepSeek 滿血版全面上線&#xff01;&#x1f389; 用戶在百度 APP 搜索后&#xff0c;點擊「AI」即…

RabbitMQ服務異步通信

消息隊列在使用過程中&#xff0c;面臨著很多實際問題需要思考&#xff1a; 1. 消息可靠性 消息從發送&#xff0c;到消費者接收&#xff0c;會經理多個過程&#xff1a; 其中的每一步都可能導致消息丟失&#xff0c;常見的丟失原因包括&#xff1a; 發送時丟失&#xff1a; 生…

【教程】MySQL數據庫學習筆記(七)——多表操作(持續更新)

寫在前面&#xff1a; 如果文章對你有幫助&#xff0c;記得點贊關注加收藏一波&#xff0c;利于以后需要的時候復習&#xff0c;多謝支持&#xff01; 【MySQL數據庫學習】系列文章 第一章 《認識與環境搭建》 第二章 《數據類型》 第三章 《數據定義語言DDL》 第四章 《數據操…

膠囊網絡動態路由算法:突破CNN空間局限性的數學原理與工程實踐

一、CNN的空間局限性痛點解析 傳統CNN的瓶頸&#xff1a; 池化操作導致空間信息丟失&#xff08;最大池化丟棄85%激活值&#xff09;無法建模層次空間關系&#xff08;旋轉/平移等變換不敏感&#xff09;局部感受野限制全局特征整合 示例對比&#xff1a; # CNN最大池化示例…

#滲透測試#批量漏洞挖掘#Apache Log4j反序列化命令執行漏洞

免責聲明 本教程僅為合法的教學目的而準備,嚴禁用于任何形式的違法犯罪活動及其他商業行為,在使用本教程前,您應確保該行為符合當地的法律法規,繼續閱讀即表示您需自行承擔所有操作的后果,如有異議,請立即停止本文章讀。 目錄 Apache Log4j反序列化命令執行漏洞 一、…

深入剖析Spring MVC

一、Spring MVC 概述 1. 什么是 Spring MVC&#xff1f; Spring MVC 是基于 Spring 框架的 Web 框架&#xff0c;它實現了 MVC 設計模式&#xff0c;將應用程序分為三個核心部分&#xff1a; Model&#xff1a;封裝應用程序的數據和業務邏輯。 View&#xff1a;負責渲染數據…

機器學習入門-讀書摘要

先看了《深度學習入門&#xff1a;基于python的理論和實踐》這本電子書&#xff0c;早上因為入迷還坐過站了。。 因為里面的反向傳播和鏈式法則特別難懂&#xff0c;又網上搜了相關內容進行進一步理解&#xff0c;參考的以下文章&#xff08;個人認為都講的都非常好&#xff0…

【AI】mac 本地部署 Dify 實現智能體

下載 Ollama 訪問 Ollama 下載頁&#xff0c;下載對應系統 Ollama 客戶端。或者參考文章【實戰AI】macbook M1 本地ollama運行deepseek_m1 max可以跑deepseek嗎-CSDN博客 dify 開源的 LLM 應用開發平臺。提供從 Agent 構建到 AI workflow 編排、RAG 檢索、模型管理等能力&am…

[實現Rpc] 消息抽象層的具體實現

目錄 具象層 _ 消息抽象的實現 信息的抽象類 實現 JsonMessage JsonRequest & JsonResponse 消息-不同消息分裝實現 實現 Request RpcRequest TopicRequest ServiceRequest Response RpcResponse TopicResponse ServiceResponse 實現 生產工廠 本篇文章繼 …

計算機考研之數據結構:深入解析最大公約數與歐幾里得算法

一、生活中的公約數應用 在日常生活中&#xff0c;經常需要處理"均分分配"問題。例如&#xff1a;要將24塊巧克力和18塊餅干平均分給小朋友&#xff0c;最多能分給幾個小朋友&#xff1f;這就是典型的求最大公約數問題。 二、基本概念詳解 約數與公約數 約數&…

NCHAR_CS和CHAR_CS,導致UNION ALL 時,提示SQL 錯誤 [12704] [72000]: ORA-12704: 字符集不匹配

檢查涉及的數據表和列的字符集設置 -- 查詢表的字符集 SELECT parameter, value FROM nls_database_parameters WHERE parameter LIKE NLS_CHARACTERSET;-- 查詢列的字符集&#xff08;對于特定表&#xff09; SELECT column_name, character_set_name FROM all_tab_columns W…

算法之 跳躍游戲

文章目錄 55.跳躍游戲思路參考&#xff1a;56.合并區間 55.跳躍游戲 55.跳躍游戲 靈神思路 思路分析&#xff1a; 兩種思路&#xff0c;思路1是我們可以直接維護當前到達i的時候所能到達的最右的邊界mr&#xff0c;如果i>mr就說明無法到達i,否則就是可以到達&#xff1b;…

在C#中動態訪問對象屬性時,用表達式樹可以獲得高效性能

在C#中如何用表達式樹動態訪問對象屬性的問題。用戶可能已經知道反射的基本用法&#xff0c;但想用表達式樹來提高性能&#xff0c;因為表達式樹編譯后的委托執行速度比反射快。 首先&#xff0c;表達式樹的基本概念。表達式樹允許在運行時構建代碼&#xff0c;并編譯成可執行的…

深入解析 Flutter 性能優化:從原理到實踐

深入解析 Flutter 性能優化&#xff1a;從原理到實踐的全面指南 Flutter 是一個高性能的跨平臺框架&#xff0c;但在開發復雜應用時&#xff0c;性能問題仍然可能出現。性能優化是開發高質量 Flutter 應用的關鍵。本篇博客將從 Flutter 的渲染原理出發&#xff0c;結合實際場景…

使用 Python 爬蟲獲取微店快遞費用 item_fee API 接口數據

在電商運營中&#xff0c;快遞費用是影響商家利潤和用戶體驗的重要因素之一。微店作為國內知名的電商平臺&#xff0c;提供了豐富的 API 接口供開發者使用&#xff0c;其中也包括查詢商品快遞費用的接口。通過調用微店的 item_fee 接口&#xff0c;開發者可以獲取指定商品的快遞…

MySQL基本操作——包含增刪查改(環境為Ubuntu20.04,MySQL5.7.42)

1.庫的操作 1.1 創建數據庫 語法&#xff1a; 說明&#xff1a; 大寫的表示關鍵字 [] 是可選項 CHARACTER SET: 指定數據庫采用的字符集 COLLATE: 指定數據庫字符集的校驗規則 1.2 創建案例 創建一個使用utf8字符集的db1數據庫 create database db1 charsetutf8; …