HTML 元素

元素內(nèi)容

1.元素可以是純文本內(nèi)容,也可以是其他的html元素.如果元素內(nèi)容包含其他的元素,則稱之為元素嵌套.例如"div標(biāo)簽中嵌套著p標(biāo)簽".注:元素與標(biāo)簽表示的意義一致.


<div>

    <p>嵌套標(biāo)簽</p>

</div>

2.一個html中的div標(biāo)簽可以嵌套多個標(biāo)簽,例如p和h1標(biāo)簽,此時,我們習(xí)慣稱之為div標(biāo)簽為父標(biāo)簽,p和h1是子標(biāo)簽,同時p和h1標(biāo)簽又是同級元素,這種嵌套關(guān)系可以又多層.


<div>

    <p>嵌套標(biāo)簽1</p>

    <h1>嵌套標(biāo)簽2</h1>

</div>

3.單標(biāo)簽是不能添加元素內(nèi)容的.例如"<br />"

標(biāo)簽級別

概念:根據(jù)標(biāo)簽內(nèi)部存放的內(nèi)容,可以將標(biāo)簽劃分為"容器級別"和"文本級別"兩個級別.

容器級別:內(nèi)部可以存放任何內(nèi)容,包含容器級別標(biāo)簽.如div標(biāo)簽等.

文本級別:內(nèi)部只能存放文本內(nèi)容或者類似文本內(nèi)容,如圖片等.例如p標(biāo)簽.文本級別標(biāo)簽內(nèi)部不能存放容器級別的標(biāo)簽.

HTML 元素的特性

1.元素間對空格,換行,縮進(jìn)等形成的空白不敏感,有無空白在對瀏覽器中的加載效果沒有影響.瀏覽器識別的只是元素的開始和結(jié)束以及元素之間的相互嵌套關(guān)系.

2.空白折疊現(xiàn)象:元素內(nèi)容如果是文本或者類似文本(圖片)等內(nèi)容,如果之間有空白或者換行,縮進(jìn)等空白字符,瀏覽器在加載時,連接在一起的空白會折疊成一個空格顯示,這就是空白折疊現(xiàn)象.

HTML 書寫規(guī)范

1.書寫位置:必須寫在開始標(biāo)簽或者單標(biāo)簽之后.

2.屬性包含:屬性名(key),屬性值(value),標(biāo)簽中可以包含屬性名與屬性值,寫法是k='v'的格式.

3.一個標(biāo)簽可以設(shè)置不同的屬性,屬性之間用空格分隔.

4.部分標(biāo)簽的屬性可以有多個值,多個值包含在一個"引號中",值與值中間用空格分開.

HTML 骨架解析

1.HTML標(biāo)簽:

    作用:定義HTML文件的根元素,表示整個的HTML文檔,所有的標(biāo)簽要書寫在HTML標(biāo)簽內(nèi)部.

2.<head>標(biāo)簽:

    作用:用于存放<title>,<meta>,<base>,<style>,<script>,<link>等.內(nèi)部用于對網(wǎng)頁的設(shè)置,除了<title>標(biāo)簽中的內(nèi)容會在網(wǎng)頁中顯示,其他的均不會顯示在瀏覽器上.

3.<title>標(biāo)簽:

    作用:

        1.讓頁面擁有一個屬于自己的標(biāo)題.

        2.title中的標(biāo)題可以作為搜索引擎抓取時的關(guān)鍵字,提高SEO搜索引擎的優(yōu)化.

        3.內(nèi)部的內(nèi)容會顯示在搜索結(jié)果的標(biāo)題部分.

        4.作為瀏覽器收藏夾默認(rèn)的網(wǎng)頁標(biāo)題.

    注意:

        建議網(wǎng)頁必須添加<title>標(biāo)簽中的內(nèi)容,內(nèi)容盡量精簡,提取網(wǎng)頁的關(guān)鍵字.

4.<body>標(biāo)簽:

    作用:定義網(wǎng)頁的主體部分,用于存放所有的HTML顯示內(nèi)容的標(biāo)簽.內(nèi)容顯示在瀏覽器窗口內(nèi).

