點(diǎn)擊前往前端開發(fā)基礎(chǔ)專欄：
HTML5 + CSS3 開發(fā)
一、開發(fā)環(huán)境搭建
- 這里google瀏覽器不能用我們就使用電腦自帶的微軟瀏覽器就可以了！
下載 VS Code
VS Code 官網(wǎng)下載地址
- 這里根據(jù)自己電腦的操作系統(tǒng)進(jìn)行下載！
安裝步驟如下： （是在不知道如何操作，可以找個(gè)教程一步一步來(lái)） 安裝這個(gè)還是是非常簡(jiǎn)單的，一直下一步就可以了。
安裝完畢后，雙擊打開安裝包運(yùn)行進(jìn)行安裝
- 接受協(xié)議，然后點(diǎn)擊下一步
- 選擇你需要安裝到的目錄路徑，自己自定義也可以，默認(rèn)也行
- 可以勾選桌面快捷方式，點(diǎn)擊下一步
- 然后就直接點(diǎn)擊安裝即可
1. 2 插件的下載
-
- 漢化版插件
- 漢化版插件
-
- 安裝瀏覽器運(yùn)行插件
- 安裝瀏覽器運(yùn)行插件
1.3 項(xiàng)目和文件的下載
可以先自己創(chuàng)建一個(gè)文件夾目錄，然后拖住文件夾對(duì)這 vscode 圖標(biāo)打開，或者 打開 vscode 然后拖進(jìn)來(lái)
也可以在文件中打開找到我們創(chuàng)建的文件夾
二、 什么是 HTML
2.1 標(biāo)簽的語(yǔ)法
2.2 代碼演示：
<!--
* 1.演示標(biāo)簽的寫法
* 雙標(biāo)簽（成對(duì)出現(xiàn)）
- 注意: 標(biāo)簽是成對(duì)出現(xiàn)的，并且結(jié)束標(biāo)簽還需需要加上 /
- 語(yǔ)法格式： <>內(nèi)容</>
* 單標(biāo)簽
- 單標(biāo)簽區(qū)分就在于不需要包裹內(nèi)容的： <>
-->
<!-- 1、雙標(biāo)簽代碼 -->
<strong>文字加粗標(biāo)簽</strong>
<!-- 2、單標(biāo)簽代碼 -->
<hr>
2.3 小結(jié)
三 、HTML基本骨架
3.1 快捷鍵生成HTML骨架
- 我們創(chuàng)建文件后 空白的，所以這里我們直接使用快捷鍵進(jìn)行生成骨架就OK了。
3.2 代碼展示
<!--
* 2. HTML骨架生成快捷鍵演示
- ！ （英文狀態(tài)下） 配合 Enter 或者 Tab進(jìn)行生成
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我是網(wǎng)頁(yè)標(biāo)題</title>
</head>
<body>
body標(biāo)簽中的標(biāo)簽內(nèi)容都是可以給用戶看的哦！寫在這里。
</body>
</html>
- 瀏覽器運(yùn)行后的效果圖：
3.3 小結(jié)
四、標(biāo)簽之間的關(guān)系
4.1 標(biāo)簽之間的兩種關(guān)系
代碼示例：
<!--
* 3. 標(biāo)簽之間的關(guān)系
- 1. 父子關(guān)系（嵌套關(guān)系）
- 2. 兄弟關(guān)系（并列關(guān)系）
- 細(xì)節(jié)： 其實(shí)我們可以通過(guò)觀察編輯器的縮進(jìn)進(jìn)行區(qū)分之間的關(guān)系
-->
<!-- 1. 創(chuàng)建一個(gè)父級(jí)標(biāo)簽 -->
<html>
<!-- 2. 創(chuàng)建一個(gè)子級(jí)標(biāo)簽 -->
<head></head>
<!-- 3. 創(chuàng)建第二個(gè)子級(jí)標(biāo)簽 -->
<body></body>
</html>
<!-- html 是父級(jí)標(biāo)簽，里面兩個(gè)是子級(jí)標(biāo)簽。 head 和 body 之間是并列標(biāo)簽 -->
3.3 小結(jié)
五、注釋
5.1 什么是注釋
5.2 代碼示例
<!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>
<!--
* 4. 注釋的演示： Ctrl + / 添加注釋或者刪除注釋
-->
<!-- <div>我不想被看見，也可以把我注釋掉</div> -->
<div>我沒有被注釋，可以被發(fā)現(xiàn)哦！</div>
</body>
</html>
5.3 小結(jié)
六、標(biāo)題標(biāo)簽
6.1 標(biāo)題標(biāo)簽
6.2 代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示標(biāo)題標(biāo)簽</title>
</head>
<body>
<!--
* 5. 演示標(biāo)題標(biāo)簽：
-- 語(yǔ)法： 雙標(biāo)簽 -- > <h 1 - 6>標(biāo)題內(nèi)容</h 1 - 6>
-->
<h1>我是一級(jí)標(biāo)題</h1>
<h2>我是二級(jí)標(biāo)題</h2>
<h3>我是三級(jí)標(biāo)題</h3>
<h4>我是四級(jí)標(biāo)題</h4>
<h5>我是五級(jí)標(biāo)題</h5>
<h6>我是六級(jí)標(biāo)題</h6>
</body>
</html>
- 效果展示：
6.3 小結(jié)
七、段落標(biāo)簽
在HTML中，段落標(biāo)簽（<p>）用于定義文本中的段落。
它是塊級(jí)元素，意味著每個(gè)段落會(huì)以新行開始，并且在瀏覽器中默認(rèn)會(huì)有上下間距。每一對(duì)<p>標(biāo)簽之間的內(nèi)容會(huì)被視為一個(gè)獨(dú)立的段落。
1
7.1 段落標(biāo)簽的特點(diǎn)
7.2 代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示段落標(biāo)簽</title>
</head>
<body>
<!--
* 6. 演示段落標(biāo)簽 p 標(biāo)簽
語(yǔ)法：<p>這是一個(gè)段落。</p>
-->
<p>這是第一個(gè)段落。</p>
<p>這是第二個(gè)段落。</p>
</body>
</html>
7.3 小結(jié)
八、 換行與水平線標(biāo)簽
8.1 換行與水平線標(biāo)簽
8.2 代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>換行與水平線標(biāo)簽</title>
</head>
<body>
<!--
* 演示： 換行與水平線標(biāo)簽
- 語(yǔ)法： 換行：<br> 水平線：<hr>
-->
第一行文字
<br>
第二行文字
<hr>
</body>
</html>
-
不使用換行的效果
-
使用換行的效果
8.3 小結(jié)
九、 文本格式化標(biāo)簽
9.1 什么是文本格式化標(biāo)簽
*##### 9.2 標(biāo)簽語(yǔ)法和作用
9.3 代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示文本格式化標(biāo)簽</title>
</head>
<body>
<!--
* 演示文本格式化標(biāo)簽
- 加粗、傾斜、下劃線、刪除線
-->
<strong><b>strong 加粗</b></strong>
<b>b 加粗</b>
<em>em 傾斜</em>
<i>i 傾斜</i>
<ins>ins 下劃線</ins>
<u>u 下劃線</u>
<del>del 刪除線</del>
<s>s 刪除線</s>
</body>
</html>
小結(jié)
十、圖像標(biāo)簽
10.1 圖像標(biāo)簽
10.2 代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示圖片標(biāo)簽的使用</title>
</head>
<body>
<!--
* 演示圖片標(biāo)簽的使用
- 語(yǔ)法: 單標(biāo)簽： <img>
-->
<img src="../image/image.png" alt="">
</body>
</html>
10.3 小結(jié)
十一、 圖片標(biāo)簽 - 屬性
11.1 圖片的屬性
11.2
<!-- alt： 替換文本，圖片無(wú)法加載，替換成文字 -->
<img src="../Image/image.pngs" alt="我是替換文字">
<!-- title: 提示文本： 鼠標(biāo)懸停圖片顯示的文字 -->
<img src="../Image/image.png" title="我是 title 文字">
<!-- width： 圖片的寬度 沒有單位的數(shù)值-->
<img src="../Image/image.png" width="200">
<!-- width： 圖片的寬度 沒有單位的數(shù)值-->
<img src="../Image/image.png" height="200">
11.3 小結(jié)
十二、 路徑
12.1 相對(duì)路徑
12. 3 代碼示例
<!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. 相對(duì)路徑 2. 絕對(duì)路徑
- 相對(duì)路徑： 相對(duì)當(dāng)前文件的路徑 ./ ../ 描述
- 絕對(duì)路徑： 相對(duì)電腦的盤符或者根路徑進(jìn)行描述的路徑 （這里不多做介紹）
-->
<img src="../Image/image.png" alt="">
</body>
</html>
- src的屬性值：就是描述的圖片路徑，是一個(gè)相對(duì)路徑。
12. 3小結(jié)
- 絕對(duì)路徑這里就不做介紹了，因?yàn)榇蠹译娔X里面時(shí)時(shí)刻刻用的都是絕對(duì)路徑。
十三、超鏈接標(biāo)簽
13. 1 什么是超鏈接
13.2 代碼示例：
<!--
* 演示超鏈接標(biāo)簽的使用
- 語(yǔ)法： <a gref="屬性值"></a>
-->
<a href="www.baidu.com">點(diǎn)擊跳轉(zhuǎn)到百度！</a>
13.3 小結(jié)
十四、音頻標(biāo)簽
14.1 音頻標(biāo)簽
14.2 代碼示例：
<!--audio音頻標(biāo)簽：
+ 屬性說(shuō)明：
- src 屬性是我們需要渲染的音頻路徑
- controls: 顯示音頻控制面板
- loop；循環(huán)播放
- autoplay： 自動(dòng)播放
-->
<audio src="../audio/周深 - 小美滿.mp3" controls></audio>
- 效果展示：
十五、視頻標(biāo)簽
15.1 視頻標(biāo)簽概述
15.2 代碼示例：
<!--
* 演示 視頻標(biāo)簽的使用：
- 語(yǔ)法： video 雙標(biāo)簽
- 屬性： src : 必須屬性 controls 顯示視頻控制面板 loop 循環(huán)播放 muted 靜音播放 autoplay 自動(dòng)播放
-->
<video src="../video/test" controls loop autoplay muted></video>
綜合案例一 - 個(gè)人簡(jiǎn)介
代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>余承東 - 個(gè)人簡(jiǎn)介</title>
</head>
<body>
<h1>余承東</h1>
<hr>
<p>華為常務(wù)董事、終端BG CEO、智能汽車解決方BU 董事長(zhǎng)、智能終端與智能汽車部件IRB主任</p>
<img src="../Image/01 yuchengdong.webp" alt="" width="150" height="150">
<h3>學(xué)習(xí)經(jīng)歷</h3>
<p>
<a href="https://baike.baidu.com/item/%E4%BD%99%E6%89%BF%E4%B8%9C/3767904?fromModule=search-result_lemma-recommend">余承東</a> ，1969年生，安徽省六安市霍邱縣人，本科畢業(yè)于西北工業(yè)大學(xué)，清華大學(xué)碩士，1993年加入華為。
現(xiàn)任華為董事會(huì)成員、常務(wù)董事、終端BG CEO、智能汽車解決方案BU 董事長(zhǎng) [22]、智能終端與智能汽車部件IRB主任。
</p>
<h3>主要成就</h3>
<p>
余承東（Richard Yu）是華為消費(fèi)者業(yè)務(wù)CEO，他在華為的發(fā)展中發(fā)揮了重要的領(lǐng)導(dǎo)作用。以下是余承東的一些主要成就：
領(lǐng)導(dǎo)華為消費(fèi)者業(yè)務(wù)的蓬勃發(fā)展：余承東領(lǐng)導(dǎo)下的華為消費(fèi)者業(yè)務(wù)在過(guò)去幾年取得了巨大的成功。華為智能手機(jī)品牌迅速崛起，成為全球最大的智能手機(jī)制造商之一。他的領(lǐng)導(dǎo)下，華為在設(shè)計(jì)、技術(shù)創(chuàng)新、攝影能力和性能方面取得了顯著突破。
推動(dòng)華為手機(jī)的技術(shù)創(chuàng)新：余承東致力于推動(dòng)華為手機(jī)的技術(shù)創(chuàng)新，使其成為市場(chǎng)上的領(lǐng)先者。他推動(dòng)了華為在攝影領(lǐng)域的研發(fā)和創(chuàng)新，使華為手機(jī)成為具有卓越圖像質(zhì)量和攝影能力的設(shè)備。華為的攝影技術(shù)在業(yè)界廣受贊譽(yù)，并在多個(gè)國(guó)際評(píng)測(cè)中獲得高分和獎(jiǎng)項(xiàng)。
推廣華為品牌的全球化：余承東在推廣華為品牌的全球化方面發(fā)揮了重要作用。他引領(lǐng)華為在全球范圍內(nèi)擴(kuò)大市場(chǎng)份額，尤其是在歐洲、亞洲和拉丁美洲等地。余承東在推出華為P系列和Mate系列等高端產(chǎn)品時(shí)，通過(guò)全球營(yíng)銷和品牌活動(dòng)增強(qiáng)了華為在國(guó)際市場(chǎng)上的知名度和認(rèn)可度。
推動(dòng)5G技術(shù)的發(fā)展：作為華為高層領(lǐng)導(dǎo)，余承東積極推動(dòng)5G技術(shù)的研發(fā)和部署。他在全球范圍內(nèi)倡導(dǎo)并推廣5G技術(shù)的重要性，并與合作伙伴共同推進(jìn)5G網(wǎng)絡(luò)建設(shè)。華為在5G領(lǐng)域取得了顯著的突破，并成為全球5G技術(shù)和網(wǎng)絡(luò)設(shè)備的主要供應(yīng)商之一。
強(qiáng)調(diào)用戶隱私和數(shù)據(jù)安全：余承東一直非常關(guān)注用戶隱私和數(shù)據(jù)安全的重要性。他強(qiáng)調(diào)了華為對(duì)用戶數(shù)據(jù)隱私的承諾，并采取了多種措施來(lái)確保華為產(chǎn)品和服務(wù)的安全性。余承東通過(guò)加強(qiáng)安全研發(fā)、開放透明合規(guī)等措施，加強(qiáng)了華為在數(shù)據(jù)安全方面的聲譽(yù)。
這些是余承東在華為的主要成就之一。作為華為消費(fèi)者業(yè)務(wù)的領(lǐng)導(dǎo)者，他在推動(dòng)華為品牌的全球化、技術(shù)創(chuàng)新、市場(chǎng)份額擴(kuò)大和用戶數(shù)據(jù)安全方面發(fā)揮了重要作用。
</p>
<h3>社會(huì)任職</h3>
<p>
余承東除了在華為的職位外，還擔(dān)任了一些社會(huì)任職。以下是一些他的社會(huì)任職經(jīng)歷：
中國(guó)信息通信研究院學(xué)術(shù)委員會(huì)委員：余承東是中國(guó)信息通信研究院（China Academy of Information and Communications Technology）學(xué)術(shù)委員會(huì)的委員。該機(jī)構(gòu)是中國(guó)信息通信技術(shù)產(chǎn)業(yè)的研究和咨詢機(jī)構(gòu)，致力于推動(dòng)信息通信技術(shù)的發(fā)展和創(chuàng)新。
深圳市電子商務(wù)協(xié)會(huì)副會(huì)長(zhǎng)：余承東擔(dān)任深圳市電子商務(wù)協(xié)會(huì)的副會(huì)長(zhǎng)。深圳市電子商務(wù)協(xié)會(huì)是深圳市電子商務(wù)行業(yè)的專業(yè)組織，旨在促進(jìn)深圳電子商務(wù)的發(fā)展和合作。
中國(guó)電子商務(wù)協(xié)會(huì)常務(wù)理事：余承東是中國(guó)電子商務(wù)協(xié)會(huì)的常務(wù)理事。中國(guó)電子商務(wù)協(xié)會(huì)是中國(guó)電子商務(wù)行業(yè)的全國(guó)性組織，致力于推動(dòng)電子商務(wù)的發(fā)展和規(guī)范。
這些社會(huì)任職經(jīng)歷展示了余承東在信息通信技術(shù)和電子商務(wù)領(lǐng)域的參與和貢獻(xiàn)。通過(guò)擔(dān)任這些職位，他能夠與行業(yè)內(nèi)的專業(yè)人士和機(jī)構(gòu)合作，推動(dòng)相關(guān)領(lǐng)域的發(fā)展和合作。
</p>
</body>
</html>
- 效果展示
綜合案例二 - Harmony OS簡(jiǎn)介
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-853146.html
代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HarmonyOS 簡(jiǎn)介</title>
</head>
<body>
<h1>Harmony OS</h1>
<p>HarmonyOS 讓分布式成為開發(fā)的“樂趣”
統(tǒng)一OS，彈性部署
一套操作系統(tǒng)，滿足大大小小所有設(shè)備的需求，小到耳機(jī)，大到車機(jī)，智慧屏，手機(jī)等，讓不同設(shè)備使用同一語(yǔ)言無(wú)縫溝通。
</p>
<span>由 <a href="https://www.huawei.com/cn/">華為</a> 公司打造的 全場(chǎng)景、分布式智能終端操作系統(tǒng)</span>
<h3>主要功能</h3>
<p>
HarmonyOS 是華為公司推出的一款操作系統(tǒng)，旨在為各種設(shè)備提供統(tǒng)一的操作體驗(yàn)。它的主要功能包括：
分布式架構(gòu)：HarmonyOS 支持分布式架構(gòu)，能夠靈活運(yùn)行在各種設(shè)備上，包括智能手機(jī)、平板電腦、智能手表、智能電視、汽車信息娛樂系統(tǒng)等。
統(tǒng)一開發(fā)：開發(fā)者可以使用一套統(tǒng)一的開發(fā)工具和開發(fā)語(yǔ)言來(lái)開發(fā)應(yīng)用程序，無(wú)需為不同設(shè)備專門開發(fā)不同版本的應(yīng)用。
多終端協(xié)同：支持多終端協(xié)同工作，用戶可以在不同設(shè)備之間無(wú)縫切換應(yīng)用，實(shí)現(xiàn)多設(shè)備之間的數(shù)據(jù)共享和同步。
流暢體驗(yàn)：HarmonyOS 提供流暢的操作體驗(yàn)，支持快速啟動(dòng)應(yīng)用程序和快速響應(yīng)用戶操作。
安全性：注重用戶數(shù)據(jù)安全和隱私保護(hù)，采用了多種安全技術(shù)來(lái)保護(hù)用戶數(shù)據(jù)不受惡意攻擊和侵?jǐn)_。
資源共享：支持設(shè)備之間的資源共享，例如共享網(wǎng)絡(luò)連接、共享文件等。
智能化服務(wù)：結(jié)合人工智能技術(shù)，為用戶提供更智能、更個(gè)性化的服務(wù)，如語(yǔ)音助手、智能推薦等。
高效能力：優(yōu)化系統(tǒng)資源管理，提高系統(tǒng)運(yùn)行效率，從而延長(zhǎng)設(shè)備的續(xù)航時(shí)間和使用壽命。
生態(tài)系統(tǒng)建設(shè)：積極建設(shè) HarmonyOS 生態(tài)系統(tǒng)，吸引開發(fā)者和合作伙伴參與，共同推動(dòng) HarmonyOS 生態(tài)的發(fā)展。
</p>
<!-- 添加視頻 -->
<video src="../video/HarmonyOS.mp4" autoplay="true" controls loop="true" width="100%"></video>
</body>
</html>
效果展示
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-853146.html
到了這里，關(guān)于前端開發(fā)基礎(chǔ)（HTML5 + CSS3）【第一篇】：HTML標(biāo)簽之文字排版、圖片、鏈接、音頻、視頻 && 涵蓋了兩個(gè)綜合案例 做到了基礎(chǔ)學(xué)得會(huì)，實(shí)戰(zhàn)寫的出的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)16（HTML5、CSS3、JavaScript ）表格課后練習(xí)網(wǎng)頁(yè)標(biāo)題：域標(biāo)簽的使用網(wǎng)頁(yè)標(biāo)題：美家裝飾聯(lián)系我們網(wǎng)頁(yè)標(biāo)題：登錄界面網(wǎng)頁(yè)標(biāo)題問卷調(diào)查——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/01/820808-1.png)
![[HTML]Web前端開發(fā)技術(shù)9（HTML5、CSS3、JavaScript ）——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/777294-1.png)
![[HTML]Web前端開發(fā)技術(shù)12（HTML5、CSS3、JavaScript ）——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/793019-1.png)
![[HTML]Web前端開發(fā)技術(shù)7（HTML5、CSS3、JavaScript ）CSS的定位機(jī)制——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/755631-1.png)
![[HTML]Web前端開發(fā)技術(shù)13（HTML5、CSS3、JavaScript ）橫向二級(jí)導(dǎo)航菜單 Web頁(yè)面設(shè)計(jì)實(shí)例——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/797403-1.png)
![[HTML]Web前端開發(fā)技術(shù)6（HTML5、CSS3、JavaScript ）DIV與SPAN，盒模型，Overflow——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/756611-1.png)
![[HTML]Web前端開發(fā)技術(shù)8（HTML5、CSS3、JavaScript ）CSS樣式屬性,withborder,italic | oblique,indent,padding,——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/755873-1.png)
![[HTML]Web前端開發(fā)技術(shù)15（HTML5、CSS3、JavaScript ）表格，bordercolorlight，frame，valign，rowspan，colspan——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/01/814211-1.png)
