HTML

初識HTML

簡介：超文本标記語言(文字、圖檔、視訊、音頻等)

HTML5提供了一些新的元素和一些新特性，同時也建立了一些新規則。這些元素，特性和規則得建立，提供了許多新得網頁功能，如使用網頁實作動态渲染圖檔、圖表、圖像和動畫，以及不需要安裝任何插件直接使用網頁播放視訊。

優勢：

所有知名得浏覽器都支援HTML

跨平台性

W3C标準

結構化标準語言：HTML、XML

表現标準語言CSS

行為标準語言DOM、ECMAScript

網頁基本标簽

基本标簽

标題标簽

<code>&lt;h1&gt;&lt;/h1&gt;</code>

<code>&lt;h2&gt;&lt;/h2&gt;</code>

<code>&lt;h3&gt;&lt;/h3&gt;</code>

段落标簽

<code>&lt;p&gt;&lt;/p&gt;</code>

換行标簽

<code>&lt;br/&gt;</code>

水準線标簽

<code>&lt;hr/&gt;</code>

粗體、斜體标簽

<code>&lt;strong&gt;&lt;/strong&gt;</code>

<code>&lt;em&gt;&lt;/em&gt;</code>

特殊符号

&amp;開頭;結尾

<code>&amp;nbsp;</code> 空格

<code>&amp;copy;</code>版權符号

圖像、超連結、網頁布局

圖檔标簽及屬性

​<code>​&lt;img src="" alt="" title="" width="" height=""/&gt;​</code>​

圖檔未加載出來時，顯示alt中得參數，title滑鼠懸停時顯示參數，../表示上級目錄在src中使用

超連結标簽及屬性

​<code>​&lt;a href="" target=""&gt;&lt;/a&gt;​</code>​

target:在哪個視窗中打開（參數：_self：目前網頁中打開、_blank：新網頁中打開）

錨連結：​<code>​&lt;a name="top"&gt;&lt;/a&gt;&lt;a href="#top"&gt;&lt;/a&gt;​</code>​可以實作頁面間跳轉；網頁間跳轉：​<code>​html1:&lt;a name="top"&gt;&lt;/a&gt; html2:&lt;a href="heml1.html#top"&gt;&lt;/a&gt;​</code>​

功能連接配接​<code>​&lt;a href="mailto:[email protected]"&gt;&lt;/a&gt;​</code>​,會調用本地郵箱功能

會自動換行的是塊級标簽，反之為行級标簽

清單、表格、媒體元素

清單：資訊資源的一種展現形式，它可以是資訊結構化和條理化，并以清單的樣式顯示出來，以便浏覽者能更快捷的獲得相應的資訊。

分類：無序清單、有序清單、定義清單

有序：​<code>​&lt;ol&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;/ol&gt;​</code>​

無序：​<code>​&lt;ul&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;/ul&gt;​</code>​

定義：​<code>​&lt;dl&gt;&lt;dt&gt;标題&lt;/dt&gt;&lt;dd&gt;内容&lt;/dd&gt;&lt;/dl&gt;​</code>​ dl:标簽 dt:清單名稱 dd:清單内容

表格：​<code>​&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;​</code>

tr:行 td:列

跨行:​<code>​&lt;td rowspan="2"&gt;&lt;/td&gt;​</code>​

跨列:​<code>​&lt;td colspan="2"&gt;&lt;/td&gt;​</code>​

頭标簽:​<code>​&lt;thead&gt;&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;​</code>​

内容标簽：​<code>​&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;​</code>​

尾标簽：​<code>​&lt;tfoot&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tfoot&gt;​</code>​

媒體元素

視訊元素

​<code>​&lt;video src="" controls autoplay&gt;&lt;/video&gt;​</code>​

屬性 controls：控制器 autoplay：打開頁面時自動播放

音頻元素

​<code>​&lt;audio src="" controls autoplay&gt;&lt;/audio&gt;​</code>​

頁面結構

iframe内聯架構

表單及表單應用

表單屬性

表單屬性應用

表單初級驗證

placeholder：提示資訊

required：非空

pattern：正規表達式 ​<code>​&lt;input type="" name="" pattern=""/&gt;​</code>​