基礎(chǔ)標(biāo)簽簡(jiǎn)介（img/br/a/base/列表/表格/表單/video/audio/summary&detail/marquee/字符實(shí)體）

img標(biāo)簽：

  1. img標(biāo)簽中的img其實(shí)是英文image的縮寫(xiě),所以img標(biāo)簽的作用, 就是告訴瀏覽器我們需要顯示一張圖片;
  2. img標(biāo)簽格式:< img src="">其實(shí)img標(biāo)簽中的src是英文source的縮寫(xiě)，所以img標(biāo)簽中的src就是用來(lái)告訴img標(biāo)簽, 需要顯示的圖片名稱(chēng).
  3. 注意點(diǎn)：
  1. 和H系列標(biāo)簽/p標(biāo)簽還有Hr標(biāo)簽不一樣, img標(biāo)簽不會(huì)獨(dú)占一行.
  2. 如果我們手動(dòng)指定了img標(biāo)簽顯示的圖片的寬度和高度, 有可能會(huì)導(dǎo)致圖片變形, 那么如果又想指定寬度和高度, 又不想讓圖片變形. 我們可以只指定寬度和高度其中的一個(gè)值即可
  3. 只要指定了高度, 系統(tǒng)會(huì)自動(dòng)根據(jù)高度計(jì)算出寬度, 只要指定了寬度, 系統(tǒng)會(huì)自動(dòng)根據(jù)寬度計(jì)算出高度, 并且都是等比拉伸的, 也就是說(shuō)不會(huì)變形

4.img中的其它屬性:

  • width: 寬度 & height: 高度
    在img標(biāo)簽中width/height這兩個(gè)屬性的作用, 就是用來(lái)告訴img標(biāo)簽將來(lái)需要顯示的圖片有多寬有多高;
    如果img標(biāo)簽沒(méi)有指定需要顯示的圖片的寬高, 那么系統(tǒng)會(huì)按照?qǐng)D片默認(rèn)的寬高來(lái)顯示,
    如果img標(biāo)簽指定的寬高, 那么系統(tǒng)會(huì)按照指定的寬高來(lái)顯示.

  • title: 用于告訴瀏覽器, 當(dāng)鼠標(biāo)懸停在圖片上時(shí), 需要彈出的描述框中顯示什么內(nèi)容

  • alt其實(shí)是英文alternate的縮寫(xiě), 它的作用就是用于告訴瀏覽器, 當(dāng)需要顯示的圖片找不到時(shí)顯示什么內(nèi)容。

br標(biāo)簽：

  1. br標(biāo)簽作用: 換行
  2. br標(biāo)簽格式: <br>/<br/>
  3. br標(biāo)簽的注意點(diǎn):
  • 多個(gè)br標(biāo)簽可以連續(xù)使用, 使用了多少個(gè)br標(biāo)簽就會(huì)換多少行;
  • 由于HTML的作用就是用來(lái)給文本添加語(yǔ)義, 而br標(biāo)簽的語(yǔ)義是不另起一個(gè)段落換行, 而在企業(yè)開(kāi)發(fā)中一般情況下需要換行都是因?yàn)樾枰砥鹨粋€(gè)段落, 所以在企業(yè)開(kāi)發(fā)中很少使用br標(biāo)簽。

