HTML的結(jié)構(gòu)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
/* 標(biāo)題 */
</title>
</head>
<body>
<!-- 正文-->
</body>
</html>
HTML常用的標(biāo)簽
標(biāo)題標(biāo)簽—h
總共有6級，依次從大到小。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>標(biāo)題標(biāo)簽</title>
</head>
<body>
<h1>我是h1標(biāo)簽</h1>
<h2>我是h1標(biāo)簽</h2>
<h3>我是h1標(biāo)簽</h3>
<h4>我是h1標(biāo)簽</h4>
<h5>我是h1標(biāo)簽</h5>
<h6>我是h1標(biāo)簽</h6>
</body>
</html>
瀏覽器顯示效果如下：
Paste_Image.png
表單標(biāo)簽—input
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表單標(biāo)簽</title>
</head>
<body>
<input placeholder="我是占位文字"><br>
<input value="我是默認(rèn)文字"><br>
<input type="date"><br>
<input type="file"><br>
<input type="color"><br>
<input type="radio"><br>
<input type="checkbox"><br>
</body>
</html>
為換行標(biāo)簽，type和value為input的屬性，可以改變它的樣式。顯示效果如下：
Paste_Image.png
段落標(biāo)簽—p
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落標(biāo)簽</title>
</head>
<body>
<p>
我是段落標(biāo)簽我是段落標(biāo)簽<br>
我是段落標(biāo)簽我是段落標(biāo)簽我是段落標(biāo)簽
</p>
</body>
</html>
顯示效果如下：
Paste_Image.png
超鏈接標(biāo)簽—a
比如說加載百度網(wǎng)頁。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超鏈接標(biāo)簽</title>
</head>
<body>
<a target="_blank">
百度
</a>
</body>
</html>
顯示效果如下：直接點擊文字跳轉(zhuǎn)到百度頁面，blank是在新的頁面加載百度。如果href="#",就是表示為空鏈接，跳轉(zhuǎn)到當(dāng)前界面。
Paste_Image.png
圖像標(biāo)簽—img
在本地放一張圖片，跟創(chuàng)建的html文件同級，直接加載圖片。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖像標(biāo)簽</title>
</head>
<body>
</body>
</html>
顯示效果：
Paste_Image.png
結(jié)合上面超鏈接標(biāo)簽，來實現(xiàn)點擊圖片跳轉(zhuǎn)百度頁面，如下代碼所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖像標(biāo)簽</title>
</head>
<body>
<a target="_blank">
</a>
</body>
</html>
alt后面的文字，只有在圖片加載失敗的時候，才會出現(xiàn)，現(xiàn)在加載成功，顯示效果如下：
Paste_Image.png
列表標(biāo)簽
列表標(biāo)簽分為有序列表(ol)和無序列表(ul)。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表標(biāo)簽</title>
</head>
<body>
<ul>
<!--無序列表-->
<li> 我是無序列表 </li>
<li> 我是無序列表 </li>
<li> 我是無序列表 </li>
<li> 我是無序列表 </li>
<li> 我是無序列表 </li>
</ul>
<!--有序列表-->
<ol type="1">
<li> 我是無序列表 </li>
<li> 我是無序列表 </li>
<li> 我是無序列表 </li>
<li> 我是無序列表 </li>
<li> 我是無序列表 </li>
</ol>
</body>
</html>
顯示效果：
Paste_Image.png
有序列表的type還可以等于A、I、a、i。
無序列表的type還可以設(shè)置為circle。
Paste_Image.png
