img標籤
1.img標籤中的img其實是英文image的縮寫 所以img標籤的作用, 就是告訴瀏覽器我們需要顯示一張圖片
2.img標籤格式: 
3.注意點
- 和H系列標籤/p標籤還有Hr標籤不一樣, img標籤不會獨佔一行
- 如果我們手動指定了img標籤顯示的圖片的寬度和高度, 有可能會導致圖片變形, 那麼如果又想指定寬度和高度, 又不想讓圖片變形. 我們可以只指定寬度和高度其中的一個值即可
- 只要指定了高度, 系統會自動根據高度計算出寬度, 只要指定了寬度, 系統會自動根據寬度計算出高度, 並且都是等比拉伸的, 也就是說不會變形
4.img中的其它屬性
width: 寬度
height: 高度
所以在img標籤中width/height這兩個屬性的作用, 就是用來告訴img標籤將來需要顯示的圖片有多寬有多高
如果img標籤沒有指定需要顯示的圖片的寬高, 那麼系統會按照圖片默認的寬高來顯示
如果img標籤指定的寬高, 那麼系統會按照指定的寬高來顯示
title: 用於告訴瀏覽器, 當鼠標懸停在圖片上時, 需要彈出的描述框中顯示什麼內容
alt其實是英文alternate的縮寫, 它的作用就是用於告訴瀏覽器, 當需要顯示的圖片找不到時顯示什麼內容
img標籤 路徑問題
其實想給src屬性賦值有兩種方式
1.通過相對路徑賦值
相對路徑就是每次都從.html文件所在的文件夾開始查找, 我們稱之爲相對路徑
1.1同級
同級就是”圖片”和”.html文件”存儲在同一個文件夾中
格式: src=”QRCode.jpg”
含義: 在.html文件所在的文件夾中查找名稱叫做QRCode.jpg的圖片
1.2下級
下級就是”存儲圖片的文件夾”和”.html文件”在同一個文件夾中
格式: src=”images/QRCode.jpg”
含義: 在.html文件所在的文件夾中找到名稱叫做images的文件夾
然後再在images文件夾中找到名稱叫做QRCode.jpg的圖片
1.3上級
上級就是”存儲圖片的位置”和存”儲代碼的文件夾”在同一個文件夾中
格式: src=”../QRCode.jpg”
含義：在.html文件所在的文件夾中找到這個文件夾的上一級文件夾, 然後再在上一級文件夾中找到名稱叫做QRCode.jpg
其中../代表找到當前文件夾的上一級文件夾
2.通過絕對路徑賦值(瞭解)
絕對路徑就是每次都從指定的盤符開始查找
格式: src=”C:\Users\Jonathan_Lee\Desktop\HTML基礎\QRCode.jpg”
含義: 在C盤下找到Users文件夾, 然後在Users文件夾中找到Jonathan_Lee文件夾, 然後在Jonathan_Lee文件夾中找到Desktop文件夾, 然後在Desktop文件夾中找到HTML基礎文件夾, 然後在HTML基礎文件夾中找到名稱叫做QRCode.jpg的圖片
注意:
1.路徑中不要出現中文, 否則可能出現未知問題
2.如果是通過"相對路徑"來指定圖片, 不能跨盤符
2.1例如.html文件在C盤, 那麼不能去查找D盤圖片
a標籤
什麼是a標籤？
a標籤的作用: 就是用於控制頁面與頁面之間跳轉的。
a標籤的格式: 需要展示給用戶查看的內容
a標籤有個target屬性，這個屬性就是專門用於控制如果跳轉;
_self: 在當前選項卡中跳轉，也就是不新建頁面跳轉;
_blank: 新建一個選項卡，也就是新建頁面跳轉;
a標籤中還有一個屬性，叫做title. a標籤中的title和img標籤中的title一樣， 都是用來控制鼠標懸停時顯示的提示文本的;
注意點:
1.a標籤不僅能夠讓文字點擊，也能讓圖片點擊。
2.一個a標籤必須有一個href屬性，否則a標籤不知道跳轉到什麼地方。
3.如果通過a標籤的href屬性指定一個URL地址，那麼必須在地址前面加http://或者https://。
4.a標籤的href屬性除了可以指定網絡地址以外, 還可以指定本地地址。
a標籤base標籤
base標籤就是專門用來統一的指定當前網頁中所有的超鏈接(a標籤)需要如何打開。
注意點:
1.base標籤必須寫在head標籤的開始標籤和結束標籤之間。
2.如果既在base中指定了target又在a標籤中指定了target,那麼瀏覽器會按照a標籤中指定的來執行。
a標籤假鏈接
1.什麼是假鏈接?
就是點擊之後不會跳轉的鏈接我們稱之爲假鏈接
2.假鏈接存在的意義:
在企業開發前期, 其它界面都沒有寫出來, 那麼我們就不知道應該跳轉到什麼地方, 所以就只能使用假鏈接來代替. 當項目後期其它界面都已經完成時再將假鏈接體會爲真鏈接
3.假鏈接的格式:
1.#
2.javascript:
4.兩者之間的區別:
#的假鏈接會自動回到網頁的頂部, 而javascript:的假鏈接不會自動回到網頁頂部
a標籤錨點
1.要想通過a標籤跳轉到指定的位置, 那麼必須告訴a標籤一個獨一無二的身份證號碼, 這樣a標籤才能在當前界面中找到需要跳轉到的目標位置
2.如果和HTML中的標籤綁定一個獨一無二的身份證號碼呢?
在HTML中, 每一個標籤都有一個名稱叫做id的屬性, 這個屬性就是用來給標籤指定一個獨一無二的身份證號碼的
3.所以要想實現通過a標籤跳轉到指定的位置分爲兩步
3.1給目標位置的標籤添加一個id屬性, 然後指定一個獨一無二的值
3.2告訴a標籤你需要跳轉到的目標標籤對應的獨一無二的身份證號碼是多少
格式:
<a href="#center">跳轉到中部</a>
<h3 id="center">我是中部</h3>
注意點:
1.通過我們的a標籤跳轉到指定的位置, 是沒有過度動畫的, 是直接一下子就跳轉到了指定位置
2.a標籤除了可以跳轉到當前界面的指定位置以外, 還可以在跳轉到其它界面的時候直接跳轉到其它界面的指定位置
格式:
<a href="13-錨點測試界面.html#bottom" target="_blank">跳轉到錨點測試界面</a>
<h3 id="bottom">我是錨點測試界面33333</h3>
無序列表、有序列表、定義列表
什麼是列表標籤?
列表標籤的作用: 給一堆數據添加列表語義, 也就是告訴搜索引擎告訴瀏覽器這一堆數據是一個整體。
HTML中列表標籤的分類
無序列表(最多)(unordered list)
有序列表(最少)(ordered list)
定義列表(其次)(definition list)
無序列表
給一堆數據添加列表語義, 並且這一堆數據中所有的數據都沒有先後之分
無序列表格式:
<ul>
<li>需要顯示的條目內容</li>
</ul>
li其實是英文list item的縮寫
list是列表的意思
item是條目的意思
所以結合起來就是 列表條目的意思
注意點:
1.一定要記住ul標籤是用來給一堆數據添加列表語義的, 而不是用來給他們添加小圓點的
2. ul標籤和li標籤是一個整體, 是一個組合. 所以一般情況下ul標籤和li標籤都是一起出現, 不會單個出現. 也就是說不會單獨使用一個ul標籤或者單獨使用一個li 標籤, 都是結合在一起使用
3.由於ul標籤和li標籤是一個組合, 所以ul標籤中不推薦包含其它標籤, 也就是說以後你在ul標籤中只會看到li標籤
前面我們說過ul中最好只放li標籤, 但是在企業開發中, li標籤中的內容可能會很複雜, 所以我們可以繼續在li標籤中添加其它的標籤來豐富我的界面
總結:
1.一定更要記住ul標籤中最好只放li標籤
2.但是li標籤中還可以繼續放其它的標籤
有序列表
給一堆數據添加列表語義, 並且這一堆數據中所有的數據都有先後之分
有序列表格式:
<ol>
<li></li>
</ol>
其它用法和ul都差不多, 也就是應用場景/注意點都和ul差不多
定義列表
1.定義列表的作用:
1.1給一堆數據添加列表語義
1.2先通過dt標籤定義列表中的所有標題, 然後再通過dd標籤給每個標題添加描述信息
2.定義列表的格式:
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
其實dt和dd都是英文的縮寫
dt是英文definition title的縮寫, 所以dt的含義就是用來定義列表中的標題
dd是英文definition description的縮寫, 所以dd的含義就是用來定義標題對應的描述的
3.定義列表的應用場景
1.做網站尾部的相關信息
2.做圖文混排
4.定義列表的注意點
4.1和ul/ol一樣, dl和dt/dd是一個整體, 所以他們一般情況下不會單獨出現, 都是一起出現
4.2和ul/ol一樣, 由於dl和dt/dd是一個組合標籤, 所以dl中建議只放dt和dd標籤
4.3一個dt可以沒有對應的dd,也可以有多個對應的dd, 但是無論有或者沒有dd都不推薦使用.
推薦使用一個dt對應一個dd
4.4和li標籤一樣, 當需要豐富界面時, 我們可以在dt和dd標籤中繼續添加其它標籤
表格標籤
表格標籤的基本使用
其實在過去表格標籤用的非常非常的多, 絕大多數的網站都是使用表格標籤來製作的, 也就是說表格標籤是一個時代的代表
1.什麼是表格標籤?
表格標籤作用: 用來給一堆數據添加表格語義
其實表格是一種數據的展現形式, 當數據量非常大的時候, 表格這種展現形式被認爲是最爲清晰的一種展現形式
2.表格標籤格式:
<table>
<tr>
<td>需要顯示的內容</td>
</tr>
</table>
其實表格標籤中的table代表整個表格, 也就是一堆table標籤就是一個表格
其實表格標籤中的tr標籤代表整個表格中的一行數據, 也就是說一對tr標籤就是表格中的一行
其實表格標籤中的td標籤代表表格中一行中的一個單元格, 也就是說一對td標籤就是一行中的一個單元格
3.注意點
表格標籤有一個邊框屬性, 這個屬性決定了邊框的寬度. 默認情況下這個屬性的值是0, 所以看不到邊框
表格標籤和列表標籤一樣, 它是一個組合標籤, 所以table/tr/td要麼一起出現, 要麼一起不出現, 不會單個出現
<table border="1">
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>
效果
| 1.1 | 1.2 | 1.3 |
| 2.1 | 2.2 | 2.3 |
表格標籤的屬性
1.寬度和高度的屬性
可以給table標籤和td標籤使用
1.1表格的寬度和高度默認是按照內容的尺寸來調整的, 也可以通過給table標籤設置width/height屬性的方式來手動指定表格的寬度和高度
1.2如果給td標籤設置widht/height屬性, 會修改當前單元格的寬度和高度, 不會影響整個表格的寬度和高度
2.水平對齊和垂直對齊的屬性
其中水平對齊可以給 table標籤 和 tr標籤 和 td標籤 使用
垂直對齊只能給 tr標籤 和 td標籤 使用
2.1給table標籤設置align屬性, 可以控制表格在水平方向的對齊方式
2.2給tr標籤設置align屬性, 可以控制當前行中所有單元格內容的水平方向的對齊方式
2.3給td標籤設置align屬性, 可以控制當前單元格中內容在說方向的對齊方式
注意點: 如果td中設置了align屬性, tr中也設置了align屬性, 那麼單元格中的內容會按照td中設置的來對齊
2.4給tr標籤設置valign屬性, 可以控制當前行中所有單元格中的內容, 在垂直方向的對齊方式
2.5給td標籤設置valign屬性, 可以控制當前單元格中的內容在垂直方向的對齊方式
注意點: 如果td中設置了valign屬性, tr中也設置了valign屬性, 那麼單元格中的內容會按照td中設置的來對齊
3.外邊距和內邊距的屬性
只能給table標籤使用
3.1.外邊距就是單元格和單元格之間的距離, 我們稱之爲外邊距
默認情況下單元格和單元格之間的外邊距的距離是2px
3.2 內邊距就是單元格的邊框和文字之間的間隙, 我們稱之爲內邊距
默認情況下內邊距是1
注意: 以上講解的內容僅僅作爲了解, 以後在企業開發中所有控制樣式的都是通過CSS
細線表格
在表格標籤中想通過指定外邊距爲0來實現細線表格是不靠譜的, 其實它是將2條線合併爲了一條線, 所以看上去很不舒服
細線表格的製作方式:
1.給table標籤設置bgcolor
2.給tr標籤設置bgcolor
3.給table標籤設置cellspacing = "1px"
注意點:
table標籤和tr標籤以及td標籤都支持bgcolor屬性
但是以上內容僅僅作爲了解, 在這裏只是簡單的瞭解下就可以了。
<table bgcolor="black" cellspacing="1px">
<tr bgcolor="white">
<td bgcolor="red">1.1</td>
<td>1.2</td>
</tr>
<tr bgcolor="white">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
| 1.1 | 1.2 |
| 2.1 | 2.2 |
表格標籤的其它標籤
1.表格標題
在表格標籤中提供了一個標籤專門用來設置表格的標題, 這個標籤叫做caption. 只要將標題寫在caption標籤中, 那麼標題就會自動相對於表格的寬度居中
2.caption標籤的注意點:
2.1caption一定要寫在table標籤中, 否則無效
2.2caption一定要緊跟在table標籤後面
3.標題單元格標籤
3.1.在表格標籤中提供了一個標籤專門用來存儲每一列的標題, 這個標籤叫做th標籤, 只要將當前列的標題存儲在這個標籤中就會自動居中+加粗文字
3.2.到此爲止我們就發現, 其實表格中有兩種單元格, 一種是td, 一種是th. td是專門用來存儲數據的, th是專門用來存儲當前列的標題的
表格的結構
1.由於表格中存儲的數據比較複雜, 爲了方便管理和閱讀以及提升語義, 我們可以對錶格中存儲的數據進行分類
表格中存儲的數據可以分爲4類
1.1表格的標題
1.2.表格的表頭信息
1.3.表格的主體信息
1.4.表格的頁尾信息
2.表格的完整結構
<table>
<caption>表格的標題</caption> // 指定表格的標題
<thead> //指定表格的表頭信息
<tr> //行
<th>每一列的標題</th> //標題單元格
</tr>
</thead>
<tbody> //指定表格的主體信息
<tr>
<td>數據</td> //數據單元格
</tr>
</tbody>
<tfoot> //指定表格的附加信息
<tr>
<td>數據</td>
</tr>
</tfoot>
</table>
| 每一列的標題 |
|---|
| 數據 |
| 數據 |
caption作用: 指定表格的標題
thead作用: 指定表格的表頭信息
tbody作用: 指定表格的主體信息
tfoot作用: 指定表格的附加信息
3.注意點:
3.1.如果我們沒有編寫tbody, 系統會系統給我們添加tbody
3.2.如果指定了thead和tfoot, 那麼在修改整個表格的高度時, thead和tfoot有自己默認的高度, 不會隨着表格的高度變化而變化
表單標籤
什麼是表單？
表單就是專門用來收集用戶信息的。
什麼是表單元素
表單元素其實還是HTML中的一些標籤, 只不過這些標籤比較特殊, 在瀏覽器中所有的表單標籤都有特殊的外觀和默認的功能
表單的格式:
<form>
<表單元素>
</form>
常見的表單元素
input標籤, input標籤有一個type屬性, 這個屬性有很多類型的取值, 取值的不同就決定了input標籤的功能和外觀不同
注意
表單元素一定要寫在表單中
<form>
<!--明文輸入框-->
賬號:<input type="text"><br>
<!--暗文輸入框-->
密碼:<input type="password"><br>
<!--給輸入框設置默認值-->
賬號:<input type="text" value="lnj"><br>
密碼:<input type="password" value="123"><br>
<!--
單選框
注意點:
1.默認情況下單選框不會互斥, 要想單選框互斥那麼必須給每一個單選框標籤都設置一個name屬性, 然後name屬性還必須設置相同的值
2.要想讓單選框默認選中某一個框子, 那麼可以給input標籤添加一個checked屬性
3.在HTML中如果屬性的取值和屬性的名稱一樣, 可以只寫一個. 但是在XHTML中必須寫上取值, 所以在企業開發中我們推薦大家不要省略取值
-->
性別:
<input type="radio" name="xx" checked>男
<input type="radio" name="xx">女
<input type="radio" name="xx" >保密<br>
<!--多選框-->
愛好:
<input type="checkbox">籃球
<input type="checkbox">足球
<input type="checkbox" checked="checked">棒球
<input type="checkbox" checked="checked">足浴
</form>
<form action="http://www.520it.com">
<!--明文輸入框-->
賬號:<input type="text" name="aa"><br>
<!--暗文輸入框-->
密碼:<input type="password" name="bb"><br>
<!--
定義普通按鈕
可以通過value屬性來給按鈕指定標題
作用: 配合JS完成一些操作
-->
<input type="button" value="我是按鈕">
<!--
圖片按鈕
作用: 配合JS完成一些操作
-->
<input type="image" src="images/register.jpg">
<!--
重置按鈕
作用: 用於清空表單中已經填寫好的數據
注意點:
如果想想改重置按鈕默認的按鈕標題可以通過value屬性來修改
-->
<input type="reset" value="清空">
<!--
提交按鈕
作用: 將表單中已經填寫好的數據, 提交到遠程服務器
注意點:
要想把表單中填寫好的數據提交到遠程服務器, 必須具備兩個條件
1.需要給form表單添加一個action的屬性, 通過這個action屬性指定需要提交到的服務器地址
2.需要給需要提交到服務器的表單元素添加一個name屬性
-->
<input type="submit">
<!--
隱藏域
作用 : 配合提交按鈕將一些數據默默的悄悄咪咪的提交到服務器
Ajax
-->
<input type="hidden" name="cc" value="kukuku">
</form>
lable標籤
1.默認情況下文字和輸入框是沒有關聯關係的, 也就是說點擊文字輸入框不會聚焦, 如果想點擊文字時讓對應的輸入框聚焦, 那麼就需要讓文字和輸入框進行綁定
2.要想讓輸入框和文字綁定在一起, 那麼我們可以使用Label標籤
3.綁定的格式:
3.1將文字利用label標籤包裹起來
3.2給輸入框添加一個id屬性
3.3在label標籤中通過for屬性和輸入框中的id進行綁定即可
<label for="account">賬號:</label><input type="text" id="account">
示例:
<form action="">
<label for="account">賬號:</label><input type="text" id="account"><br>
<label for="pwd">密碼:</label><input type="password" id="pwd"><br>
<hr>
<label>
賬號:<input type="text">
</label><br>
<hr>
<label for="def">賬號:</label><input type="text" id="abc"><br>
<label for="abc">密碼:</label><input type="password" id="def"><br>
</form>
Datalist標籤
給輸入框綁定待選項
格式
<datalist>
<option>待選項內容</option>
</datalist>
如何給輸入框綁定待選列表/strong>
1.搞一個輸入框
2.搞一個datalist列表
3.給datalist列表標籤添加一個id
4.給輸入框添加一個list屬性,將datalist的id對應的值賦值給list屬性即可
示例
請輸入你的車型: <input type="text" list="cars">
<datalist id="cars">
<option>奔馳</option>
<option>寶馬</option>
<option>奧迪</option>
<option>路虎</option>
<option>賓利</option>
</datalist>
詳情和概要標籤
利用summary標籤來描述概要信息, 利用details標籤來描述詳情信息
默認情況下是摺疊展示, 想看見詳情必須點擊
<details>
<summary>概要信息</summary>
詳情信息
</details>
select標籤
用於定義下拉列表
<select>
<optgroup label="分組名稱">
<option>列表數據</option>
</optgroup>
</select>
列表數據1
列表數據2
列表數據3
注意點
1.下拉列表不能輸入內容, 但是可以直接在列表中選擇內容
2.可以通過給option標籤添加一個selected屬性來指定列表的默認值
3.可以通過給option標籤包裹一層optgroup標籤來給下拉列表中的數據分類
textarea標籤
定義一個多行輸入框
格式
<textarea> </textarea>
注意點
1.默認情況下輸入框可以無限換行
2.默認情況下輸入框有自己的寬度和高度
3.可以通過cols和rows來指定輸入框的寬度和高度, 但是雖然指定了列數和行數, 但是還是可以無限往下輸入
4.默認情況下輸入框是可以手動拉伸的
fieldset標籤：可以給表單添加一個邊框
legend標籤：可以給邊框指定一個標題
表單標籤H5
可以自動校驗輸入的內容是否符合郵箱的格式
郵箱:
<input type="email">
可以自動校驗輸入的內容是否是URL地址
域名:
<input type="url">
輸入框中只能輸入數字
電話:
<input type="number">
可以通過日曆來選擇時間
時間:
<input type="date">
可以通過取色板來選擇顏色
顏色:
<input type="color">
多媒體標籤
video標籤
播放視頻
格式一:
<video src=""></video>
video標籤的屬性
src: 用於告訴video標籤需要播放的視頻地址
autoplay: 用於告訴video標籤是否需要自動播放視頻
controls: 用於告訴video標籤是否需要顯示控制條
poster: 用於告訴video標籤視頻沒有播放之前顯示的佔位圖片
loop: 一般用於做廣告視頻, 用於告訴video標籤視頻播放完畢之後是否需要循環播放
preload: 預加載視頻, 但是需要注意preload和autoplay相沖, 如果設置了autoplay屬性, 那麼preload屬性就會失效
muted:靜音
width/height: 和img標籤中的一模一樣
格式二
<video>
<source src="" type=""></source>
<source src="" type=""></source>
</video>
由於視頻數據非常非常的重要, 所以五大瀏覽器廠商都不願意支持別人的視頻格式, 所以導致了沒有一種視頻格式是所有瀏覽器都支持的
這個時候W3C爲了解決這個問題, 所以推出了第二個video標籤的格式
video標籤的第二種格式存在的意義就是爲了解決瀏覽器適配問題
video 元素支持三種視頻格式, 我們可以把這三種格式都通過source標籤指定給video標籤, 那麼以後當瀏覽器播放視頻時它就會從這三種中選擇一種自己支持的格式來播放
注意點:
1當前通過video標籤的第二種格式雖然能夠指定所有瀏覽器都支持的視頻格式, 但是想讓所有瀏覽器都通過video標籤播放視頻還有一個前提條件, 就是瀏覽器必須支持HTML5標籤, 否則同樣無法播放
2在過去的一些瀏覽器是不支持HTML5標籤的, 所以爲了讓過去的一些瀏覽器也能夠通過video標籤來播放視頻, 那麼我們以後可以通過一個JS的框架叫做html5media來實現
<video autoplay="autoplay" controls="controls">
<source src="" type="video/webm"></source>
<source src="" type="video/mp4"></source>
<source src="" type="video/ogg"></source>
</video>
audio標籤
播放音頻
<audio src=""> </audio>
<audio>
<source src="" type="">
</audio>
audio標籤的使用和video標籤的使用基本一樣, video中能夠使用的屬性在audio標籤中大部分都能夠使用, 並且功能都一樣
只不過有3個屬性不能用, height/width/poster