前端入門1-基礎概念
本篇文章已授權微信公眾號 dasu_Android（大蘇）獨家釋出
宣告
本系列文章內容全部梳理自以下四個來源：
作為一個前端小白，入門跟著這四個來源學習，感謝作者的分享，在其基礎上，通過自己的理解，梳理出的知識點，或許有遺漏，或許有些理解是錯誤的，如有發現，歡迎指點下。
正文
相關概念-HTML CSS JS
- HTML : 內容層---表示某個標籤在頁面中是什麼角色
- CSS : 樣式層---表示某個標籤在頁面中該呈現什麼樣式
- JavaScript : 行為層---頁面與使用者的互動行為
通俗的講：Html 只負責文件的語義和結構，它描述了網頁的內容和結構。
內容的呈現則由應用於元素上的 CSS 樣式控制，它描述了網頁的表現與展示效果。
JavaScript 則是負責網頁的功能與行為，如與使用者的互動。
基礎-HTML
Html 是一種標記語言，不是程式語言，需要明確這點。
程式語言，通俗的理解就是向計算機發送指令，通過程式讓計算機達到我們想要的功能。
而標記語言，可以通俗的理解成對文字增加一些標誌資訊，類似於批註資訊來說明文字內容
更通俗點理解，一大段文字內容，毫無重點，毫無結構，讓人不好理解。所以，Html 就通過大夥約定俗成的規範，利用一些標籤，來指明，這一段文字是標題，這一段文字是個表格，這一段文字是個列表，這一段文字是導航選單，這裡需要分段，這裡需要分行，這幾個詞是關鍵詞，需要重點標記一下，等等等等。
Html 可以這麼通俗的理解。那麼這個大夥約定俗成的規範，其實也就是由 W3C 來作為官方釋出的標準規範。
定了規範，自然是想要讓人遵守才有意義。所以，在這裡，W3C 所定義的標準規範，遵守方其實也就是各大瀏覽器。不同的瀏覽器廠商，根據 W3C 釋出的標準規範來解析每一份 HTML 文件，那麼相同的 HTML 文件在不同的瀏覽器上才會有相同的作用。
而一旦某些瀏覽器廠商沒有遵守這些規範，那麼前端開發人員就要為此做一些相容適配工作，這就跟 Android 系統由 Google 開發並開源一樣的道理，手機廠商都可以使用這開源的系統，但不同廠商都喜歡做一些自己的修改，這就導致了 Android 開發人員經常需要面對的適配工作問題。
基本概念
<a class="ddd" href="index.html">點選跳轉</a>
標籤：<> 帶有這種符號的稱為標籤，跟 Android 中的標籤一樣，分開始標籤，結束標籤
內容：文字內容，上圖中的點選跳轉四字
屬性：跟 Android 中的 xml 裡的標籤一樣，每個標籤有自己的一些屬性，另外，Html 有一些全域性屬性，比如上述的 class，這個屬性所有標籤都可以用。
元素：標籤 + 內容
基礎-CSS
CSS 負責文字樣式的呈現，既然將 HTML 和 CSS 分離開，各自只負責各自的職責，那麼肯定需要某種方式將兩者連線在一起。
更準確的說，是在 HTML 文件中該如何使用 CSS，因為 HTML 文件是網際網路的基礎，一個個網頁就是一份份HTML 文件，既然 HTML 文件是基礎，那麼就是要明確在 HTML 文件中該如何使用 CSS。
總共有三種方式：全域性屬性 style，style 標籤，link 標籤
CSS 最終作用的物件其實就是 HTML 文件中的每個元素
全域性屬性 style
第一種方式：全域性屬性 style 是直接作用於指定的標籤上了，用法就直接將需要的樣式宣告即可，如：
<a href="index.html" style="background: gray; color: #6a90d9">點選跳轉</a>
style 是所有標籤都具有的屬性，稱之為全域性屬性。
剩餘兩種方式，都是集中將所有的 CSS 樣式管理存放，因此如果需要作用到具體元素上，要藉助選擇器來實現，選擇器後面再說，先看這兩種方式的使用：
style 標籤內嵌方式
<style type="text/css">
a {
background: gray;
color: #6a90d9;
}
</style>
link 標籤引用外部檔案方式
<link type="text/css" rel="stylesheet" href="css/nms.css">
style 標籤和 link 標籤都是 HTML 文件中的一種標籤，兩者都可以用來連線 css 程式碼，區別一種是將 css 程式碼內嵌在 HTML 文件中，一種是直接引用外部 css 檔案。
但這兩種相比較於第一種使用全域性屬性的方式，它們並沒有直接在相關聯的元素上書寫，因此需要有一種機制，來將這些 css 程式碼關聯到需要作用的元素物件上，這個機制就叫： 選擇器 。
選擇器
選擇器是專門用來將 css 程式碼關聯到指定的 HTML 文件中的元素物件上的，畢竟 css 已經被抽離出 HTML，各自負責各自的職責，但總歸需要一種橋樑將兩者關聯在一起。
選擇器很多，規則也很多，足夠覆蓋各種各樣的場景，這裡只列舉幾種常見的選擇器：
元素選擇器
<a class="myClass" href="index.html">點選跳轉</a>
<span class="myClass">另一文字</span>
<style type="text/css">
a {
background: gray;
color: #6a90d9;
}
</style>
效果：作用於 HTML 文件中的所有 a 標籤的元素上
id選擇器
<a id="myId" href="index.html">點選跳轉</a>
<style type="text/css">
#myId {
background: gray;
color: #6a90d9;
}
</style>
id 在 HTML 文件中需唯一存在，所有 id 選擇器只作用於單個元素
class 選擇器
<a class="myClass" href="index.html">點選跳轉</a>
<span class="myClass">另一文字</span>
<style type="text/css">
.myClass {
background: gray;
color: #6a90d9;
}
</style>
HTML 文件中可對多個元素應用相同 class，所以 class 可同時作用於多個元素
屬性選擇器
<a class="myClass" href="index.html">點選跳轉</a>
<span class="myClass">另一文字</span>
<style type="text/css">
[href] {
background: gray;
color: #6a90d9;
}
</style>
作用於所有具有 href 屬性的元素，不管有沒有使用
組合選擇器
<a class="myClass" href="index.html">點選跳轉</a>
<span class="myClass">另一文字</span>
<style type="text/css">
a.myClass {
background: gray;
color: #6a90d9;
}
</style>
元素選擇器和 class 選擇器組合使用，作用於 a 元素中有宣告 myClass 型別的元素
通用選擇器
<style type="text/css">
* {
background: gray;
}
</style>
作用到所有元素上
基礎-JavaScript
Js 是指令碼語言，可用於增加網頁的互動功能，及各種行為功能。
既然是一門語言，那麼學習這麼指令碼語言自然需要先掌握其語法，以及執行方式。
瀏覽器解析 HTML 文件是按順序解析的，也就是說，當遇到指令碼語言時，也會按順序一條條的解釋執行，直至將指令碼語言執行結束再繼續解析文件。這就解釋了，為什麼一份 HTML 文件裡，<script> 標籤經常是在各種各樣的位置出現的。
而 HTML 文件使用 js 的方式是通過 <script> 標籤來實現，如：
內嵌
<script>
console.log("hello world")
</script>
引用外部 js 檔案
<script src="js/hello.js"></script>
大家好，我是 dasu，歡迎關注我的公眾號（dasuAndroidTv），如果你覺得本篇內容有幫助到你，可以轉載但記得要關注，要標明原文哦，謝謝支援~
dasuAndroidTv2.png