什么是web？
web（World Wide Web）全球廣域網(wǎng)，一種基于超文本和HTTP的，全球性的，動(dòng)態(tài)交互的，易于訪問(wèn)的只管界面，其中的文檔及超級(jí)鏈接將Internet上的信息節(jié)點(diǎn)組織成一個(gè)互為關(guān)聯(lián)的網(wǎng)狀結(jié)構(gòu)。

什么是html和css？
他們是兩種編輯語(yǔ)言，一般情況下需要配合使用，是作為網(wǎng)站開發(fā)的基礎(chǔ)語(yǔ)言。

• HTML：超文本標(biāo)記語(yǔ)言（HyperText Markup Language），標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用。時(shí)網(wǎng)頁(yè)制作必備的編程語(yǔ)言。
• CSS：層疊樣式表(Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化

如何在網(wǎng)站中查看原始代碼？
隨意點(diǎn)開一個(gè)網(wǎng)站，在其首頁(yè)空白區(qū)域右擊，選擇“查看網(wǎng)頁(yè)源代碼（V）Ctrl+V”
如：打開騰訊網(wǎng)link，右擊選擇查看網(wǎng)頁(yè)初始代碼，會(huì)展示如下界面：

我們所看到的就是這個(gè)網(wǎng)頁(yè)的使用html編寫的原始代碼，瀏覽器將他們解析后就是我們所看到的樣子。當(dāng)然，每個(gè)網(wǎng)站是由單個(gè)或多個(gè)網(wǎng)頁(yè)組成的，網(wǎng)頁(yè)都是以.html的文件格式儲(chǔ)存。

一、初步了解HTML

1、我們?nèi)绾尉帉懸粋€(gè).html的文件呢？

我們可以在指定的文件夾之中創(chuàng)建一個(gè)“文本文檔”，并將其后綴名更改為.html 這樣它就成了一個(gè)可以被瀏覽器識(shí)別的html文件。當(dāng)我們需要對(duì)其編寫時(shí)，我們可以右擊所選文件，使用記事本的方式打開，我們就可以對(duì)其內(nèi)容進(jìn)行修改。



保存后我們?cè)俅蜷_這個(gè)文件，我們就可以看到這樣一個(gè)網(wǎng)頁(yè)：

2、“宇宙第一編輯器——VS Code

VS Code 全稱Visual Studio Code，來(lái)自微軟，是一個(gè)開源的、基于Electron的輕量代碼編輯器
下載地址：VS Code

VS Code的基本使用

設(shè)置類：1：插件的安裝，如Chinese(Simplily),View in Browser,Open in Browser等等
2：文件->首選項(xiàng)->設(shè)置->（大小、是否換行word wrap）
3：文件的創(chuàng)建、設(shè)置路徑、保存和打開
4：搜索的應(yīng)用：可以多文件（夾）搜索相同內(nèi)容

快捷鍵：Ctrl+s：保存
Ctrl+a：全選
Ctrl+x、Ctrl+c、Ctrl+V：剪切、復(fù)制、粘貼
Ctrl+z、Ctrl+y：撤銷、前進(jìn)
Shift+end：從頭選中一行
Shift+Home：從尾部選中一行
Shift+Alt+↓：向下復(fù)制一行
Alt+↑或↓：快速移動(dòng)一行
Tab：向后縮進(jìn)
Tab+Shift：向前縮進(jìn)

Alt+鼠標(biāo)左鍵：多光標(biāo)（我們可以利用鍵盤的↑↓←→鍵來(lái)實(shí)現(xiàn)多行統(tǒng)一編輯）
Ctrl+d：選擇相同元素的下一個(gè)

3、對(duì)Chrome瀏覽器的了解和應(yīng)用

世界五大瀏覽器：ie（已停止維護(hù)）Google Chrome（市場(chǎng)占比最大）FireFox ，Safari和Opera
練習(xí)熟練運(yùn)用瀏覽器進(jìn)行搜索預(yù)覽

• 技巧：Ctrl+滾輪：放大/縮小頁(yè)面
  Ctrl+0：還原頁(yè)面大小

4、深入了解網(wǎng)站開發(fā)

UI設(shè)計(jì)師：設(shè)計(jì)稿

Web前端開發(fā)工程師（H5開發(fā)）
將設(shè)計(jì)稿 ->代碼
數(shù)據(jù)庫(kù)里的數(shù)據(jù)->顯示到頁(yè)面
工具：HTML+CSS
HTML：結(jié)構(gòu)
CSS：樣式