5.DTD:

    概念:完整的HTML文件的第一行內(nèi)容叫做文檔定義類型,英文DocType Definition,簡稱DTD.也稱作文檔聲明類型,DocType Declaration.

    ```

    <!DOCTYPE html> html5的簡寫

    ```

6.命名空間:

    概念:<html>元素表示整個網(wǎng)頁文檔,在開始標(biāo)簽上設(shè)置了命名空間xmlns屬性.

    ```

    <html lang="en">

    </html>

    ```

    作用:元素的命名空間規(guī)定了在不同用戶瀏覽器中標(biāo)簽語義遵循的統(tǒng)一標(biāo)準(zhǔn),避免出現(xiàn)標(biāo)簽名沖突.這個標(biāo)準(zhǔn)使用的就是一個固定網(wǎng)址"https://www.w3.org/1999/xhtml"中的規(guī)范.

7.字符集:

    <head>標(biāo)簽內(nèi)部的<meta>標(biāo)簽通過http-equiv屬性定義了當(dāng)前網(wǎng)頁所使用的字符編碼.

    ```

    <meta charset="UTF-8">  html5簡寫

    ```

8.字符集常見問題:

    1.如果對網(wǎng)頁加載沒有要求,或者制作的是外文網(wǎng)站,可以選擇utf-8.

    2.如果制作的是中文網(wǎng)站,里面含有大量的中文,且對網(wǎng)友加載速度有要求,推薦使用gbk,因為在gbk中一個中文字符占用2個字節(jié),在utf-8中,一個中文占3個字符.

    注意:meta標(biāo)簽聲明的字庫,必須和編譯軟件默認(rèn)編譯字庫相同,否則會出現(xiàn)兩個字庫不匹配,瀏覽器加載時出現(xiàn)亂碼.

常用標(biāo)簽

標(biāo)題標(biāo)簽

概念:

    1.是通過h1-h6六個標(biāo)簽分別對應(yīng)六個級別的標(biāo)題進(jìn)行定義的.

    2.h1對應(yīng)最大的標(biāo)題,h6對應(yīng)最小的標(biāo)題.

    3.h1-h6都是雙標(biāo)簽,且都是容器級標(biāo)簽.

作用:

    標(biāo)題標(biāo)簽的作用是給標(biāo)簽內(nèi)部的元素添加對應(yīng)級別的標(biāo)題語義,不負(fù)責(zé)文字的粗體,字號等樣式.樣式是由css設(shè)定的.

注意:

    1.標(biāo)題標(biāo)簽不可以嵌套標(biāo)題標(biāo)簽.

    2.同一個頁面中只能出現(xiàn)一個h1標(biāo)簽.

段落標(biāo)簽

概念:段落標(biāo)簽是通過<></>標(biāo)簽定義的.p標(biāo)簽是雙標(biāo)簽,且為文本標(biāo)簽,內(nèi)部只能放置文本,圖片,表單元素,或者廢棄的<font>標(biāo)簽等.

語法:<p>段落標(biāo)簽</p>

作用:標(biāo)簽的作用是給標(biāo)簽內(nèi)的內(nèi)容添加一個完整段落的語義,不負(fù)責(zé)內(nèi)容自動換行的樣式.

換行標(biāo)簽

概念:<br />標(biāo)簽表示一個換行標(biāo)簽,是一個單標(biāo)簽.只是強制換行,沒有語義.

文本格式化

概念:html中用一些標(biāo)簽來修飾文本的格式,比如字體加粗,傾斜等.文本格式化的標(biāo)簽均為雙標(biāo)簽,內(nèi)部只能書寫文字.

語義化標(biāo)簽:

    em:加重語義化,表示傾斜.

    strong:字體加粗.

    sub:定義下標(biāo)字.

    sup:定義上標(biāo)字.

    ins:定義插入字,自帶下劃線效果.

    del:定義刪除字.

圖像標(biāo)簽

概念:圖像是由<img>標(biāo)簽進(jìn)行定義的,是一個單標(biāo)簽.相當(dāng)于一個特殊的文本.

作用:在指定的位置添加一張圖片.

