HTML零基礎入門視訊課程——筆記
視訊課程連結:http://edu.51cto.com/course/16023.html
HTML,主講:湯小洋
一、HTML簡介
1. HTML是什麼
HTML:Hyper Text Markup Language超文字標籤(標記)語言
由各種標籤組成,用來製作網頁,告訴瀏覽器該如何顯示頁面
2. 作用
- 製作網頁,控制網頁和內容的顯示
- 插入圖片、音樂、視訊、動畫等多媒體
- 通過連結檢索資訊
- 使用表單獲取使用者資訊,實現互動
3. 版本
W3C:World Wide Web Consortium [kənˈsɔ:tiəm]全球資訊網聯盟,制定Web技術相關標準和規範的組織,HTML就是W3C制定的標準
兩個版本:HTML4.01、HTML5
參考:離線文件W3CSchool_new.chm 或 w3school.zip
4. 字尾名
HTML檔案以.html或.htm為字尾
二、HTML文件結構
1. 基本結構
1.1 簡介
- HTML標籤是由尖括號包圍的關鍵詞,如
<html>
,通常都是成對出現,如<html> </html>
- 以
<html>
為根標籤,包含<head>
<body>
主體部分 - 頭部提供關於網頁的相關資訊,如標題、文件型別、字元編碼、關鍵字等摘要資訊
- 主體部分提供網頁的具體內容,真正顯示在頁面中
- 合理的進行縮排;標籤名不區分大小寫,但一般都習慣全小寫
1.2 開發工具
記事本notepad、Sublime、Dreamweaver
使用步驟:
- 新建檔案(Ctrl+N),然後儲存(Ctrl+S),指定字尾名為.html
- 編寫HTML程式碼
- 在瀏覽器中開啟檔案
使用技巧:
-
先儲存檔案再寫程式碼,否則沒有顏色提示
-
建立一個資料夾,用於儲存所有網頁內容,並將資料夾拖放到Sublime中,便於管理
-
顯示/隱藏側邊欄
方式1:View ——> Side Bar ——> Show Side Bar、Hide Side Bar
方式2:先按Ctrl+K,然後緊接著按B
-
顯示多欄
方式1:View ——> Layout ——> Single、Columns:2
方式2:按Ctrl+Alt+2
-
設定縮排的大小
臨時:點選右下角的Tab Size ——> Tab Width:2
永久:Preferences ——> Settings ——> 新增如下內容:"tab_size":2
1.3 瀏覽器
常見瀏覽器:IE微軟、Chrome谷歌、Firefox火狐、Safari蘋果
瀏覽器的作用是讀取HTML檔案,並以網頁的形式顯示
瀏覽器不會直接顯示HTML標籤,而是使用標籤來解釋頁面的內容
2. 標籤組成
2.1 標籤組成
一個完整的HTML標籤的組成:
<標籤名 屬性名="屬性值">內容</標籤名>
屬性值要用引號引起來,一般使用雙引號
注:從標籤的開始到標籤的結束,包括中間的內容,稱為HTML元素
2.2 標籤分類
根據標籤是否關閉,可以分為:關閉型、非關閉型
-
關閉型,有結束標籤
<title></title> <body></body> <h1></h1>
-
非關閉型,沒有結束標籤
<br> <hr> <meta>
根據標籤是否獨佔一行,可以分為:塊級標籤、行級標籤
-
塊級標籤:顯示為塊狀,獨自佔一行
<h1></h1>
-
行級標籤:在行內顯示,可以與其他內容在同一行顯示
<span></span>
3. 註釋
註釋在瀏覽器中不會顯示,但通過檢視原始碼可以看到
<!-- 註釋內容 -->
4. 實體字元
也稱為特殊字元,用於顯示一些特殊符號,如:<、>、&、空格等
語法:
&實體字元名稱;
常用實體字元:
```html
< < 小於號 less than
> > 大於號 greater than
空格 space 對於連續的空白字元(包含空格、縮排、換行等),在瀏覽器中顯示時只會顯示為一個空格
& & 與
" " 雙引號
© © 版權符號 copyright
® ® 註冊符號 register
× × 關閉符號
注:實體字元名稱區分大小寫,即大小寫敏感
### 5. 文件型別
在HTML文件的第一行,使用<!DOCTYPE>宣告HTML文件的型別
用來告訴瀏覽器頁面的文件型別,簡單來說,用來指定使用的HTML版本規範
目前基本上都是使用HTML5:`<!DOCTYPE html>`
注:HTML 4.01中<!DOCTYPE>需要引用DTD,有三種類型的DTD:strict嚴格、transitional過渡、frameset框架
Sublime中可以輸入html:4s按tab鍵,即可創建出HTML4宣告的文件結構(嚴格型別)
## 三、常用標籤
### 1. 基本標籤
| 標籤 | 含義 | 說明 |
| ------------ | ---------------- | ---------------------------------------------- |
| br | 換行標籤 | 非關閉型 |
| p | 段落標籤 | 關閉型,塊級標籤,前後有明顯的間隔 |
| h1、h2....h6 | 標題標籤 | 按照h1到h6逐漸變小,塊級標籤,加粗顯示 |
| pre | 預格式化文字標籤 | 保留編碼時的格式 |
| div | 分割槽標籤 | 常作為容器來使用,一般用在頁面佈局中,塊級標籤 |
| span | 範圍標籤 | 預設沒有任何效果,一般用來設定行內的特殊樣式 |
| ol、li | 有序列表 | 有順序的專案列表 |
| ul、li | 無序列表 | 無順序的專案列表 |
| dl、dt、dd | 定義列表 | 對術語、圖片等進行描述定義的列表 |
| hr | 水平線標籤 | 非關閉型,塊級標籤 |
| img | 影象標籤 | 非關閉型,行級標籤 |
#### 1.1 有序列表
ol:ordered list
li:list item
預設使用阿拉伯數字從1開始標記,可以通過屬性進行修改
- type屬性:設定列表前的符號標記,取值:數字1(預設值)、字母a或A、羅馬數字i或I
- start屬性:設定起始值,值必須是數字
#### 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、white、black....
16進位制的RGB:Red、Green、Blue,用法:#RRGGBB,每個顏色的範圍是0-255,轉換為16進位制是00-FF
如#FF00000紅、#00FF00綠、#0000FF藍、#FFFFFF白、#000000黑、#CCCCCC灰色、#FF7300橙色
- size 粗細
- width 寬度
兩種寫法:
畫素,絕對值(固定值)
百分比,相對值,相對於父容器的寬度百分比
- align 對齊
取值:center(預設值)、left、right
#### 1.5 影象標籤
img:image
常見圖片格式:.jpg .png .bmp .gif
常用屬性:
- src:source 指定圖片的路徑,必須有
如果圖片和html頁面在同一個資料夾中,可以直接寫圖片名稱
習慣上,我們會把多個圖片統一放到特定資料夾中,如images,此時需要在圖片名稱前新增資料夾的名稱images/
- alt 當圖片無法顯示時的提示資訊
- title 當滑鼠停留在圖片上時顯示的提示資訊
- width/height 設定圖片的寬和高
預設按圖片原尺寸顯示
如果只設置其中一個,則另一個按比例縮放
如果同時設定寬和高,可能會導致圖片變形
兩種寫法:
畫素,絕對值(固定值)
百分比,相對值,相對於**父容器**的寬度百分比
### 2. 其他標籤
| 標籤 | 含義 | 說明 |
| ------- | -------------------- | ---------------------------------------------------- |
| i | 斜體顯示 | italic |
| em | 強調的內容 | 在瀏覽器中顯示時一般為斜體 |
| address | 地址 | 在瀏覽器中顯示時一般為斜體,塊級標籤 |
| b | 加粗顯示 | bold |
| strong | 強調的內容 | 在瀏覽器中顯示時一般為粗體 |
| del | 刪除線 | delete |
| ins | 下劃線 | |
| small | 相對當前字號減小一號 | |
| big | 相當當前字號增加一號 | |
| sub | 下標 | |
| sup | 上標 | |
| bdo | 設定文字方向 | 通過屬性dir="rtl"設定文字從右到左顯示(right to left) |
| abbr | 設定文字縮寫 | 當滑鼠停留在文字上時顯示的提示資訊 |
注:為了更好的語義化
### 3. 頭部標籤
- meta 定義網頁的摘要資訊,如字元編碼、關鍵字、描述、作者等
- title 定義網頁的標題
- style 定義內部CSS樣式
- link 引用外部CSS樣式檔案
- script 定義或引用指令碼
- base 定義基礎路徑,修改檔案的相對路徑參照
預設以當前頁面所在位置為相對路徑的參照,使用base時則以base標籤的href屬性作為參照
### 4. 標籤巢狀
標籤不能瞎巢狀,如以下巢狀就是錯誤的,p標籤中不能巢狀div標籤
```html
<p>
<div>world</div>
</p>
瀏覽器渲染後顯示的頁面程式碼與編碼時可能會有所不同
Chrome瀏覽器的開發者工具
用來幫助開發人員檢視和除錯頁面,其它瀏覽器也有類似的工具,如Firefox的Firebug
如何開啟:
- 在頁面中右擊——>檢查/檢視元素/審查元素
- 按F12
常用工具:
- Elements:從瀏覽器的角度檢視頁面,瀏覽器渲染頁面時的HTML、CSS、DOM等
- Console:控制檯,顯示各種警告和錯誤資訊
- Network:檢視網路請求資訊,瀏覽器向伺服器請求了哪些資源、資源的大小以及載入資源花費的時間
四、超連結
1. 簡介
使用超連結可以從一個頁面跳轉到另一個頁面,實現頁面間的導航
當把滑鼠移動到超連結上時,滑鼠箭頭會變成一隻小手
超連結的型別有三種:
- 普通連結/頁面間連結,跳轉到另一個頁面
- 錨鏈接,跳轉到錨點
- 功能性連結,實現特殊功能
2. 基本用法
使用a標籤建立超連結
語法:
<a href="連結地址" target="連結開啟位置">連結文字或影象</a>
常用屬性:
- href 連結地址/路徑,必須的
- target 連結開啟的位置,取值:
_self(自身、當前,預設值)、_blank(空白、新的)、_parent(父層框架)、_top(頂層框架)、自定義
路徑分類:
-
相對路徑
相對於當前檔案的路徑
如果連結目標和當前頁面檔案在同一個資料夾,可以直接寫名稱
如果不在同一個資料夾中,則需要指定相對路徑
.
表示當前位置
..
表示上一級位置 -
絕對路徑
以根開始的路徑
D:/software/dd.html
3. 錨鏈接
3.1 簡介
點選連結後跳轉到指定的位置(錨點anchor)
錨鏈接的分類:
- 頁面內的錨鏈接
- 頁面間的錨鏈接
3.2 頁面內的錨鏈接
使用步驟:
- 定義錨點(標記)
<a name="錨點名稱">目標位置</a>
2. 連結錨點
<a href="#錨點名稱">當前位置</a>
3.3 頁面間的錨鏈接
<a href="目標頁面#錨點名稱">當前位置</a>
4 功能性連結
<a href="images/heihei.gif">點選此處下載圖片</a>
<a href="mailto:[email protected]">聯絡我們</a>
<a href="javascript:alert('膽子不小!')">點我試試</a>
5. URL
5.1 簡介
URL:Uniform Resource Locator 統一資源定位符,用來定位資源所在位置,最常見的就是網址
http://bbs.itany.com/forum.php?mod=viewthread&tid=2266
ftp://ftp.itany.com/code/day02/day02.pdf
file://E:/Software
5.2 組成
http://www.baidu.com:8080/java/html/a.html?name=tom&age=21#abc
一個完整的URL由8個部分組成:
-
協議 protocol,如:
http 超文字傳輸協議,用來訪問Web網站
ftp 檔案傳輸協議,用來訪問伺服器上的檔案,實現檔案的上傳下載
file 檔案協議,用來訪問本地檔案
-
主機名 hostname,伺服器的地址,如:bbs.itany.com、ftp.itany.com
-
埠 port,位於主機名的後面,使用冒號:隔開
不同的協議有不同的預設埠,如:http 80、ftp 21
如果使用的是預設埠,則埠可以省略
如果使用的不是預設埠,則埠不能省略
-
路徑 path 目標檔案所在的路徑結構,如:/java/html
-
資源 resource 要訪問的目標檔案,如a.html
-
查詢字串 query string,也稱為引數
在資源後面使用?開頭的一組名稱/值
名稱和值之間以=隔開,多個之間以&隔開,如:?name=tom&age=21
-
錨點 anchor,在資源後面使用#開頭的文字,如:#abc
- 身份認證 authentication,指定身份資訊,如:ftp://wbs17083:[email protected]/
五、表格
1. 簡介
表格是一個規則的行列結構,每個表格由若干行組成,每行由若干單元格組成。
table、row、column
2. 基本結構
2.1 table標籤
用來定義表格
常用屬性:
- border 邊框,預設為0
- width/height 寬度/高度
- align 水平對齊,取值:left、center、right
- bordercolor 邊框顏色
- bgcolor 背景顏色
- background 背景圖片
- cellspacing 間距,單元格與單元格之間的距離
- cellpadding 邊距,單元格內容與邊界之間的距離
2.2 tr標籤
用來定義行,table row
常用屬性:
- align 水平對齊,取值:left、center、right
- valign 垂直對齊,取值:top、middle、bottom
- bgcolor 背景顏色
- background 背景圖片
2.3 td標籤
用來定義單元格,table data
常用屬性:align、valign、bgcolor、background
注:表格必須由行組成,行必須由單元格組成,資料必須放到單元格td中
3. 合併單元格
也稱為表格的跨行跨列
兩個屬性:
-
rowspan
設定單元格所跨的行數,如rowspan=2,表示跨越2行
-
colspan
設定單元格所跨的列數,如 colspan=4,表示跨越4列
步驟:
-
在跨越的單元格中設定rowspan/colspan屬性
- 將被跨越的單元格刪除
注:必須要保證每行的實際列數是相同的,否則表格可能會出現錯亂
4. 高階標籤
4.1 caption標籤
表格的標題
4.2 thead標籤
表格的頭部 table head
4.3 tbody標籤
表格的主體 table body
注:瀏覽器會自動為表格新增tbody
4.4 tfoot標籤
表格的腳部 table foot
4.5 th標籤
表格的頭部標題 table head title
一般用在thead中,設定頭部的標題,替代td標籤,與td的區別在於:加粗和居中對齊
六、表單
1. 簡介
表單是一個包含若干表單元素的區域,用於獲取不同型別的使用者資訊
表單元素是允許使用者在表單中輸入資訊的元素,如:文字框、密碼框、單選按鈕、複選框、下拉列表、按鈕等
2. 基本結構
2.1 表單語法
<form action="表單提交地址" method="提交方式">
多個表單元素
</form>
2.2 form標籤
用來定義表單,可以包含多個表單元素
常用屬性:
-
action 提交資料給誰處理,預設為當前頁面
-
method 提交資料的方式,取值:get (預設值)、post
get和post的區別:
get:以查詢字串形式提交、位址列能看到、長度有限制、不安全
post:以表單資料組形式提交、位址列中看不到、長度無限制、安全
實際開發中,一般都使用post
- enctype 提交資料的編碼,預設為application/x-www-form-urlencoded,上傳檔案時要改為multipart/form-data
3. 普通表單元素
大多數表單元素都是使用input標籤,通過type屬性設定表單元素的型別
<input type="表單元素型別">
表單元素型別 | 含義 | 說明 |
---|---|---|
text | 單行文字框 | 省略不時寫預設就是text |
password | 密碼框 | 輸入時以點號顯示,安全 |
radio | 單選按鈕 | 只能選擇其中的一個 |
checkbox | 複選框 | 可以同時選擇多個 |
submit | 提交按鈕 | 提交表單資料 |
reset | 重置按鈕 | 重置表單元素的初始值 |
image | 影象按鈕 | 可以使用圖片作為按鈕,也具有提交的功能 |
button | 普通按鈕 | 預設無功能 |
file | 檔案選擇器 | 選擇要上傳的檔案 |
hidden | 隱藏域 | 在頁面上不顯示,但會提交,可以用來儲存資料 |
3.1 單行文字框
常用屬性:
-
name 名稱,很重要,如果沒有name,則該表單元素的資料不會被提交
-
value 初始值
-
size 寬度
-
maxlength 最大字元數,預設沒有限制
-
readonly 只讀,readonly="readonly",可簡寫為readonly,即只寫屬性名
-
disabled 禁用,完全不能用
注:readonly和disabled區別:readonly的資料會提交,而disabled的資料不會提交
表單元素被提交的兩個條件:1. 有name屬性 2.非disabled
3.2 單選按鈕
常用屬性:
- name 名稱,多個radio的name屬性值必須相同,才能實現單選(互斥)
- value 值
- checked 是否選中,兩種狀態:選中、未選中
3.3 複選框
常用屬性和radio類似
3.4 檔案選擇器
常用屬性:
-
name 名稱
-
accept 設定可選的檔案型別,用來限制上傳的檔案型別
使用MIME格式字串對資源型別進行限制
常用MIME型別:
純文字:text/html、text/xml、text/plain
格式文字:application/rtf、application/pdf、application/msword、application/json
影象:image/jpeg、image/png、image/gif
音訊:audio/mpeg、audio/ogg、audio/x-wav
視訊:video/x-msvideo、video/mp4、video/quicktime
注:可以通過類似
image/*
來匹配所有影象檔案
4. 特殊表單元素
表單元素 | 含義 | 說明 |
---|---|---|
select | 下拉列表 | |
option | 列表選項 | |
optgroup | 選項組 | 用來對option進行分組 |
textarea | 文字域/多行文字框 | 用來建立多行文字框 |
4.1 下拉列表
select常用屬性:
-
name 名稱
-
size 行數,同時顯示多個選項
-
multiple 允許同時選擇多個選項
- disabled 禁用
option常用屬性:
-
value 選項值,如果省略value,則預設使用option的文字內容作為value
- selected 設定預設選中項
optgroup常用屬性:
- label 分組的標題
4.2 文字域
常用屬性:
- name 名稱
- rows 行數
- cols 寬度
注:在textarea中會保留編碼時的格式
5. 其他表單元素
5.1 label標籤
為表單元素提供標籤,當選中label標籤中的文字內容時會自動將焦點切換到與之關聯的表單元素
常用屬性:
- for 必須將該屬性值設定為與關聯表單元素的id屬性相同
注:幾乎所有標籤都具有id屬性,且id值必須唯一
5.2 button標籤
也表示按鈕,與input的按鈕類似
語法:
<button type="按鈕型別">按鈕文字或影象</button>
常用屬性:
- type 按鈕的型別,取值:submit(預設值)、reset、button
5.3 fieldset和legend標籤
fieldset標籤,對錶單元素進行分組
legend標籤,為分組新增標題
七、內嵌框架
1. 簡介
使用iframe可以在一個頁面中引用另一個頁面,實現複用,靈活
注:框架集frameset在HTML5中已經不支援,瞭解
2. 基本用法
語法:
<iframe src="" width="" height=""></iframe>
常用屬性:
- src 引用的頁面
- width/height 寬度/高度,畫素或百分比
- frameborder 是否顯示邊框,取值:yes(1)、no(0)
- scrolling 是否顯示滾動條,取值:yes、no、auto
- name 為框架定義名稱
3. 在框架中開啟連結
<iframe name="itany"></iframe>
<a href="" target="itany"></a>
八、HTML5簡介
1. 概念
W3C於1999.12釋出 HTML4.01標準
W3C於2014.10釋出HTML5標準
2. 特點
- 取消了過時的標籤,如font、center等,它們僅用於展現外觀
- 增加了一些更具有語義化的標籤,如header、footer、aside等
- 增加了一些新功能標籤,如audio、video、canvas等
- 增加了一些表單控制元件,如email、date、time、url、search等
- 可以直接在瀏覽器中繪畫(canvas),無需flash
- 增加了本地儲存的支援
3. 相容性
網站:http://caniuse.com/
提供了各瀏覽器版本對於HTML5和CSS3規範的支援度
九、HTML5新增內容
1. 結構相關標籤
用來進行頁面結構佈局,本身無任何特殊樣式,需要使用CSS進行樣式設定
- article 定義一個獨立的內容,完整的文章
- section 定義文件的章節、段落
- header 文章的頭部、頁首或標題
- footer 文章的底部、頁尾或腳註
- aside 定義側邊欄
- figure 圖片區域
- figcaption為圖片區域定義標題
- nav 定義導航選單
注:結構標籤只是表明各部分的角色,並無實際外面樣式,與普通的div類似
2. 語義相關標籤
2.1 mark標籤
標註,用來突出顯示文字,預設新增×××背景
2.2 time標籤
定義日期時間,便於搜尋引擎智慧查詢
常用屬性:
- datetime 提供標準XML格式日期(yyyy-MM-ddTHH:mm:ss.SSS)
2.3 details和summary標籤
預設顯示summary中的內容,點選後顯示details中的內容
注:並不是所有瀏覽器都相容,Chrome、Opera支援,Firefox不支援
2.4 meter標籤
計數儀,表示度量
常用屬性:
- max 定義最大值,預設為1
- min 定義最小值,預設為0
- value 定義當前值
- high 定義限定為高的值
- low 定義限定為低的值
- optimum 定義最佳值
規則:
-
如果optimum大於high,則表示值越大越好
當value大於high時為綠色
當value在low和hight之間時為×××
當value小於low時為紅色
-
如果optimum小於low,則表示值越小越好
當value小於low時為綠色
當value在low和high之間時為×××
當value大於high時為紅色
-
如果optimum介於low和high之間,則表示值在low和high之間最好
當value在low和high之間時為綠色,否則為×××
2.5 progress標籤
進度條,表示執行中的進度
常用屬性:
- max 定義完成的值
- value 定義當前值
3. 表單相關
3.1 新增表單元素
新增以下type型別:
- email 接收email
- url 接收URL
- tel 接收電話號碼,目前僅在移動裝置有效
- search 搜尋文字框
- number/range 接收數字/數字滑塊,包含min、max、step屬性
- date/month/week/time/datetime/datetime-local 日期時間選擇器(相容性不好)
- color 顏色拾取
作用:
- 具有格式校驗的功能
- 可以和移動裝置的虛擬鍵盤型別相關聯(需要通過Web伺服器訪問)
3.2 新增表單屬性
新增以下表單屬性,form標籤的屬性:
- autocomplete 是否啟用表單的自動完成功能,取值:on(預設值)、off
- novalidate 提交表單時不進行驗證,預設會進行表單驗證
3.3 新增表單元素屬性
新增以下表單元素屬性,input/select/textarea等標籤的屬性:
- placeholder 提示文字
- required 是否必填
- autocomplete 是否啟用該表單元素的自動完成功能
- autofocus 設定初始焦點元素
- pattern 使用正則表示式(RegExp,後面會詳細講解)進行資料驗證
- list 使文字元素具有下拉功能,需要配合datalist和option標籤一起使用
- form 可以將表單元素寫在form標籤外面,然後通過該屬性來關聯到指定的表單
- form重寫屬性,如formaction、frommethod等,可以重寫form標籤的屬性
4. 多媒體相關
4.1 audio標籤
在頁面中插入音訊,不同瀏覽器對音訊格式的支援不一樣
audio標籤常用屬性:
-
src 音訊檔案的來源
-
autoplay 是否自動播放,預設不自動播放
-
controls 是否顯示控制面板,預設不顯示
-
loop 是否迴圈播放
-
muted 是否靜音
-
preload 是否預載入,取值:none不預載入、auto預載入整個視訊(預設)、metadata只預載入元資料
如果設定了autoplay屬性,則該屬性無意義
可以結合source標籤使用,指定多個音訊檔案,瀏覽器會檢測並使用第一個可用的音訊檔案
source標籤常用屬性:
- src 音訊檔案的來源
- type 音訊檔案的型別,如audio/mp3、audio/ogg等,可以省略
4.2 video標籤
在頁面中插入視訊,不同瀏覽器對視訊格式的支援不一樣
用法與audio標籤基本相同,增加屬性:
- width/height 視訊播放器的尺寸
- poster 在視訊載入前顯示的圖片