Web后端開發(fā)工程師：數(shù)據(jù)庫(kù)的數(shù)據(jù)存儲(chǔ)

當(dāng)然，一個(gè)大型網(wǎng)站的開發(fā)，需要團(tuán)隊(duì)的配合，各個(gè)崗位不可或缺。

拓展：前端設(shè)計(jì)的另外一項(xiàng)技能：JavaScript¹

他的主要功能：

嵌入動(dòng)態(tài)文本于HTML頁(yè)面

對(duì)瀏覽器事件做出響應(yīng)

在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)

檢測(cè)訪客的瀏覽器信息，控制cookies，包括創(chuàng)建和修改等

基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

5、Web前端的三大核心技術(shù)

技術(shù)名稱作用

HTML	結(jié)構(gòu)
CSS	樣式
JavaScript	行為

• JS主要負(fù)責(zé)與用戶的交互，如用戶在搜索框輸入內(nèi)容，自動(dòng)跳出聯(lián)想內(nèi)容供用戶選擇，再或者，如網(wǎng)頁(yè)滾動(dòng)的頁(yè)面框，用戶點(diǎn)擊下一張（或上一張）時(shí)，會(huì)自行滾動(dòng)至下一張。
• 我們也可以在瀏覽器設(shè)置中關(guān)閉JS。

二、Html的核心技術(shù)

1、如何編寫一個(gè)html文件

那我們?nèi)绾卫肰SCode來(lái)編寫一個(gè)html網(wǎng)頁(yè)呢？
首先我們需要了解html的幾個(gè)主要的內(nèi)容：
打開VSCode，創(chuàng)建一個(gè)html文件，然后鍵入如下代碼：

• html的結(jié)構(gòu)

<div>你好</div>

• html的樣式

<style> div{color:red;font-style:italic} </style>

保存后，我們用Chrome瀏覽器打開，我們可以看到如下頁(yè)面：

• 我們還可以利用JS嘗試添加一些“行為”
  我們鍵入如下代碼：

