HTML5詳篇

前端三劍客

前端三劍客是指HTML、CSS和JavaScript：

HTML超文本標記語言（Hyper Text Markup Language)：簡單理解描述網頁結構的；用于網頁內容的語言。它通過使用不同的HTML標簽來定義頁面中的各種元素，例如標題、段落、圖像、鏈接等【無羽毛的小鳥模型】

CSS層疊樣式表（Cascading Style Sheets)：簡單理解美化網頁樣式的；用于控制網頁的樣式和布局。它通過選擇器和屬性來選擇和修改HTML元素的外觀，例如顏色、字體、大小、間距和位置等【有五顏六色漂亮羽毛的小鳥模型】

JavaScript：簡單理解做網頁交互的；JavaScript是一種用于在網頁上實現動態交互的腳本語言。它可以通過修改HTML和CSS來實現用戶與網頁的互動，例如表單驗證、動態內容加載、頁面動畫和用戶事件處理等【會動會飛有生命的小鳥】

以上就是開發網站的三要素，好的網站缺一不可

前端開發還涉及到許多其他的技術和工具，例如前端框架（如React、Vue等）、CSS預處理器（如Sass、Less等）、瀏覽器開發者工具、版本控制工具（如Git）等。這些工具和技術可以提高開發效率，優化代碼結構，并支持更復雜的前端應用程序的開發

計算機組成

A、計算機硬件：看得見摸得著

B、計算機軟件：看不見也摸不著（指的實體）

	計算機軟件又分為：1.系統軟件：操作系統2.應用軟件：桌面軟件軟件架構大致又分為：CS架構軟件 和 BS架構的軟件

C/S和B/S

C/S架構是指客戶端/服務器【Client/Server】架構，桌面應用軟件訪問的服務器，比如我們使用的QQ、微信等

在這里插入圖片描述

B/S結構是瀏覽器/服務器【Browser/Server】的簡稱，通過瀏覽器訪問的服務器，比如我們使用淘寶、京東、百度等

在這里插入圖片描述

共同點：

都是需要訪問到服務器的

BS/CS的優缺點：

(1) C/S : 更加安全（面向相對固定的用戶群），速度更快（專用服務器），用戶體驗更好。但是需要單獨安裝客戶端，而且每次升級都要重新安裝客戶端

(2) B/S : 用瀏覽器代替客戶端，不用單獨安裝，客戶端不必維護，無感更新。但是安全性和穩定性相對CS架構的軟件較弱【所有的邏輯代碼都是讓服務器端完成的，而游覽器只做界面渲染】

PS：Java主要用于開發BS架構的軟件（很少會開發CS架構的軟件）

網站訪問原理

訪問一個頁面的過程大致如下：

在這里插入圖片描述

1. 輸入網絡資源地址
2. 瀏覽器用URL查詢DNS，DNS返回IP地址
3. 瀏覽器用這個IP地址和訪問網頁路徑來訪問網頁 例如：183.2.172.17/index.html其實他會發一個網絡請求給Web服務器
4. Web服務器接收到這個請求后，以html文檔的方式來響應，相當于下載了html文檔
5. 瀏覽器解析html文檔，然后展示給用戶

首先通過某一臺電腦訪問 https://www.baidu.com網址，此時會有一個DNS服務器(域名解析服務器：簡單理解將域名轉為IP地址)，通過網址訪問DNS服務器解析為IP地址再把IP地址響應回去，最后通過IP地址訪問到對應的服務器/電腦

常識：每一臺的電腦IP都是獨一無二的，即人的身份證；【所有的軟件都是放到服務器上的】；為什么需要把域名轉為IP，因為域名更容易記憶

服務器分類：

① 硬件服務器：本質就是一臺高配電腦，例百度、淘寶等就是部署在電腦上的

② 軟件服務器：Tomcat、Nginx、ES……

PS：通過域名拿到對應的IP

在這里插入圖片描述

在這里插入圖片描述
通過游覽器獲得需要的域名，再把域名解析成IP；“已響應”即表示ping通了

前端

什么是前端？

軟件開發包括前端開發和后端開發，前端負責數據展示，后端負責業務實現

前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前臺代碼實現，包括基本的HTML和CSS以及JavaScript/ajax，最新的高級版本HTML5、CSS3

前端開發：是指構建和實現用戶在瀏覽器中直接與之交互的網頁和應用程序的過程。前端開發關注于網頁的外觀、布局和用戶體驗，以及與用戶的互動。

前端開發涉及到很技術和工具，例如移動應用開發、響應式設計、數據可視化等。像常見的網頁，手機APP，微信小程序，VR等技術都屬于前端的開發范疇。隨著技術的不斷發展和前端開發的進化，前端開發者在設計和實現用戶界面時擁有更多的選擇和創新的空間，以提供更豐富、交互性更強的應用程序和體驗

開發環境與調試

開發環境

文本文檔：初代程序員使用
HBuilder：國內神器
VSCode：目前前端開發人員使用較多
idea: 后端/全棧開發人員使用較多

PS：工具不重要，哪個自己順手用哪個即可

運行環境-瀏覽器

瀏覽器是html、css、js的解析器、執行器，我們寫的html、css和js代碼需要放在瀏覽器才能執行

