前端-HTML-day1

目錄

1、標簽語法

2、HTML基本骨架

3、標簽的關系

4、注釋

5、標題標簽

6、段落標簽

7、換行和水平線標簽

8、文本格式化標簽

9、圖像標簽-基本使用

10、圖像標簽-屬性

11、相對路徑

12、絕對路徑

13、超鏈接

14、音頻

15、視頻

16、綜合案例1--個人簡介

17、綜合案例2--Vue.js

1、標簽語法

2、HTML基本骨架

3、標簽的關系

4、注釋

5、標題標簽

6、段落標簽

7、換行和水平線標簽

8、文本格式化標簽

9、圖像標簽-基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="./cat2.jpg"><img src="./dog2.jpg">
</body>
</html>

10、圖像標簽-屬性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圖像-屬性</title>
</head>
<body><img src="./cat2.jpg"><!--以前網速慢，可能導致圖片加載不出來，不想影響網頁內容的瀏覽，用alt替換，或者圖片不存在--><img src="./cat.jpg" alt="這是一只貓"><img src="./dog2.jpg" title="這是一只狗"><br><!-- 瀏覽器縮放圖片，默認是等比例縮放 --><img src="./cat2.jpg" width="100"><img src="./dog2.jpg" height="600">
</body>
</html>

11、相對路徑

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相對路徑</title>
</head>
<body><!-- 1.jpg --><img src="./1.jpg">  <!-- 1.jpg 在當前文件夾 --><!-- 2.jpg --><img src="./images/2.jpg">  <!-- 2.jpg 在當前文件夾下的images文件夾下 --><!-- cat2.jpg --><img src="../cat2.jpg">  <!-- cat2.jpg 在當前文件夾的上一級文件夾下-->
</body>
</html>

12、絕對路徑

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>絕對路徑</title>
</head>
<body><img src="D:\vscode_code\HTML\cat2.jpg">  <!-- 圖片在自己電腦中 --><img src="D:/vscode_code/HTML/cat2.jpg"><!-- https://www.itheima.com/images/logo.png -->  <!-- 圖片在網頁中 --><img src="https://www.itheima.com/images/logo.png">
</body>
</html>

13、超鏈接

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超鏈接</title>
</head>
<body><a href="https://www.baidu.com/">跳轉到百度</a><!-- 跳轉到本地文件：相對路徑查找 --><!-- target="_blank" 新窗口跳轉頁面 --><a href="./01_標簽.html" target="_blank">跳轉到01_標簽.html</a><!-- 開發初期，不知道超鏈接的跳轉地址，href屬性值寫#，表示空鏈接，不會跳轉 --><a href="#">空連接</a>
</body>
</html>

14、音頻

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>音頻</title>
</head>
<body><!-- 在HTML5里面，如果屬性名和屬性值完全一樣，可以簡寫為一個單詞 --><!-- controls 和 controls="controls" 是等價的 --><!-- <audio src="./media/music.mp3"></audio> 只寫src一個屬性，瀏覽器中不會有任何顯示,需要加上controls --><!-- loop 循環播放 --><!-- autoplay 自動播放，瀏覽器一般會禁用 --><audio src="./media/music.mp3" controls loop autoplay></audio>
</body>
</html>

15、視頻

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>視頻</title>
</head>
<body><!-- 在瀏覽器中，想要自動播放，必須有 muted 屬性 --><video src="./media/video.mp4" controls loop muted autoplay></video>
</body>
</html>

