Html書寫規範，基本標籤使用
阿新 • • 發佈：2018-12-23
一、html簡介
1、html是什麼
Html是用來描述網頁的一種語言。
(1)HTML 指的是超文字標記語言 (Hyper Text Markup Language)
(2)HTML 不是一種程式語言，而是一種標記語言(markup language,標記語言是一套標記標籤(markup tag));
(3)HTML 使用標記標籤來描述網頁
超文字 標記 語言
語言：
人與計算機互動的工具
超文字：
(1)普通文字不能實現的，超文字可以實現，能實現普通文字不能實現的功能
(2)包括超連結的文字
標記：
就是標籤，不同的標籤能實現不同的功能
2、html能做什麼
html通過標籤的形式將資訊展示給使用者
3、html書寫規範
(1)html結構
<html>
<head>
包括資訊資訊：整個頁面的屬性、指導瀏覽器解析的標籤、引入外部檔案的標籤
</head>
<body>
我們需要展示的資訊
</body>
</html>
(2)html標籤是以尖括號包裹關鍵字成對出現的，有開始標籤和結束標籤，支援正確的巢狀
(3)大部分標籤有屬性 格式：屬性=“屬性值”（多個屬性之間用空格隔開）
(4)空標籤：功能比較單一 ，例如：<br></br> === <br/>
(5)html不區分大小寫，建議使用小寫
需求：寫一段文字，將其中的部分文字變成紅色，字號變大
<html>
<head></head>
<body>
我請大家吃狗不理<font color="red" size="5">包子</font>，
<br/>
大家很高興！！！
</body>
</html>
二、html基本標籤
1、檔案標籤(結構標籤)
<html><html>:根標籤
<head>
<title></title>:頁面的標題
</head>
<body></body>：內容
屬性：
text:文字的顏色
bgcolor:背景色
background:背景圖片
顏色的三種表示方式：
(1)單詞：red green black
(2)rgb三原色：reg(0,0,0) 0-255
(3)#000000 #ffffff #325687 #377405
2、排版標籤
(1)註釋標籤：<!--註釋-->
(2)換行標籤：<br/>
(3)段落標籤：<p>文字文字</p>
特點：段與段之間有空行
屬性：
align:對齊方式（有三個屬性值：left center right）
(4)水平線標籤：<hr/>
屬性：
width:長度
size:粗度
color：顏色
align:對齊方式
尺寸的寫法：
（1）畫素：10px
（2）百分比：佔據副標籤的百分比，會隨著副標籤的大小進行變化
3、塊標籤
<div></div>:行級塊標籤
<span></span>:行內塊標籤
作用：
（1）<div></div>：div+css佈局
（2）<span></span>：進行友好提示
4、文字標籤
基本文字標籤：<font></font>
屬性：
color:顏色
size:大小（最大值:7，最小值:1，預設值:3）
face:字型型別，即字型，直接寫文字就可以
標題標籤：<h1></h1>-<h6></h6>
隨著數字的增大逐漸變小，字型是加粗的，內建字號 預設佔據一行
5、清單標籤（也稱為列表標籤）
無序列表：<ul></ul>
<li></li>:列表項
屬性：
type：有三個值，分別為disc、 square和circle
示例：
<ul >
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
有序列表：<ol></ol>
<li></li>:列表項
屬性：
type：1、A、a、I、i（數字、字母、羅馬數字）
start:數字，代表首項開始位置
示例：
<ol>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ol>
列表標籤的作用：實現選單項（可以實現橫向或者縱向選單）
無序列表標籤怎麼去掉小圓點？HTML中不能直接去掉，沒有這個屬性值，需要在CSS中給li標籤新增樣式list-style:none;
6、圖形標籤：<img />（自關閉標籤）
屬性：
src:圖形地址
width:寬度
height:高度
border:邊框
align:對齊方式，代表圖片與相鄰的文字的相對位置（有三個屬性值：top middle bottom）
alt:圖片的文字說明
7、連結標籤：<a></a>
屬性：
href:跳轉頁面地址
name:名稱，錨點
target:_self(自己) _blank(新頁面,之前的頁面還有)， 預設是_self
作用：
（1）頁面跳轉，注意：要調到外網必須要加協議
（2）訪問錨點；回到錨點（頂部、底部、中間），在訪問錨點時的書寫格式：#name的值；
8、表格標籤
<table></table>:
屬性：
border:表格邊框
width:表格的寬度
align:表格的對齊方式（<tr align="center">單元格里面的內容居中對齊<tr>）
bgcolor:背景顏色
<tr></tr>: 代表行
<td></td>：代表單元格
屬性：
colspan:列合併
rowspan:行合併
<th></th>：相等於<td>, 只是內建樣式加粗居中
<caption></caption>：表格的標題，即表頭
表格的作用：
(1)簡單的實現一個表格樣式
(2)進行頁面佈局
示例：
<table>
<tr><!--行-->
<th>表格標頭</th>
<td>普通單元格</td>
</tr>
</table>
<thead></thead>、<tbody></tbody>、<tfoot></tfoot>
作用：分塊載入，使用者體驗比較好
三、html表單標籤(重點)
1、form標籤：<form></form>
屬性：
name:表單名稱
action:提交的路徑地址
method:提交方式（get和post）
get和post的區別（重點）：
(1)get提交將資料加在位址列的後面，格式?name=value&name=value；post提交將資料封裝在請求體中
?username=zhangsan&password=123&sex=male&hobby=football&hobby=paiqiu&city=bj#
(2)get提交相對不安全；post提交相對安全
(3)get提交有大小限制，根據瀏覽器不同而不同；post不限制大小
示例：
<form>
<table>
<!--form裡面巢狀table-->
</table>
</form>
2、input標籤：<input type=" "/> 22411
type屬性:根據type屬性實現各種不同功能的表單項；
text：普通的文字輸入框；
name：username value="張三"<!--張三是預設值-->
password：密碼輸入框；特點是顯示的是掩碼
radio：單選按鈕
name：如果想讓一組單選按鈕互斥，就用指定同意name屬性值，需要加value屬性值；
checked：預設被選中；
checkbox：複選框；
name：組的概念，需要加value屬性值。
checked：預設被選中；
button：普通按鈕，沒有任何內建的功能；
submit：內建功能，點選會按照action地址提交
reset：重置，點選會清空之前填寫的內容
image：圖片按鈕，功能類似與submit
src：載入圖片
alt:圖片的提示文字
file：上傳檔案的控制元件
hidden:隱藏表單，作用是在提交資料的時候，伺服器需要這個資料，但是不需要使用者看到。
注意：name屬性必須要寫。
3、select標籤(<select></select>)：下拉選單
屬性：
name;表單項的名稱
option標籤：可選項（下拉選單之間的級聯）
屬性：
value，表單項的值
selected：預設被選中
4、textarea:文字域標籤
屬性：
cols：列數
rows：行數
注意：預設的文字值在標籤體當中
四、html框架標籤及其他
1、框架標籤
frameset:
屬性：
rows；按行劃分
cols：按列劃分
劃分格式： rows="120,*"
frame:
屬性：
name：名稱，方便target根據name值進行定位
src:載入的頁面地址；
2、其他標籤
<meta>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link>
<link rel="stylesheet" type="text/css" href="./styles.css">
href：引入css檔案的地址
<script>
<script type="text/javascript" src=""></script>
src：js的檔案地址
3、特殊字元
空格
> 大於號
< 小於號
© 版權符號
® 註冊符號
1、html是什麼
Html是用來描述網頁的一種語言。
(1)HTML 指的是超文字標記語言 (Hyper Text Markup Language)
(2)HTML 不是一種程式語言，而是一種標記語言(markup language,標記語言是一套標記標籤(markup tag));
(3)HTML 使用標記標籤來描述網頁
超文字 標記 語言
語言：
人與計算機互動的工具
超文字：
(1)普通文字不能實現的，超文字可以實現，能實現普通文字不能實現的功能
(2)包括超連結的文字
標記：
就是標籤，不同的標籤能實現不同的功能
2、html能做什麼
html通過標籤的形式將資訊展示給使用者
3、html書寫規範
(1)html結構
<html>
<head>
包括資訊資訊：整個頁面的屬性、指導瀏覽器解析的標籤、引入外部檔案的標籤
</head>
<body>
我們需要展示的資訊
</body>
</html>
(2)html標籤是以尖括號包裹關鍵字成對出現的，有開始標籤和結束標籤，支援正確的巢狀
(3)大部分標籤有屬性 格式：屬性=“屬性值”（多個屬性之間用空格隔開）
(4)空標籤：功能比較單一 ，例如：<br></br> === <br/>
(5)html不區分大小寫，建議使用小寫
需求：寫一段文字，將其中的部分文字變成紅色，字號變大
<html>
<head></head>
<body>
我請大家吃狗不理<font color="red" size="5">包子</font>，
<br/>
大家很高興！！！
</body>
</html>
二、html基本標籤
1、檔案標籤(結構標籤)
<html><html>:根標籤
<head>
<title></title>:頁面的標題
</head>
<body></body>：內容
屬性：
text:文字的顏色
bgcolor:背景色
background:背景圖片
顏色的三種表示方式：
(1)單詞：red green black
(2)rgb三原色：reg(0,0,0) 0-255
(3)#000000 #ffffff #325687 #377405
2、排版標籤
(1)註釋標籤：<!--註釋-->
(2)換行標籤：<br/>
(3)段落標籤：<p>文字文字</p>
特點：段與段之間有空行
屬性：
align:對齊方式（有三個屬性值：left center right）
(4)水平線標籤：<hr/>
屬性：
width:長度
size:粗度
color：顏色
align:對齊方式
尺寸的寫法：
（1）畫素：10px
（2）百分比：佔據副標籤的百分比，會隨著副標籤的大小進行變化
3、塊標籤
<div></div>:行級塊標籤
<span></span>:行內塊標籤
作用：
（1）<div></div>：div+css佈局
（2）<span></span>：進行友好提示
4、文字標籤
基本文字標籤：<font></font>
屬性：
color:顏色
size:大小（最大值:7，最小值:1，預設值:3）
face:字型型別，即字型，直接寫文字就可以
標題標籤：<h1></h1>-<h6></h6>
隨著數字的增大逐漸變小，字型是加粗的，內建字號 預設佔據一行
5、清單標籤（也稱為列表標籤）
無序列表：<ul></ul>
<li></li>:列表項
屬性：
type：有三個值，分別為disc、 square和circle
示例：
<ul >
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
有序列表：<ol></ol>
<li></li>:列表項
屬性：
type：1、A、a、I、i（數字、字母、羅馬數字）
start:數字，代表首項開始位置
示例：
<ol>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ol>
列表標籤的作用：實現選單項（可以實現橫向或者縱向選單）
無序列表標籤怎麼去掉小圓點？HTML中不能直接去掉，沒有這個屬性值，需要在CSS中給li標籤新增樣式list-style:none;
6、圖形標籤：<img />（自關閉標籤）
屬性：
src:圖形地址
width:寬度
height:高度
border:邊框
align:對齊方式，代表圖片與相鄰的文字的相對位置（有三個屬性值：top middle bottom）
alt:圖片的文字說明
7、連結標籤：<a></a>
屬性：
href:跳轉頁面地址
name:名稱，錨點
target:_self(自己) _blank(新頁面,之前的頁面還有)， 預設是_self
作用：
（1）頁面跳轉，注意：要調到外網必須要加協議
（2）訪問錨點；回到錨點（頂部、底部、中間），在訪問錨點時的書寫格式：#name的值；
8、表格標籤
<table></table>:
屬性：
border:表格邊框
width:表格的寬度
align:表格的對齊方式（<tr align="center">單元格里面的內容居中對齊<tr>）
bgcolor:背景顏色
<tr></tr>: 代表行
<td></td>：代表單元格
屬性：
colspan:列合併
rowspan:行合併
<th></th>：相等於<td>, 只是內建樣式加粗居中
<caption></caption>：表格的標題，即表頭
表格的作用：
(1)簡單的實現一個表格樣式
(2)進行頁面佈局
示例：
<table>
<tr><!--行-->
<th>表格標頭</th>
<td>普通單元格</td>
</tr>
</table>
<thead></thead>、<tbody></tbody>、<tfoot></tfoot>
作用：分塊載入，使用者體驗比較好
三、html表單標籤(重點)
1、form標籤：<form></form>
屬性：
name:表單名稱
action:提交的路徑地址
method:提交方式（get和post）
get和post的區別（重點）：
(1)get提交將資料加在位址列的後面，格式?name=value&name=value；post提交將資料封裝在請求體中
?username=zhangsan&password=123&sex=male&hobby=football&hobby=paiqiu&city=bj#
(2)get提交相對不安全；post提交相對安全
(3)get提交有大小限制，根據瀏覽器不同而不同；post不限制大小
示例：
<form>
<table>
<!--form裡面巢狀table-->
</table>
</form>
2、input標籤：<input type=" "/> 22411
type屬性:根據type屬性實現各種不同功能的表單項；
text：普通的文字輸入框；
name：username value="張三"<!--張三是預設值-->
password：密碼輸入框；特點是顯示的是掩碼
radio：單選按鈕
name：如果想讓一組單選按鈕互斥，就用指定同意name屬性值，需要加value屬性值；
checked：預設被選中；
checkbox：複選框；
name：組的概念，需要加value屬性值。
checked：預設被選中；
button：普通按鈕，沒有任何內建的功能；
submit：內建功能，點選會按照action地址提交
reset：重置，點選會清空之前填寫的內容
image：圖片按鈕，功能類似與submit
src：載入圖片
alt:圖片的提示文字
file：上傳檔案的控制元件
hidden:隱藏表單，作用是在提交資料的時候，伺服器需要這個資料，但是不需要使用者看到。
注意：name屬性必須要寫。
3、select標籤(<select></select>)：下拉選單
屬性：
name;表單項的名稱
option標籤：可選項（下拉選單之間的級聯）
屬性：
value，表單項的值
selected：預設被選中
4、textarea:文字域標籤
屬性：
cols：列數
rows：行數
注意：預設的文字值在標籤體當中
四、html框架標籤及其他
1、框架標籤
frameset:
屬性：
rows；按行劃分
cols：按列劃分
劃分格式： rows="120,*"
frame:
屬性：
name：名稱，方便target根據name值進行定位
src:載入的頁面地址；
2、其他標籤
<meta>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link>
<link rel="stylesheet" type="text/css" href="./styles.css">
href：引入css檔案的地址
<script>
<script type="text/javascript" src=""></script>
src：js的檔案地址
3、特殊字元
空格
> 大於號
< 小於號
© 版權符號
® 註冊符號