（前端基礎）HTML（一）

前提

W3C:World Wide Web Consortium（萬維網聯盟）

Web技術領域最權威和具有影響力的國際中立性技術標準機構

其中標準包括：機構化標準語言（HTML、XML）

表現標準語言（CSS）

行為標準（DOM、ECMAScript）

HTML：超文本標記語言

建立html文件

利用瀏覽器打開該文件

若出現錯誤提示：

  • 打開文件設置：

  • 選擇Tools：

HTML基本結構

  • DOCTYPE:告訴瀏覽器，我們要使用什么規范
  • <html>:整個網頁
  • head：網頁頭部
  • body：網頁主體
  • title：網頁標題
  • meta：描述性標簽，用來描述網站的信息

Ctrl+/:html文件的注釋快捷鍵?

meta標簽使用：

如網易云：

?網頁基本標簽

  • 標題標簽<h1>
  • 段落標簽<p>
  • 換行標簽<br/>
  • 水平線標簽<hr/>
  • 字體樣式標簽<strong>、<em>
  • 注釋和特殊符號&nbsp;? &gt;? ? &lt;? ? &copy;

塊元素：無論內容多少，該元素獨占一行（p、h1-h6）

行內元素：內容撐開寬度，左右都是行內元素的可以在排在一行（a、strong、em）

圖像標簽

常見圖像格式JPG、GIF、PNG、BMP

利用img標簽嵌入圖像

<img src="圖像地址" alt="圖像的替換文字" title="鼠標懸停時提示文字" width="圖像寬度" height="圖像高度"/>

該處選擇資源目錄下的圖片文件中的圖片進行測試

src：圖片地址

相對地址：../resources/image/apple.jpg

絕對地址：D:\學習資料\java\前端\resources\image\apple.jpg

圖片不存在的情況：

鏈接標簽

文本、圖像超鏈接

<a href="鏈接路徑" target="鏈接在哪個窗口打開"></a>

href:可以是html文件、URL地址

target：鏈接在哪個窗口打開

  • _blank:在新標簽中打開
  • _self:默認值。在自己的網頁中打開

錨標簽

使用方法：

  • 需要一個錨標記
  • 跳轉到標記#

頁面跳轉：

?

功能性鏈接

郵件鏈接：mailto：郵箱地址

列表標簽

列表：信息資源的一種展示形式。它可以使信息結構化和條理化，并以列表的樣式顯示出來，以便瀏覽者更快捷地獲得相應的信息。

列表分類：

  • 無序列表
<ol><li></li>
</ol>
  • 有序列表
<ul><li></li>
</ul>
  • 定義列表
<dl><dt>列表名稱</dt><dd>列表內容</dd>
</dl>

?表格

?表格簡單通用，結構穩定。

基本結構有：單元格、行、列、跨行、跨列

如下：

  • ?表格標簽：table
  • 行row：tr
  • 列：td
  • 邊框：border
  • 跨行：colspan，參數是跨的列數
  • 跨列：rowspan，參數使跨的行數
<table><tr><td>1.1</td><td>1.2</td><td>1.3</td></tr><tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

?媒體元素

視頻元素標簽：video

音頻元素標簽：audio

  • 屬性src：所要選中的文件位置
  • 屬性controls:控制播放
  • 屬性autoplay:自動播放

<video src="mp4文件" controls autoplay></video>
<audio src="mp3文件" controls autoplay></audio>

?擴展：頁面結構分析

header標題頭部區域內容（頁面或頁面中的一塊區域）
footer標記腳部區域內容（整個頁面或頁面的一塊區域）
sectionWeb頁面中的一塊獨立區域
article獨立的文章內容
aside相關內容或應用（側邊欄）
nav導航類輔助內容

iframe內聯框架

<iframe src="頁面地址" name="框架標識名" frameborder="0"></iframe>

使用方法：

width:寬度

height：高度

<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="700px"></iframe>

該處跳轉到百度

?也可以通過a標簽往iframe加東西

name：框架標識名

target：鏈接在哪個窗口打開

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

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

相關文章

【ISO 14229-1:2023 UDS診斷（會話控制0x10服務）測試用例CAPL代碼全解析③】

【ISO 14229-1:2023 UDS診斷（會話控制0x10服務）測試用例CAPL代碼全解析③】

ISO 14229-1:2023 UDS診斷【會話控制0x10服務】_TestCase03 作者&#xff1a;車端域控測試工程師 更新日期&#xff1a;2025年02月15日 關鍵詞&#xff1a;UDS診斷、0x10服務、診斷會話控制、ECU測試、ISO 14229-1:2023 TC10-003測試用例 用例ID測試場景驗證要點參考條款預期…
閱讀更多...
TDengine 客戶端連接工具 taos-Cli

