前端HTML入門基礎

階段目標：掌握HTML、CSS常用布局技巧，能夠獨立制作網頁。

day01：HTML 基礎

目標：掌握標簽基本語法，能夠獨立布局文章頁。

01-今日課程介紹

今日目標：掌握標簽基本語法，能夠獨立布局文章頁。

核心技術點

  • 網頁組成

  • 排版標簽

  • 多媒體標簽及屬性

  • 綜合案例一 - 個人簡介

    [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-JNxAEqn8-1691943677571)(assets/1680242340931.png)]

  • 綜合案例二 - Vue 簡介

    [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-d9gTtlq6-1691943677572)(assets/1680242362352.png)]

02-標簽語法

HTML 超文本標記語言——HyperText Markup Language。

  • 超文本：鏈接
  • 標記：標簽，帶尖括號的文本

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-wTYqCuHH-1691943677572)(assets/1680242502155.png)]

標簽結構

  • 標簽要成對出現，中間包裹內容
  • <>里面放英文字母（標簽名）
  • 結束標簽比開始標簽多 /
  • 標簽分類：雙標簽和單標簽
<strong>需要加粗的文字<strong>
<br>
<hr>

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-cTcBqfVE-1691943677573)(assets/1680242555328.png)]

03-HTML骨架

  • html：整個網頁
  • head：網頁頭部，用來存放給瀏覽器看的信息，例如 CSS
    • title：網頁標題
  • body：網頁主體，用來存放給用戶看的信息，例如圖片、文字
<html><head><title>網頁標題</title></head><body>網頁主體</body>
</html>

提示

VS Code 可以快速生成骨架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 鍵

04-標簽的關系

作用：明確標簽的書寫位置，讓代碼格式更整齊

  • 父子關系（嵌套關系）：子級標簽換行且縮進（Tab鍵）

    [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-zqbtHWFE-1691943677573)(assets/1680255766672.png)]

  • 兄弟關系（并列關系）：兄弟標簽換行要對齊

    [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BkEp7H2I-1691943677574)(assets/1680255775150.png)]

05-注釋

概念：注釋是對代碼的解釋和說明，能夠提高程序的可讀性，方便理解、查找代碼。

注釋不會再瀏覽器中顯示。

在 VS Code 中，添加 / 刪除注釋的快捷鍵：Ctrl + /

<!-- 我是 HTML 注釋 -->

06-標題標簽

一般用在新聞標題、文章標題、網頁區域名稱、產品名稱等等。

<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>

顯示特點：

  • 文字加粗
  • 字號逐漸減小
  • 獨占一行（換行）

經驗

  1. h1 標簽在一個網頁中只能用一次，用來放新聞標題或網頁的 logo
  2. h2 ~ h6 沒有使用次數的限制

07-段落標簽

一般用在新聞段落、文章段落、產品描述信息等等。

<p>段落</p>

顯示特點：

  • 獨占一行
  • 段落之間存在間隙

08-換行和水平線

  • 換行：br
  • 水平線：hr
<br>
<hr>

09-文本格式化標簽

作用：為文本添加特殊格式，以突出重點。常見的文本格式：加粗、傾斜、下劃線、刪除線等。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ilWBXoDi-1691943677575)(assets/1680314078647.png)]

提示：strong、em、ins、del 標簽自帶強調含義（語義）。

10-圖像標簽

作用：在網頁中插入圖片

<img  src="圖片的 URL">

src用于指定圖像的位置和名稱，是 的必須屬性。

圖像屬性

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-MvmeUX5y-1691943677575)(assets/1680314152822.png)]

屬性語法

  • 屬性名=“屬性值”
  • 屬性寫在尖括號里面，標簽名后面，標簽名和屬性之間用空格隔開，不區分先后順序

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-vHhllP85-1691943677576)(assets/1680314195951.png)]

11-路徑

概念：路徑指的是查找文件時，從起點到終點經歷的路線。

路徑分類：

  • 相對路徑：從當前文件位置出發查找目標文件
  • 絕對路徑：從盤符出發查找目標文件
    • Windows 電腦從盤符出發
    • Mac 電腦從根目錄出發

相對路徑

查找方式：從當前文件位置出發查找目標文件

