44.0/認識前端

44.1 44.2. Internet、IP 地址和域名

44.2.1 Internet

Internet 中文稱為因特網，是集現代計算機技術和通信技術于一體，基于 TCP/IP 協議將全世界不同國家、不同地區、不同部門和不同類型的計算機、國家骨干網、廣域網、局域網通過網絡互聯設備連接而成的、全球最大的開放式計算機網絡。

44.2.2 IP

Internet 上連接了不計其數的服務器和客戶機，每個主機在 Internet 上都有唯一的地址，我們稱這個地址為 IP 地址（Internet protocol address）。 IP 地址由 4 個小于 256 的數字組成，數字之間用點間隔，如==61.135.150.126==

----IP4----不夠用---IP6

44.2.3 域名

由于 IP 地址在使用過程中難于記憶和書寫，人們又開發了一種與 IP 地址對應的字符表示地址，這就是域名 www.baidu.com---[ip地址]。每一個網站都有自己的域名，并且域名是獨一無二的。

在創建好網站后需要申請域名，并將網站上傳到服務器上，這樣其他人才能通過互聯網訪問網站。

思考

當用戶想訪問www上的網頁或者其他資源時，應該怎么操作

44.3. Web 前端技術概述

HTML5、CSS3 和 JavaScript 被稱為“Web 前端三劍客”，是 Web 前端開發的核心技術。

44.3.1 html5

HTML，全稱 hypertext markup language，中文解釋為超文本標記語言，是制作網頁的標記語言。它主要用于定義網頁結構，決定網頁上顯示的內容，解決“網頁上有什么”的問題，是網頁制作的基礎。例如，使用 HTML 標簽定義網頁中的文本、圖像等元素，如圖所示。單詞都是固定的

使用 HTML 編寫的超文本文檔稱為HTML文檔，

擴展為.html 或.htm，

它能獨立于各種操作系統。

瀏覽器能夠識別并解析這些文檔。

HTML5 是 HTML 的最新版本，

它在HTML4.01的基礎上進行了完善和優化，

符合現代網絡發展的要求，

并得到了主流瀏覽器的良好支持。

44.3.2 CSS3

CSS，全稱 cascading style sheets，中文解釋為層疊樣式表。它主要用于定義網頁中元素的樣式，包括各元素的顏色、大小、位置和布局等。例如，使用 CSS 定義網頁中文本<span>、圖像<img/>等元素的樣式，如圖所示。

CSS 可以直接寫在 HTML 文檔中，也可以單獨存放為樣式表文件（擴展名為.css）。

CSS3 是 CSS 的最新版本，雖然到目前為止完整的 CSS3 標準還未發布，但是其大部分特性已經得到了主流瀏覽器的支持。

44.3.3 Javascript

JavaScript，簡稱 JS，是由 Netscape 公司開發的基于對象和事件驅動的腳本語言。

?例如，使用 JavaScript 定義鼠標行為，當鼠標移至“Web 前端技術”文本上時，文本內容顯示為“HTML5+CSS3+JavaScript”，如圖所示。

JavaScript 可以直接寫在HTML文檔中，也可以單獨存放為 JavaScript 文件（擴展名為.js）。目前，幾乎所有瀏覽器都可以很好地支持 JavaScript。

44.4. Web 前端開發工具

正所謂“工欲善其事，必先利其器”。在實際開發中，選擇合適的開發工具十分重要。 Web 前端開發用到的工具主要包括編輯器和瀏覽器。

44.4.1 編輯器——（HBuilder 輕）

HBuilder 是一款由 DCloud 推出的國產前端開發工具，是1+X證書制度試點培訓用書（Web 前端開發）中的專用編輯器。它有強大、完整的語法提示，且可新建 uni-app、小程序等項目，還對 Vue 做了大量優化投入，開發體驗遠超其他開發工具。此外，HBuilder 不僅支持 Java 插件、nodejs 插件，還兼容了很多 VS Code 的插件及代碼塊，并且可以通過外部命令方便地調用各種命令行功能，從而極大地提升開發效率。

