目錄:
1.HTML基本骨架
2.head內部的可放標籤
3.文本所用標籤
4.列表標籤
5.表格標籤
6.表單標籤
7.導入圖片和超鏈接
8.行內元素和塊元素
9. 特殊符號在網頁中的轉換和註釋
10.框架
1. HTML基本骨架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
對於骨架各部分的概述
| 骨架部分 | 概述 |
|---|---|
| <!doctype html> | 是一個文檔聲明，表示這是一個HTML頁面，也表示表示網頁是按照html5標準編寫的 |
| <html> </html> | 是最根本的標籤表示整個網頁，是一個雙標籤 |
| <head></head> | 網頁的頭部裏邊是一些網頁的配置除了title標籤其餘都不可見，是一對雙標籤，標籤內容是幫瀏覽器解析頁面的 |
| <meta> | 裏邊是一個網頁使用的字符集 |
| <title> </title> | 表示網頁的標題 |
| <body></body> | 用戶所能看到的內容區域 |
有時候我們會在html這個標籤裏邊，看到一條屬性：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
xmlns是html的第一個屬性是一個命名空間，規定不同用戶在瀏覽器中標籤語義遵循的統一標準，第二個屬性就是lang代表所有的標籤語言都是英文
2. head標籤內部的可放標籤
2.1title標籤
<title></title>：雙標籤，放置網頁的標題
2.1meta標籤
<meta>：單標籤，一般用於定義頁面的特殊信息，如頁面關鍵字，頁面描述等，提供給搜索引擎，告訴搜索引擎這個頁面是做什麼的
meta標籤有兩個屬性：
1.name屬性：常用取值只有2個：keywords、description,結合content一起用，屬性keywords主要是網頁的關鍵字，description則是對網頁的描述
<meta name="keywords" content="陪博主學前端"/>
<meta name="description" content="博主是一個帥哥"/>
2.http-equiv屬性：常用屬性值Content-Type和refresh，結合content一起用，Content-Type是定義網頁所用的編碼
refresh是定義網頁自動刷新跳轉：
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>//定義網頁所用編碼爲utf-8
<meta http-equiv="refresh" content="6;url=https://www.bilibili.com/"/>//六秒跳轉到B站""
注意在HTML5中定義網頁所用編碼可以直接用：<meta charset=“utf-8”/>
2.2其他標籤
<style type="text/css"></style>：標籤內寫CSS的代碼
2.3script標籤
<script></script>：標籤內寫JavaScript代碼
2.3link標籤
<link type="text/css" rel="stylesheet" href="css/index.css" >：導入css文件
3.文本所用標籤
3.1h標籤
<h1~6></h1~6>：分別對應六種標題1~6從大到小,h1標題所佔權重最高最便利搜索引擎搜索，一個頁面一般要有一個h1標籤一般將這個標籤給logn(能代表整個網頁的圖標)
3.2p標籤
<p></p>：段落標籤
3.3兩個單標籤
<br/>：單標籤，換行標籤
<hr/>：單標籤，水平線標籤
3.4文本標籤(雙標籤)
| 標籤名 | 作用 |
|---|---|
| strong或者b | 粗體標籤 |
| i或者em或cite | 斜體標籤 |
| sup | 上標標籤(比如5的平方，那麼平方的2就可以使用sup修飾) |
| sub | 下標標籤(化學方程式用的較多) |
| s | 中劃線標籤 |
| u | 下劃線標籤 |
| big | 大字號標籤 |
| small | 小字號標籤 |
3.5div標籤span標籤
<div></div>：可以在網頁劃分區域，可以用於網頁的整體的佈局，無特殊含義
<span></span>：沒有特殊含義，代表小的範圍，文本級標籤，不能放容器級標籤,通常和CSS連用
4. 列表標籤
4.1有序列表
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
比如我們使用a,b,c進行排序：
注意：ol標籤和li標籤需要配合使用，不能單獨使用，而且ol的子標籤只能是li標籤
4.2無序列表
//可用ul>li*4這種快捷鍵生成如下代碼
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
注意ul標籤裏邊只能是li標籤，文本不能直接放在ul標籤內，而是放在標籤內
4.3定義列表
<dl>//定義列表
<dt>名詞</dt>//定義標題
<dd>描述</dd>//定義解釋
....
</dl>
舉個例子
注意：dt後邊可以有多個dd對dt進行解釋，dt後邊也可以不跟dd也不會影響整體結構
5.表格標籤
5.1表格標籤
| 標籤 | 作用 |
|---|---|
| table | 表格 |
| tr | 代表行 |
| td | 代表單元格 |
| caption | 表格標題 |
| th | 表頭單元格 |
| thead | 劃分表頭部分 |
| tbody | 劃分表身部分 |
| tfoot | 表腳 |
行，單元格等都需要放在table標籤裏邊，其實th和td在本質上都是單元格，但是瀏覽器會對th進行加粗居中，但是不會對td一居中加粗，後三個標籤沒有語義就是把表格分爲三個部分，讓表格的代碼更具有可讀性
例子：
table標籤屬性border：代表整個表格邊框顏色的深度，0代表沒有邊框(默認是0)，以後邊框深度依次加深比如：
5.2合併單元格
| 標籤 | 作用 |
|---|---|
| rowspan | 合併行 |
| colspan | 合併列 |
例子：
6.表單標籤
6.1form標籤
我們把表單標籤都放在form標籤中
form標籤屬性
| 屬性 | 作用 |
|---|---|
| name | 表單的名字 |
| method | 提交方式 |
| action | 提交地址 |
- 這裏的提交方式指指表單元素使用哪一種http提交方式，method的屬性值有兩個，一個是get一個是post
- 提交地址用於指定表單數據提交到哪一個地址處理
6.2input標籤
是一個單標籤
關於input的type屬性
6.3單行文本框
input屬性值爲text
從上邊的介紹，我們可以看到，單行文本框的瀏覽器效果，我們還可以給單行文本框設置屬性，常用的單行文本的屬性爲：
| 屬性 | 說明 |
|---|---|
| value | 設置單行文本框的默認值，也就是默認情況下單行文本框顯示的內容 |
| size | 設置單行文本框的長度 |
| maxlength | 設置單行文本框最多可以輸入的字符數 |
例子：
6.4密碼文本框
input屬性值爲password
同樣的我們可以爲密碼文本框設置屬性
| 屬性 | 說明 |
|---|---|
| value | 設置密碼文本框的默認值，也就是默認情況下密碼文本框顯示的文字 |
| size | 設置密碼文本框的長度 |
| maxlength | 設置最大輸入字符數 |
6.5單選框
input屬性值爲radio
我們單選框是必備兩個屬性的：
| 屬性 | 作用 |
|---|---|
| name | 表示單選框按鈕所在的組名 |
| value | 表示單選框的可取值 |
舉個例子：
當name屬性一樣的時候，我們只能勾選一個，但是當name屬性不一致的時候，那麼就都可以勾選，所以name屬性的一致性需要特別注意。還有一個缺點，那麼就是隻要我們不手動勾選，那麼系統是不會默認勾選的，所以我們這裏還有一個屬性可以爲我們默認勾選，那就是checked，有兩種寫法都會默認的勾選女：
<input type="radio" name="a" value="女" checked />女
<input type="radio" name="a" value="女" checked="checked"/ >女
6.6複選框
input屬性值爲checkbox
和單選框一致我們複選框也是三個屬性的：
| 屬性 | 作用 |
|---|---|
| name | 表示單選框按鈕所在的組名 |
| value | 表示單選框的可取值 |
| checked | 默認勾選 |
6.7按鈕
input屬性值分爲三個button，submit，reset,分別表示普通按鈕，提交按鈕，重置按鈕
和value屬性搭配使用，value裏邊的內容就是按鈕上的內容
| 按鈕類型 | 說明 |
|---|---|
| 普通按鈕 | 一般都是搭配js操作 |
| 提交按鈕 | 給服務器提交數據 |
| 重置按鈕 | 重置用戶在表單輸入的內容(重置按鈕只能重置它所在的form標籤) |
6.8多行文本框
多行文本框不是放在input標籤裏，他有自己的標籤textarea
兩個屬性：
| 屬性 | 屬性值 |
|---|---|
| row | 行數 |
| cols | 列數 |
6.9下拉列表
同樣的不需要input標籤，是靠着select和option兩個標籤來完成的
1.關於select標籤：
他有兩種屬性：
| 屬性 | 作用 |
|---|---|
| multiple | 設置下拉列表可以選擇多項(無屬性值) |
| size | 設置下拉列表顯示幾個列表項，取值爲整數 |
想要多選需要按住ctrl加鼠標左鍵
2.option標籤：
兩個屬性：
| 屬性 | 作用 |
|---|---|
| selected | 是否選中(默認選中) |
| value | 選項值(可以不加，他是和js配合使用) |
我們使用一下select屬性：
可以看到默認的jQuery被選中
6.10文件上傳
input屬性值爲file
6.11綜合：
7.導入圖片和超鏈接
7.1導入圖片
<img/>：單標籤
三個屬性：
| 屬性 | 作用 |
|---|---|
| src | 指定圖片路徑，可以是相對和絕對路徑 |
| alt | 用於圖片描述，這個描述是給搜索引擎看的，當我們的圖片無法顯示的時候，頁面會顯示alt屬性的內容 |
| title | 也是用於圖片描述，不過是描述給用戶看的，當我們鼠標移動到圖片上的時候會顯示title上的文字 |
7.2超鏈接
<a herf="鏈接地址">文本或者圖片</a>：實現頁面的跳轉，有兩個屬性，第一個是是herf，第二個是target
herf就不用多說了，關於target的屬性值：
| 屬性值 | 作用 |
|---|---|
| _self | 在原來窗口打開鏈接(默認值) |
| _blank | 在新的窗口打開鏈接 |
如果我們在一個項目下面有多個網頁，同樣也可以在這些網頁之間實現相互跳轉
7.3錨點跳轉
這個比如博主寫博客，點擊博主的目錄就會跳到本頁面對應的位置，這個就叫做錨點跳轉(跳轉到本頁面的指定位置)
h標籤內有一個id屬性可以設置一個id值，可以讓a標籤的屬性href等於#+id值,這樣就可以實現頁面內的跳轉
比如：
<a href="#a1" >1.簡介
<a href="#a2" >2.說明
<h1 id="a1">1.簡介</h1>
<h1 id="a2">2.說明</h1>
8. 行內元素和塊元素
1.塊元素：獨佔一行的元素，不管有多少內容，都會獨佔一行
2.行內元素：只佔自身大小，不會佔一行
常見的塊元素：
| 塊元素 | 說明 |
|---|---|
| h1~h6 | 標題元素 |
| p | 段落元素 |
| div | div無特殊含有，與網頁佈局有關 |
| hr | 水平線 |
| ol | 有序列表 |
| ul | 無序列表 |
塊元素的特點：
- 塊元素獨佔一行，排斥其他元素（包括塊元素和行內元素）與其位於同一行；
- 塊元素內部可以容納其他塊元素和行內元素
行內元素：
常見行內元素:
| 行內元素 | 說明 |
|---|---|
| strong | 粗體元素 |
| em | 斜體元素 |
| a | 超鏈接 |
| span | 常用行內元素，結合css定義樣式 |
9.特殊符號在網頁中的轉換和註釋
9.1特殊符號在網頁中的轉換
| 特殊符號 | 代碼 |
|---|---|
| > | > |
| < | &It; |
| & | & |
| 空格 | |
9.2註釋
第一種：
<!--註釋內容-->
第二種：ctrl+/
10.框架
框架的意思是從頁面裏邊再嵌套頁面
格式及說明：
<iframe src="鏈接地址" width="數值" height="數值"></iframe>
我們舉個例子：