特殊符號：

  • / 表示進入某個文件夾里面 → 文件夾名/
  • **. ** 表示當前文件所在文件夾 → ./
  • … 表示當前文件的上一級文件夾 → …/

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-gaJhukbt-1691943677576)(assets/1680314322997.png)]

絕對路徑

查找方式：Windows 電腦從盤符出發；Mac 電腦從根目錄（/）出發

<img  src="C:\images\mao.jpg">

提示

  1. Windows 默認是 \ ，其他系統是 /，建議統一寫為 /
  2. 特殊的絕對路徑 → 文件的在線網址：https://www.itheima.com/images/logo.png "，應用場景：網頁底部友情鏈接

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-mvGn0urm-1691943677577)(assets/1680314503056.png)]

12-超鏈接標簽

作用：點擊跳轉到其他頁面。

<a href="https://www.baidu.com">跳轉到百度</a>

href 屬性值是跳轉地址，是超鏈接的必須屬性。

超鏈接默認是在當前窗口跳轉頁面，添加 target=“_blank” 實現新窗口打開頁面。

拓展：開發初期，不確定跳轉地址，則 href 屬性值寫為 #，表示空鏈接，頁面不會跳轉，在當前頁面刷新一次。

<a href="https://www.baidu.com/">跳轉到百度</a><!-- 跳轉到本地文件：相對路徑查找 --> 
<!-- target="_blank" 新窗口跳轉頁面 --> 
<a href="./01-標簽的寫法.html" target="_blank">跳轉到01-標簽的寫法</a><!-- 開發初期，不知道超鏈接的跳轉地址，href屬性值寫#，表示空鏈接，不會跳轉 -->
<a href="#">空鏈接</a>

13-音頻

<audio src="音頻的 URL"></audio>

常用屬性

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-a4QS5NKz-1691943677577)(assets/1680314629860.png)]

拓展：書寫 HTML5 屬性時，如果屬性名和屬性值相同，可以簡寫為一個單詞。

<!-- 在 HTML5 里面，如果屬性名和屬性值完全一樣，可以簡寫為一個單詞 -->
<audio src="./media/music.mp3" controls loop autoplay></audio>

14-視頻

<video src="視頻的 URL"></video>

常用屬性

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-wxRgRIKC-1691943677578)(assets/1680314703735.png)]

<!-- 在瀏覽器中，想要自動播放，必須有 muted 屬性 -->
<video src="./media/vue.mp4" controls loop muted autoplay></video>

15-綜合案例一-個人簡介

網頁制作思路：從上到下，先整體再局部，逐步分析制作

分析內容 → 寫代碼 → 保存 → 刷新瀏覽器，看效果

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-WqLB8ArI-1691943677578)(assets/1680314754557.png)]

<h1>尤雨溪</h1>
<hr>
<p>尤雨溪，前端框架<a href="../17-綜合案例二/vue簡介.html">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="./photo.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>

16-綜合案例二-Vue簡介

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9AeckOSd-1691943677579)(assets/1680314805528.png)]

<h1>Vue.js</h1>
<p>Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式JavaScript框架。 [5] 與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用（SPA）提供驅動。</p>
<p>其作者為<a href="../16-綜合案例一/個人簡介.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/vue.mp4" controls></video>

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

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

相關文章

SQL中CONVERT函數格式:CONVERT(data_type,expression[,style])

SQL中CONVERT函數格式:CONVERT(data_type,expression[,style])

sqlserver convert()函數的使用方法_convert sqlserver_qq_37528515的博客-CSDN博客 SQL中CONVERT函數格式:CONVERT(data_type,expression[,style]) 說明&#xff1a; data_type:目標系統所提供的數據類型&#xff0c;如果轉換時沒有指定數據類型的長度&#xff0c;則 SQL Serv…
閱讀更多...
Maven基礎總結

Maven基礎總結

前言 Maven 是一個項目管理工具&#xff0c;可以對 Java 項目進行構建、依賴管理。 基本要求掌握 配置Maven環境直接查。 得會在IDEA創建Maven的java項目吧、會創建Maven的web項目吧、會創建多模塊項目吧。 得會配置插件pligin、依賴dependency吧 一、Maven四大特性 1、…
閱讀更多...
CSS：服務器字體 與 響應式布局（用法 + 例子 + 效果）

CSS：服務器字體 與 響應式布局（用法 + 例子 + 效果）

