HTML學習筆記（全）

基本結構

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body></body>
</html>

?基本標簽元素

標題（heading）

<h1>一級標題</h1>

<h6>六級標題</h6>

生成h1~h6標題的快捷鍵：h$*6

*n表示生成h1~hn標題

段落

段落標簽<p>? </p>

段落結束之后自動換行

換行標簽<br>

可以在段落內部使用

水平線

<hr>標簽在HTML頁面中創建水平線

其基本屬性

<hr color=" " width=" " size=" " align=" "/>

color：顏色
width：長度
size：高度
align：對齊方式（默認居中），常見取值 left,right,center

圖片

<img>定義圖像

<img src=" " alt=" " width=" " height=" ">

?src：?圖片的路徑（最好使用相對路徑）
? alt：文件無法正常顯示時，的替代文本
width：圖片寬度
height：圖片高度
border：表框

路徑?

?路徑：分為網絡路徑，相對路徑，決對路徑

?網絡路徑：

具體的網絡地址

示例

<img src="https://www.163.com>? （網易）

絕對路徑：

示例

<img src="E:\xinjianwenjianjia\1.jpg">

注意：建議路徑中不要出現漢字?

?相對路徑：

子級關系：/
父級關系：../
同級路徑：./（可省略）

超文本鏈接

標簽<a>? ?</a>

若未添加鏈接地址，將僅作為文本

可使用屬性? herf? 來描述鏈接的地址

示例

<a herf="url" name=" " id=" ">鏈接文本</a>

鏈接文本可以為任意內容?

未訪問過的鏈接顯示未藍色字體并帶有下劃線
訪問過的鏈接顯示為紫色并帶有下劃線
點擊鏈接時，鏈接顯示為紅色并帶有下劃線

其他屬性：

target ：指定鏈接的目標窗口，可取值_self,_blank,_parent,_top
title ：鏈接提示文字
?rel ：規定當前文本與目標文本之間的關系（暫不學習）

<!DOCTYPE html>
<html><head><title>超鏈接</title></head><body><a href="表單.html" target="_blank">blank表單.html</a><br /><a href="表單.html" target="_parent">parent表單.html</a><br /><a href="表單.html" target="_self">self表單.html</a><br /><a href="表單.html" target="_top">top表單.html</a><br /></body>
</html>

其中 _blank會創建一個新的網頁

電子郵件鏈接mailto

將打開默認的電子郵件程序，比如 outlook 等，并自動填寫郵件地址

<a herf="mailto:電子郵箱地址">顯示鏈接的對象

文本標簽

<p></p>表示段落，如果想添加的文本僅僅是幾個詞時，還用這個就會不太舒服

常用?

標簽	描述
<em>	定義著重文字
<b>	定義粗體文字
<i>	定義斜體文字
<strong>	定義加重語氣
<del>	定義刪除字
<span>	無特定含義，普通

和段落是不同的，段落表示一段文本，而文本標簽一般表示文本詞匯，也可以在段落內部使用

示例?

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p>p白菜頭</p><em>em白菜頭</em><i>i白菜頭</i><b>b白菜頭</b><strong>strong白菜頭</strong><span>span白菜頭</span><del>del白菜頭</del></body>
</html>

效果圖

列表

列表之間是可以嵌套的

有序列表

<ol>

? ? ? <li>內容<li>

? ? ? <li>內容<li>

</ol>

<li>之間自動換行?

?可添加屬性 type

可以是“1”（默認），“a”，“A”，“i”（小寫羅馬數字），“I”（大寫羅馬數字）

無序列表

<ul>

? ? ? <li>內容<li>

? ? ? <li>內容<li>

</ul>

可添加屬性 type

“disc”實心圓（默認）
“circle”空心圓
“square” 小方塊
“none”不顯示

自定義列表

dl：自定義列表的開始
dt：定義列表的標題
dd：列表中每一項的定義

<dl>

<dt>

? ? ?<dd>內容?<dd>

? ? ?<dd>內容?<dd>

<dt>

<dl>

表格*

表格：<table>
標題：<caption>
表頭： <th>
行：<tr>
列（單元格）：<td>

快速生成n*n表格結構：table>tr*n>td*n{初始內容}

表格“table”屬性（常用）

“border” 邊框的寬度（不設置就看不到表格的線條）
“bordercolor”設置邊框顏色
“bgcolor”設置表格的背景色
“rules”表格內邊框顯示規則
“width”“height”
“cellpadding”設置單元格內容與邊框的空白間距（單位像素或百分比）
“cellspacing”單元格之間的空白間距（單位同上）