瀏覽器的名稱	內核	瀏覽器的由來	瀏覽器的性能
谷歌（chrome）	WebkitChrome 28以上為Blink內核	Google公司旗下瀏覽器	快速、安全、搜索引擎好、速度最快的瀏覽器
火狐（Firefox）	Gecko	mozilla公司旗下瀏覽器簡稱：FF	安全性高，速度中等
IE瀏覽器	Trident	Microsoft微軟公司在Mosaic代碼的基礎之上修改而來的瀏覽器	速度慢，安全性中等
Edge	Blink	Microsoft微軟公司重新開發的瀏覽器，采用Chromium內核	速度快
Safari	Webkit	蘋果公司旗下瀏覽器	在蘋果系統下是很優秀的瀏覽器
歐朋(Opera)	PrestoOpera15版本以上是Blink內核	是挪威Opera Software ASA公司制作的支持多頁面標簽式瀏覽的網絡瀏覽器;	速度快，瀏覽器界面簡潔

開發我們使用Chrome或者Firefox這兩個瀏覽器，調試起來比較方便
一般F12/右鍵審查元素/檢查/工具欄就可以從瀏覽器中打開調試工具

在這里插入圖片描述

谷歌游覽器和火狐游覽器控制臺的區別：谷歌游覽器控制臺是全英文，而火狐控制臺是全中文

HTML

W3C認識

萬維網聯盟（外語縮寫：W3C）標準不是某一個標準，而是一系列標準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行為（Behavior）

萬維網聯盟創建于1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。到目前為止，W3C已發布了200多項影響深遠的Web技術標準及實施指南，如廣為業界采用的超文本標記語言（HTML）、**可擴展標記語言（XML）**以及幫助殘障人士有效獲得Web內容的信息無障礙指南（WCAG）等，有效促進了Web技術的互相兼容，對互聯網技術的發展和應用起到了基礎性和根本性的支撐作用

對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行為標準主要包括對象模型（如W3C DOM）、ECMAScript等。這些標準大部分由W3C起草和發布

W3C是一個國際組織，它定義與規范大量Web標準（如H5，CSS3，js，xml等）

HTML認識

HTML(Hypertext Markup Language)超文本標記語言，是一種編寫網頁內容的技術
文本：就是類似"xx.txt"文件里面可展現的內容
超文本：指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素
標記語言：描述html的語法格式，采用標簽的方式描述網頁內的元素【即；標簽=標記】
后綴以 html或者 htm結尾的文檔，可以展示文字，圖片，超鏈接，視頻等內容
Html是W3C制定的規范，規定了瀏覽器需要識別的html語法、html標簽的基本功能。即瀏覽器能夠識別html代碼，是html的解析器，我們寫的html、css和js代碼需要放在瀏覽器才能執行

HelloWorld入門

創建一個項目”VS“
在項目中新建一個html頁面。技巧：在vscode中輸入英文**!回車** - 自動生成H5的骨架

在這里插入圖片描述

HTML文件結構

在這里插入圖片描述

什么是DOCTYPE？？？

DOCTYPE是Document Type（文檔類型/申明 = DOCTYPE聲明）的簡寫，DOCTYPE不屬于HTML標簽。在頁面中用來指定頁面所使用的HTML版本

什么是標簽？？？

HTML是以標簽來進行描述，學習HTML基本上就是認識HTML標簽的含義與作用
標簽分成雙標簽與單標簽
- 單標簽：<標簽名 />
- 雙標簽：<標簽名>內容</標簽名>

標簽的語法格式：<!--雙標簽：開始標簽和結束標簽各單獨一個-->方式1：<標簽名 屬性名1="值" 屬性名2="值" 屬性名3="值" ……></標簽名><!--標簽中可以定義一個或多個屬性--><!--屬性名后面的值，不管是單引號和雙引號都表示字符串--><!--單標簽：開始標簽和結束標簽都是同一個-->方式2：<標簽名 屬性名1="值" 屬性名2="值" 屬性名3="值" …… />

什么是屬性？？？

HTML標簽中可以定義一個或多個屬性，提供更多信息
屬性總是以名稱/值對的形式出現，語法為屬性名=“屬性值”；這里的屬性值不管是數字還是字符串等都是用單引號或者雙引號引起來的

title標簽

用來聲明網頁的標題

在這里插入圖片描述

meta標簽認識

HTML中的Meta標簽用于向瀏覽器提供Web頁面的元數據，包括頁面的標題、描述、關鍵字、作者、語言以及其他相關信息。它們被放置在head標簽內，不會在主頁面上顯示
常見的Meta標簽及其作用：
- <meta charset="utf-8">：指定頁面的字符編碼
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：指定頁面在不同設備上的顯示方式，以適應不同屏幕尺寸
- <meta name="description" content="java,php">：描述網頁的內容，對搜索引擎優化SEO很重要
- <meta name="keywords" content="java,php">：設置網頁的關鍵字，以便于搜索引擎對網頁內容的分析
- <meta name="author" content="作者名">：設置頁面的作者
- <meta http-equiv="refresh" content="5;url=http://example.com/">：設置網頁自動跳轉，其中5表示間隔5秒，url表示跳轉的地址

PS：響應式布局效果，即網頁自適應

在這里插入圖片描述

<!-- 版本不一樣解析規則即不一樣-->
<!DOCTYPE html> <!-- 凡是出現<!DOCTYPE html>，就表示該版本是HTML5的版本，告訴游覽器當前是html5版本，按照html5版本解析html頁面-->
<html lang="en"><!--html的根元素，如果開發一個網頁必須要有根元素，也必須只能是html；一個html代表一個頁面；那么一個網頁內部又分為頭信息和體信息 --><head>  <!--網頁頭信息，主要描述當前頁面編碼，網頁標題，網頁是否自適應--><meta charset="UTF-8"> <!--告訴游覽器當前頁面是UTF-8編碼-->		<!--"viewport"：視點，"width=device-width, initial-scale=1.0"：響應式布局(該頁面會根據當前設備進行屏幕大小展示)--><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> <!--網頁標題--></head><body>hello world！！</body>
</html></