黑馬前端教程01HTML-HTML
技術標籤：html
1.html初識
html指的是超文字標記語言，是一種標記語言。主要需要學習html標籤。
1.1html骨架標籤
| 標籤名 | 定義 | 說明 |
|---|---|---|
| html標籤 | 根標籤 | |
| 文件的頭部 | 在head標籤中中必須設定title | |
| 文件的標題 | 網頁的標題 | |
| 文件的主體 | 包含所有頁面內容 |
html標籤名，型別，標籤屬性和大部分屬性值建議統一用小寫。
1.2html元素標籤分類
分類：
常規元素（雙標籤）
<標籤名>內容</標籤名>
前面開始標籤，後面結束標籤，/為關閉符
空元素（單標籤）
<標籤名 />
裡面不需要包含內容，只有一個開始標籤不需要關閉。
1.3html標籤關係
針對於雙標籤有兩種：巢狀關係和並列關係
巢狀關係（父子關係）：
<head>
<title></title>
</head>
並列關係（兄弟關係）：
<body></body>
<head></head>
建議：父子關係的標籤，子元素最好縮排一個tab的鍵位。如果是並列關係，最好上下對齊。
2.程式碼開發工具
dreamweaver，sublimetText，WebStorm，Hbuilder
vscode中新建一個html檔案，然後輸入一個！，選擇第一個選項，即可快速生成html檔案的骨架。
3.文件型別
用法：
<!DOCTYPE html> 作用：
宣告位於文件中的最前面的位置，處於標籤之前。表明當前瀏覽器按照HTML5規範解析頁面。
4.頁面語言lang
<html lang="en">
常用：en定義為英語，zh-CN為中文。
5.字符集
<meta charset="UTF-8">
常用：UTF-8，gbk，gb2312（簡單中文），BIG5（繁體中文）
6.HTML標籤的語義化
標籤語義化指的是標籤的含義。
語義化的目的：
根據標籤的語義，在合適的地方給出一個最為合理的標籤，讓結構更加清晰。
語義化的好處：
1.方便程式碼的閱讀和維護
2.讓瀏覽器或者網路爬蟲可以很好的解析，分析內容
3.使用語義化標籤會具有更好的搜尋引擎優化
語義是否良好：
當我們去掉css之後，網頁結構是否依然組織有序，並且具有良好的可讀性。
遵循的原則：
先確定語義的HTML，再選合適的CSS。
7.html常用標籤
7.1排版標籤
主要和css搭配使用，顯示網頁結構的標籤。
（1）標題標籤h
一共6個等級，從
到
。
-
加了標題的文字會加粗，h1的字號最大，然後依次遞減。
-
一行只能放一個標題
（2）段落標籤p
作用：可以把html分割為若干個段落。
文字在一個段落中會根據瀏覽器的視窗的大小自動換行。
（3）水平線標籤hr
建立橫跨網頁的水平線，將段落與段落之間隔開，使文件結構清晰。**
是單標籤。**在網頁中使用預設樣式的水平線。
<hr />
（4）換行標籤br
在網頁中，一個段落文字會依次從左到右，直到瀏覽器的最右端，如果需要強制換行顯示，那麼就需要用到換行符號。
<br />
（5）div和span標籤
div和span是網頁佈局主要的2個盒子，div和span標籤是沒有語義的。
<div></div>
<span></span>
他們兩個都是盒子，用來裝網頁的，區別為：
div標籤是用來佈局的，一行只能放一個div。
span標籤是用來佈局的，一行可以放多個span。
7.2文字格式化標籤
| 標籤 | 顯示效果 |
|---|---|
| 加粗 | |
| 斜體 | |
| 加刪除線 | |
| 加下劃線 |
7.3標籤屬性
<標籤名 屬性1="屬性值1" 屬性2="屬性值2" > 內容 </標籤名>
7.4影象標籤img
<img src="影象url" />
屬性:
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| src | url | 影象的路徑（必須） |
| alt | 文字 | 影象不能顯示時的替換文字 |
| title | 文字 | 影象懸停時展示的內容 |
| width | 畫素 | 設定影象的寬度 |
| height | 畫素 | 設定影象的高度 |
| border | 數字 | 設定影象邊框的寬度 |
注意：
1.屬性必須跟在開始標籤中，位於標籤名之後
2.屬性之間不分先後順序，標籤名與屬性，屬性與屬性之間以空格分開
3.採用鍵值對形式，key=“value"的格式
7.5 連結標籤
<a herf="跳轉目標" target="目標視窗的彈出方式"> 文字或影象</a>
| 屬性 | 作用 |
|---|---|
| href | 指定連結目標的url地址，（必須屬性），當有href屬性時，就具備了超連結的功能。 |
| target | 指定連結頁面的開啟方式。有self和blank,_self為預設值，_blank為在新視窗中開啟。 |
注意：
1.外部連結需要新增http://
2.內部連結：直接連結內部網頁名稱即可
3.如果當時沒確定，通常暫定義為空連結
<a href="#"></a>
4.不僅可以建立文字超連結，還可以建立各種網頁元素（影象，表格，音訊，視訊）等超連結。
影象替代連結
<a href="http://wwww.baidu.com"> <img src="p1.jpg" /> </a>
當做某個文字即可，點開影象可以跳轉至百度首頁
7.6註釋標籤
語法格式：
<!-- 註釋語句 -->
快捷鍵是Ctrl + / 或者Ctrl + shift + /
註釋標籤內容不會在網頁中展示。
8.路徑
相對路徑：同一級直接檔名引用；下一級用/表示；上一級用…/表示（上一級，下一級，同一級是圖片位於HTML頁面的位置）
絕對路徑：以web站點根目錄為參考基礎的目錄路徑，為完整的檔案路徑或者完整的網路地址。（用的較少）寫法為符號\
9.錨點定位
通過建立錨點連結，使用者能夠快速定位到目標內容。
建立步驟：
1.使用相應的id名稱跳轉至目標的位置（找目標）
2.使用
<a href="#id名">連結文字</a>
以上代表被點選的（拉關係）
10.base標籤
語法：
<base target="_blank"> --寫在head標籤裡面,表明所有連結都在新視窗中開啟--
11.預格式化文字pre標籤
預格式化文字
標籤可定義預格式化文字，被標籤包圍的文字通常會保留空格和換行符，文字呈現等寬字型。（怎麼寫怎麼顯示）
12.特殊字元
html為特殊字元準備了專門的替代程式碼：
特殊字元 描述 字元的程式碼 空格符  ； < 小於號 <； > 大於號 >；
他們不是標籤，而是符號。
13.表格，表單，列表
表格用來展示資料；表單用來收集使用者資訊；列表用來佈局，列表可以頁面佈局整齊規範。
13.1表格
1.建立表格
<table>
<tr>
<td> 單元格內的文字</td>
...
</tr>
...
</table>
建立表格的基本標籤：table，tr，td缺一不可。
- table用來定義一個表格標籤
- tr標籤用來定義表格中的行，必須巢狀在table標籤內。(行標籤)
- td(table data)用於定義單元格，必須巢狀在tr標籤內。td指的是表格資料，即單元格的內容。（單元格標籤）
2.表格屬性
| 屬性名 | 含義 | 常用屬性值 |
|---|---|---|
| border | 邊框（border=“0”無邊框） | 畫素值 |
| cellspacing | 單元格和單元格邊框之間的空白間距 | 畫素值（預設2) |
| cellpadding | 單元格內容與單元格邊框之間的空白間距 | 畫素值（預設1） |
| width | 表格寬度 | 畫素值 |
| height | 高度 | 畫素值 |
| align | 表格在網頁中的水平對齊方式 | left，center，right |
3.表頭單元格標籤th
作用：表頭單元格位於第一行或者第一列，並且文字加粗居中
語法：替換相對應的單元格標籤即可
4.表格標題caption
<table>
<caption> 我是表格標題 </caption>
</table>
注意：
- caption元素定義表格標題，並且標題會被居中並且顯示在表格上。
- caption標籤必須緊隨table標籤之後，並且這個標籤只在表格裡面才有意義。
5.合併單元格
1.兩種方式
跨行合併:rowspan=“合併單元格的個數”
跨列合併:colspan=“合併單元格的個數”
2.合併單元格的順序
先上後下，先左後右
3.三個步驟
- 先確定跨行還是跨列
- 根據先上後下，先左後右的原則找到目標單元格，然後寫上要合併的數量
- 刪除多餘的單元格
6.複雜表格劃分結構：
題頭，正文和腳註。分別用：thead,tbody,tfoot來標註
注意：
- 定義表格頭部，存放標題。內部必須有標籤
- 定義表格的主體，放資料本體。
- 放表格的腳註。
以上標籤都是放在table標籤之內的。
13.2列表和表單
列表用來佈局，可以裝載文字，圖表或者圖片，自由組合度更高。
1.列表標籤
<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>
2.表單標籤
表單主要是為了收集使用者資訊，跟使用者進行互動，收集使用者資料。主要包含三大部分：表單元素，提示資訊和表單域3部分組成。
常用屬性：
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| type | text | 單行文字輸入框 |
| type | password | 密碼輸入框 |
| type | radio | 單選按鈕 |
| type | checkbox | 複選框 |
| type | button | 普通按鈕 |
| type | submit | 提交按鈕 |
| type | reset | 重置按鈕 |
| type | image | 影象形式的提交按鈕 |
| type | file | 檔案域 |
| name | 由使用者自定義 | 控制元件的名稱 |
| value | 由使用者自定義 | input控制元件中的預設文字值 |
| size | 正整數 | input控制元件在頁面中的顯示寬度 |
| checked | checked | 表示預設為選中狀態（單選按鈕和複選按鈕） |
| maxlength | 正整數 | 控制元件允許輸入的最多字元數 |
-
label標籤
概念：label標籤為input元素定義標註
作用：繫結一個表單元素，當點選label標籤時，被繫結的表單元素就會獲得輸入焦點。
用法：
**第一種：**label直接包括input表單。適合單個表單選擇
<label> 使用者名稱：<input type="radio" name="username" value="請輸入使用者名稱"> </label>**第二種：**for屬性規定label與哪個表單元素繫結(for+id)
<label for="sex">男</label> <input type="radio" name="sex" id="sex"> -
textarea控制元件（文字域）
<textarea cols="每行中的字元數" rows="顯示的行數">文字內容</textarea>通過textarea控制元件可以輕鬆的建立多行文字輸入框
-
select下拉選單
<select> <option>選項1</option> <option>選項2</option> <option>選項3</option> ... </select>注意：
1.中至少應該包含一對
2.在option中定義selected="selected"時，當前選項即為預設選中項
3.表單域
form標籤用於定義表單域，以實現使用者資訊的收集和傳遞，form中所有內容都會被提交給伺服器。
<form action="url地址" method="提交方式" name="表單名稱">
各種表單控制元件
</form>
常用屬性：
| 屬性 | 屬性值 | 作用 |
|---|---|---|
| action | url地址 | 指定接受並處理表單資料的伺服器程式的url地址 |
| method | get/post | 設定表單資料的提交方式 |
| name | 名稱 | 指定表單的名稱，以區別一個頁面中的多個表單 |