16、綜合案例1--個人簡介

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>個人簡介</title>
</head>
<body><h1>尤雨溪</h1><hr><p>尤雨溪，前端框架<a href="./17_綜合案例2.html" target="_blank">Vue.js</a>的作者，<a href="#">HTML5</a>版Clear的打造人，獨立開源開發者。曾就職于Google Creative Labs和Meteor Development Group。由于工作中大量接觸開源的項目<a href="#">JavaScript</a>，最后自己也走上了開源之路，現全職開發和維護<a href="#">Vue.js</a>。</p><img src="./youyuxi.jpg" alt="尤雨溪的照片" title="尤雨溪"><h2>學習經歷</h2><p>尤雨溪畢業于上海復旦附中，在美國完成大學學業，本科畢業于Colgate University，后在Parsons設計學院獲得Design & Technology藝術碩士學位，任職于紐約Google Creative Lab。</p><h2>主要成就</h2><p>尤雨溪<strong>大學專業并非是計算機專業</strong>，在大學期間他學習專業是室內藝術和藝術史，后來讀了美術設計和技術的碩士， <ins>正是在讀碩士期間，他偶然接觸到了JavaScript ，從此被這門編程語言深深吸引，開啟了自己的前端生涯 </ins>。</p><p>2014年2月，開發了一個前端開發庫Vue.js。Vue.js 是構建 Web 界面的 JavaScript 框架，是一個通過簡潔的API提供高效的數據綁定和靈活的組件系統。</p><h2>社會任職</h2><p>2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex團隊，尤雨溪稱他將以技術顧問的身份加入Weex團隊來做 Vue 和 Weex 的 JavaScript runtime 整合，目標是讓大家能用 Vue 的語法跨三端。</p>
</body>
</html>

17、綜合案例2--Vue.js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue.js</title>
</head>
<body><h1>Vue.js</h1><p>Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式JavaScript框架。 [5] 與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用（SPA）提供驅動。</p><p>其作者為<a href="./16_綜合案例1.html" target="_blank">尤雨溪</a></p><h2>主要功能</h2><p>Vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動采用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用。</p><p>Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。</p><p>Vue.js 自身不是一個全能框架——它只聚焦于視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。另一方面，在與相關工具和支持庫一起使用時 [2] ，Vue.js 也能驅動復雜的單頁應用。</p><video src="./media/video.mp4" controls></video>
</body>
</html>

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

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

相關文章

OpenCV篇——項目（二）OCR文檔掃描

OpenCV篇——項目（二）OCR文檔掃描

目錄 文檔掃描項目說明 前言 文檔掃描代碼總體演示 OCR文檔識別代碼總體演示: ?編輯 代碼功能詳解 1. 預處理階段 2. 邊緣檢測 3. 輪廓處理 4. 透視變換 5. 后處理 主要改進說明&#xff1a; 使用建議&#xff1a; 文檔掃描項目說明 前言 本項目實現了一個自動…
閱讀更多...
Java 中導出包含多個 Sheet 的 Excel 文件

Java 中導出包含多個 Sheet 的 Excel 文件

在 Java 中導出包含多個 Sheet 的 Excel 文件&#xff0c;可以使用 Apache POI 或 EasyExcel&#xff08;阿里開源庫&#xff09;。以下是兩種方法的詳細實現&#xff1a; 方法 1&#xff1a;使用 Apache POI&#xff08;支持 .xls 和 .xlsx&#xff09; 1. 添加 Maven 依賴 …
閱讀更多...
OneCode采用虛擬DOM結構實現服務端渲染的技術實踐

OneCode采用虛擬DOM結構實現服務端渲染的技術實踐

一、技術背景與挑戰 隨著企業級應用復雜度的提升&#xff0c;傳統服務端渲染(SSR)面臨頁面交互性不足的問題&#xff0c;而純前端SPA架構則存在首屏加載慢和SEO不友好的缺陷。OneCode框架創新性地將虛擬DOM技術引入服務端渲染流程&#xff0c;構建了一套兼顧性能與開發效率的企…
閱讀更多...
變幻莫測：CoreData 中 Transformable 類型面面俱到（八）

變幻莫測：CoreData 中 Transformable 類型面面俱到（八）

概述 各位似禿似不禿小碼農們都知道&#xff0c;在蘋果眾多開發平臺中 CoreData 無疑是那個最簡潔、擁有“官方認證”且最具兼容性的數據庫框架。使用它可以讓我們非常方便的搭建出 App 所需要的持久存儲體系。 不過&#xff0c;大家是否知道在 CoreData 中還存在一個 Transfo…
閱讀更多...
汽車LIN總線通訊：從物理層到協議棧的深度解析

汽車LIN總線通訊：從物理層到協議棧的深度解析

