前端學習之HTML
總結匯總一些html相關的知識點。
文章目錄
1. 基架標籤
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
</head>
<body>
</body>
</html>
| 標籤名 | 定義 | 說明 |
|---|---|---|
| <!DOCTYPE html> | 文檔類型 | 處於 <html> 標籤之前。告訴瀏覽器按照HTML5 規範解析頁面 |
| <html></html> | HTML標籤 | 頁面中最大的標籤，我們成爲 根標籤 |
| <html lang=“en”> | 指定html 語言種類 | 指定該html標籤 內容 所用的語言爲中文，en， zh-CN |
| <head></head> | 文檔的頭部 | 注意在head標籤中我們必須要設置的標籤是title |
| <meta charset=“UTF-8” /> | 字符集 | 讓 html 文件是以 UTF-8 編碼保存的， 瀏覽器根據編碼去解碼對應的html內容 |
| <titile></title> | 文檔的標題 | 讓頁面擁有一個屬於自己的網頁標題 |
| <body></body> | 文檔的主體 | 元素包含文檔的所有內容，頁面內容 基本都是放到body裏面的 |
2. 排版標籤彙總
排版標籤主要和css搭配使用，顯示網頁結構的標籤，是網頁佈局最常用的標籤。
2.1 標題標籤
<h1> 標題文本 </h1>
<h2> 標題文本 </h2>
<h3> 標題文本 </h3>
<h4> 標題文本 </h4>
<h5> 標題文本 </h5>
<h6> 標題文本 </h6>
2.2 段落標籤
默認情況下，文本在一個段落中會根據瀏覽器窗口的大小自動換行
<p> 文本內容 </p>
2.3 水平線標籤hr標籤
<hr />是單標籤
2.4 換行標籤br
在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然後自動換行。如果希望某段文本強制換行顯示，就需要使用換行標籤
<br />
2.5 div 和 span標籤
div 就是division的縮寫，分割分區的意思
span 跨度，跨距；範圍
div標籤用來佈局的，但是現在一行只能放一個div
span標籤用來佈局的，一行上可以放好多個span
<div> 這是段落 </div>
<span>今日天氣</span>
2.6 排版標籤總結
| 標籤名 | 定義 | 說明 |
|---|---|---|
| <hx></hx> | 標題標籤 | 作爲標題使用，並且依據重要性遞減 |
| <p></p> | 段落標籤 | 可以把 HTML 文檔分割爲若干段落 |
| <hr /> | 水平線標籤 | 沒啥可說的，就是一條線 |
| <br /> | 換行標籤 | |
| <div></div> | div標籤 | 用來佈局的，但是現在一行只能放一個div |
| <span></span> | span標籤 | 用來佈局的，一行上可以放好多個span |
3. 文本格式化標籤
<b> 粗體 </b>
<strong>粗體</strong>
<i>斜體</i>
<em>斜體</em>
<s>刪除線</s>
<del>刪除線</del>
<u>下劃線</u>
<ins>下劃線</ins>
- 預格式化文本pre標籤
<pre> 標籤可定義預格式化的文本。被包圍在 <pre> 標籤 元素中的文本通常會保留空格和換行符。而文本也會呈現爲等寬字體。
<pre>
此例演示如何使用 pre 標籤
對空行和 空格
進行控制
</pre>
- 特殊字符
是以運算符&開頭,以分號運算符;結尾。
他們不是標籤，而是符號。
HTML 中不能使用小於號 “<” 和大於號 “>”特殊字符，瀏覽器會將它們作爲標籤解析，若要正確顯示，在 HTML 源代碼中使用字符實體
<a href="#">more >></a>
4. 圖像標籤
在網頁中，有時需要爲文字設置粗體、斜體或下劃線效果，這時就需要用到HTML中的文本格式化標籤，使文字以特殊的方式顯示。
<img src="圖像URL" alt="文本" title="鼠標懸停時顯示的內容" width="設置圖像的寬度" height="設置圖像的高度" border="設置圖像的邊框寬度" />
<img src="cz.jpg" width="300" height="300" /><br />
<img src="cz.jpg" width="300" height="300" border="3" /><br />
<img src="cz.jpg" width="300" height="300" border="3" title="這是個小蒲公英" /><br />
<img src="cz.jpg" width="300" height="300" border="3" alt="圖片不存在" />
5. 鏈接標籤
<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>
| 屬性 | 作用 |
|---|---|
| href | 用於指定鏈接目標的url地址，（必須屬性）當爲標籤應用href屬性時，它就具有了超鏈接的功能 |
| target | 用於指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self爲默認值，__blank爲在新窗口中打開方式。 |
注意：
- 外部鏈接 需要添加 http:// www.baidu.com
- 內部鏈接 直接鏈接內部頁面名稱即可 比如 < a href=“index.html”> 首頁
- 如果當時沒有確定鏈接目標時，通常將鏈接標籤的href屬性值定義爲“#”(即href="#")，表示該鏈接暫時爲一個空鏈接。
- 不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。
- 錨點鏈接
<h3 id="two">第2集</h3>
<a href="#two">
- base 標籤
<base target="_blank" />
base 可以設置整體鏈接的打開狀態
base 寫到 之間
把所有的連接 都默認添加 target="_blank"
6. 註釋標籤
註釋內容不會顯示在瀏覽器窗口中，但是作爲HTML文檔內容的一部分，也會被下載到用戶的計算機上，查看源代碼時就可以看到。
語法格式：
<!-- 註釋語句 -->
7. 標籤屬性中的路徑
| 路徑分類 | 符號 | 說明 |
|---|---|---|
| 同一級路徑 | 只需輸入圖像文件的名稱即可，如<img src=“baidu.gif” /> | |
| 下一級路徑 | “/” | 圖像文件位於HTML文件同級文件夾下（例如文件夾名稱爲：images） |
| 上一級路徑 | “…/” | 在文件名之前加入“…/” ，如果是上兩級，則需要使用 “…/ …/”，以此類推 |
8. 表格table
<table>
<tr>
<td>單元格內的文字</td>
...
</tr>
...
</table>
table 用於定義一個表格標籤。
caption 表格標題
tr標籤 用於定義表格中的行，必須嵌套在 table標籤中。
td 用於定義表格中的單元格，必須嵌套在<tr></tr>標籤中。
字母 td 指表格數據（table data），即數據單元格的內容。
th 表頭單元格標籤，一般表頭單元格位於表格的第一行或第一列，並且文本加粗居中
<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
<caption>我是表格標題</caption>
<tr>
<th>姓名</th>
<th>性別</th>
<th>電話</th>
</tr>
<tr>
<td>小王</td>
<td>女</td>
<td>110</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>120</td>
</tr>
</table>
<table width="表格的寬度" height="表格的高度" border="表格的邊框"
cellpadding="單元格內容與單元格邊框之間的空白距離"
cellspacing="單元格與單元格邊框之間的空白距離"
align="設置表格在網頁中的水平對齊方式">
<tr> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr>
<tr> <td>劉德華</td> <td>男</td> <td>55</td> </tr>
<tr> <td>郭富城</td> <td>男</td> <td>52</td> </tr>
<tr> <td>張學友</td> <td>男</td> <td>58</td> </tr>
<tr> <td>黎明</td> <td>男</td> <td>18</td> </tr>
<tr> <td>劉曉慶</td> <td>女</td> <td>63</td> </tr>
</table>
對於比較複雜的表格，又將表格分割成三個部分：題頭、正文和腳註。而這三部分分別用:thead,tbody,tfoot來標註， 這樣更好的分清表格結構
<thead></thead>：用於定義表格的頭部。用來放標題之類的東西。 內部必須擁有 標籤！
<tbody></tbody>：用於定義表格的主體。放數據本體 。
<tfoot></tfoot>放表格的腳註之類。
以上標籤都是放到table標籤中。
- 合併單元格
跨行合併：rowspan=“合併單元格的個數”
跨列合併：colspan=“合併單元格的個數”
- 先確定是跨行還是跨列合併
- 根據先上，後下，先左，後右的原則找到目標單元格，然後寫上合併方式還有要合併的單元格數量 比如 ： <td colspan=“3”></td>
- 刪除多餘的單元格單元格
| 標籤名 | 定義 | 說明 |
|---|---|---|
| <table></table> | 表格標籤 | 就是一個四方的盒子 |
| <tr></tr> | 表格行標籤 | 行標籤要再table標籤內部纔有意義 |
| <td></td> | 單元格標籤 | 單元格標籤是個容器級元素，可以放任何東西 |
| <th></th> | 表頭單元格標籤 | 它還是一個單元格，但是裏面的文字會居中且加粗 |
| <caption></caption> | 表格標題標籤 | 表格的標題，跟着表格一起走，和表格居中對齊 |
| clospan 和 rowspan | 合併屬性 | 用來合併單元格的 |
9. 列表
無序列表的各個列表項之間沒有順序級別之分，是並列的。
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
......
</ul>
有序列表即爲有排列順序的列表，其各個列表項按照一定的順序排列定義，
<ol>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
......
</ol>
定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
...
<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
...
</dl>
| 標籤名 | 定義 | 說明 |
|---|---|---|
| <ul></ul> | 無序標籤 | 裏面只能包含li 沒有順序，我們以後佈局中最常用的列表 |
| <ol></ol> | 有序標籤 | 裏面只能包含li 有順序， 使用情況較少 |
| <dl></dl> | 自定義列表 | 裏面有2個兄弟， dt 和 dd |
10. 表單標籤
10.1 input 控件
<input type="屬性值" value="你好">
用戶名: <input type="text" />
密 碼：<input type="password" />
用戶名:<input type="text" name="username" value="請輸入用戶名">
用戶名:<input type="text" name=“username” />
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
性 別:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
| 屬性 | 說明 | 作用 |
|---|---|---|
| type | 表單類型 | 用來指定不同的控件類型 |
| value | 表單值 | 表單裏面默認顯示的文本 |
| name | 表單名字 | 頁面中的表單很多，name主要作用就是用於區別不同的表單。 |
| checked | 默認選中 | 表示那個單選或者複選按鈕一開始就被選中了 |
10.2 label 標籤
<label> 用戶名： <input type="radio" name="usename" value="請輸入用戶名"> </label>
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
10.3 textarea 控件
<textarea >
文本內容
</textarea>
| 表單 | 名稱 | 區別 | 默認值顯示 | 用於場景 |
|---|---|---|---|---|
| input type=“text” | 文本框 | 只能顯示一行文本 | 單標籤，通過value顯示默認值 | 用戶名、暱稱、密碼等 |
| textarea | 文本域 | 可以顯示多行文本 | 雙標籤，默認值寫到標籤中間 | 留言板 |
10.4 select 下拉列表
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>
在option 中定義selected =" selected "時，當前項即爲默認選中項。
10.5 form 表單域
<form action="url地址" method="提交方式" name="表單名稱">
各種表單控件
</form>
| 屬性 | 屬性值 | 作用 |
|---|---|---|
| action | url地址 | 用於指定接收並處理表單數據的服務器程序的url地址。 |
| method | get/post | 用於設置表單數據的提交方式，其取值爲get或post。 |
| name | 名稱 | 用於指定表單的名稱，以區分同一個頁面中的多個表單。 |