44.4.2 編輯器——Adobe Dreamweaver

Adobe Dreamweaver（簡稱 DW）是一款集網頁制作和網站管理于一身的所見即所得的網頁代碼編輯器。它不僅能夠編輯網頁，還可以有效地創建、管理網站，同時還提供了上傳網站的便捷方法。

44.4.3 編輯器——Visual Studio Code

Visual Studio Code（簡稱 VS Code）是一款由微軟開發，同時支持 Windows、MacOS、Linux 等操作系統且開源的代碼編輯器。它具有代碼補全、代碼片段和代碼重構等功能。此外，該編輯器支持用戶個性化配置（如改變主題顏色），還擁有眾多插件，為開發者提供了豐富的擴展庫。

44.4.4 編輯器——WebStorm

WebStorm 是由 JetBrains 軟件公司開發的商業付費版 Web 開發工具，同時支持Windows、MacOS、Linux 等操作系統。它內置了非常強大的代碼提示功能和各種豐富的插件，方便用戶使用。同時，該編輯器還集成了對 Vue、React 等框架的支持。

44.5. 瀏覽器

瀏覽器在 Web 前端開發中用于運行和測試網頁文件，也是用戶訪問互聯網上各種網頁的必備工具。

44.6.?html快速入門

創建一個文件,并且該文件的后綴.html或.htm

添加相關的內容。

<!-- 告訴瀏覽器網頁的開頭 -->
<html><!-- 瀏覽器頭信息:不會顯示再瀏覽器內容中 --><head><!-- 網頁的標題 --><title>day01-hello</title></head><!-- 網頁的主題內容 --><body>你好，gz01,今天學習html5!!</body>
</html>
<!-- 告訴瀏覽器網頁的結束 -->

44.6.1 head 中的常用標簽

title標簽

表示標題標簽--顯示再瀏覽器標題欄部分

meta 標記

當利用瀏覽器查看網頁的源文件時，不難發現，網頁的頭部文件都有<meta> 標記，該標記用來描述一個 HTML 網頁文檔的屬性，例如作者、日期和時間、網頁描述、關鍵詞、頁面刷新等。

指定字符編碼

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
編碼的種類: gbk和gb2312指的中文編碼。
gbk表示的中文比較少而且無法指定繁體中文。
gb2312表示的中文比較多，而且包含繁體。
IOS8859-1: 國際碼。
utf-8: 萬國碼。全球碼。一般都采用該碼。

為網頁添加關鍵字
<meta name="keywords" content="關鍵字">

頁面刷新

<meta http-equiv="Refresh" content="5;url=http://www.baidu.com">

style

樣式標簽

script標簽

javascript標簽，引入外邊js和自定義js代碼

link標簽

引入外邊css文件

44.6.2 body中常用的標簽

標題

標題使用 <h1> 至 <h6> 標簽進行定義。<h1> 定義最大的標題。<h6> 定義最小的標題。

內容加粗且折行

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

?標簽中可以添加屬性: 文本對齊方式屬性. 
align="left|right|center"一個標簽可以有多個屬性，屬性與屬性之間使用空格隔開

段落標簽

段落使用 <p> 標簽進行定義。和標題一樣，align 屬性也可以用于控制段落的水平位置。

換行標簽

或或</br> 它是一個單標簽

?空格符

&nbsp; 空格符

水平線

?<hr>表示水平分割線。 它也屬于單標簽。?

?控制網頁中文字的標記

44.0/認識前端

44.1

目錄

44.1.1 網頁

44.1.1.1 網頁的組成

44.1.1.2 網頁的分類

44.1.2 網站

44.1.2.1 網站的分類

44.1.3 主頁

44.2. Internet、IP 地址和域名