目錄一、物理層&#xff1a;單線傳輸的信號奧秘1.1 電平定義與信號傳輸1.2 關鍵硬件組件作用二、數據鏈路層&#xff1a;幀結構與通信協議2.1 LIN幀的組成與功能2.2 主從式通信機制三、波特率同步&#xff1a;從節點的時鐘校準原理四、軟件實現&#xff1a;基于S32K144的主節點…
閱讀更多...
馬爾可夫鏈：隨機過程的記憶法則與演化密碼

馬爾可夫鏈：隨機過程的記憶法則與演化密碼

本文由「大千AI助手」原創發布&#xff0c;專注用真話講AI&#xff0c;回歸技術本質。拒絕神話或妖魔化。搜索「大千AI助手」關注我&#xff0c;一起撕掉過度包裝&#xff0c;學習真實的AI技術&#xff01; 一、核心定義&#xff1a;無記憶的隨機演化 馬爾可夫鏈&#xff08;M…
閱讀更多...
【vue3+tauri+rust】如何實現下載文件mac+windows

【vue3+tauri+rust】如何實現下載文件mac+windows

項目背景&#xff1a;【vue3taurirust】 由于Safari對于下載總是有諸多阻攔&#xff0c;目前需求windowsmac可以實現&#xff1a; 后端返回的url文件可以下載;前端根據dom元素生成的PDF報告可以下載&#xff08;無遠程URL&#xff09;&#xff1b; 我的嘗試&#xff1a; 方法…
閱讀更多...
SQL 快速參考手冊-SQL001

SQL 快速參考手冊-SQL001

SQL 快速參考手冊&#xff1a; 為方便快速學習和實踐&#xff0c;提供了一份 SQL 快速參考手冊&#xff0c;您可以打印出來隨時查看&#xff0c;了解常見 SQL 命令的語法和用法。 SQL 數據類型 SQL 數據類型根據不同的數據庫系統&#xff08;如 Microsoft Access、MySQL、SQL…
閱讀更多...
學習java集合

學習java集合

集合與數組的對比集合的長度可變, 數組的長度不可變集合實際上跟數組一樣, 是一種容器, 可以存放數據數組可以直接存放基本數據類型和引用數據類型集合可以存放引用數據類型, 但是不能直接存放基本數據類型, 如果要存放基本數據類型, 需要變成一個包裝類才行泛型: 限定集合中存…
閱讀更多...
python訓練day49 CBAM

python訓練day49 CBAM

import torch import torch.nn as nn# 定義通道注意力 class ChannelAttention(nn.Module):def __init__(self, in_channels, ratio16):"""通道注意力機制初始化參數:in_channels: 輸入特征圖的通道數ratio: 降維比例&#xff0c;用于減少參數量&#xff0c;默認…
閱讀更多...
在小程序中實現實時聊天：WebSocket最佳實踐

在小程序中實現實時聊天：WebSocket最佳實踐

前言 在當今互聯網應用中&#xff0c;實時通信已經成為一個標配功能&#xff0c;特別是對于需要即時響應的場景&#xff0c;如在線客服、咨詢系統等。本文將分享如何在小程序中實現一個高效穩定的WebSocket連接&#xff0c;以及如何處理斷線重連、消息發送與接收等常見問題。 W…
閱讀更多...
Python網絡爬蟲編程新手篇

Python網絡爬蟲編程新手篇

網絡爬蟲是一種自動抓取互聯網信息的腳本程序&#xff0c;廣泛應用于搜索引擎、數據分析和內容聚合。這次我將帶大家使用Python快速構建一個基礎爬蟲&#xff0c;為什么使用python做爬蟲&#xff1f;主要就是支持的庫很多&#xff0c;而且同類型查詢文檔多&#xff0c;在同等情…
閱讀更多...
LeetCode.283移動零

LeetCode.283移動零

題目鏈接&#xff1a;283. 移動零 - 力扣&#xff08;LeetCode&#xff09; 題目描述&#xff1a; 給定一個數組 nums&#xff0c;編寫一個函數將所有 0 移動到數組的末尾&#xff0c;同時保持非零元素的相對順序。 請注意 &#xff0c;必須在不復制數組的情況下原地對數組進行…
閱讀更多...
2025年7月4日漏洞文字版表述一句話版本(漏洞危害以及修復建議)，通常用于漏洞通報中簡潔干練【持續更新中】，漏洞通報中對于各類漏洞及修復指南

