熟悉的html,卻說不出html的味道

html 常常被使用着，卻表達不出對應的點，內心懂！卻說不出html那種味道。

例如：什麼是網頁，對着心中提問（個人回答，網頁就是瀏覽器顯示的頁面）這樣說也沒什麼很差，但總感受缺乏點啥，若是對着內心這麼去說：網頁就是一個文件，一個html文件，這個文件是由圖片、文字、聲音、視頻、等元素組成的，這些元素利用html標籤描述出來，而後經過瀏覽器解析給用戶，以後就造成了網頁。

內心獲得了答案，瞬間豁然開朗 ^^

既然網頁是一個html文件，那html又是什麼？？？

html是超文本標記語言，它是用來描述網頁的一種語言，那超文本又有何含義呢！所謂的超文本就是它加入了圖片、聲音、動畫、多媒體等內容，它超越了文本的限制而且能夠從一個文件跳入另外一個文件，這就是超文本（解除了心中的疑惑）

html須要在瀏覽器上運行（瀏覽器是網頁的運行平臺），經常使用的瀏覽器他們擁有不一樣的內核（渲染引擎：它的做用就是讀取網頁的內容整訊信息，計算網頁的顯示方式，將網頁渲染在瀏覽器上最終展現在咱們眼前）。

說到瀏覽器的不一樣那他們渲染頁面和排版確定會各有差別，那就須要制度去管理它們，也就是web標準（w3c是著名的標準化組織）當咱們遵循了web標準以後可讓網頁被更普遍的設備訪問，更容易被搜索引擎搜尋，使網站更易於維護。

前面說到，網頁就是一個文件，由圖片、文字......等標籤描述出來，經過這些標籤搭建起了網頁的基本結構，不一樣的標籤會被用到這些結構的不一樣場景。也就是說每一個標籤都有不一樣的語義，根據標籤的語義，在合適的地方給一個最合理的標籤，可使結構更加的清晰。

例如：div它是一個大盒子，能夠在這個盒子中放置不一樣的標籤，span它是一個小盒子，在網頁的一行中它能夠放置多個。修飾網頁的標題（<h1>-<h6>），表格(<table></table>)，一段段落能夠包含在(<p></p>)標籤中，換行(<hr>）超連接(<a></a>）， 圖片(<image></image>)，列表(<ul></ul>)，表單及表單控件......以及文本格式化標籤（加粗<strong></strong>，傾斜<em></em>，刪除線<del></del>，下劃線 <ins></ins>）...... 不一樣的標籤在網頁的結構中發揮着不一樣的做用。

連接標籤（ <a></a>）

做用：定義超連接，它自身也有多個種類
    1. 外部連接：
        eg：想跳到百度的頁面（填寫表單成功後跳轉到客戶的頁面）
    2. 內部連接
        eg：網站內部頁面之間相互跳轉（設計稿模擬路由跳轉）
    3. 網頁元素連接
        eg：網頁中圖像，音頻，視頻均可以添加連接
    4. 錨點連接
        eg:點擊連接，能夠快速定位到頁面中的某個位置（在angular2中使用該錨點定位，控制檯會提示找不到路由）
複製代碼

圖像標籤（<image></image>）

做用：定義html的圖像，
    1. src是img標籤的必須屬性（屬於這個標籤的特性），它用於指定圖像文件的路徑和文件名
        eg：路徑（絕對路徑/相對路徑）
            a. 相對路徑常常被使用到，它的路徑參考是以當前的文件爲參考基礎，而創建的目錄路徑
            b. 絕對路徑，它是指目錄下的絕對位置直接達到目錄位置，一般是從盤符開始(常見的就是直接從網上copy一條圖片的連接，這就是一個絕
               對路徑)
    2. alt ：替換文本
    3. title：提示信息
    4. 在沒理解alt與title兩個屬性時，總以爲它兩是同樣的意思（爲了提示）
        a. alt是替換文本，圖片出現網絡錯誤時會出現該文本
        b. title提示文本，鼠標移入圖片上，鼠標下會出現提示信息 
複製代碼

表格標籤 （<table></table>）

做用：用於顯示，展現數據，它可讓數據顯示很是規整，可讀性很是好
    1.表格基本語法：
        table 用於定義表格標籤
        tr 用於定義表格中的行必須嵌套在table中
        th 表示表格表頭部分，必須嵌套在tr中（經常使用於表格第一行，突出重要性，使用th單元格里面的文字會加粗居中顯示）
        td 用於定義表格中單元格，必須嵌套在tr中
        若是表格很長爲了快速定位到元素，能夠將表格分割成表格頭部和表格主體兩大部分（分清表格結構）
            thead：表示頭部區域
            tabody：表示主體部分

    2.常常把thead與th的概念混淆
        a. thead 表明的是表頭區域
        b. th 表明的是表頭中的單元格

    3.表格合併
        a. 跨行合併（須要合併幾行）:rowspan
        b. 跨列合併（須要合併幾列）:colspan
複製代碼

列表標籤

做用：用於佈局，它最大的特色就是整齊有序
    1.無序列表
        <ul>
            <li></li>
        </ul>
        a. 無序列表項沒有級別之分，是並列的
        b. ul中只能嵌套li（不容許直接在ul中放置標籤或者文字）
        c. li至關於一個容器，能夠容納全部元素
    2.有序列表
        <ul>
            <ol></ol>
        </ul>
        a.有序列表有排列順序的列表，各個列表項會按照必定的順序排列定義
        b. ul中只能嵌套li（不容許直接在ul中放置標籤或者文字）
        c. ol至關於一個容器，能夠容納全部元素
        
    3.自定義列表
        場景：經常使用於對術語或者名詞進行描述，定義列表的列表項沒有任何符號
        <dl>
            <dt></dt>
            <dd></dd>
        </dl>
複製代碼

表單

做用：用來收集用戶信息（在網頁中須要收集用戶信息進行交互，此時就能夠用到表單，一個完整的表單一般由表單域，表單控件（表單元素）
提示信息3部分組成）
    a.from（from就是一個表單域，它是包含表單元素的區域）
        做用：from標籤用於定義表單域以實現用戶信息的收集和傳遞，form會將範圍內的表單元素信息提交到服務器

    b.表單控件（表單元素）
        做用：讓容許用戶在表單中輸入或選擇內容
        常使用的，輸入，單選，多選，下拉，文本域，按鈕
        
    c.提示信息
        做用：增長語義
複製代碼

當咱們的結構多了以後，不免會出現不知其意，因此能夠在html中添加一些便於閱讀和理解但又不須要顯示在頁面中的註釋文字，能夠更好的解釋代碼的功能，便於相關人員理解。