前端基礎知識第一章---HTML
      
    
      
        網友投稿
        853
        2022-05-29
		    
      
    
                    
      一、HTML 簡介
      （1）網頁
      網頁是網站中的一“頁”，通常是
      HTML 格式
      的文件，它要通過瀏覽器來閱讀。
      網頁是構成網站的基本元素
      ，它通常由圖片、鏈接、文字、聲音、視頻等元素組成。通常我們看到的網頁，常見以
      .htm 或 .html
      后綴結尾的文件，因此將其俗稱為 HTML 文件。
      HTML 指的是
      超文本標記語言
      (Hyper Text Markup Language) ，它是用來描述網頁的一種語言。
      HTML 不是一種編程語言，而是一種標記語言 (markup language)。標記語言是一套標記標簽 。
      （2）常用瀏覽器
      瀏覽器是網頁顯示、運行的平臺。常用的瀏覽器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari 和 Opera等。平時稱為五大瀏覽器。
      瀏覽器內核（渲染引擎 ：負責讀取網頁內容，整理訊息，計算網頁的顯示方式并顯示頁面
      （3）Web 標準（重點）
      Web 標準是由 W3C 組織和其他標準化組織制定的一系列標準的集合。
      W3C（萬維網聯盟）是國際最著名的標準化組織。
      遵循 Web 標準除了可以讓不同的開發人員寫出的頁面更標準、更統一外，還有以下優點：
      讓 Web 的發展前景更廣闊。
      內容能被更廣泛的設備訪問。
      更容易被搜尋引擎搜索。
      降低網站流量費用。
      使網站更易于維護。
      提高頁面瀏覽速度
      主要包括
      結構（Structure）、表現（Presentation）和行為（Behavior）
      三個方面。
      簡單理解：
      結構寫到 HTML 文件中， 表現寫到 CSS 文件中， 行為寫到 JavaScript 文件中
      。
      二、HTML 標簽（上）
      （1）HTML 語法規范
      HTML 標簽是
      由尖括號包圍的關鍵詞
      ，例如 。
      HTML 標簽通常是
      成對出現
      的，例如  和  ，我們稱為
      雙標簽
      。標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽。
      有些特殊的標簽必須是單個標簽（極少情況），例如 
      ，我們稱為
      單標簽
      。
      雙標簽關系可以分為兩類：
      包含關系
      和
      并列關系
      。
      其基本語法如下：
               
      （2）HTML 基本結構標簽
      HTML頁面也稱為 HTML 文檔.
        第一個 HTML 網頁   乾坤未定，你我皆是黑馬  
      每個網頁都會有一個基本的結構標簽（也稱為骨架標簽），頁面內容也是在這些基本標簽上書寫。
      （3）網頁開發工具
      VSCode 的使用
      雙擊打開軟件。
      新建文件（Ctrl + N ）。
      保存（Ctrl + S ）, 注意移動要保存為 .html 文件
      Ctrl + 加號鍵 ，Ctrl + 減號鍵 可以放大縮小視圖
      生成頁面骨架結構。
      輸入! 按下 Tab 鍵。
      利用插件在瀏覽器中預覽頁面：單擊鼠標右鍵，在彈出窗口中點擊“Open In Default Browser”。
      VSCode 工具生成骨架標簽新增代碼
      < !DOCTYPE> 標簽
      lang 語言
      charset 字符集
       文檔類型聲明，作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁。
        
      用來定義當前文檔顯示的語言。
      en定義語言為英語
      zh-CN定義語言為中文
        
      字符集 (Character set)是多個字符的集合。以便計算機能夠識別和存儲各種文字。
      在標簽內，可以通過 標簽的 charset 屬性來規定 HTML 文檔應該使用哪種字符編碼。
      注意：下面語法是必須要寫的代碼，否則可能引起亂碼的情況。一般情況下，統一使用“UTF-8”編碼，盡量統一寫成標準的 “UTF-8”，不要寫成 “utf8” 或 “UTF8”。
       
      （4）HTML 常用標簽
      為了使網頁更具有語義化，我們經常會在頁面中用到標題標簽。HTML 提供了 6 個等級的網頁標題，即
       - - - 
       。
       定義最大的標題，
       定義最小的標題。
      這是標題 1
       
      這是標題 2
       
      這是標題 3
       
      這是標題 4
       
      這是標題 5
       
      這是標題 6
      在網頁中，要把文字有條理地顯示出來，就需要將這些文字分段顯示。在 HTML 標簽中，
       標簽用于定義段落
      ，它可以將整個網頁分為若干個段落。
      這是一個段落。
       
      在 HTML 中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后才自動換行。如果希望某段文本強制換行顯示，就需要使用
      換行標簽 
      。

       
      在網頁中，有時需要為文字設置粗體、斜體 或下劃線等效果，這時就需要用到 HTML 中的文本格式化標簽，使文字以特殊的方式顯示。標簽語義: 突出重要性， 比普通文字更重要.
       和  是沒有語義的，它們就是一個盒子，用來裝內容的。
      特點：
       標簽用來布局，但是現在一行只能放一個
      。 大盒子
       標簽用來布局，一行上可以多個 。小盒子
      在 HTML 標簽中， 標簽用于定義 HTML 頁面中的圖像。
      其基本語法如下：
       
      圖像標簽的其他屬性：
      圖像標簽屬性注意點：
      圖像標簽可以擁有多個屬性，必須寫在標簽名的后面。
      屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開。
      屬性采取鍵值對的格式，即 key=“value" 的格式，屬性 =“屬性值”。
      ① 路徑之相對路徑
      相對路徑
      ：以
      引用文件所在位置
      為參考基礎，而建立出的目錄路徑。
      簡單來說，
      圖片相對于 HTML 頁面的位置
      ②路徑之絕對路徑
      絕對路徑
      ：是指目錄下的絕對位置，直接到達目標位置，通常是從盤符開始的路徑。
      例如，“D:\web\img\logo.gif”或完整的網絡地址“http://www.itcast.cn/images/logo.gif”
       文本或圖像 
      兩個屬性的作用如下：
      外部鏈接: 例如  百度。
      內部鏈接:網站內部頁面之間的相互鏈接. 直接鏈接內部頁面名稱即可，例如  首頁 。
      空鏈接: 如果當時沒有確定鏈接目標時， 首頁 。
      下載鏈接: 如果 href 里面地址是一個文件或者壓縮包，會下載這個文件。
      網頁元素鏈接: 在網頁中的各種網頁元素，如文本、圖像、表格、音頻、視頻等都可以添加超鏈接.
      錨點鏈接: 點我們點擊鏈接,可以快速定位到頁面中的某個位置.
      （5）HTML 中的注釋和特殊字符
      如果需要在 HTML 文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽。注釋標簽里面的內容是給程序猿看的, 這個代碼是不執行不顯示到頁面中的.
      HTML中的注釋以“”結束。
       快捷鍵: ctrl + /
      添加注釋是為了更好地解釋代碼的功能，便于相關開發人員理解和閱讀代碼，
      程序是不會執行注釋內容的
      。
      三、HTML 標簽（下）
      （1）表格標簽
      表格主要用于顯示、展示數據
      ，因為它可以讓數據顯示的非常的規整，可讀性非常好。特別是后臺展示數據的時候，能夠熟練運用表格就顯得很重要。一個清爽簡約的表格能夠把繁雜的數據表現得很有條理。
       ...  ... 
       
       單元格內的文字
       
       是用于定義表格的標簽
      。
        標簽用于定義表格中的行
      ，必須嵌套在 
       
      標簽中。
        用于定義表格中的單元格
      ，必須嵌套在標簽中。
      字母 td 指表格數據（table data），即數據單元格的內容。
      一般表頭單元格位于表格的第一行或第一列，表頭單元格里面的文本內容加粗居中顯示。
       標簽
      表示 HTML 表格的表頭部分(table head 的縮寫)
      其基本語法如下：
       ...  ... 
       
        姓名
      總結：表頭單元格也是單元格, 常用于表格第一行, 突出重要性, 表頭單元格里面的文字會加粗居中顯示。
      表格標簽這部分屬性我們實際開發我們不常用，后面通過 CSS 來設置。我們現在只需要記住這些英語單詞，直觀感受表格的外觀形態即可。
      使用場景:因為表格可能很長,為了更好的表示表格的語義，可以將表格分割成 表格頭部和表格主體兩大部分。
      在表格標簽中，分別用：
      標簽 表格的頭部區域
      、
      標簽 表格的主體區域
      。這樣可以更好的分清表格結構。
       ：用于定義表格的頭部。 內部必須擁有  標簽。一般是位于第一行；
       ：用于定義表格的主體，主要用于放數據本體 ；
      以上標簽都是放在 
       
       標簽中；
      跨行合并：rowspan=“合并單元格的個數”
      跨列合并：colspan=“合并單元格的個數”
      跨行：最上側單元格為目標單元格, 寫合并代碼
      跨列：最左側單元格為目標單元格, 寫合并代碼
      先確定是跨行還是跨列合并；
      找到目標單元格. 寫上合并方式 = 合并的單元格數量。比如：；
      刪除多余的單元格；
      （2）列表標簽
      表格是用來顯示數據的，那么
      列表就是用來布局的
      。
      根據使用情景不同，列表可以分為三大類：
      無序列表、有序列表和自定義列表
      。
         標簽
        表示 HTML 頁面中項目的無序列表，一般會以項目符號呈現列表項，而列表項使用
      •  標簽
        定義。
        其基本語法如下：
           
        • 列表項1
          •  
        • 列表項2
          •  
        • 列表項3
          •  ... 
        無序列表的各個列表項之間沒有順序級別之分，是并列的。
           中只能嵌套
        • ，直接在
            標簽中輸入其他標簽或者文字的做法是不被允許的。
          • 與
            • 之間相當于一個容器，可以容納所有元素。
            無序列表會帶有自己的樣式屬性，但在實際使用時，我們會使用 CSS 來設置。
            有序列表即為有排列順序的列表，其各個列表項會按照一定的順序排列定義。
            在 HTML 標簽中，
               標簽用于定義有序列表
              ，列表排序以數字來顯示，并且使用
            1.  標簽來定義列表項。
              其基本語法如下：
                 
              1. 列表項1
                2.  
              2. 列表項2
                3.  
              3. 列表項3
                4.  ... 
                中只能嵌套
              1. ，直接在
                  標簽中輸入其他標簽或者文字的做法是不被允許的
                  。
                1.  與 
                  2. 之間相當于一個容器，可以容納所有元素。
                  有序列表會帶有自己樣式屬性，但在實際使用時，我們會使用 CSS 來設置。
                  自定義列表的使用場景：自定義列表常用于對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。
                  在 HTML 標簽中，
                   標簽用于定義描述列表（或定義列表），該標簽會與 
                  （定義項目/名字）和
                  （描述每一個項目/名字）一起使用。
                  其基本語法如下：
                   
                  華為
                   
                  公司介紹
                   
                  公司年報
                   
                  公司治理
                   ... 
                   里面只能包含 
                   和 
                  ；
                   和 
                  個數沒有限制，經常是一個
                   對應多個
                  ；
                  （3）表單標簽
                  網頁中的表單展示：
                  使用表單目的是為了
                  收集用戶信息
                  。
                  在我們網頁中， 我們也需要跟用戶進行交互，收集用戶資料，此時就需要表單。
                  在 HTML 中，一個完整的表單通常由
                  表單域、表單控件（也稱為表單元素）和 提示信息
                  3個部分構成。
                  表單域是一個包含表單元素的區域。
                  在 HTML 標簽中，
                  標簽
                  用于定義表單域，以實現用戶信息的收集和傳遞。
                  會把它范圍內的表單元素信息提交給服務器。
                  其基本語法如下：
                   各種表單元素控件 
                  常用屬性：
                  在英文單詞中，input 是輸入的意思，而在表單元素中
                  標簽用于收集用戶信息
                  。
                  在  標簽中，包含一個
                  type 屬性
                  ，根據不同的 type 屬性值，輸入字段擁有很多種形式（可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等）。
                  其基本語法如下：
                   
                  type 屬性的屬性值及其描述如下：
                  除 type 屬性外，標簽還有其他很多屬性，其常用屬性如下：
                  name 和 value 是每個表單元素都有的屬性值,主要給后臺人員使用；
                  name 表單元素的名字, 要求
                  單選按鈕和復選框要有相同的name值
                  ；
                  checked屬性主要針對于單選按鈕和復選框
                  , 主要作用一打開頁面,就要可以默認選中某個表單元素；
                  maxlength 是用戶可以在表單元素輸入的最大字符數, 一般較少使用；
                  為 input 元素定義標注
                  （標簽）
                  。
                  用于綁定一個表單元素, 當點擊
                  選擇對應的表單元素上,用來增加用戶體驗。
                  其基本語法如下：
                   
                  核心： 
                  在頁面中，如果有多個選項讓用戶選擇，并且想要節約頁面空間時，我們可以
                  使用    ... 
                  通過