a標(biāo)簽：

  1. 什么是a標(biāo)簽?
    a標(biāo)簽的作用: 就是用于控制頁(yè)面與頁(yè)面之間跳轉(zhuǎn)的；
    a標(biāo)簽的格式: < a href="指定需要跳轉(zhuǎn)的目標(biāo)界面">需要展現(xiàn)給用戶查看的內(nèi)容< /a >
  2. a 標(biāo)簽的屬性：

  • target屬性, 這個(gè)屬性的作用就是專(zhuān)門(mén)用于控制如何跳轉(zhuǎn)：
    _self: 用于在當(dāng)前選項(xiàng)卡中跳轉(zhuǎn), 也就是不新建頁(yè)面跳轉(zhuǎn). target默認(rèn)屬性。
    _blank: 用于在新的選項(xiàng)卡中跳轉(zhuǎn), 也就是新建頁(yè)面跳轉(zhuǎn)。

  • title屬性，a標(biāo)簽中的title和img標(biāo)簽中的title一樣, 都是用來(lái)控制鼠標(biāo)懸停時(shí)顯示的提示文本的。

  1. 注意點(diǎn):
  1. a標(biāo)簽不僅可以讓文字可以點(diǎn)擊, 還可以讓圖片也能夠被點(diǎn)擊；
  2. 一個(gè)a標(biāo)簽必須有一個(gè)href屬性, 否則a標(biāo)簽不知道要跳轉(zhuǎn)到什么地方；
  3. 如果通過(guò)a標(biāo)簽的href屬性指定一個(gè)URL地址, 那么必須在地址前面加上http://或https://
  4. a標(biāo)簽的href屬性除了可以指定一個(gè)網(wǎng)絡(luò)地址以外, 還可以指定一個(gè)本地地址。

base標(biāo)簽：

base標(biāo)簽就是專(zhuān)門(mén)用來(lái)統(tǒng)一的指定當(dāng)前網(wǎng)頁(yè)中所有的超鏈接(a標(biāo)簽)需要如何打開(kāi)。
例子：

<head>
    <meta charset="UTF-8">
    <title>11-base標(biāo)簽</title>
    <base target="_blank">
</head>

注意點(diǎn):

  1. base標(biāo)簽必須寫(xiě)在head標(biāo)簽的開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間;
  2. 如果既在base中指定了target又在a標(biāo)簽中指定了target,那么瀏覽器會(huì)按照a標(biāo)簽中指定的來(lái)執(zhí)行;
  3. 如需要單獨(dú)給某個(gè)a鏈接添加跳轉(zhuǎn)方式，可以在那個(gè)a標(biāo)簽中單獨(dú)指定跳轉(zhuǎn)樣式。

列表標(biāo)簽

作用: 給一堆數(shù)據(jù)添加列表語(yǔ)義, 也就是告訴搜索引擎告訴瀏覽器這一堆數(shù)據(jù)是一個(gè)整體。
分類(lèi)：

  1. 無(wú)序列表(最多)(unordered list)
  2. 有序列表(最少)(ordered list)
  3. 定義列表(其次)(definition list)
    無(wú)序列表作用：給一堆數(shù)據(jù)添加列表語(yǔ)義, 并且這一堆數(shù)據(jù)中所有的數(shù)據(jù)都沒(méi)有先后之分。

格式：

< ul>
    <li>需要顯示的條目?jī)?nèi)容</li>
</ul>

li其實(shí)是英文list item的縮寫(xiě)；
list是列表的意思，item是條目的意思，所以結(jié)合起來(lái)就是 列表?xiàng)l目的意思。

注意點(diǎn)：

  1. 一定要記住ul標(biāo)簽是用來(lái)給一堆數(shù)據(jù)添加列表語(yǔ)義的, 而不是用來(lái)給他們添加小圓點(diǎn)的；
  2. ul標(biāo)簽和li標(biāo)簽是一個(gè)整體, 是一個(gè)組合. 所以一般情況下ul標(biāo)簽和li標(biāo)簽都是一起出現(xiàn), 不會(huì)單個(gè)出現(xiàn). 也就是說(shuō)不會(huì)單獨(dú)使用一個(gè)ul標(biāo)簽或者單獨(dú)使用一個(gè)li 標(biāo)簽, 都是結(jié)合在一起使用；
  3. 由于ul標(biāo)簽和li標(biāo)簽是一個(gè)組合, 所以u(píng)l標(biāo)簽中不推薦包含其它標(biāo)簽, 也就是說(shuō)以后你在ul標(biāo)簽中只會(huì)看到li標(biāo)簽。