<script> let div = document.querySelector('div'); let timer = mull let flag = true div.onmouseover = function(){timer = setInterval(()=>{if(flag){div.style.color = 'blue';div.style.fontstyle='normal'}else{ div.style.color = 'red';div.style.fontstyle='italic'}flag = !flag;},500); }; div.onmouseout = function(){clearInterval(timer); </script>

保存后打開，當(dāng)我們鼠標(biāo)移到內(nèi)容上時(shí)，它會(huì)變換樣式：
當(dāng)我們鼠標(biāo)移開時(shí)，它又會(huì)變回原來(lái)的樣子：
以上這些就是我們完善一個(gè)Web所需要做的基礎(chǔ)部分。

2、HTML的基礎(chǔ)結(jié)構(gòu)和屬性

前面我們介紹到HTML全稱為：超文本標(biāo)記語(yǔ)言，那我們可以把他拆詞理解：

• 超文本：文本內(nèi)容+非文字文本。非文本內(nèi)容有例如網(wǎng)頁(yè)之中的圖片、視頻、音頻等等
• 標(biāo)記：<單詞名>， 也叫做標(biāo)簽
• 語(yǔ)言：編程語(yǔ)言

（1）標(biāo)簽的寫法

標(biāo)簽的寫法分為兩種

• 單標(biāo)簽 <header>
• 雙標(biāo)簽<header></header>

創(chuàng)建標(biāo)簽的快捷鍵：單詞 + tab -> <單詞>
標(biāo)簽除了可以上下排列，還可以組合嵌套

（2）標(biāo)簽的種類

html的標(biāo)簽類型很多，我們可以在在百度上搜索他們的種類及作用
我們可以參考html5標(biāo)簽類型大全中的所列出的標(biāo)簽種類和介紹。

（3）標(biāo)簽的屬性

<header title='hello'>hello world</header><footer title='hi'>hi HTML</footer>

其中title='內(nèi)容'就是我們給標(biāo)簽所添加的一個(gè)屬性。當(dāng)然，一個(gè)標(biāo)簽也可以擁有多個(gè)屬性：<標(biāo)簽 屬性1=‘值’ 屬性2=‘值’ … >
我們利用vscode鍵入如上代碼，保存后用瀏覽器打開，當(dāng)我們將鼠標(biāo)移動(dòng)到文字上時(shí)，就是現(xiàn)實(shí)他的屬性值：

3、HTML的初始代碼

每一個(gè).html文件都是需要寫出事代碼，初始代碼就是無(wú)論你寫什么樣的網(wǎng)頁(yè)，這些代碼都是要有的，這就是初始代碼。（當(dāng)然有一些初始代碼沒(méi)有也是可以的，但是最好還是要符合規(guī)范。）
快速創(chuàng)建初始代碼：！+ tab
在VSCode，利用快捷鍵我們可以得到一下代碼：

<!DOCTYPE html> <!--這是文檔聲明，告訴瀏覽器這是一個(gè)html文件。--> <html lang="en"> <!--這是html文件的外層標(biāo)簽，包裹所有的html代碼,lang="en"指的是一個(gè)英文網(wǎng)站--> <head><meta charset="UTF-8"> <!--元信息：是編寫網(wǎng)頁(yè)中的一些賦值信息--><title>Document</title> <!--網(wǎng)頁(yè)的標(biāo)題--> </head> <body><!--這部分是在頁(yè)面顯示的--> </body> </html>

這些就是.html的初始代碼。

4、HTML的注釋

注釋的代碼，只有在文件中看得到，但是瀏覽器顯示不出來(lái)
寫法：<!-- 注釋的內(nèi)容 -->

意義

把暫時(shí)不用的代碼注釋起來(lái)，方便以后使用。

對(duì)開發(fā)者的提示

快捷添加和刪除注釋：

ctrl + /

shift + alt + a

5、HTML語(yǔ)義化

html的語(yǔ)義化指的是：根據(jù)網(wǎng)頁(yè)內(nèi)容的結(jié)構(gòu)，選擇適合的html標(biāo)簽進(jìn)行編寫。

好處

在沒(méi)有CSS的情況下，頁(yè)面也能呈現(xiàn)出很好的內(nèi)容結(jié)構(gòu)。

有利于SEO，讓搜索引擎爬蟲更好的理解網(wǎng)頁(yè)。

方便其他設(shè)備解析（如屏幕閱讀器，盲人閱讀器等）

便于團(tuán)隊(duì)開發(fā)與維護(hù)。

6、標(biāo)題與段落

h標(biāo)簽實(shí)現(xiàn)標(biāo)題
p標(biāo)簽實(shí)現(xiàn)段落

標(biāo)題
它是雙標(biāo)簽：<h1></h1> ... <h6></h6> 一共有6個(gè)等級(jí)；在一個(gè)網(wǎng)頁(yè)中，<h1></h1>標(biāo)題時(shí)最重要的，并且在一個(gè)html文件之中只能出現(xiàn)一個(gè)，而<h5></h5>和<h6></h6>很少用到

段落
它是雙標(biāo)簽：<p>段落內(nèi)容</p>

7、文本修飾標(biāo)簽

強(qiáng)調(diào)
它是雙標(biāo)簽。
第一種：<strong>強(qiáng)調(diào)標(biāo)簽</strong>會(huì)對(duì)文本進(jìn)行加粗
第二種：<em>強(qiáng)調(diào)標(biāo)簽</em>會(huì)對(duì)文本進(jìn)行斜體
但是strong的強(qiáng)調(diào)性更強(qiáng)。

上標(biāo)：^{上標(biāo)內(nèi)容}
鍵入以下代碼：

a² + b² = c²

顯示：a² + b² = c²

下標(biāo)：^{下標(biāo)內(nèi)容}
鍵入以下代碼：

H₂O

顯示：H₂O

刪除文本：<del>刪除內(nèi)容</del>；插入文本<ins>插入內(nèi)容</ins>
鍵入如下代碼：

原價(jià)<del>300</del>，現(xiàn)價(jià)<ins>150</ins>

顯示：原價(jià)300，現(xiàn)價(jià)150

注：一般情況下，刪除文本和插入文本都是混合使用的

8、圖片標(biāo)簽與圖片屬性

圖片標(biāo)簽

img：單標(biāo)簽

圖片屬性

src：引入圖片的地址

alt：當(dāng)圖片出現(xiàn)問(wèn)題的時(shí)候，可以顯示一段友好的提示

title：提示信息

width、height：圖片的大小

9、引入文件的地址文件

相對(duì)路徑

• .在路徑中表示當(dāng)前路徑
• ..在路徑中顯示上一級(jí)路徑

絕對(duì)路徑

• <img src="https://inews.gtimg.com/newsapp_bt/0/15359755335/1000">這是網(wǎng)絡(luò)路徑
• <img src="D:\百度網(wǎng)盤\BaiduNetdisk\Assets">這是本地路徑

注意盡量避免反斜線

10、跳轉(zhuǎn)鏈接

（1）<a>標(biāo)簽

注：它是雙標(biāo)簽<a>鏈接</a>
屬性一：herf屬性

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><a herf="http://www.baidu.com">訪問(wèn)百度</a> </body> </html>

保存后用Chrome打開，我們就可以看到
點(diǎn)擊后，我們就可以跳轉(zhuǎn)到百度網(wǎng)頁(yè)。

當(dāng)然，我們也可以在中插入其他屬性，如圖片等
例如：

<body> <a herf="鏈接"><img src="圖片地址" alt=""> </a> </body>

這樣我們就可以通過(guò)點(diǎn)擊圖片來(lái)跳轉(zhuǎn)到指定的網(wǎng)頁(yè)了。

屬性二： target屬性
這個(gè)標(biāo)簽可以改變鏈接的打開方式，默認(rèn)情況下點(diǎn)一個(gè)鏈接都是以當(dāng)前頁(yè)面打開。特殊說(shuō)明時(shí)：target="_self"表示當(dāng)前窗口打開 target="_blank"表示新窗口打開
例如，將如上代碼中改變成：

<body><a herf="http://www.baidu.com" target="_blank">訪問(wèn)百度</a> </body>

這樣，我們?cè)冱c(diǎn)擊“訪問(wèn)百度”時(shí)，就會(huì)在新的頁(yè)面打開。