屬性:

    src:圖片的地址

    width:圖像的寬度,建議在css中修改.如果不設(shè)置會以圖片的原高度和寬度進(jìn)行展示.如果只設(shè)置一個,高度和寬度會進(jìn)行等比例縮放.單位是px.

    height:圖像的高度,建議在css中修改.如寬度.

    border:圖像的邊框,建議在css中修改.

    title:設(shè)置提示文本,當(dāng)鼠標(biāo)移入到圖片中的時候會顯示提示文本.

    alt:設(shè)置圖像沒有找到時的替換文本,當(dāng)圖片加載失敗的時候,頁面展示替換文本.

總結(jié):img標(biāo)簽中最重要的是src屬性,是必填標(biāo)簽,盡量使用alt屬性對圖片進(jìn)行說明,添加相對關(guān)鍵詞可以有利于SEO搜索引擎的優(yōu)化.

音頻標(biāo)簽

概念:音頻通過<audio>標(biāo)簽進(jìn)行定義.是一個雙標(biāo)簽,需要使用scr屬性設(shè)置音頻查找路徑.支持"mp3",".ogg",".wav"等格式.

注意:音頻標(biāo)簽加載后不會自動顯示播放的控制條,需要使用controls屬性進(jìn)行設(shè)置,屬性值也是controls.

例:<audio src="../audio/test.mp3" controls="controls"></audio>

視頻標(biāo)簽

概念:視頻通過<video>標(biāo)簽進(jìn)行定義,也是一個雙標(biāo)簽,需要使用scr屬性設(shè)置視頻查找路徑.支持"mp4",".ogg", ".webm"等格式.

注意:視頻標(biāo)簽加載后不會自動顯示播放的控制條,需要使用controls屬性進(jìn)行設(shè)置,屬性值也是controls.

例:<video src="../video/test.mp4" controls="controls"></video>

超鏈接

概念：html使用超鏈接與網(wǎng)絡(luò)上的另一個文檔相連接，超鏈接可以是一個字，一張圖片或听，可以點擊這些內(nèi)容跳轉(zhuǎn)到一個新的文檔或者當(dāng)前文檔中的某個部分。在html中使用<a>標(biāo)簽表示超鏈接標(biāo)簽审丘，是一個雙標(biāo)簽。
作用:在指定的位置添加超鏈接勾给，提供用戶點擊和跳轉(zhuǎn)滩报。可以實現(xiàn)跨頁面跳轉(zhuǎn)和頁面內(nèi)跳轉(zhuǎn)兩種方式播急。
屬性：
    href：超文本引用脓钾，用于規(guī)定目標(biāo)的鏈接地址。
    target：跳轉(zhuǎn)顯示方式桩警。默認(rèn)屬性值是"_self"可训，在當(dāng)前窗口打開新的標(biāo)簽。"_blank"表述在新的窗口打開鏈接捶枢。
    title：設(shè)置鼠標(biāo)懸停時的提示文本握截。
語法：<a  target="_blank" title="超鏈接">超鏈接</a>

錨點跳轉(zhuǎn)

頁面內(nèi)錨點跳轉(zhuǎn)

概念：這種跳轉(zhuǎn)方式實現(xiàn)的是從某個位置跳轉(zhuǎn)到同頁面的另一個位置。制作方法分為兩個步驟烂叔，分別是制作錨點和添加鏈接谨胞。
制作錨點：表示跳轉(zhuǎn)的位置。
    1.在需要跳轉(zhuǎn)的標(biāo)簽中添加"id"屬性蒜鸡。屬性值必須是唯一的胯努。命名規(guī)范。
    2.在需要被跳轉(zhuǎn)的標(biāo)簽之前添加一個空的"a"標(biāo)簽术瓮，并且設(shè)置"name"屬性康聂。
添加鏈接：在超鏈接中設(shè)置href屬性，屬性值以"#"開頭胞四，后面跟"id"屬性值或者"name"屬性值。

語法：
    1.<a href="#h1">跳轉(zhuǎn)到h1標(biāo)簽</a>
      <h1 id="h1">被跳轉(zhuǎn)鏈接</h1>

    2.<a href="#h1">跳轉(zhuǎn)到h1標(biāo)簽</a>
      <a name="h1"></a>
      <h1>被跳轉(zhuǎn)鏈接</h1>