TDengine 客戶端連接工具 taos-Cli

簡介工具獲取運行命令行參數 基礎參數高級參數 數據導出/導入 數據導出數據導入 執行 SQL 腳本使用小技巧 TAB 鍵自動補全設置字符列顯示寬度其它 錯誤代碼表 簡介 TDengine 命令行工具&#xff08;以下簡稱 TDengine CLI&#xff09;是用戶操作 TDengine 實例并與之交互最簡…
閱讀更多...
Git高級用法

Git高級用法

GIT高級用法及實戰案例解析 前言 作為現代開發者的必備工具&#xff0c;Git的基礎操作&#xff08;add/commit/push&#xff09;早已深入人心。但當面對復雜場景時&#xff0c;掌握Git的高級用法將極大提升開發效率。本文將深入解析Git的高級功能&#xff0c;并配合真實場景案…
閱讀更多...
9個用于測試自動化的最佳AI測試工具（2024）

9個用于測試自動化的最佳AI測試工具（2024）

選擇一款優質的基于生成式AI人工智能的測試工具能夠確保測試過程的準確性和效率&#xff0c;從而加速整個軟件測試周期。相反&#xff0c;設計不佳的測試工具可能無法發現錯誤&#xff0c;并可能存在安全問題。它們可能產生誤報或漏報&#xff0c;誤導開發與測試團隊&#xff0…
閱讀更多...
vue-model如何自定義指令，及批量注冊自定義指令

vue-model如何自定義指令，及批量注冊自定義指令

一、在Vue.js中&#xff0c;v-model是一個用于在表單輸入和應用狀態之間創建雙向綁定的指令。要編寫自定義的v-model指令&#xff0c;你需要使用Vue的自定義指令API。以下是編寫自定義v-model指令的步驟&#xff1a; 定義一個自定義指令對象。在指令對象的bind鉤子函數中&…
閱讀更多...
簡單認識一下-Redis

簡單認識一下-Redis

一、什么是Redis Redis&#xff08;Remote Dictionary Server&#xff09;是一個開源的、基于內存的數據結構存儲系統&#xff0c;它既可以用作數據庫、緩存&#xff0c;也可以作為消息中間件使用。以下為你詳細介紹 Redis&#xff1a; 基本特點 高性能&#xff1a;Redis 將數…
閱讀更多...
LabVIEW的吞雨測控系統

LabVIEW的吞雨測控系統

本案例介紹了一種基于LabVIEW開發的吞雨測控系統&#xff0c;該系統通過建模仿真分析不同控制器模式下的階躍信號響應&#xff0c;從而選擇了最適合的控制器。為了有效解決在控制流量過程中出現的振蕩收斂和流量信號大擾動問題&#xff0c;系統采用了改進的積分分離PID算法&…
閱讀更多...
C++中的順序容器（一）

C++中的順序容器（一）

文章目錄 順序容器概述所有容器類型都支持的操作迭代器容器定義與初始化將一個容器初始化為另一個容器的拷貝標準庫array具有固定大小 賦值和swap關系運算符 順序容器的特有操作向順序容器添加元素訪問元素刪除元素特殊的forward_list操作改變容器的大小容器操作可能是迭代器失…
閱讀更多...
Javaweb中，使用Servlet編寫簡單的接口

Javaweb中，使用Servlet編寫簡單的接口

案例&#xff1a;網頁提交用戶名和密碼信息&#xff0c;后端校驗密碼長度需在6-12位之間 后端部分 WebServlet("/valid") public class SimpleServlet extends HttpServlet{public void service(HttpServletRequest req, HttpServletResponse resp) throws IOExcepti…
閱讀更多...
C語言實現的常見排序算法

C語言實現的常見排序算法

排序是計算機科學中非常重要的基礎算法之一。無論是在數據分析、數據庫查詢還是圖形界面中&#xff0c;我們都可能會遇到排序問題。本文將介紹幾種常見的排序算法&#xff0c;并提供其C語言實現代碼。排序算法的效率和應用場景有很大關系&#xff0c;不同的算法有不同的時間復雜…
閱讀更多...
對于簡單的HTML、CSS、JavaScript前端，我們可以通過幾種方式連接后端

對于簡單的HTML、CSS、JavaScript前端，我們可以通過幾種方式連接后端

1. 使用Fetch API發送HTTP請求&#xff08;最簡單的方式&#xff09;&#xff1a; //home.html // 示例&#xff1a;提交表單數據到后端 const submitForm async (formData) > {try {const response await fetch(http://your-backend-url/api/submit, {method: POST,head…
閱讀更多...
[論文閱讀] SeeSR: Towards Semantics-Aware Real-World Image Super-Resolution

