HTML、 CSS、 JavaScript三者的關係

時間 2019-11-26

原文原文鏈接

HTML、 CSS、 JavaScript三者的關係
    網頁主要由三部分組成：結構（ Structure）、表現（ Presentation）和行爲（ Behavior）
    HTML —— 結構，決定網頁的結構和內容（「是什麼」）
    CSS —— 表現（樣式），設定網頁的表現樣式（「什麼樣子」）
    JavaScript（ JS） —— 行爲，控制網頁的行爲（「作什麼」）
    1、 HTML語言
    1.1什麼是HTML語言（ HTML概述）
    英文全稱： Hyper Text Markup Language
    中文全稱：超文本標記語言
    HTML 語言是製做網頁的最基本語言，而且只能經過web瀏覽器顯示出來。
    Hyper（超）：
    用HTML製做的網頁能夠經過其中的連接從一個網頁「跳轉」至另外一個網頁。
    Text（文本）：
    HTML是一種文本解釋性的程序語言，即它的源代碼將不通過編譯而直接在瀏覽器中運行時被「翻譯」。
    Markup（標記）：
    HTML的基本規則就是用「標記語言」 ---- 成對尖括號組成的標籤元素來描述網頁內容是如何在瀏覽器中顯示的。
    1.2 HTML文檔結構
    HTML文檔通常由兩部分組成：
    1. 文檔所要表達的內容信息（文字、圖片等）；
    2. 一系列的HTML標籤；
    1.3 HTML標籤
    1.3.1 什麼是HTML標籤
    1. HTML標籤是用 <> 所括住的指令，主要分爲：
        單標籤： <起始標籤/>
        雙標籤： <起始標籤></結束標籤>
    例如：
        <br/>
        <div></div>
        2. 一般使用的是雙標籤。有一個起始標籤就對應有一個結束標籤。標籤內容寫在起始標籤和結束標籤之間。
        <div>標籤內容</div>
        3. 在元素的起始標籤中，還能夠包含「屬性」來設置元素的其餘特性。一個標籤能夠有多個屬性,每一個屬性之間用空格隔開。
        <div 屬性名="屬性值"></div>
        例如：
        <div class="wrap" id="wrap"></div>
    4. 每一對雙標籤之間能夠嵌套，但不能交叉。
    正確示例：
        <div>
        <p></p>
        </div>
        錯誤示例：
        <div>
        <p>
        </div>
        </p>
    1.4 編碼器
    1.4.1 WebStorm源碼主體標籤含義
        <!DOCTYPE> ：
        是一個聲明不是 HTML 標籤；它是用來告訴 web 瀏覽器要使用哪一個 HTML 版原本對頁面進行編寫。
        <html>：
        <html>是文檔標識符，它是成對出現的，首標籤<html>和尾標籤</html>分別位於 HTML 文檔的最前面和最後面，明確地表示文檔是以超文本標識語
        言（ html)編寫的。該標籤不帶有任何的屬性。
        <head>：
        <head>標籤用於定義文檔的頭部，它是全部頭部元素的容器。 <head> 中的元素能夠引用腳本、指示瀏覽器在哪裏找到樣式表、提供元信息等等。
        <meta>：
        <meta>標籤位於文檔的頭部，用於定義文件信息，對網頁文件進行說明。其中name屬性主要用於描述網頁，與之對應的屬性值爲content， content中
        的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
        <body>：
        <body>標籤用於定義文檔的主體，即在瀏覽器上看到的網頁內容。
    1.5 HTML標籤的使用
    1. HTML註釋
    註釋內容可插入文本中任何位置，其內容不在網頁中顯示，只在源碼文檔中供開發者備註使用。
         方法適用於文檔主體部分
        //註釋內容
        /*註釋內容*/ 方法適用於文檔引用標籤部分
        2. 特殊字符
        在 HTML 代碼中直接輸入一些特殊字符是沒有效果的，須要用專有的代碼標記。
          
        < 
        > 
        © 
        ® 
        & 
         
    3. div塊標籤
    <div>這是一個div塊，一般用於佈局</div>
    4. 正文標題標籤
        <h1>heading</h1>
        <h2>heading</h2>
        <h3>heading</h3>
        <h4>heading</h4>
        <h5>heading</h5>
        <h6>heading</h6>
    注意：只有h1~h6 六個標籤，沒有h7...
    5. 文本節標籤
    <span>這是一個文本節</span>
    6. 強調標籤
    <strong>增強語氣</strong>
    7. 圖片標籤
    <img src="圖片地址"/>
    8. 段落標籤
    <p>這是一個段落</p>
    9. 超級連接標籤
    <a href="連接地址">超連接，打開新窗口</a>
    10. 文本域
    <textarea>文本內容</textarea>
    11. 無序列表標籤
    <ul>
    <li>第一個</li>
    <li>第二個</li>
    <li>第三個</li>
    </ul>
    12. 有序列表標籤
    <ol>
    <li>第一個</li>
    <li>第二個</li>
    <li>第三個</li>
    </ol>
    13. 自定義列表
    <dl>
    <dt>自定義列表項</dt>
    <dd>自定義列表項的定義</dd>
    </dl>
    14. table表格
    <table>
    <tr>
    <td>娛樂項目</td>
    <td>項目支出</td>
    </tr>
    <tr>
    <td>聚餐</td>
    <td>200元</td>
    </tr>
    </table>
    15. form表單
    <form>
    表單輸入控件
    </form>
    16. 控制標籤
    <label>控制標籤，平時無效果，用做標記使用</label>
    17. 表單輸入控件
    <input type="text"> 
    <input type="password"> 
    <input type="radio"> 
    <input type="button" value="點擊"> 
    <input type="checkbox"> 
    <input type="submit"> 
    <input type="reset"> 
    <input type="file"> 
    button和submit的區別：
    button 就是一個普通按鈕，沒有任何功能。而 submit 在用戶點擊後會自動提交 form 表單。
    18. 下拉列表
    <select>
    <option>川菜</option>
    <option>粵菜</option>
    <option>北方菜</option>
    <option>上海菜</option>
    <option>西餐</option>
    <option>泰國菜</option>
    </select>
    19. 內聯框架
    <iframe src="須要顯示的網頁連接地址"></iframe>html