跨頁面錨點跳轉(zhuǎn)

概念：從當(dāng)前頁面跳轉(zhuǎn)到另一個頁面的指定位置伶椿。制作方和和頁面內(nèi)錨點跳轉(zhuǎn)一樣辜伟，也是制作錨點和添加鏈接。
制作錨點：同頁面內(nèi)錨點跳轉(zhuǎn)一樣脊另。
添加鏈接：在href屬性中添加需要跳轉(zhuǎn)頁面的路徑，并且在路徑后面拼接制作的"錨點屬性"。

無序列表

概念：無順序的列表痊夭，用于內(nèi)容或結(jié)構(gòu)相關(guān)构捡，但卻又不一樣的結(jié)構(gòu)。
語法：
    <ul>
        <li>西游記</li>
        <li>紅樓夢</li>
    </ul>
注意：
    1.ul標(biāo)簽中只能嵌套li標(biāo)簽，不能嵌套其他標(biāo)簽枚赡。li標(biāo)簽不能脫離ul標(biāo)簽單獨在外面寫氓癌。
    2.li標(biāo)簽是一個容器級標(biāo)簽，里面可以嵌套任意標(biāo)簽贫橙，也可以再嵌套一個ul和li標(biāo)簽贪婉。
    3.無序列表的li標(biāo)簽之間的內(nèi)容沒有順序的先后之分，它們的重要程度是相似的卢肃。
    4.css控制樣式疲迂。

有序列表

概念：有順序的列表
語法：
    <ol>
        <li>西游記</li>
        <li>紅樓夢</li>
    </ol>
注意：
    1.ol標(biāo)簽中只能嵌套li標(biāo)簽，不能嵌套其他標(biāo)簽莫湘。li標(biāo)簽不能脫離ol標(biāo)簽單獨在外面寫尤蒿。
    2.li標(biāo)簽是一個容器級標(biāo)簽，里面可以嵌套任意標(biāo)簽幅垮，也可以再嵌套一個ol和li標(biāo)簽优质。
    3.有序列表的li標(biāo)簽之間的內(nèi)容有順序的先后之分。
    4.css控制樣式军洼。

自定義列表

概念:自定義列表不僅僅是一項列表巩螃，而是項目及其注釋的組合。
構(gòu)成：由三個標(biāo)簽構(gòu)成三個完整的結(jié)構(gòu)匕争，包含dl避乏，dt，dd甘桑。
解釋：
    1.dl 表示定義一個自定義列表的大結(jié)構(gòu)
    2.dt 表示定義自定義列表中的一個主體或者術(shù)語拍皮。
    3.dl 定義解釋項，表示描述或解釋前面的定義主題跑杭。
語法：
    <dl>
        <dt>主題</dt>
        <dd>解釋項</dd>
    </dl>
注意：
    1.dl標(biāo)簽只能嵌套dt標(biāo)簽和dd標(biāo)簽铆帽，dt標(biāo)簽和dd標(biāo)簽是同級關(guān)系。
    2.dl中可以有多組dt和dd德谅，每個dd的解釋說明都是前面距離最近的一個dt爹橱。
    3.每個dt后面可以有0個或者多個dd標(biāo)簽，每個dd的解釋說明都是前面距離最近的一個dt窄做。
    4.dt和dd是一個容器級標(biāo)簽愧驱，里面可以嵌套其他任意標(biāo)簽。
    5.一般開發(fā)中建議一個dl中構(gòu)造一組dt和dd椭盏，這樣方便配合css布局效果组砚。

布局標(biāo)簽 div

概念：俗稱大盒子，沒有語義掏颊，經(jīng)典的容器級標(biāo)簽糟红，是一個雙標(biāo)簽，里面可以容納任意內(nèi)容。屬于塊級標(biāo)簽盆偿，兩個div標(biāo)簽之間會自動換行柒爸。
作用：常用div進(jìn)行區(qū)域的劃分，構(gòu)造網(wǎng)頁結(jié)構(gòu)陈肛。

