1.HTML和長css入門
課程介紹
介紹html文件的基本結構，html常用標籤的使用，理解html語言製作網頁基本原理，理解css的基本語法，css的引入方式，css選擇器，css基本屬性的使用等等。
學習前端的技術=html+css+javascript+jquery+vue
=html + css + javascript(jQuery和Vue就是js封裝的函式而已)
為什麼學習前端技術：
為了能看懂前端程式，從而能和後端進行資料互動。
一，web前端技術
問題：你寫網頁能不能遵循web標準？你知不知道web前端技術都有什麼？
Web前端技術是由w3c組織制定的一系列技術的集合，主要包括：
HTML– 結構標準：
CSS– 表現標準、樣式標準：美化
JavaScript，簡稱js，行為標準：負責行為動作、表單驗證、資料互動
二，html發展歷史
html1.0 – 1993年起草了一個草案，純文字格式
html2.0
html3.0
html4.0 – 意識：語法鬆散：Aa– xhtml1.0（x表示嚴格型的，相對嚴格：能相容低版本） --xhtml2.0（想法：絕對嚴格） --瀏覽器廠商反對：咱們自己研發html自己用 – html5.0
最終：html5.0仍然是w3c研發
工作：xhtml1.0 +html5.0
vscode:
外掛
Autofilename提示路徑
Openinbrowser/ open chrome vscode調瀏覽器
Chinese 漢化選單
結構標籤：
Html：網頁整體
Head：網頁頭，儲存需要瀏覽器渲染，使用者只看結果的程式碼 jscss
Body：網頁主體， 存內容
Title：網頁標題
Doctype：文件型別 文件宣告：規定文件dtd格式
規定好所有瀏覽器都以相同的html版本解析接下來的程式碼，為了解決相容性 --html5.0 能相容低版本
常用佈局標籤
標籤語法： <標籤的名字>內容</標籤名字> --雙標記
<標籤名> --單標記
標題： h
段落 p
佈局區塊： div
特殊效果文字小圖片： span
圖片標籤 – img
Src: 查詢圖片********
Alt：替換文字；盲人讀屏軟體支援
Title：提示文字；推廣關鍵字
超連結標籤 --a
單擊跳轉頁面
href: 跳轉地址
線上網站：http://網址
本地檔案：路徑查詢檔案
新視窗開啟： target=“_blank”
HTML概述及HTML文件基本結構
HTML概述
HTML是HyperText Mark-up Language的首字母簡寫，意思是超文字標記語言，超文字指的是超連結，標記指的是標籤，是一種用來製作網頁的語言，這種語言由一個個的標籤組成，用這種語言製作的檔案儲存的是一個文字檔案，檔案的副檔名為html或者htm。
HTML文件基本結構
一個html的基本結構如下：
或者：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>網頁標題</title> </head> <body> 網頁顯示內容 </body> </html>
第一行是文件宣告，第二行是“<html>”標籤和最後一行“</html>”定義html文件的整體，“<head>”標籤和“<body>”標籤是它的第一層子元素，“<head>”標籤裡面負責對網頁進行一些設定以及定義標題，設定包括定義網頁的編碼格式，外鏈css樣式檔案和JavaScript檔案等，設定的內容不會顯示在網頁上，標題的內容會顯示在標題欄，“<body>”內編寫網頁上顯示的內容。
一個html檔案就是一個網頁，html檔案用編輯器開啟顯示的是文字，可以用文字的方式編輯它，如果用瀏覽器開啟，瀏覽器會按照標籤描述內容將檔案渲染成網頁。
HTML文件快速建立
新建一個html文件後，可以用快捷鍵的方式快速建立html文件。快捷鍵：！+ tab鍵，或者html:5+tab鍵
HTML標籤入門
標籤語法：
學習html語言就是學習標籤的用法，html常用的標籤有20多個，學會這些標籤的使用，就基本上學會了HTML的使用。
標籤的使用方法：
<!-- 1、成對出現的標籤：--> <h1>h1標題</h1> <div>這是一個div標籤</div> <p>這個一個段落標籤</p> <!-- 2、單個出現的標籤： --> <br> <img src="images/pic.jpg" alt="圖片"> <!-- 3、帶屬性的標籤，如src、alt 和 href等都是屬性 --> <img src="images/pic.jpg" alt="圖片"> <a href="http://www.baidu.com">百度網</a> <!-- 4、標籤的巢狀 --> <div> <img src="images/pic.jpg" alt="圖片"> <a href="http://www.baidu.com">百度網</a> </div>
塊元素標籤(行元素)和內聯元素標籤(行內元素)
標籤在頁面上會顯示成一個方塊。除了顯示成方塊，它們一般分為下面兩類：
塊元素：在佈局中預設會獨佔一行，寬度預設等於父級的寬度，塊元素後的元素需換行排列。
內聯元素：元素之間可以排列在一行，設定寬高無效，它的寬高由內容撐開。
常用塊元素標籤
1、標題標籤，表示文件的標題，除了具有塊元素基本特性外，還含有預設的外邊距和字型大小
<h1>一級標題</h1> <h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6>
2、段落標籤，表示文件中的一個文欄位落，除了具有塊元素基本特性外，還含有預設的外邊距
<p>本人叫張山，畢業於某大學電腦科學與技術專業，今年23歲，本人性格開朗、 穩重、待人真誠、熱情。有較強的組織能力和團隊協作精神，良好的溝通能力和社 交能力，善於處理各種人際關係。能迅速適應環境，並融入其中。</p> <p>本人熱愛研究技術，熱愛程式設計，希望能在努力為企業服務的過程中實現自身價值。</p>
3、通用塊容器標籤，表示文件中一塊內容，具有塊元素基本特性，沒有其他預設樣式
<div>這是一個div元素</div> <div>這是第二個div元素</div> <div> <h3>自我介紹</h3> <p>本人叫張山，畢業於某大學電腦科學與技術專業，今年23歲，本人性格開朗、 穩重、待人真誠、熱情。有較強的組織能力和團隊協作精神，良好的溝通能力和社 交能力，善於處理各種人際關係。能迅速適應環境，並融入其中。</p> </div>
常用內聯元素標籤
1、超連結標籤，連結到另外一個網頁，具有內聯元素基本特性，預設文字藍色，有下劃線
<a href="02.html">第二個網頁</a> <a href="http://www.baidu.com">百度網</a> <a href="http://www.baidu.com"><img src="images/logo.png" alt="logo"></a> <a href="#">預設連結</a>
2、通用內聯容器標籤，具有內聯元素基本特性，沒有其他預設樣式
<p>這是一個段落文字，段落文字中有<span>特殊標誌或樣式</span>的文字</p>
3、圖片標籤，在網頁中插入圖片，具有內聯元素基本特性，但是它支援寬高設定。
<img src="images/pic.jpg" alt="圖片" />
其他常用功能標籤
1、換行標籤
<p>這是一行文字，<br>這是一行文字</p>
2、html註釋：
html文件程式碼中可以插入註釋，註釋是對程式碼的說明和解釋，註釋的內容不會顯示在頁面上，html程式碼中插入註釋的方法是：
<!-- 這是一段註釋 -->
常用html字元實體
程式碼中成段的文字，如果文字間想空多個空格，在程式碼中空多個空格，在渲染成網頁時只會顯示一個空格，如果想顯示多個空格，可以使用空格的字元實體,程式碼如下：
<!-- 在段落前想縮排兩個文字的空格，使用空格的字元實體： --> <p> 一個html檔案就是一個網頁，html檔案用編輯器開啟顯示的是文字，可以用<br /> 文字的方式編輯它，如果用瀏覽器開啟，瀏覽器會按照標籤描述內容將檔案<br /> 渲染成網頁，顯示的網頁可以從一個網頁連結跳轉到另外一個網頁。</p>
在網頁上顯示 “<” 和 “>” 會誤認為是標籤，想在網頁上顯示“<”和“>”可以使用它們的字元實體，比如：
<!-- “<” 和 “>” 的字元實體為 < 和 > --> <p> <div>是一個html的一個標籤<br> 3 < 5 <br> 10 > 5 </p>