一、HTML簡介
1.什么是HTML
HTML,Hyper Text Markup Language（超文本標記語言），由各種標簽組成，用來制作網(wǎng)頁，告訴瀏覽器該如何顯示頁面。
2.作用
- 制作網(wǎng)頁，控制網(wǎng)頁和內(nèi)容的顯示
- 插入圖片、音樂、視頻、動畫等多媒體
- 通過連接檢索信息
- 使用表單獲取用戶信息，實現(xiàn)交互
3.版本
W3C，World Wide Web Consortium（萬維網(wǎng)聯(lián)盟），制作Web技術相關標準和規(guī)范的組織，其中HTML就是W3C制定的標準。
兩個版本：HTML4.01、HTML5
官網(wǎng)：http://www.w3school.com.cn/
4.后綴名
HTML文件是以.html或.htm結尾
二、HTML文檔結構
1.基本結構
- 1.1 簡介
- HTML標簽是由尖括號包圍的關鍵詞，如
<html>，通常都是成對出現(xiàn)的，如<html></html>。 - 以
<html>為根標簽，包含<head>頭部和<body>主體。 - 頭部提供關于網(wǎng)頁的相關信息，如標題、文檔類型、字符編碼、關鍵字等摘要信息。
- 主體部分提供網(wǎng)頁的具體內(nèi)容，真正要展示在頁面中。
- 合理的進行縮進。
- 標簽不區(qū)分大小寫，但是推薦都是用小寫。
- HTML標簽是由尖括號包圍的關鍵詞，如
- 1.2 開發(fā)工具
記事本、Sublime、Notepad++、Dreamweaver、VSCode、WebStrom等。 - 1.3 瀏覽器
常見瀏覽器，IE微軟、Chrome谷歌、Firefox火狐、Safari蘋果
瀏覽器的作用是讀取HTML文件，并以網(wǎng)頁的形式顯示
瀏覽器不會直接顯示HTML標簽，而是使用標簽來解釋網(wǎng)頁的內(nèi)容
2.標簽
- 2.1標簽組成
一個完整的HTML標簽組成
<標簽名 屬性名="屬性值">內(nèi)容</標簽名>
注意：屬性值要用引號引起來，一般使用雙引號
- 2.2 標簽分類
根據(jù)標簽是否關閉，分為：關閉型，非關閉型- 關閉型：有結束標簽，即成對出現(xiàn)
<title></title>
<body></body>
- 非關閉型
<meta>
<br>
<hr>
根據(jù)標簽是否獨占一行，分為塊級標簽，行級標簽
- 塊級標簽：顯示為塊狀，獨自占一行
<h1></h1>
- 行級標簽：不會獨占一行，在行內(nèi)顯示
<span></span>
3.注釋
注釋在瀏覽器中是不會顯示的，用來標注解釋，但通過查看網(wǎng)頁源代碼是可以被看到的。
<!-- 注釋的內(nèi)容 -->
4.實體字符
也稱為特殊字符，用來顯示一些特殊符號，如< 、> 、&、空格等。
語法：
&實體字符名稱;
常用實體字符
< < 小于號 less than
> > 大于號 greater than
空格 space 對于連續(xù)的空白字符（包括空格，縮進，換行等），在瀏覽器中顯示時只會顯示為一個空格
& & 與
" " 雙引號
© ? 版權符號 copyright
® ? 注冊符號 register
× × 關閉符號 close
注意：實體字符名稱是區(qū)分大小寫的
5.文檔類型
在HTML文檔第一行，使用<!DOCTYPE>聲明HTML文檔類型，用來告訴瀏覽器當前頁面的文檔類型。
目前使用的HTML5：<!DOCTYPE html>
三、常用標簽
1.基本標簽
1.1 有序列表
ol：ordered list
li：list item
默認使用阿拉伯數(shù)字，從1開始標記，可以通過屬性進行修改
- type屬性：設置列表前的標記符號，取值：數(shù)字1、字母a或A，羅馬數(shù)字i或I
- start屬性：設置起始值，必須為數(shù)字
1.2 無序列表
ul：unordered list
li：list item
默認使用實心圓作為符號標記，可以通過屬性進行修改
- type：設置列表前的符號標記，取值：disc實心圓（默認）、circle空心圓、square正方形、none不顯示符號
1.3 定義列表
dl：definition list
dt：definition title
dd：definition description
1.4 水平線標簽
hr：horizontal
常用屬性：
- color：顏色
兩種寫法：
顏色名稱，如red、green、blue等
16進制的RGB值：每個顏色的值在0-255之間，轉(zhuǎn)換為16進制為00-FF，如#FFFFFF - size：粗細
- width：寬度
兩種寫法：
像素，絕對值（固定值）
比例，百分比，相對于父容器寬度的百分比 - align：對齊方式
left、right、center
1.5 圖像標簽
img：image
常見圖片格式：jpg、png、gif、bmp
常用屬性：
- src：source 指定圖片的路徑
- alt：當圖片無法顯示時的提示信息
- title：當鼠標停留在圖片上時，顯示的信息
- width/height：設置圖片的寬和高
默認顯示圖片原有大小，如果只設置一個值會按比例進行縮放。
兩種寫法：
像素，絕對值
百分比，相對值，相對于父容器尺寸的百分比
2.其他標簽
為了更好的語義化
3.頭部標簽
- meta 定義網(wǎng)頁的摘要信息，如字符編碼、關鍵字、描述、作者等。
- title 定義網(wǎng)頁的標題。
- style 定義內(nèi)部css樣式
- link 引用外部的css樣式
- script 定義或引用腳本
- base定義基礎路徑
默認以當前文件所在位置為相對路徑的參照
4.標簽嵌套
一個標簽嵌套著另一個標簽，但是標簽的嵌套是有要求的，如：
<p style="width: 300px; height: 300px; background-color: green;">
<div style="width: 200px; height: 200px; background-color: blue;">
world
</div>
</p>
瀏覽器渲染后顯示頁面的代碼可能與編碼時有所不同
Chrome瀏覽器提供的開發(fā)人員工具，用來幫助開發(fā)人員查看和調(diào)試頁面
如何打開：
- 在頁面空白處右擊——>檢查/審查/查看元素
- 按F12
常用工具：
- Elements：從瀏覽器的角度查看頁面，瀏覽器渲染頁面時的結構內(nèi)容
- Console：控制臺，顯示各種警告和錯誤信息
- Network：查看網(wǎng)絡請求相關信息，瀏覽器向服務器請求了哪些資源、資源大小、加載資源消耗的時間
四、超鏈接
1.簡介
使用超鏈接可以從一個頁面跳轉(zhuǎn)到另一個頁面，實現(xiàn)頁面間的導航
超鏈接的三種類型：
-普通鏈接/頁面間鏈接，跳轉(zhuǎn)到另一個頁面
- 錨鏈接，跳轉(zhuǎn)到錨點
- 功能性鏈接，實現(xiàn)特殊功能
2.基本用法
使用<a>標簽創(chuàng)建超鏈接
語法：
<a href="鏈接的地址" target="鏈接打開的位置">鏈接文本或圖像</a>
常用屬性：
- href：鏈接地址，連接路徑
- target：鏈接打開位置，取值：
_self(自身、當前，默認值)
_blank(空白，新的)
_parent(父層框架)
_top(頂層框架)
路徑分類：
- 相對路徑
相對于當前文件的路徑
不是以根開始的路徑
.表示當前路徑
..表示上一級路徑 - 絕對路徑
以根開始的路徑
http://www.baidu.com
3.錨鏈接
3.1 簡介
點擊鏈接后跳轉(zhuǎn)指定的位置(錨點anchor)
錨鏈接的分類：
- 頁面內(nèi)的錨鏈接
- 頁面間的錨鏈接
3.2 頁面內(nèi)的錨鏈接
步驟：
1.定義錨點（標記）
<a name="錨點名稱">目標位置</a>
或者
<div id="錨點名稱">鏈接文本</a>
2.連接錨點
<a href="#錨點名稱">鏈接文本</a>
3.3 頁面間的錨鏈接
<a href="目標頁面#錨點名稱">鏈接文本</a>
4.功能性鏈接
5.URL
5.1 簡介
URL：Uniform Resource Locator 統(tǒng)一資源定位符，用來定位資源所在位置。
5.2 組成
https://tieba.baidu.com/web/views/index.html?name=tom&age=21&sex=male#first
一個完整的URL由8部分組成：
協(xié)議 protocol，如
http 超文本傳輸協(xié)議 (Hyper Text Transfer Protocol)，用來訪問網(wǎng)站
https 更加安全的協(xié)議
ftp 文件傳輸協(xié)議(File Transfer Protocol)，用來訪問服務器上的文件，實現(xiàn)文件的上傳和下載主機名 hostname 服務器地址，如
tieba.baidu.com端口 port 位于主機名后面，使用冒號隔開
不同的協(xié)議使用不同的端口號，如http使用80，https使用443，ftp使用21
如果使用默認端口，則可以省略不寫
如果使用的不是默認的端口，則必須指定端口路徑 path 目標文件所在的路徑結構，如
web/views資源 resource 要訪問的目標文件，如
index.html查詢字符串 query string 也成為參數(shù)
在資源后面，使用?開頭的一組名稱
名稱和值之間使用“=”隔開，多個之間使用“&”隔開，如：
?name=tom&age=21&sex=male錨點 anchor，在資源后面以“#”開頭的文本,如：
#first表示鏈接到指定的錨點身份認證 authentication，指定身份信息，
如ftp://賬戶:密碼@ftp.hxx.com/note/HTML.md
五、表格
1.簡介
表格是一個規(guī)則的行列結構，每個表格都是由若干行組成，每行由若干單元格組成
table row column
2.基本結構
2.1 table標簽
用來定義表格
常用屬性
- border 邊框，默認為0
- width/height 寬度/高度
- align 水平對齊方式，取值：left、center、right
- bordercolor 邊框顏色
- bgcolor 背景顏色
- background 使用圖片作為背景
- cellspace 間距 單元格與單元格之間的間距
- cellpadding 邊距 單元格內(nèi)的內(nèi)容與邊框的距離
2.2 tr標簽
用來定義行，table row
常用屬性：
- align 水平對齊，取值：left，center，right
- valign 垂直對齊 vertical 取值：top middle bottom
- bgcolor 背景顏色
- background 背景圖片
2.3 td標簽
用來定義列 table data
常用屬性：align valign bgcolor background
注意：table中至少有一個tr，tr中至少有一個td，數(shù)據(jù)必須放到單元格中
3.合并單元格
也稱為表格的跨行跨列
兩個屬性：
- rowspan
設置單元格所跨越的行數(shù)，如rowspan=2，表示跨越了2行 - colspan
設置單元格所跨的列數(shù)，如colspan=4，表示跨越了4列
步驟：
1.在跨越的單元格中設置rowspan或colspan
2.將被跨越的單元格刪除
注意：必須保證每行的實際列數(shù)是相同的，否則就會發(fā)生錯亂
4.高級標簽
4.1 caption標簽
表格的標簽
4.2 thead標簽
表格的頭部 table head
4.3 th標簽
表格的頭部標簽 table head title
一般用在thead中，設置頭部的標題，主要用來替代<td>，相對于<td>進行了加粗
4.4 tbody標簽
表格的主體 table body
4.5 tfoot標簽
表格的底部 table foot
六、表單
1.簡介
是一個包含若干表單元素的區(qū)域，用于獲取不同類型的用戶信息
表單元素是允許用戶在表單中輸入信息的元素，如：文本框、密碼框、單選按鈕、復選框、下拉列表、按鈕等
2.表單結構
2.1 表單的語法
<form action="表單提交地址" method="提交方式">
多個表單元素
</form>
2.2 form標簽
用來定義表單，可以包含多個表單元素
常用屬性：
- action
表單提交的地址，即處理數(shù)據(jù)的程序，默認為當前頁面 - method
提交表單的請求方式，取值：get(默認值)、post
get和post的區(qū)別：
get：以查詢字符串的形式進行提交，數(shù)據(jù)在地址欄中可以被看到，限制長度，是不安全的。
post：以表單數(shù)據(jù)組的形式進行提交，在地址欄中不顯示，長度無限制，比較安全。 - enctype
指定提交數(shù)據(jù)的編碼方式，取值：application/x-www-form-urlencoded(默認值)、multipart/form-data(文件上傳時使用)
3.表單元素
<input type="表單元素類型" name="名稱" value="初始值">
大多數(shù)表單元素都是使用<input>標簽來定義，通過設置type屬性定義不同的表單元素
3.1 單行文本框
常用屬性：
- name 指定表單名稱，如果沒有指定name，那么該表單元素的數(shù)據(jù)是無法提交的
- value 表示表單元素的初始值
- size 指定表單元素的寬度
- maxlength 指定最大字符數(shù)，默認沒有限制
- readonly 只讀
- disabled 禁用
readonly和disabled的區(qū)別：前者的數(shù)據(jù)可以被提交，后者不可以被提交。 - enable 啟用
表單元素被提交的兩個條件：1.必須指定了name屬性 2.非disabled
3.2 單選按鈕
常用屬性：
- name 名稱，多個radio的name屬性值必須相同，才能實現(xiàn)互斥
- value 值
- checked 是否選中，兩種狀態(tài)，選中、未選中
3.3 復選框
常用屬性與radio類似
3.4 文件選擇器
常用屬性：
- name 名稱
- accept 設置可選的文件類型，用來限制上傳的文件類型
使用MIME格式字符串對資源類型進行限制
常見MIME類型：- 純文本，textplain text/html text/xml
- 圖像，image/jpeg image/png image/gif
4.特殊表單元素
4.1 下拉列表
select常用屬性：
- name 名稱
- size 行數(shù)，可以同時顯示多個選項
- multiple 允許同時選擇多個
- disabled 禁用
option常用屬性：
- value 選項值（必須指定）
- selected 默認選中的
optgroup常用屬性
- label 分組的標題
4.2 文本域
常用屬性：
- name 名稱
- rows 指定行數(shù)
- cols 指定列數(shù)
5.其他表單元素
5.1 label標簽
為表單元素提供標簽，當選中l(wèi)abel標簽中的文本內(nèi)容時會自動將焦點切換到與之關聯(lián)的表單元素
常用屬性：
- for 必須將該屬性的值設置為與之關聯(lián)的表單元素的id屬性值相同
注意：幾乎所有html標簽都具有id屬性，且id值必須是唯一的
5.2 button標簽
也表示按鈕，與input類似
語法：
<button type="按鈕類型">這是按鈕的文本和圖像</button>
常用屬性：
- type 按鈕類型，取值：submit(默認)、reset、button
5.3 fieldset和legend標簽
fieldset標簽，對表單元素進行分組
legend標簽，對分組添加標題
七、內(nèi)嵌框架
1.簡介
使用ifream框架可以在一個頁面中去引用另一個頁面，從而實現(xiàn)復用，比較靈活。
2.基本用法
語法：
<iframe src=""></iframe>
常用屬性：
- src 引用的頁面
- width/height 寬度和高度
- frameborder 是否顯示框架的邊框，取值：1(顯示)或0(不顯示)
- scrolling 是否顯示滾動條，取值：yes、no、auto
- name 為內(nèi)嵌框架設置名稱
3.在框架中打開鏈接
<iframe name="hello"></iframe>
<a href="鏈接地址" target="hello">鏈接文本或圖像</a>
八、HTML5簡介
1.發(fā)展
W3C于1992.12發(fā)布了HTML4.0.1標準
W3C于2014.10發(fā)布HTML5標準
2.特點
- 取消了過時的標簽，如font、center等，它們僅用于展示外觀
- 增加了一些更具有語義化的標簽，如header、footer、aside等
- 增加了一些新功能標簽，如audio、video、canvas等
- 增加了一些表單控件，如email、date、time、url、search等
- 可以直接在瀏覽器中繪畫(canvas)，無序flash
- 增加了本地存儲的支持
3.兼容性
http://caniuse.com
提供了各瀏覽器版本對HTML5和CSS3規(guī)范的支持程度
九、HTML5新增內(nèi)容
1.結構化相關標簽
用來進行頁面結構的布局，本身無任何特殊樣式，需要使用CSS進行樣式設置
- article 文章 定義一個獨立的內(nèi)容，完整的文章
- section 章節(jié) 定義文檔的章節(jié)、段落
- header 文章的頭部、頁眉、標題
- footer 文章的底部、頁腳、標注
- aside 定義側(cè)邊欄
- figure 圖片區(qū)域
- figcaption 為圖片區(qū)域定義標題
- nav 定義導骯菜單
注意：結構標簽只是表明各部分的角色，本身并無實際的外觀樣式，與普通div相同
2.語義相關標簽
2.1 mark標簽
標注，用來突出顯示文本內(nèi)容，默認添加黃色背景
2.2 time標簽
定義日期和時間，便于內(nèi)容被搜索引擎更好的搜索到
2.3 details和summary標簽
默認會顯示summary中的內(nèi)容，點擊后顯示details中的內(nèi)容
注意：并不是所有瀏覽器都兼容、Chrome、Opera支持
2.4meter標簽
計量儀，表示度量
常用屬性：
- max 定義最大值，默認為1
- min 定義最小值 默認為0
- value 定義當前值
- high 定義限定為高的值
- low 定義限定為低的值
- optimum 定義最佳值
規(guī)則：
1.如果optimum大于high則表示越大越好
當value大于high時為綠色
當value位于low和high之間為黃色
當value小于low時為紅色
2.如果optimum小于low則表示越小越好
當value大于high時為紅色
當value位于low和high之間為黃色
當value小于low時為綠色
3.當optimum介于low和high之間表示比較好
當value大于high時為黃色
當value小于low時為黃色
介于low和high之間時為綠色
2.5 progress標簽
進度條，表示進度
常用屬性：
- value 定義當前值
- max 定義完成的值
3.表單相關
3.1 新增表單元素
新增以下type類型：
- email 定義郵件類型
- url 接收地址
- tel 接收電話號碼，目前僅在移動設備上有效
- number/range 接收數(shù)字/數(shù)字滑塊，包含min、max、step
- date/month/week/time/datetime 日期時間選擇器
- color 顏色拾取
作用：
- 具有格式校驗功能
- 可以與移動設備的鍵盤相關聯(lián)
3.2 新增表單屬性
form標簽屬性：
- autocomplete 是否啟用表單的自動完成功能，取值：on(默認)、off
- novalidate 提交表單時不進行校驗，默認會進行表單校驗
3.3 新增表單元素屬性
新增表單元素屬性：input/select/textarea等
- placeholder 提示文字
- required 是否必填
- autocomplete 是否啟用該表單元素的自動完成功能
- autofocus 設置初始的焦點元素
- pattern 使用正則表達式(RegExp)、進行數(shù)據(jù)校驗
- list 使文本元素擁有下拉列表的功能，需要配置datalist和option標簽
- form 可以將表單元素寫在form標簽外部，通過該屬性關聯(lián)指定的表單
4.多媒體相關
4.1 audio標簽
在頁面中插入音頻，不同瀏覽器對音頻格式的支持也不同
audio常用屬性：
- src 音頻文件的來源
- controls 是否顯示控制面板，默認不顯示
- autoplay 是否自動播放，默認不自動播放
- loop 是否循環(huán)播放
- muted 是否靜音
- preload 是否預加載，取值：none不會預加載、auto預加載(默認值)、metadata只預加載元數(shù)據(jù)，如果設置了autoplay，則該屬性無意義
可以結合source標簽使用，指定多個音頻文件，瀏覽器會檢測并使用第一個可用的音頻文件
<audio>
<source src="音頻文件">
</audio>
4.2 video標簽
在頁面中插入視頻文件，不同瀏覽器對視頻格式的支持也是不同的
用法與audio標簽基本相同，增加屬性：
- width/height 視頻播放器尺寸
- poster 在視頻加載前顯示的圖片
<video src="視頻文件" autoplay width="600px" poster="圖片名"></video>