布局標(biāo)簽 span

概念：俗稱小盒子揍鸟，沒有語義，雙標(biāo)簽句旱，也是容器級別標(biāo)簽阳藻，里面可以嵌套任意內(nèi)容。屬于行內(nèi)標(biāo)簽谈撒，不會自動換行腥泥。
作用：常用于在不改變整體效果的情況下，可以輔助進(jìn)行局部調(diào)整啃匿。

表格基礎(chǔ)

概念：創(chuàng)建一個表格至少需要三個標(biāo)簽組成蛔外，分別是<table>，<tr>和<td>溯乒。
table:表格夹厌，定義的是整個表格的大結(jié)構(gòu)。
tr：表格的行裆悄，定義的是表格由多少行組成矛纹。
td：表格數(shù)據(jù)，也叫表格單元格光稼，定義的是每一行內(nèi)部的單元格或南。
關(guān)系：table>tr>td,一個表格中有多個行，每一行中有多個單元格艾君。
屬性：border邊框?qū)傩浴?屬性值：數(shù)字采够，表示像素。
注意：表格的單元格之間有默認(rèn)的空隙冰垄，會導(dǎo)致雙線邊框蹬癌。
解決方法：設(shè)置css屬性值：border-collapse="collapse"表示邊框塌陷。
表頭單元格：如果要繪制語義化的表頭單元格播演，需要使用<th>標(biāo)簽代替第一行中的td標(biāo)簽冀瓦，默認(rèn)有加粗和字體居中的效果。

表格合并

概念：表格的單元格可以進(jìn)行合并写烤，通過th和td兩個標(biāo)簽的屬性值進(jìn)行合并。
rowspan：跨行合并拾徙，上下的合并洲炊。
colspan：跨列合并，左右的合并。
屬性值：數(shù)字暂衡，數(shù)字是幾就表示跨幾行或者跨幾列合并询微。

表格分區(qū)

概念：table內(nèi)部直接的子集包含四個分區(qū)標(biāo)簽，對表格更加的語義化狂巢。
caption：表格的標(biāo)題撑毛，內(nèi)部書寫標(biāo)題文字。
thead：表格的頭部信息唧领，內(nèi)部嵌套tr>th藻雌。
tbody：表格的主體信息，內(nèi)部嵌套tr>td斩个。
tfoot：表格的頁腳胯杭，內(nèi)部嵌套tr>td。
注意：不論書寫的順序如何受啥，瀏覽器都是按照caption做个，thead，tbody滚局，tfoot的順序進(jìn)行加載的居暖。

表單基礎(chǔ)

概念：HTML表單用于搜集不同類型的用戶輸入，表單元素就是網(wǎng)頁中提供用戶進(jìn)行輸入或者點擊的小控件藤肢。
組成：一個完整的表單控件通常由表單域太闺，提示信息和表單控件組成。
功能：
    表單域：表單域相當(dāng)于一個容器谤草，用來容納所有表單控件和提示信息跟束。用于定義處理表單程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法丑孩。如果不定義表單域冀宴，表單中的數(shù)據(jù)就無法傳遞到后臺服務(wù)器。
    提示信息：說明性的文字温学，提示用戶進(jìn)行填寫和操作略贮。
    表單控件：包含了具體的表單功能項，如單行文本輸入框仗岖，密碼輸入框逃延，復(fù)選框，提交按鈕轧拄，重置按鈕等揽祥。

表單域

表單域標(biāo)簽：HTML表單域使用<form>標(biāo)簽進(jìn)行定義。它是一個功能性標(biāo)簽檩电，填寫的表單數(shù)據(jù)要想提交到服務(wù)器中拄丰，必須放在一個<form>標(biāo)簽內(nèi)府树。
屬性：
    action：url 指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。
    method：get/post 設(shè)置表單數(shù)據(jù)的提交方式料按。
    name：自定義名稱奄侠，規(guī)定表單的名稱。

input 標(biāo)簽

