前言

學習web前端程式設計技術肯定是以就業拿到高薪工作為主要目的的，可是高薪不會那麼輕易拿到，這是一個最簡單的道理。沒有付出就沒有回報，對你有幫助的話，收藏後記得一定不要忘記轉發哦！

文章篇幅較長，對你有幫助的話，記得轉發幫助跟多小夥伴！！！文末有福利！！

一，html+css基礎

1-1

Html和CSS的關係

學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什麼的：

1. HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊，可以包含文字、圖片、影片等。

2. CSS樣式是表現。就像網頁的外衣。比如，標題字型、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。

3. JavaScript是用來實現網頁上的特效效果。如：滑鼠滑過彈出下拉選單。或滑鼠滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這麼理解，有動畫的，有互動的一般都是用JavaScript來實現的。

1-2

1， HTML標籤不區分大小寫，<h1>和<H1>是一樣的，但建議小寫，因為大部分程式設計師都以小寫為準。

一個HTML檔案是有自己固定的結構的。

<html>

</html>

程式碼講解：

1. <html></html>稱為根標籤，所有的網頁標籤都在<html></html>中。

2. <head> 標籤用於定義文件的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標籤，頭部標籤在下一小節中會有詳細介紹。

3. 在<body>和</body>標籤之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標籤，在這裡的標籤中的內容會在瀏覽器中顯示出來。

1，下面這些標籤可用在 head 部分：

<head>

<meta>

<link>

</head>

2，程式碼註釋不僅方便程式設計師自己回憶起以前程式碼的用途，還可以幫助其他程式設計師很快的讀懂你的程式的功能，方便多人合作開發網頁程式碼。

語法：

3，CSS註釋程式碼

就像在Html的註釋一樣，在CSS中也有註釋語句：用/*註釋語句*/來標明（Html中使用)

1，語義化：說的通俗點就是：明白每個標籤的用途（在什麼情況下我可以使用這個標籤才合理）比如，網頁上的文章的標題就得用標題標籤，網頁上的各個欄目的欄目名稱也可以使用標題標籤。

2，語義化的作用

1）. 更容易被搜尋引擎收錄。

2）. 更容易讓螢幕閱讀器讀出網頁內容。