初識 HTML
- HTML（Hyper Text Markup Language）超文本标記語言
-
w3c标準 world wide web （網際網路）
w3c标準包括
- 結構化标準語言（HTML、XML）
- 表現标準語言（CSS）
- 行為标準語言（DOM、ECMAScript）
HTML基本文法
- 标簽
<!DOCTYPE html>是指此HTML按h5标準編寫
lang是指語言 規定編碼格式utf8 網頁的标題
- 标題标簽 h(n)
- 段落标簽 <p></p>
- 換行标簽 <br/>
- 水準線标簽 <hr/>
- 粗體斜體标簽
<strong></strong> <b></b>
<i></i><em></em>
-
特殊符号
空格& nbsp; 大于& gt; 小于& lt; 版權符号& copy;
- 圖檔标簽img <img scr="./img01.jpg" alt="未成功加載" title="懸停資訊" height="" width=""/>
-
連結标簽a
href：目的網址、錨點（#）：通過#要跳轉到的name名、郵件（mailto）通過寫mailto：郵件位址即可打開本地郵件應用
target：
- _blank 新視窗打開
- _self 本網頁打開（預設）
-
清單标簽
無序清單ul（li）有個type屬性， 可指定編号類型
有序清單ol（li）
定義清單dl（dt dd）
-
表格
table标簽
tr行 td列
colspan 跨列 rowspan跨行
- 媒體元素
- video
- audio
屬性
controls 控制台
aotuplay 自動播放
-
行内元素和塊級元素的差別
行内元素
- 與其他行内元素并排
- 不能設定寬高，預設的寬度就是文字的寬度
- 霸占一行，不能與其他任何元素并列。
- 能接受寬高，如果不設定寬度，那麼寬度将預設變為父級的100%。
在HTML的角度來講，标簽分為：
文本級标簽：p , span , a , b , i , u , em
容器級标簽：div , h系列 , li , dt ,dd
p：裡面隻能放文字和圖檔和表單元素，p裡面不能放h和ul，也不能放p。
從CSS的角度講，CSS的分類和上面的很像，就p不一樣：
行内元素：除了p之外，所有的文本級标簽，都是行内元素。p是個文本級标簽，但是是個塊級元素。
塊級元素：所有的容器級标簽，都是塊級元素，以及p标簽。
頁面結構分析
| 元素名 | 描述 |
|---|---|
| header | 标記頭部區域 |
| footer | 标記腳部區域 |
| section | web頁面中一塊獨立的區域 |
| article | 獨立的文章内容 |
| aside | 相關内容或應用（位于側邊欄） |
| nav | 導航類輔助 |
-
内聯标簽iframe
src： 路徑
name：架構表示名
width：高度
height：寬度
name：架構表示名 可使用a标簽中的target屬性進行跳轉
iframe src="" name="MyIframe"></iframe
a herf="http://www.baidu.com" target="MyIframe">點選跳轉</a
-
表單form
action：目的網址
method：送出方式 兩種方式：get和post
form中的input标簽
屬性 說明 type 指定元素的類型，如text文本、password密碼、checkbox多選框、radio單選、reset重置、file檔案、hidden、image點選圖檔送出、button按鈕、submit送出 name 指定元素名稱，友善後端擷取資料 value 内容的初始值 size 指定表單元素的初始寬度 maxlength 能輸入的最大字元數 checked 指定radio或者checkbox的元素是否被預設選中 -
下拉選擇
select 包含 option
屬性 ： value值 selected預設被選中
-
文本域
textarea
屬性：cols可容納列數 rows可容納行數
-
檔案域
input value="file"
-
數字
input type="number" max最大值 min最小值 step跨度（即一次可增加或減小多少長度的值）
-
滑塊
input type="range" max最大值 min最小值 step屬性
-
搜尋框
input type="search"
禁用：disabled
隐藏：hidden
隻讀：readonly
label标簽：增強滑鼠可用性
通過label屬性 for="id名稱"即可實作綁定
表單初級驗證
placeholder:提示輸入，使用者輸入框中
required:不能為空
pattern: 正規表達式
正規表達式查詢網站：www.jb51.net/tools/regexsc.htm
注釋
<!-- -->