（2）<base>標(biāo)簽

作用：它可以改變<a>的默認(rèn)行為

<head> <base target="_blank"> </head>

這樣，我們這個(gè)網(wǎng)頁(yè)的所有鏈接的默認(rèn)打開方式就是新窗口打開

練習(xí)：分別建立一個(gè)首頁(yè)、列表頁(yè)；并讓他們之間實(shí)現(xiàn)相互跳轉(zhuǎn)，每個(gè)頁(yè)面至少包含一個(gè)圖片，并且圖片要在images文件夾內(nèi)；列表和詳情也要在html文件夾內(nèi)，首頁(yè)在根目錄下。

11、跳轉(zhuǎn)錨點(diǎn)

它和跳轉(zhuǎn)鏈接的區(qū)別：跳轉(zhuǎn)鏈接是從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面，而跳轉(zhuǎn)錨點(diǎn)是指在當(dāng)前的頁(yè)面內(nèi)進(jìn)行跳轉(zhuǎn)。
跳轉(zhuǎn)錨點(diǎn)也是在<a>標(biāo)簽內(nèi)來(lái)實(shí)現(xiàn)的。
實(shí)現(xiàn)一：#號(hào)+id 屬性

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><a href="#html">HTML</a><a href="#CSS">CSS</a><a href="#JavaScript">JavaScript</a><h2 id="html">HTML超文本標(biāo)記語(yǔ)言<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><h2 id="CSS">CSS層疊樣式</h2><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><h2 id="JavaScript">JavaScript</h2><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p> </body> </html>

保存后用瀏覽器打開，我們能看到如下頁(yè)面：
當(dāng)我們點(diǎn)擊上方錨點(diǎn)時(shí)，會(huì)自動(dòng)跳轉(zhuǎn)到同頁(yè)面對(duì)應(yīng)的那一行，這樣，我們的一個(gè)鏈接錨點(diǎn)就完成了。

實(shí)現(xiàn)二：#號(hào)+name 屬性
這種方式我們就可以不用在h2中加入id屬性，但是需要子啊每一個(gè)h2上方加入一個(gè)用<a name=" ">來(lái)進(jìn)行引導(dǎo)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><a href="#html">HTML</a><a href="#CSS">CSS</a><a href="#JavaScript">JavaScript</a><a name="html"></a><h2>HTML超文本標(biāo)記語(yǔ)言<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><a name="CSS"></a><h2>CSS層疊樣式</h2><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><a name="JavaScript"></a><h2>JavaScript</h2><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p> </body> </html>

