網頁標題
元數據標籤
<body></body>中主要包括網頁內容
<meta>標籤
二：HTML基本標籤
標題標籤
<h2>…二級標題</h2>
<h3>…三級標題</h3>
<h4>…四級標題</h4>
<h5>…五級標題</h5>
<h6>…六級標題</h6>
<h1>北京歡迎你</h1>
北京歡迎你，有夢想誰都了不起！<br />
有勇氣就會有奇蹟。<br />
北京歡迎你，爲你開天闢地<br />
……
</p>
特殊符號
超鏈接使用場合
1頁面間鏈接：從一個頁面鏈接到另外一個頁面
2功能性鏈接：電子郵件，迅雷，QQ
列表的分類：無序列表，有序列表，定義列表
無序列表eg:
<ul>(聲明無序列表)
<li>桔子</li>
<li>香蕉</li> <li>...</li>:聲明列表項
<li>蘋果</li>
</ul>
ul標籤的type屬性取值
<ol>(聲明有序列表)
<li>桔子</li>
<li>香蕉</li> <li>...</li>:聲明列表項
<li>蘋果</li>
</ol>
ol標籤的type取值
<dt>所屬學院</dt> <dt>...</dt>:聲明列表項
<dd>計算機應用</dd> <dd>...</dd>:定義列表項內容
<dt>所屬專業</dt>
<dd>計算機軟件工程</dd>
</dl>
三種列表對比：
類型 | 說明 | 項目符號 |
無序列表 | 以<ul>標籤來實現 以<li>標籤表示列表項 | 通過type屬性設置項目符號 disc（默認）、square和circle |
有序列表 | 以<ol>標籤來實現 以<li>標籤表示列表項 | 通過type屬性設置項目順序 1(數字，默認)、A（大寫字母）、a（小寫字母）、I（大寫羅馬數字）和i（小寫羅馬數字） |
定義類表 | 以<dl>標籤是實現 以<dt>標籤定義列表項 以<dd>標籤定義內容 | 無項目符號和顯示順序 |
<tr>(行標籤)
<td>第1個單元格的內容</td>(單元格標籤)
<td>第2個單元格的內容</td>
……
</tr>
<tr>
<td>第1個單元格的內容</td>
<td>第2個單元格的內容</td>
……
</tr>
</table>
表格對齊方式
默認對齊、居中對齊、左對齊、右對齊
單元格對齊方式 居中對齊 eg: align=center
水平對齊方式、垂直對齊方式
屬性 | 值 | 說明 |
align 水平對齊方式 | left | 左對齊 |
center | 居中對齊 | |
right | 右對齊 | |
valign 垂直對齊方式 | top | 頂端對齊 |
middle | 居中對齊 | |
bottom | 底端對齊 | |
baseline | 基線對齊 |
<table> colspan:所跨的列數。
<tr> rowspan:所跨的行數。
<td colspan="n">單元格內容</td>
</tr>
<tr>
<td>單元格內容</td>
……
</tr>
......
</table>
表單標籤
表單(form)：用來接收用戶信息的標籤
<form method=“post” action=“請求服務器端路徑">
<p> 名字：<input name=“username" type="text" > </p>
<p> 密碼：<input name=“pwd" type="password" > </p>
<p>
<input type="submit" value="提交">
<input type=“reset” value=“重置">
</p>
</form>
表單元素格式：
屬性 | 說明 |
type | 指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默認爲 text |
name | 指定表單元素的名稱。 |
value | 元素的初始值。type 爲 radio時必須指定一個值 |
size | 指定表單元素的初始寬度。當 type 爲 text 或 password時，表單元素的大小以字符爲單位。對於其他類型，寬度以像素爲單位 |
maxlength | type爲text 或 password 時，輸入的最大字符數 |
checked | type爲radio或checkbox時，指定按鈕是否是被選中 |
表單元素高級屬性
只讀 readonly="true"
禁用 disabled="true"
練習：
1.
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk"/>
<title>我的first網頁</title>
</head>
<body>
<a href="second.html" target="_blank">點擊跳轉</a> <br/> <br/>
<a href="mailto:[email protected]">點我發送郵件</a>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="gbk"/>
<title>我的第一個網頁</title>
</head>
<body>
<h1> Hello,歡迎學習html知識！</h1>
<hr/> <!-- 這是水平線標籤 -->
<p title="beijing">
北京歡迎你，有夢想誰都了不起！<br/>
爲你開天闢地。
</p>
<p> 有勇氣就會有奇蹟。</p>
中華人民共和國 加油！
<p> << 孫子兵法 >> </p>
</body>
</html>運行結果圖：
3.
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk"/>
<title>無序列表與有序列表</title>
</head>
<body>
<ul type="circle">
<a href="images/apple.jpg"> <li>XX</li> </a>
<li>薛晉</li>
<li>學生</li>
<a href="http://www.baidu.com" target="_blank"><li>YY</li></a>
</ul>
<ol type="a">
<li>劉亦菲</li>
<li>胡歌</li>
<li>吳京</li>
<li>演員</li>
<ol>
<dl>
<dt>Java</dt>
<dd>Java是一種應用廣泛的編程語言</dd>
<dt>Python</dt>
<dd>Python是一種腳本編程語言</dd>
</dl>
</body>
</html>運行結果圖：
4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sublime軟件</title>
</head>
<body>
用sublime創建一個html文件!
<h1>你好，Sublime</h1>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>註冊頁面</title>
</head>
<body>
<form method="post" action="serverURL" enctype="multipart/form-data">
註冊用戶名：<input type="text" name="username"> <br/> <br/>
註冊密碼：<input type="password" name="pwd"/> <br/>
性別: <input type="radio" name="sex" value="boy" checked="true" /> 男
<input type="radio" name="sex" value="girl"/> 女
<br/>
興趣愛好： <input type="checkbox" name="hobby" value="football"> 足球
<input type="checkbox" name="hobby" value="dancing" checked="true"> 跳舞
<input type="checkbox" name="hobby" value="reading"> 閱讀
<input type="checkbox" name="hobby" value="jogging"> 跑步
<br/>
籍貫：<select name="home">
<option value="shanxi">陝西</option>
<option value="jiangsu">江蘇</option>
<option value="henan">河南</option>
</select>
<br/>
<input type="button" disabled="true" value="普通按鈕">
<br/>
<input type="image" src="images/laba.png">
<br/>
自我介紹：<br/>
<textarea name="introduce" cols="30" rows="3" readonly="true"></textarea>
<br/>
上傳照片：<input type="file" name="pic"/>
<br/>
<input type="submit" value="註冊" /> <input type="reset" value="重置">
</form>
</body>
</html>運行結果圖：
6.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table標籤</title>
</head>
<body>
<table border="1" align="center">
<thead>
<th>學號</th>
<th>姓名</th>
<th>性別</th>
<th>成績</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>吳京</td>
<td>男</td>
<td>95.5</td>
</tr>
<tr>
<td>2</td>
<td>胡歌</td>
<td>男</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">3</td>
<td>洪金寶</td>
<td>男</td>
<td>80.5</td>
</tr>
<tr>
<td>成龍</td>
<td>女</td>
<td>70.5</td>
</tr>
<tr>
<td colspan="3">學生信息</td>
<td>總分</td>
</tr>
</tbody>
</table>
</body>
</html>運行結果圖：
