一、內(nèi)容概述
從本節(jié)我們開始正式學習前端開發(fā)的課程內(nèi)容，首先我們從第一個網(wǎng)頁開始了解html和css的基本概念，并通過創(chuàng)建第一個網(wǎng)頁了解vscode的基本使用方法。
二、安裝vscode插件
漢化插件：Chinese (Simplified) Language Pack for Visual Studio Code
瀏覽器打開：open in browser
三、HTML概述
HTML的全稱是【超文本標記語言】，，超級文本標記語言是標準通用標記語言下的一個應(yīng)用，也是一種規(guī)范，一種標準，它一個標記語言通過標記符號來標記要顯示的網(wǎng)頁中的各個部分。網(wǎng)頁文件本身是一種文本文件， 使用 ！+ tab生成html模板;?
1<!-- demo01.html --> 2<!DOCTYPE html> 3<html lang="en"> 4<head> 5<meta charset="UTF-8"> 6<title>Document</title> 7</head> 8<body> 9<p>我的第一個網(wǎng)頁</p>10</body>11</html>
HTML主要控制網(wǎng)頁的內(nèi)容，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁文件，然后根據(jù)標記符解釋和顯示其標記的內(nèi)容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執(zhí)行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對于不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果如下所示：
不同的標簽具有不同的含義，HTML有上百個標簽，有些是不常用的，有些甚至已經(jīng)被廢棄。很多初學者都會困惑，不知道自己到底要學習哪些標簽。慶幸的是有了這本《前端開發(fā)學習手冊》，只要掌握十幾個標簽，就能完成生動的網(wǎng)頁。
在下一節(jié)我們會列舉常用的HTML標簽。
四、CSS概述
CSS全稱【層疊樣式表(英文全稱：Cascading Style Sheets)】。剛才我們了解了，使用HTML可以設(shè)置網(wǎng)頁中的內(nèi)容（標準通用標記語言的一個應(yīng)用）等文件樣式的計算機語言，那么使用CSS就可以進一步裝飾這些內(nèi)容，錄入設(shè)置文本的字體顏色，或是改變圖片的尺寸等等。如下面的代碼所示，CSS的代碼是在style標簽內(nèi)部編寫的。
1<!-- demo02.html --> 2<!DOCTYPE html> 3<html lang="en"> 4<head> 5<meta charset="UTF-8"> 6<title>Document</title> 7<style> 8? ? ? ? p{ 9? ? ? ? ? ? color:red;10}11</style>12</head>13<body>14<p>我的第一個網(wǎng)頁</p>15</body>16</html>
上面的代碼我們可以將p標簽的文字設(shè)置成紅色。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。
關(guān)于CSS的更多內(nèi)容，我們會在后續(xù)章節(jié)繼續(xù)講解。
五、課后練習
本節(jié)我們簡單地概括了什么是HTML和CSS，接下來大家可以在vscode中編寫上面的兩個例子，步驟如下：
打開vscode
點擊菜單 File => New File 創(chuàng)建文件。
點擊菜單 Save 保存成后綴為html的文件，例如index.html
在文件中輸入一個英文的感嘆號（!），然后按tab鍵，就可以生成一個HTML文件的模板了。
接下來按照上面的代碼示例編寫自己的網(wǎng)頁。
用瀏覽器打開此html文件。
通過上面的六步，我們就可以訪問我們自己的第一個網(wǎng)頁了;