文章目錄 服務器字體定義 服務器字體使用例子 響應式布局設備類型設備特性例子 服務器字體 解決字體不一致而產生的。 首先&#xff0c;在網上把字體下載好。 定義 服務器字體 font-face{font-family:字體名稱;src:url(字體資源路徑); }使用 在需要使用的選擇器里加上 font…
閱讀更多...
數學建模（一）前繼概念

數學建模（一）前繼概念

課程推薦&#xff1a;數學建模老哥_嗶哩嗶哩_bilibili 目錄 一、什么是數學建模&#xff1f; 二、數學建模的一般步驟 三、數學建模賽題類型 1.預測型 2. 評價類 3.機理分析類 4. 優化類 一、什么是數學建模&#xff1f; 數學建模是利用數學方法解決實際問題的一種實踐。…
閱讀更多...
什么是多線程？進程和線程的區別是什么？如何使用Java實現多線程？

什么是多線程？進程和線程的區別是什么？如何使用Java實現多線程？

文章目錄 前言我們為什么要使用線程而不是進程來實現并發編程什么是線程進程和線程的區別如何使用Java實現多線程創建線程1.創建一個繼承 Thread 類的線程類2.實現 Runnable 接口匿名內部類方式實現 Runnable 接口lambda 表達式實現 Runnable 接口 Thread 類的常見構造方法Thre…
閱讀更多...
T113-S3-RTL8211網口phy芯片調試

T113-S3-RTL8211網口phy芯片調試

目錄 前言 一、RTL8211介紹 二、硬件連接 三、設備樹配置 四、內核配置 五、phy芯片配置 六、調試問題 總結 前言 在嵌入式系統開發中&#xff0c;網絡連接是至關重要的一部分。T113-S3開發板搭載了RTL8211系列的網口PHY芯片&#xff0c;用于實現以太網連接。在開發過程…
閱讀更多...
C++ QT(二)

C++ QT(二)

目錄 Qt 控件按鈕QPushButton控件簡介用法示例運行效果 QToolButton控件簡介用法示例運行效果 QRadioButton控件簡介用法示例運行效果 QCheckBox控件簡介用法示例運行效果 QCommandLinkButton控件簡介用法示例運行效果 QDialogButtonBox控件簡介用法示例運行效果 輸入窗口部件Q…
閱讀更多...
用 React+ts 實現無縫滾動的走馬燈

用 React+ts 實現無縫滾動的走馬燈

一、走馬燈的作用 走馬燈是一種常見的網頁交互組件&#xff0c;可以展示多張圖片或者內容&#xff0c;通過自動播放或者手動切換的方式&#xff0c;讓用戶能夠方便地瀏覽多張圖片或者內容。 本次實現的不是輪播圖而是像傳送帶一樣的無限滾動的形式。 二、需求梳理 走馬燈可設…
閱讀更多...
Go Gin 中使用 JWT

Go Gin 中使用 JWT

一、JWT JWT全稱JSON Web Token是一種跨域認證解決方案&#xff0c;屬于一個開放的標準&#xff0c;它規定了一種Token實現方式&#xff0c;目前多用于前后端分離項目和OAuth2.0業務場景下。 二、為什么要用在你的Gin中使用JWT 傳統的Cookie-Sesson模式占用服務器內存, 拓展性…
閱讀更多...
uniapp實現自定義導航內容高度居中（兼容APP端以及小程序端與膠囊對齊）

uniapp實現自定義導航內容高度居中（兼容APP端以及小程序端與膠囊對齊）

①效果圖如下 1.小程序端與膠囊對齊 2.APP端內容區域居中 注意&#xff1a;上面使用的是colorui里面的自定義導航樣式。 ②思路&#xff1a; 1.APP端和小程序端走不同的方法&#xff0c;因為小程序端要計算不同屏幕下右側膠囊的高度。 2.其次最重要的要清晰App端和小程序端…
閱讀更多...
【數學建模】清風數模更新5 灰色關聯分析

【數學建模】清風數模更新5 灰色關聯分析

灰色關聯分析綜述 諸如經濟系統、生態系統、社會系統等抽象系統都包含許多因素&#xff0c;系統整體的發展受各個因素共同影響。 為了更好地推動系統發展&#xff0c;我們需要清楚哪些因素是主要的&#xff0c;哪些是次要的&#xff0c;哪些是積極的&#xff0c;哪些是消極的…
閱讀更多...
網絡基礎——網絡的由來與發展史