應(yīng)用場(chǎng)景
1.新聞列表
2.商品列表
3.導(dǎo)航條

表格標(biāo)簽

作用：用來(lái)給一堆數(shù)據(jù)添加表格語(yǔ)義。
其實(shí)表格是一種數(shù)據(jù)的展現(xiàn)形式, 當(dāng)數(shù)據(jù)量非常大的時(shí)候, 表格這種展現(xiàn)形式被認(rèn)為是最為清晰的一種展現(xiàn)形式。
格式：

< table>
    <tr>
        <td>需要顯示的內(nèi)容</td>
    </tr>
</table>

表格標(biāo)簽中的table代表整個(gè)表格, 也就是一個(gè)table標(biāo)簽所包裹的內(nèi)容就是一個(gè)表格。
表格標(biāo)簽中的tr標(biāo)簽代表整個(gè)表格中的一行數(shù)據(jù), 也就是說(shuō)一對(duì)tr標(biāo)簽就是表格中的一行；
其實(shí)表格標(biāo)簽中的td標(biāo)簽代表表格中一行中的一個(gè)單元格, 也就是說(shuō)一對(duì)td標(biāo)簽就是一行中的一個(gè)單元格。

注意點(diǎn)

  • 表格標(biāo)簽有一個(gè)邊框?qū)傩? 這個(gè)屬性決定了邊框的寬度. 默認(rèn)情況下這個(gè)屬性的值是0, 所以看不到邊框;
  • 表格標(biāo)簽和列表標(biāo)簽一樣, 它是一個(gè)組合標(biāo)簽, 所以table/tr/td要么一起出現(xiàn), 要么一起不出現(xiàn), 不會(huì)單個(gè)出現(xiàn)。

屬性

  1. width&height:可以給table標(biāo)簽和td標(biāo)簽使用。
  • 表格的寬度和高度默認(rèn)是按照內(nèi)容的尺寸來(lái)調(diào)整的, 也可以通過(guò)給table標(biāo)簽設(shè)置width/height屬性的方式來(lái)手動(dòng)指定表格的寬度和高度；
  • 如果給td標(biāo)簽設(shè)置widht/height屬性, 會(huì)修改當(dāng)前單元格的寬度和高度, 不會(huì)影響整個(gè)表格的寬度和高度；
  1. 水平對(duì)齊和垂直對(duì)齊的屬性：其中水平對(duì)齊可以給table標(biāo)簽和tr標(biāo)簽和td標(biāo)簽使用，垂直對(duì)齊只能給tr標(biāo)簽和td標(biāo)簽使用。
  • 給table標(biāo)簽設(shè)置align屬性, 可以控制表格在水平方向的對(duì)齊方式；
  • 給tr標(biāo)簽設(shè)置align屬性, 可以控制當(dāng)前行中所有單元格內(nèi)容的水平方向的對(duì)齊方式
  • 給td標(biāo)簽設(shè)置align屬性, 可以控制當(dāng)前單元格中內(nèi)容在水平方向的對(duì)齊方式
    注意點(diǎn): 如果td中設(shè)置了align屬性, tr中也設(shè)置了align屬性, 那么單元格中的內(nèi)容會(huì)按照td中設(shè)置的來(lái)對(duì)齊。
  1. 外邊距和內(nèi)邊距的屬性：只能給table標(biāo)簽使用。

  • 外邊距就是單元格和單元格之間的距離, 我們稱(chēng)之為外邊
    距，默認(rèn)情況下單元格和單元格之間的外邊距的距離是2px；

  • 內(nèi)邊距就是單元格的邊框和文字之間的間隙, 我們稱(chēng)之為內(nèi)邊距，默認(rèn)情況下內(nèi)邊距是1；