其中 rules 的設定有：

“none”：無內邊框
“rows”：僅行邊框
“cols”：僅列邊框
“all”：所有邊框（默認）

單元行“th”的屬性（常用）

“width”“height”
“align”表格行的對齊方式（水平），有：left，center，right
“valign”表格行的對齊方式（垂直），有：top，middle，bottom
“bgcolor”“bordercolor”

?單元格“td”的屬性常用

除擁有“th”的上訴屬性外，還有：

“colspan”“rowspan”分別表示定義單元格可橫跨（縱跨）的列（行）數

表頭“th”的屬性（常用）

內容會默認粗體，居中

“scope”定義表頭單元格的作用范圍，常見取值：

? ? ? ? ? ? ?“col”（表示該表頭單元格是一列的表頭）

? ? ? ? ? ? ?“row”（則是一行的表頭）

合并單元格示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border=1><tr><td>danyuange6</td><td colspan="2">danyuange7</td><!因為7占了兩列，刪除8><td>danyuange9</td><td>danyuange10</td></tr><tr><td>danyuange11</td><td>danyuange12</td><td>danyuange13</td><td>danyuange14</td><td rowspan="2">danyuange15</td></tr><tr><td>danyuange16</td><td>danyuange17</td><td>danyuange18</td><td>danyuange19</td><!因為15占了兩列，刪除20></tr></table></body>
</html>

水平合并：留左刪右

垂直合并：留上刪下?

form表單*

例如注冊框，搜索框

表單由容器（表單）和控件（輸入框，按鈕）組成

form

<form action="url"method="get|post"name="myform"></form>

“action”表單的數據所要傳給服務器的地址
“name”表單名稱
“method”方式數據提交方式：“get”“post”
target：打開表單的位置，同上超鏈接的target

“Get”和“Post”暫時不進行深入學習（與后臺有關）

控件（表單元素）

“input” 輸入框? ?
textarea：定義文本域（一多行輸入控件）
select：定義選擇列表
button：一個普通按鈕
label：定義控件標簽

input的type屬性

text：單行文本輸入區域（文本輸入框）
submit：將表單內容提交給服務器的按鈕
reset：清除表單內容，重新填寫按鈕
checkbox：多選按鈕
radio：單選按鈕
password：輸入內容自動顯示為****
hidden：隱藏區域，用戶不能在此處輸入，可用于預設要傳送的內容
image：使用圖像替代submit按鈕，單擊后表單內容及點擊坐標一起上傳
file：文件選擇框

HTML5中新增（部分）?

?required：提交時不能為空
placeholder：提供提示（hint），提示用戶所要輸入的內容
date：既包含輸入域，還提供一下拉日歷選擇年/月/日
month：選取年和月
week：年和周
time：時間
datetime：時間，日，月，年

select的常用屬性?

option：定義組合框中包含的下拉菜單項
selected：在某個option項中定義默認被選中
multiple：將select設置為多選

textarea常用屬性?

cols：設置文本區域的寬度，以字符數為單位
rows：允許輸入的最大行數
readonly：使用戶無法修改文本區域內容
disabled：首次加載時禁用此文本區

示例

源碼

<!DOCTYPE html>
<html><head><title>個人信息調查表</title><style></style></head><body><table border="2"><caption><i><strong><big>個人信息調查表</big></strong></i></caption><form action="">	<tr><td colspan="2"><p>姓名：<input type="text" /></p></td></tr><tr><td colspan="2"><p>密碼：<input type="password" /></p></td></tr><tr><td colspan="2"><p>性別：<input type="radio" name="sex" value="男"/> 男 &nbsp;&nbsp;<input type="radio" name="sex"/> 女</p></td></tr><tr><td colspan="2"><p>籍貫：<select name="省份" id="" size="1"><option value="河南">河南</option><option value="河北">河北</option><option value="湖南">湖北</option><option value="湖北">湖北</option></select>省</p></td></tr><tr><td colspan="2"><p>出生日期：<input type="date" /></p></td></tr><tr><td colspan="2"><p>個人愛好：<input type="checkbox" value="音樂"/>音樂&nbsp;<input type="checkbox" value="美食"/>美食&nbsp;<input type="checkbox" value="運動"/>運動&nbsp;<input type="checkbox" value="旅游"/>旅游</p></td></tr><th>自我介紹：</th><td><textarea name="textarea" cols="30" rows="10"></textarea></td></form></table></body>
</html>