[論文閱讀] SeeSR: Towards Semantics-Aware Real-World Image Super-Resolution

文章目錄 一、前言二、主要貢獻三、Introduction四、Methodology4.1 Motivation &#xff1a;4.2Framework Overview.** 一、前言 通信作者是香港理工大學 & OPPO研究所的張磊教授&#xff0c;也是圖像超分ISR的一個大牛了。 論文如下 SeeSR: Towards Semantics-Aware Rea…
閱讀更多...
案例-04.部門管理-刪除

案例-04.部門管理-刪除

一.功能演示 二.需求說明 三.接口文檔 四.思路 既然是通過id刪除對應的部門&#xff0c;那么必然要獲取到前端請求的要刪除部門的id。id作為請求路徑傳遞過來&#xff0c;那么要從請求路徑中獲取&#xff0c;id是一個路徑參數。因此使用注解PathVariable獲取路徑參數。 請求方…
閱讀更多...
Blazor-父子組件傳遞任意參數

Blazor-父子組件傳遞任意參數

在我們從父組件傳參數給子組件時&#xff0c;可以通過子組件定義的[Parameter]特性的公開屬性進行傳值&#xff0c;但是當我們需要傳遞多個值的時候&#xff0c;就需要通過[Parameter]特性定義多個屬性&#xff0c;有沒有更簡便的方式&#xff1f; 我們可以使用定義 IDictionar…
閱讀更多...
DeepSeek 的創新融合：多行業應用實踐探索

DeepSeek 的創新融合：多行業應用實踐探索

引言 在數字化轉型的浪潮中&#xff0c;技術的融合與創新成為推動各行業發展的關鍵力量。藍耘平臺作為行業內備受矚目的創新平臺&#xff0c;以其強大的資源整合能力和靈活的架構&#xff0c;為企業提供了高效的服務支持。而 DeepSeek 憑借先進的人工智能技術&#xff0c;在自然…
閱讀更多...
STM32創建靜態庫lib

STM32創建靜態庫lib

創建靜態庫lib 1. 新建工程1.1 創建工程文件夾1.2 編寫用戶相關代碼1.2.1 stm32f4xx_it.h1.2.2 stm32f4xx_it.c1.2.3 標準庫配置&#xff1a;stm32f4xx_conf.h1.2.4 HAL庫的配置&#xff1a;stm32f4xx_hal_conf.h1.2.5 LL庫配置&#xff1a;stm32f4xx_ll_conf.h 1.3 移植通用文…
閱讀更多...
elabradio入門第二講——BPSK數字調制與解調（插值、升余弦濾波、速率匹配、符號同步）

elabradio入門第二講——BPSK數字調制與解調（插值、升余弦濾波、速率匹配、符號同步）

數字信號可以通過數字基帶傳輸系統進行傳輸&#xff0c;而基帶傳輸系統僅僅適用于低頻信道下的數字信號傳輸。然而&#xff0c;在實際的通信系統中信道通常具有帶通特性&#xff0c;因而需要將基帶信號搬移到適合信道傳輸的高頻載波上&#xff0c;使得信號與信道相匹配&#xf…
閱讀更多...
汽車 OTA 升級：提升下載與升級速度，優化用戶體驗

汽車 OTA 升級：提升下載與升級速度，優化用戶體驗

摘要&#xff1a; 隨著汽車智能化的飛速發展&#xff0c;OTA&#xff08;Over - the - Air&#xff09;升級已成為汽車行業的重要技術&#xff0c;它能為車輛持續帶來功能更新與性能優化。然而&#xff0c;下載及升級速度較慢的問題常常影響用戶體驗。本文深入探討在汽車 OTA …
閱讀更多...
【Spring+MyBatis】留言墻的實現

【Spring+MyBatis】留言墻的實現

目錄 1. 添加依賴 2. 配置數據庫 2.1 創建數據庫與數據表 2.2 創建與數據庫對應的實體類 3. 后端代碼 3.1 目錄結構 3.2 MessageController類 3.3 MessageService類 3.4 MessageMapper接口 4. 前端代碼 5. 單元測試 5.1 后端接口測試 5.2 使用前端頁面測試 在Spri…
閱讀更多...
SQLite Select 語句詳解

SQLite Select 語句詳解

SQLite Select 語句詳解 SQLite 是一個輕量級的數據庫管理系統&#xff0c;以其簡潔的設計和高效的性能被廣泛應用于各種場景。在 SQLite 中&#xff0c;SELECT 語句是用于查詢數據庫中的數據的命令。本文將詳細介紹 SQLite 的 SELECT 語句&#xff0c;包括其基本語法、常用功…
閱讀更多...
最新文章

Copyright @ 2022~2023