細(xì)線表格：
細(xì)線表格的制作方式:

  1. 給table標(biāo)簽設(shè)置bgcolor;
  2. 給tr標(biāo)簽設(shè)置bgcolor;
  3. 給table標(biāo)簽設(shè)置cellspacing = "1px".
    注意點(diǎn):
    table標(biāo)簽和tr標(biāo)簽以及td標(biāo)簽都支持bgcolor屬性。
    （但是以上內(nèi)容僅僅作為了解, 因?yàn)闃邮揭院蠖际峭ㄟ^(guò)css來(lái)控制）

表格標(biāo)簽的其它標(biāo)簽：

  1. 表格標(biāo)題：這個(gè)標(biāo)簽叫做caption. 只要將標(biāo)題寫(xiě)在caption標(biāo)簽中, 那么標(biāo)題就會(huì)自動(dòng)相對(duì)于表格的寬度居中。
    注意點(diǎn)：
    caption一定要寫(xiě)在table標(biāo)簽中, 否則無(wú)效；
    caption一定要緊跟在table標(biāo)簽后面；
  2. 標(biāo)題單元格：這個(gè)標(biāo)簽叫做th標(biāo)簽, 只要將當(dāng)前列的標(biāo)題存儲(chǔ)在這個(gè)標(biāo)簽中就會(huì)自動(dòng)居中+加粗文字；
    到此為止我們就發(fā)現(xiàn), 其實(shí)表格中有兩種單元格, 一種是td, 一種是th，td是專(zhuān)門(mén)用來(lái)存儲(chǔ)數(shù)據(jù)的, th是專(zhuān)門(mén)用來(lái)存儲(chǔ)當(dāng)前列的標(biāo)題的。

表格的結(jié)構(gòu)

  1. 由于表格中存儲(chǔ)的數(shù)據(jù)比較復(fù)雜, 為了方便管理和閱讀以及提升語(yǔ)義, 我們可以對(duì)表格中存儲(chǔ)的數(shù)據(jù)進(jìn)行分類(lèi)。
    表格中存儲(chǔ)的數(shù)據(jù)可以分為4類(lèi)：
  • 表格的標(biāo)題(caption);
  • 表格的表頭信息(thead);
  • 表格的主體信息(tbody);
  • 表格的頁(yè)尾信息(tfoot)
  1. 表格的完整結(jié)構(gòu)
<table>
    <caption>表格的標(biāo)題</caption>
    <thead>
        <tr>
            <th>每一列的標(biāo)題</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>數(shù)據(jù)</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>數(shù)據(jù)</td>
        </tr>
    </tfoot>
</table>
  1. 注意點(diǎn):
  • 如果我們沒(méi)有編寫(xiě)tbody, 系統(tǒng)會(huì)系統(tǒng)給我們添加tbody；
  • 如果指定了thead和tfoot, 那么在修改整個(gè)表格的高度時(shí), thead和tfoot有自己默認(rèn)的高度, 不會(huì)隨著表格的高度變化而變化；

合并單元格

  1. 水平方向上的單元格合并：
    可以給td標(biāo)簽添加一個(gè)colspan屬性, 來(lái)指定把某一個(gè)單元格當(dāng)做多個(gè)單元格來(lái)看待(水平方向)
    例如:
<td colspan="2"></td>

含義: 把當(dāng)前單元格當(dāng)做兩個(gè)單元格來(lái)看待;
注意點(diǎn)：

  1. 由于把某一個(gè)單元格當(dāng)做了多個(gè)單元格來(lái)看待，所以需要?jiǎng)h掉一些單元格才能正常顯示；
  2. 一定要記住單元格合并永遠(yuǎn)都是向后或者向下合并，而不能向前或者向上合并。
  3. 垂直方向上的單元格合并：
    可以給td標(biāo)簽設(shè)置一個(gè)rowspan屬性，來(lái)指定把某一個(gè)單元格當(dāng)做多個(gè)單元格來(lái)看待（垂直方向）
    例如：
<td rowspan="2"></td>

含義：把當(dāng)前單元格當(dāng)做兩個(gè)單元格來(lái)看待。

