HTML基礎複習
一、B/S結構 WEB網站
1.開發語言：HTML+CSS+JS
2.執行環境：瀏覽器（IE瀏覽器、新版本瀏覽器）
3.訪問網頁：網址（DNS域名解析器）
二、瀏覽器
瀏覽器通過網址請求到指定的HTML頁面，WEB伺服器將HTML頁面程式碼響應回瀏覽器，瀏覽器得到這些檔案後，進行解析展示。
瀏覽器————下載、解析HTML頁面
三、HTML標籤語言
1.HTML：超文字標記語言（不止文字）
2.W3C標準：對WEB語言的一種標準、官方權威。
3.HTML的結構
<html>
<head>頭部</head>
<body>身體部分</body>
</html>
4.標頭檔案的申明：HTML5規範 <!DOCTYPE html>
5.網頁標題：<title>網頁標題</title>
6.網頁設定：編碼、媒體查詢器 <meta>
7.HTML標籤的構成：標籤名、屬性、內容
<標籤名 屬性="屬性值">內容</標籤名>
8.HTML注意事項：
1.HTML標籤對大小寫不敏感，推薦小寫
2.HTML標籤不正確，不會報錯，按照預設值進行設定
3.多個空格和多個換行都當成一個空格
4.常規標籤由開始標籤和結束標籤構成，而空標記沒有內容<br><hr><img>
四、HTML常用標籤
1.段落標籤
1.標題：h1~h6 依次減小
2.分割符號：<hr/> 分割一條水平線
3.段落：<p>
4.換行符：<br>
5.轉義字元：空格
< <
> >
@ ©
6.字型格式化：加粗 <b>
斜體 <i>
刪除體 <del>
2.圖片
<img src="圖片地址" alt="載入失敗" title="滑鼠懸停提示" width="寬度" height="高度">
1.絕對路徑：從碟符開始的檔案路徑
2.相對路徑：從HTML頁面出發，找相對的檔案路徑
3.網路路徑：http://www.baidu.com
3.超連結
<a href="開啟的路徑" target="開啟方式">文字</a>
1.跳轉其他頁面，當前視窗 target="_self"
2.跳轉其他頁面，新視窗 target="_blank"
3.錨點連結， href="#id" href="#name"
4.功能跳轉：郵箱、QQ、MSN
4.行內標籤與塊級標籤
行級標籤：<a> <i> <b> <img> 可以同時放在一行
塊級標籤：<h1><h6> <p><hr><br> 單獨佔滿一行
五、列表
1.無序列表 <ul type="">
<li></li>
<li></li>
</ul>
2.有序列表
<ol type="">
<li></li>
<li></li>
</ol>
3.定義列表
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
六、表格
常用標籤和屬性
<table bgcolor="背景顏色" border="邊框的寬度" cellspacing="單元格之間的距離" cellpadding="內容與單元格之間的距離" align="表格自身對齊" width="整個表格的寬度">
<caption>表格的標題</caption>
<tr>
<th>列的表頭資訊</th>
</tr>
<tr align="整行的對齊">
<td align="整列的對齊" width="這個單元格的寬度"></td>
</tr>
<tr>
<td colspan="跨列"></td>
<td rowspan="跨行"></td>
</tr>
</table>
七、媒體
video 視訊 mp4、webm、avi
audio 音訊 mp3
autoplay 自動播放
controls 控制檯
loop 迴圈播放
preload = "auto" 預載入
相容瀏覽器版本
<source src="vedio/vedio.mp4" type="video/mp4">
<source src="vedio/video.webm" type="video/webm">
八、頁面結構語義化標籤
header 標題頭部區域的內容（用於頁面或頁面中的一塊區域）
footer 標記腳部區域的內容（用於整個頁面或頁面的一塊區域）
section Web頁面中的一塊獨立區域
article 獨立的文章內容
aside 相關內容或應用（常用於側邊欄）
nav 導航類輔助內容
常見佈局：
<header><h2>網頁頭部</h2> </header>
<section><h2>網頁主體部分</h2></section>
<footer><h2>網頁底部</h2></footer>
九、內聯框架
作用： 將多個頁面融合成一個頁面
<iframe src="頁面地址" scrolling="是否出現滾動條" frameborder="是否出現邊框" width="寬度" height="高度" name="配合a標籤target開啟頁面">
<a href="頁面" target="iframe的name"></a>
十、表單
1.表單：收集使用者的資訊，提交到後臺
<form>
action="資料提交到哪裡" method="預設get"
get:1.位址列上可以看見資料，不安全
2.資料量小，有限
post:
1.位址列看不見資料，安全
2.資料量大，可支援大檔案
提交按鈕：
1.<input type="submit">，需要寫在form中
2.<button>提交</button>
2.輸入框:接受使用者輸入的資訊
<input>
maxlength 字元最大長度
size 輸入框寬度
name 輸入框的名字、分組
value 輸入框的值
checked 選中
type
文字 text
密碼 password
單選 radio
多選 checkbox
日曆 date
滑塊 range
數字 number
檔案 file
顏色 color
隱藏 hidden
重置 reset
提交 submit
普通按鈕 button
圖片按鈕 image
3.下拉列表：
<select name>
<option value selected>子選項</option>
multiple 多對玄
4.大文字域
<textarea name rows="行數" cols="列數" >
不翻譯標籤、對特殊字元直接翻譯、對空格、回車敏感
</textarea>
5.元素狀態
選中狀態 checked 單選、多選
selected 下拉列表
只讀狀態 readonly
禁用狀態 disabled
可用狀態 enabled
隱藏狀態 hidden
6.驗證
1.提示 placeholder
2.必填 required
3.正則驗證格式 pattern