這樣我們也能實(shí)現(xiàn)相同的跳轉(zhuǎn)效果。

12、特殊符號(hào)

編寫一些文本時(shí)，經(jīng)常會(huì)遇到輸入法無(wú)法輸入的字符，如?(注冊(cè)商標(biāo))等，還有王一段文字中加入多個(gè)空格時(shí)，頁(yè)面并不會(huì)接寫出多個(gè)空格。這些無(wú)法輸入和空格字符都是特殊字符，在HTML中，為這些特殊字符準(zhǔn)備了專門的代碼。

&lt;html&gt;

這樣，我們就可以看到它顯示：<html>
就避免了與html之中的尖括號(hào)沖突。

13、列表項(xiàng)

（1）、無(wú)序列表

<ul>、<li>：列表的最外層容器，列表項(xiàng)
注：ul和li必須是組合出現(xiàn)，他們之間時(shí)不能有其他標(biāo)簽的，而且要符合嵌套規(guī)范。

比如：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><ul><li>第一項(xiàng)</ul> <li>第二項(xiàng)</ul> <li>第三項(xiàng)</ul> </ul> </body> </html>

這就是一個(gè)正確的寫法。運(yùn)行后如下：

這樣我們就能看到它的無(wú)序標(biāo)記。

再如：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><ul><p><li>S1</ul> <li>S2</ul> <li>S3</ul> <p></ul> </body> </html>

這里ul和li之間加入了<p>標(biāo)簽，導(dǎo)致了網(wǎng)頁(yè)中無(wú)法顯示，所以在ul和li之間不能有其他標(biāo)簽。都是在li內(nèi)部可以添加其他標(biāo)簽，如鏈接等。

type屬性：改變前面標(biāo)記的樣式（一般都是CSS去控制）,詳細(xì)參考html的ul樣式類型

（2）、有序列表

<ol>、li：列表的最外層容器、列表項(xiàng)
注：有序列表用的非常少，經(jīng)常用的是無(wú)序列表，無(wú)序列表可以去貼袋有序列表。

類似的，我們將

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><ol><li>第一項(xiàng)</ul> <li>第二項(xiàng)</ul> <li>第三項(xiàng)</ul> </ol> </body> </html>

運(yùn)行后就是如下樣式：

（3）、定義列表

<dl>：定義列表
<dt>：定義專業(yè)術(shù)語(yǔ)或名詞
<dd>：對(duì)名詞進(jìn)行解釋或描述
列表項(xiàng)需要添加標(biāo)題和對(duì)標(biāo)題進(jìn)行描述的內(nèi)容
我們隊(duì)以上三中輸入VSCode

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body> <dl><dt>HTML</dt><dd>超文本標(biāo)記語(yǔ)言</dd><dt>CSS</dt><dd>層疊樣式表</dl><dt>JavaScript</dt><dd>網(wǎng)頁(yè)腳本語(yǔ)言</dd> </dl></body> </html>

運(yùn)行后我們?cè)跒g覽器中就能看到如下樣式：
這樣，一個(gè)定義列表就完成了。

---

JavaScript（簡(jiǎn)稱“JS”） 是一種具有函數(shù)優(yōu)先的輕量級(jí)，解釋型或即時(shí)編譯型的編程語(yǔ)言。雖然它是作為開發(fā)Web頁(yè)面的腳本語(yǔ)言而出名，但是它也被用到了很多非瀏覽器環(huán)境中，JavaScript 基于原型編程、多范式的動(dòng)態(tài)腳本語(yǔ)言，并且支持面向?qū)ο?、命令式、聲明式、函?shù)式編程范式。
JavaScript在1995年由Netscape公司的Brendan Eich，在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計(jì)實(shí)現(xiàn)而成。因?yàn)镹etscape與Sun合作，Netscape管理層希望它外觀看起來(lái)像Java，因此取名為JavaScript。但實(shí)際上它的語(yǔ)法風(fēng)格與Self及Scheme較為接近。
JavaScript的標(biāo)準(zhǔn)是ECMAScript 。截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標(biāo)準(zhǔn)。2015年6月17日，ECMA國(guó)際組織發(fā)布了ECMAScript的第六版，該版本正式名稱為 ECMAScript 2015，但通常被稱為ECMAScript 6 或者ES2015。 ??

總結(jié)

以上是生活随笔為你收集整理的初识web（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。