Html標籤知識點學習筆記

Renaway發表於2018-02-17
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> 
特點：段與段之間有空行（<p>和</p>各佔一行）
屬性：
align:對齊方式（有三個屬性值：left  center   right）
(4)水平線標籤：<hr/>
屬性：
width:長度
size:粗度
color：顏色
align:對齊方式

尺寸的寫法：
（1）畫素：10px

（2）百分比：佔據副標籤的百分比，會隨著副標籤的大小進行變化

                                   

<hr width="50%" size="10px" color="red" align="left"/>
3、塊標籤
<div></div>:行級塊標籤，預設佔一行。
<span></span>:行內塊標籤

作用：
（1）<div></div>：div+css佈局

（2）<span></span>：進行友好提示

4、文字標籤
基本文字標籤：<font></font>
屬性：
color:顏色
size:大小（最大值:7，最小值:1，預設值:3）

face:字型型別，即字型，直接寫文字就可以

 <font color="red" size="2" face="黑體">font標籤</font><br/>

標題標籤：<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）頁面跳轉，注意：要調到外網必須要加協議，如http://www.baidu.com

（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=" "/>
type屬性:根據type屬性實現各種不同功能的表單項；
text：普通的文字輸入框；
name：username value="張三"<!--張三是預設值-->
password：密碼輸入框；特點是顯示的是掩碼
radio：單選按鈕
name：如果想讓一組單選按鈕互斥，就用指定同意name屬性值，需要加value屬性值；
checked：預設被選中；
checkbox：核取方塊；
name：組的概念，需要加value屬性值。
checked：預設被選中；
file：上傳檔案的控制元件
button：普通按鈕，沒有任何內建的功能；
submit：內建功能，點選會按照action地址提交
reset：重置，點選會清空之前填寫的內容
image：圖片按鈕，功能類似與submit
src：載入圖片
alt:圖片的提示文字
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、特殊字元
&nbsp; 空格
&gt;   大於號
&lt;   小於號
&copy; 版權符號
&reg;  註冊符號

相關文章