表單標(biāo)簽

  1. 什么是表單？
    表單就是專(zhuān)門(mén)用來(lái)收集用戶信息的；
  2. 什么是表單元素？
    2.1 什么是元素？
    在HTML中標(biāo)簽/標(biāo)記/元素都是HTML中的標(biāo)
    簽，例如< a >a標(biāo)簽/a標(biāo)記/a元素。
    2.2表單元素其實(shí)還是HTML中的一些標(biāo)簽，只不過(guò)這些標(biāo)簽比較特殊，在瀏覽器中所有的表單標(biāo)簽都有特殊的外觀和默認(rèn)的功能。
  3. 表單的格式：
<form>
    <表單元素>
</form>
  1. 常見(jiàn)的表單元素：
    4.1 input標(biāo)簽, input標(biāo)簽有一個(gè)type屬性, 這個(gè)屬性有很多類(lèi)型的取值, 取值的不同就決定了input標(biāo)簽的功能和外觀不同。
    常見(jiàn)的input屬性
    明文輸入框：
<form>
    賬號(hào):<input type="text">
</form>

暗文輸入框:

<form>
    密碼:<input type="password">
</form>

給輸入框設(shè)置默認(rèn)值:

<form>
    賬號(hào):<input type="text" value="lnj"><br>
    密碼:<input type="password" value="123"></form>`

單選框：

    性別:
    <input type="radio" name="xx" checked>男
    <input type="radio" name="xx">女
    <input type="radio" name="xx" >保密<br>

注意點(diǎn):
1.默認(rèn)情況下單選框不會(huì)互斥, 要想單選框互斥那么必須給每一個(gè)單選框標(biāo)簽都設(shè)置一個(gè)name屬性, 然后name屬性還必須設(shè)置相同的值;
2.要想讓單選框默認(rèn)選中某一個(gè)框子, 那么可以給input標(biāo)簽添加一個(gè)checked屬性;
3.在HTML中如果屬性的取值和屬性的名稱(chēng)一樣, 可以只寫(xiě)一個(gè). 但是在XHTML中必須寫(xiě)上取值, 所以在企業(yè)開(kāi)發(fā)中我們推薦大家不要省略取值。

多選框:

    愛(ài)好:
    <input type="checkbox">籃球
    <input type="checkbox">足球
    <input type="checkbox" checked="checked">棒球
    <input type="checkbox" checked="checked">足浴

按鈕：

  1. 普通按鈕：可以通過(guò)value屬性來(lái)給按鈕指定標(biāo)題；
    作用：配合JS來(lái)完成一些操作。
<input type="button" value="我是按鈕">
  1. 圖片按鈕：可以用指定圖片作為按鈕；
    作用：同普通按鈕一樣，可以配合JS來(lái)完成一些操作。
<input type="image" src="images/register.jpg">
  1. 重置按鈕：
    作用：用于清空表單中已經(jīng)填寫(xiě)好的數(shù)據(jù)；
    注意點(diǎn)：如果想要修改重置按鈕默認(rèn)的按鈕標(biāo)題可以通過(guò)Value屬性來(lái)修改。
 <input type="reset" value="清空">
  1. 提交按鈕：
    作用：將表單這種已經(jīng)填寫(xiě)好的數(shù)據(jù)，提交到遠(yuǎn)程服務(wù)器。
    注意點(diǎn)：要想把填好的數(shù)據(jù)提交到遠(yuǎn)程服務(wù)器，必須具備兩個(gè)條件：
  2. 需要給form表單添加一個(gè)action的屬性，通過(guò)這個(gè)action屬性指定需要提交到的服務(wù)器
    地址；
  3. 需要給需要提交到服務(wù)器的表單元素添加一個(gè)name屬性。
<input type="submit">

隱藏域：
作用 : 配合提交按鈕將一些數(shù)據(jù)默默的悄悄的提交到服務(wù)器。

 <input type="hidden" name="cc" value="kukuku">

H5新增input標(biāo)簽屬性：

    可以自動(dòng)校驗(yàn)輸入的內(nèi)容是否符合郵箱的格式：
    郵箱:<input type="email">

可以自動(dòng)校驗(yàn)輸入的內(nèi)容是否是URL地址:
域名:<input type="url">

    輸入框中只能輸入數(shù)字:
    電話:<input type="number">

可以通過(guò)日歷來(lái)選擇時(shí)間:
時(shí)間:<input type="date">

    可以通過(guò)取色板來(lái)選擇顏色:
    顏色: <input type="color">

4.2 label標(biāo)簽，用于將文字和輸入框關(guān)聯(lián)起來(lái)。

  1. 默認(rèn)情況下文字和輸入框是沒(méi)有關(guān)聯(lián)關(guān)系的, 也就是說(shuō)點(diǎn)擊文字輸入框不會(huì)聚焦, 如果想點(diǎn)擊文字時(shí)讓對(duì)應(yīng)的輸入框聚焦, 那么就需要讓文字和輸入框進(jìn)行綁定;
  2. 要想讓輸入框和文字綁定在一起, 那么我們可以使用Label標(biāo)簽;
  3. 綁定的格式:
    3.1 將文字利用label標(biāo)簽包裹起來(lái)
    3.2 給輸入框添加一個(gè)id屬性
    3.3在label標(biāo)簽中通過(guò)for屬性和輸入框中的id進(jìn)行綁定即可。
<label for="account">賬號(hào):</label><input type="text" id="account">
<form action="">
    <label for="account">賬號(hào):</label><input type="text" id="account"><br>
    <label for="pwd">密碼:</label><input type="password" id="pwd"><br>

4.3 datalist標(biāo)簽:
作用：給輸入框綁定待選項(xiàng)。
格式：

<datalist>
    <option>待選項(xiàng)內(nèi)容</option>
</datalist>

如何給輸入框綁定待選列表:
1. 寫(xiě)一個(gè)輸入框；
2. 寫(xiě)一個(gè)datalist列表；
3. 給datalist列表標(biāo)簽添加一個(gè)id;
4. 給輸入框添加一個(gè)list屬性,將datalist的id對(duì)應(yīng)的值賦值給list屬性即可。

請(qǐng)輸入你的車(chē)型: <input type="text" list="cars">
<datalist id="cars">
    <option>奔馳</option>
    <option>寶馬</option>
    <option>奧迪</option>
    <option>路虎</option>
    <option>賓利</option>
</datalist>

4.4 select 標(biāo)簽：
作用：用于定義下拉列表。
格式：

<select>
    <optgroup label="分組名稱(chēng)">
        <option>列表數(shù)據(jù)</option>
    </optgroup>
</select>

<select>
    <optgroup label="北京">
        <option>朝陽(yáng)區(qū)</option>
        <option>昌平區(qū)</option>
        <option>通州區(qū)</option>
    </optgroup>
    <optgroup label="廣州">
        <option>天河區(qū)</option>
        <option>越秀區(qū)</option>
        <option>黃浦區(qū)</option>
    </optgroup>
</select>

注意點(diǎn)：
1.下拉列表不能輸入內(nèi)容, 但是可以直接在列表中選擇內(nèi)容;
2.可以通過(guò)給option標(biāo)簽添加一個(gè)selected屬性來(lái)指定列表的默認(rèn)值;
3.可以通過(guò)給option標(biāo)簽包裹一層optgroup標(biāo)簽來(lái)給下拉列表中的數(shù)據(jù)分類(lèi)。

4.5 textarea標(biāo)簽:
作用: 定義一個(gè)多行輸入框;
格式：

<textarea>
</textarea>

注意點(diǎn)：
1.默認(rèn)情況下輸入框可以無(wú)限換行；
2.默認(rèn)情況下輸入框有自己的寬度和高度；
3.可以通過(guò)cols和rows來(lái)指定輸入框的寬度和高度, 但是雖然指定了列數(shù)和行數(shù), 但是還是可以無(wú)限往下輸入；
4.默認(rèn)情況下輸入框是可以手動(dòng)拉伸的（如設(shè)置resize: none則無(wú)法改變輸入框大?。?br> 5.注意：
表單元素一定要寫(xiě)在表單中。

video/audio標(biāo)簽：

  1. video標(biāo)簽：
    作用：用于播放視頻。
    格式一：
<video src="">
</video>
<video src="images/sb1.webm" autoplay="autoplay" loop="loop" muted="muted" width="800px"></video>

格式二：

<video>
    <source src="" type=""></source>
    <source src="" type=""></source>
</video>

屬性：
src: 用于告訴video標(biāo)簽需要播放的視頻地址；
autoplay: 用于告訴video標(biāo)簽是否需要自動(dòng)播放視頻；
controls: 用于告訴video標(biāo)簽是否需要顯示控制條；
poster: 用于告訴video標(biāo)簽視頻沒(méi)有播放之前顯示的占位圖片；
loop: 一般用于做廣告視頻, 用于告訴video標(biāo)簽視頻播放完畢之后是否需要循環(huán)播放；
preload: 預(yù)加載視頻, 但是需要注意preload和autoplay相沖, 如果設(shè)置了autoplay屬性, 那么preload屬性就會(huì)失效；
muted:靜音；
width/height: 和img標(biāo)簽中的一模一樣。

格式二存在的意義：
由于視頻數(shù)據(jù)非常非常的重要, 所以五大瀏覽器廠商都不愿意支持別人的視頻格式, 所以導(dǎo)致了沒(méi)有一種視頻格式是所有瀏覽器都支持的，這個(gè)時(shí)候W3C為了解決這個(gè)問(wèn)題, 所以推出了第二個(gè)video標(biāo)簽的格式，其存在的意義就是為了解決瀏覽器適配問(wèn)題。
video 元素支持三種視頻格式, 我們可以把這三種格式都通過(guò)source標(biāo)簽指定給video標(biāo)簽, 那么以后當(dāng)瀏覽器播放視頻時(shí)它就會(huì)從這三種中選擇一種自己支持的格式來(lái)播放。

注意點(diǎn):

  1. 當(dāng)前通過(guò)video標(biāo)簽的第二種格式雖然能夠指定所有瀏覽器都支持的視頻格式, 但是想讓所有瀏覽器都通過(guò)video標(biāo)簽播放視頻還有一個(gè)前提條件, 就是瀏覽器必須支持HTML5標(biāo)簽, 否則同樣無(wú)法播放;
  2. 在過(guò)去的一些瀏覽器是不支持HTML5標(biāo)簽的, 所以為了讓過(guò)去的一些瀏覽器也能夠通過(guò)video標(biāo)簽來(lái)播放視頻, 那么我們以后可以通過(guò)一個(gè)JS的框架叫做html5media來(lái)實(shí)現(xiàn)。

2.audio標(biāo)簽：
作用：用于播放音頻。
格式：同video一樣，具有兩種格式。

<audio src="">
</audio>

<audio>
    <source src="" type="">
</audio>

注意點(diǎn):
audio標(biāo)簽的使用和video標(biāo)簽的使用基本一樣, video中能夠使用的屬性在audio標(biāo)簽中大部分都能夠使用, 并且功能都一樣
只不過(guò)有3個(gè)屬性不能用, height/width/poster,這與播放產(chǎn)品的性質(zhì)有直接關(guān)系。

詳情和概要

什么是詳情和概要標(biāo)簽?
作用:利用summary標(biāo)簽來(lái)描述概要信息, 利用details標(biāo)簽來(lái)描述詳情信息；默認(rèn)情況下是折疊展示, 想看見(jiàn)詳情必須點(diǎn)擊。
格式:

<details>
    <summary>概要信息</summary>
    詳情信息
</details>

<details>
    <summary>鄭伊健</summary>
簡(jiǎn)介：鄭伊健，1967年10月4日出生于中國(guó)香港，籍貫廣東恩平，香港影視演員、流行男歌手。1988年參加新秀歌唱大賽加入無(wú)線電視，因拍攝“陽(yáng)光檸檬茶”廣告而入行，拜羅文為師。1991年...
</details>

marquee

作用: 跑馬燈
格式：

<marquee>內(nèi)容</marquee>

屬性:
direction: 設(shè)置滾動(dòng)方向 left/right/up/down(默認(rèn)left)；
scrollamount: 設(shè)置滾動(dòng)速度, 值越大就越快；
loop: 設(shè)置滾動(dòng)次數(shù), 默認(rèn)是-1, 也就是無(wú)限滾動(dòng)；
behavior: 設(shè)置滾動(dòng)類(lèi)型 slide滾動(dòng)到邊界就停止, alternate滾動(dòng)到邊界就彈回。
注意點(diǎn):
marquee標(biāo)簽不是W3C推薦的標(biāo)簽, 在W3C官方文檔中也無(wú)法查詢(xún)這個(gè)標(biāo)簽, 但是各大瀏覽器對(duì)這個(gè)標(biāo)簽的支持非常好。

<!--滾動(dòng)方向-->
<marquee>騎著馬兒看著燈</marquee>
<marquee direction="right">騎著馬兒看著燈</marquee>
<marquee direction="up">騎著馬兒看著燈</marquee>
<marquee direction="down">騎著馬兒看著燈</marquee>
<hr>
<!--設(shè)置滾動(dòng)速度-->
<marquee scrollamount="1">騎著馬兒看著燈</marquee>
<marquee scrollamount="10">騎著馬兒看著燈</marquee>
<!--設(shè)置滾動(dòng)次數(shù)-->
<marquee loop="10">騎著馬兒看著燈</marquee>
<!--設(shè)置滾動(dòng)類(lèi)型-->
<marquee behavior="slide">騎著馬兒看著燈</marquee>
<marquee behavior="alternate">騎著馬兒看著燈</marquee>

字符實(shí)體

1.在HTML中對(duì)空格/回車(chē)/tab不敏感, 會(huì)把多個(gè)空格/回車(chē)/tab當(dāng)做一個(gè)空格來(lái)處理。
2.什么是字符實(shí)體?
在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含義的, 是不能在瀏覽器中直接顯示出來(lái)的, 那么這些東西要想顯示出來(lái)就必須通過(guò)字符實(shí)體。
3.常見(jiàn)的實(shí)體字符：


QQ截圖20170624195808.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • HTML需要掌握標(biāo)簽 標(biāo)簽（空格分隔）： H5+CSS [TOC] 常用標(biāo)簽 img 注意點(diǎn) 和H系列標(biāo)簽/p標(biāo)簽...
    袁俊亮技術(shù)博客閱讀 2,136評(píng)論 1贊 8
  • ## HTML基礎(chǔ)-列表標(biāo)簽/表格標(biāo)簽 # 列表標(biāo)簽(無(wú)序列表/有序列表/定義列表) # 表格標(biāo)簽 # 單元格合并...
    KsKison閱讀 772評(píng)論 0贊 0
  • img標(biāo)簽 功能：告訴瀏覽器需要顯示一張圖片; 參數(shù)：width、height、src、title、alt；wid...
    Latte_Bear閱讀 685評(píng)論 0贊 0
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,199評(píng)論 1贊 92
  • IT運(yùn)維（IT Ops）人員在組織中扮演著三個(gè)關(guān)鍵性角色。他們可以是建筑師、建設(shè)者以及出現(xiàn)問(wèn)題時(shí)為你們挽救大局的英...
    ServiceHot閱讀 802評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容