概念：
1.input標(biāo)簽是一個單標(biāo)簽载矿，主要的功能依靠他的屬性垄潮。是一個行內(nèi)標(biāo)簽，不會自動換行闷盔，可依附于其它可換行標(biāo)簽弯洗。
2.一般在開發(fā)中input標(biāo)簽常配合label標(biāo)簽使用，通過id屬性與表單控件連接馁筐，可增強用戶體驗涂召。

input 屬性

屬性	屬性值	描述
type	text	單行文本輸入框
type	password	密碼輸入框
type	radio	單選框，同一組單選框必須是互斥屬性敏沉，所以需要設(shè)置相同的 name 屬性果正。
type	checkbox	多選框
type	button	普通按鈕，沒有特殊功能盟迟。
type	reset	重置按鈕秋泳，將同一個 form 表單中的內(nèi)容清空，恢復(fù)到默認(rèn)值攒菠。
type	submit	提交按鈕迫皱，將 form 表單中的內(nèi)容提交到服務(wù)器，并重置清空 form 表單中填寫的內(nèi)容辖众。
type	image	圖像形式的按鈕卓起，默認(rèn)與 submit 相同，但是許需要用到圖片的 src 屬性性凹炸，路徑要填寫正確戏阅。
type	file	上傳文件，可以添加 multiple 屬性啤它，表示可以同時選擇多個文件奕筐。
type	hidden	定義隱藏的輸入字段
name	自定義	定義控件的名稱
value	自定義	定義控件的默認(rèn)文本值
size	number	定義控件的寬度
checked	checked	定義選框控件默認(rèn)被選中
maxlength	number	定義允許輸入的最多字符
outline	medium	取消input邊框選中時高亮

textarea 文本域

概念：文本域是一個雙標(biāo)簽，可以輸入多行文字变骡。一般在開發(fā)中都是通過css設(shè)置寬和高离赫。

下拉菜單

概念：
    1.下拉菜單至少需要兩個標(biāo)簽，
        <select></select>：選擇塌碌，表示定義下拉菜單的整體結(jié)構(gòu)渊胸。
        <option></option>：選項，表示定義下拉菜單的每一項台妆。
    2.都是雙標(biāo)簽蹬刷，文本級標(biāo)簽瓢捉。
    3.select包含option频丘，option可以有任意多項办成。
分組：
    1.下拉菜單中如果選項變得負(fù)責(zé)，可以將option進(jìn)行分組管理搂漠。
    2.可以使用optgroup標(biāo)簽對選項進(jìn)行分組迂卢，optgroup是一個雙標(biāo)簽。
    3.包含關(guān)系：select>optgroup>option
    4.optgroup標(biāo)簽可以設(shè)置一個label屬性桐汤，表示給這一組選項添加一個分組標(biāo)簽名而克。分組標(biāo)簽optgroup是不可以被點擊選擇的。
注意：
    1.默認(rèn)情況下選中項是第一項怔毛。
    2.下拉菜單可以通過給option標(biāo)簽設(shè)置selected屬性员萍，屬性值為selected，更改默認(rèn)選項拣度。

表單輪廓線 outline

描述：input表單元素默認(rèn)選中光標(biāo)的時候會有一圈輪廓線碎绎。
去除方法: outline: 0;或者 outline: none;

防止拖拽文本域

resize: none

HTML基礎(chǔ)

HTML基礎(chǔ)

HTML 元素

元素內(nèi)容

標(biāo)簽級別

HTML 元素的特性

HTML 書寫規(guī)范

HTML 骨架解析

常用標(biāo)簽

標(biāo)題標(biāo)簽

段落標(biāo)簽

換行標(biāo)簽

文本格式化

圖像標(biāo)簽

音頻標(biāo)簽

視頻標(biāo)簽

超鏈接

錨點跳轉(zhuǎn)

頁面內(nèi)錨點跳轉(zhuǎn)

跨頁面錨點跳轉(zhuǎn)

無序列表

有序列表

自定義列表

布局標(biāo)簽 div

布局標(biāo)簽 span

表格基礎(chǔ)

表格合并

表格分區(qū)

表單基礎(chǔ)

表單域

input 標(biāo)簽

input 屬性

textarea 文本域

下拉菜單

表單輪廓線 outline

防止拖拽文本域