網絡基礎——網絡的由來與發展史

作者&#xff1a;Insist-- 個人主頁&#xff1a;insist--個人主頁 作者會持續更新網絡知識和python基礎知識&#xff0c;期待你的關注 目錄 一、網絡的由來 二、計算機網絡的發展史 1、第一階段 2、第二階段 3、第三階段 前言 每天都是使用網絡&#xff0c;那么你知道網絡…
閱讀更多...
FPGA----Vivado SDK創建并使用靜態鏈接庫（C/C++代碼移植）

FPGA----Vivado SDK創建并使用靜態鏈接庫（C/C++代碼移植）

1、在進行SoC開發時&#xff0c;PS端的C/C代碼可能涉及到核心算法需要移植操作&#xff0c;為此&#xff0c;本文講述了如何將C/C代碼打包為.a文件供程序調用 2、文章以我的程序為例&#xff0c;逐步講述代碼生成靜態鏈接庫并調用的方法。 下面是我程序的目錄結構&#xff0c…
閱讀更多...
spring boot實現實體類參數自定義校驗

spring boot實現實體類參數自定義校驗

安裝依賴項 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId></dependency>1、新建實體類 Data public class UserEntity {private String name;private Integer age;…
閱讀更多...
RocketMQ 延遲消息

RocketMQ 延遲消息

RocketMQ 延遲消息 RocketMQ 消費者啟動流程 什么是延遲消息 RocketMQ 延遲消息是指&#xff0c;生產者發送消息給消費者消息&#xff0c;消費者需要等待一段時間后才能消費到。 使用場景 用戶下單之后&#xff0c;15分鐘未支付&#xff0c;對支付賬單進行提醒或者關單處理…
閱讀更多...
PostgreSQL查詢慢sql原因和優化方案

PostgreSQL查詢慢sql原因和優化方案

PostgreSQL sql查詢慢優化方案有一下幾種解決方案&#xff1a; 1.關閉會話 查詢慢sql的執行會話&#xff0c;關閉進程。 查看數據庫后臺連接進程 SELECT count(*) FROM pg_stat_activity;SELECT * FROM pg_stat_activity; 查看數據庫后臺連接進程&#xff0c;但是此條SQL不…
閱讀更多...
python提取pdf圖片

python提取pdf圖片

import fitz import re import osdef save_pdf_img(path, save_path):path: pdf的路徑save_path : 圖片存儲的路徑# 使用正則表達式來查找圖片checkXO r"/Type(? */XObject)"checkIM r"/Subtype(? */Image)"# 打開pdfdoc fitz.open(path)# 圖片計數im…
閱讀更多...
用HARU-Net增強核分割:一種基于混合注意的殘差u塊網絡

用HARU-Net增強核分割:一種基于混合注意的殘差u塊網絡

文章目錄 Enhancing Nucleus Segmentation with HARU-Net: A Hybrid Attention Based Residual U-Blocks Network摘要本文方法損失函數后處理消融實驗 Enhancing Nucleus Segmentation with HARU-Net: A Hybrid Attention Based Residual U-Blocks Network 摘要 核圖像分割是…
閱讀更多...
W6100-EVB-PICO 做TCP Server進行回環測試（六）

W6100-EVB-PICO 做TCP Server進行回環測試（六）

前言 上一章我們用W6100-EVB-PICO開發板做TCP 客戶端連接服務器進行數據回環測試&#xff0c;那么本章將用開發板做TCP服務器來進行數據回環測試。 TCP是什么&#xff1f;什么是TCP Server&#xff1f;能干什么&#xff1f; TCP (Transmission Control Protocol) 是一種面向連…
閱讀更多...
zabbix監控安裝部署

zabbix監控安裝部署

目錄 一、環境 二、配置 1.配置yum源&#xff0c;這里用的清華的 2.過濾一下安裝包&#xff0c;查看依賴包 安裝依賴包 3.配置數據庫 開機自啟 創建數據庫 創建用戶 授權 導入數據到數據庫 查看zabbix數據庫有沒有表和數據 4.修改zabbix配置文件 1.修改zabbix配置…
閱讀更多...
最新文章

Copyright @ 2022~2023