2025年7月4日漏洞文字版表述一句話版本(漏洞危害以及修復建議)，通常用于漏洞通報中簡潔干練【持續更新中】，漏洞通報中對于各類漏洞及修復指南

漏洞及修復指南 一、暗鏈 危害&#xff1a;攻擊者通過技術手段在用戶網頁中插入隱藏鏈接或代碼&#xff0c;并指向惡意網站&#xff0c;可導致用戶信息泄露、系統感染病毒&#xff0c;用戶訪問被劫持至惡意網站&#xff0c;泄露隱私或感染惡意軟件&#xff0c;被黑客利用進行…
閱讀更多...
python --飛漿離線ocr使用/paddleocr

python --飛漿離線ocr使用/paddleocr

依賴 # python3.7.3 paddleocr2.7.0.2 paddlepaddle2.5.2 loguru0.7.3from paddleocr import PaddleOCR import cv2 import numpy as npif __name__ __main__:OCR PaddleOCR(use_doc_orientation_classifyFalse, # 檢測文檔方向use_doc_unwarpingFalse, # 矯正扭曲文檔use…
閱讀更多...
數據結構與算法：貪心（三）

數據結構與算法：貪心（三）

前言 感覺開始打cf了以后貪心的能力有了明顯的提升，讓我們謝謝cf的感覺場。 一、跳躍游戲 II class Solution { public:int jump(vector<int>& nums) {int n=nums.size();//怎么感覺這個題也在洛谷上刷過(?)int cur=0;//當前步最遠位置int next=0;//多跳一步最遠…
閱讀更多...
【Redis篇】數據庫架構演進中Redis緩存的技術必然性—高并發場景下穿透、擊穿、雪崩的體系化解決方案

【Redis篇】數據庫架構演進中Redis緩存的技術必然性—高并發場景下穿透、擊穿、雪崩的體系化解決方案

&#x1f4ab;《博主主頁》&#xff1a; 　　　&#x1f50e; CSDN主頁__奈斯DB 　　　&#x1f50e; IF Club社區主頁__奈斯、 &#x1f525;《擅長領域》&#xff1a;擅長阿里云AnalyticDB for MySQL(分布式數據倉庫)、Oracle、MySQL、Linux、prometheus監控&#xff1b;并對…
閱讀更多...
Docker 實踐與應用案例

Docker 實踐與應用案例

引言 在當今的軟件開發和部署領域&#xff0c;高效、可移植且一致的環境搭建與應用部署是至關重要的。Docker 作為一款輕量級的容器化技術&#xff0c;為解決這些問題提供了卓越的方案。Docker 通過容器化的方式&#xff0c;將應用及其依賴項打包成一個獨立的容器&#xff0c;…
閱讀更多...
《論三生原理》以非共識路徑實現技術代際躍遷?？

《論三生原理》以非共識路徑實現技術代際躍遷?？

AI輔助創作&#xff1a; 《論三生原理》以顛覆傳統數學范式的非共識路徑驅動多重技術代際躍遷&#xff0c;其突破性實踐與爭議并存&#xff0c;核心論證如下&#xff1a; 一、技術代際躍遷的實證突破? ?芯片架構革新? 為華為三進制邏輯門芯片提供理論支撐&#xff0c;通過對…
閱讀更多...
一體機電腦為何熱度持續上升？消費者更看重哪些功能？

一體機電腦為何熱度持續上升？消費者更看重哪些功能？

一體機電腦&#xff08;AIO&#xff0c;All-in-One&#xff09;將主機硬件與顯示器集成于單一機身。通常僅需連接電源線&#xff0c;配備無線鍵盤、鼠標即可啟用。相比傳統臺式電腦和筆記本電腦&#xff0c;選購一體機的客戶更看重一體機的以下特點。 一體機憑借其節省空間、簡…
閱讀更多...
最新文章

Copyright @ 2022~2023