一、列表標籤
無序列表 （ul-li）
例如：
-
語文
-
數學
-
音樂
有序列表 (ol-li)
例如：
-
熱搜1
-
熱搜2
-
熱搜3
自定義列表 (dl-dt-dd)
例如：
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--title-->
<!--無序 ul-li
導航
側邊欄新聞
在文章中，一般會使用它來排列
-->
<ul>
<li>語文</li>
<li>數學</li>
<li>英語</li>
<li>Java</li>
</ul>
<hr>
<!--有序 ol-li
問答試卷、測試題....卷子，或者需要排序的。微博熱搜，榜單
-->
<ol>
<li>====</li>
<li>====</li>
<li>====</li>
<li>====</li>
</ol>
<hr>
<!--自定義列表
網站的底部，用於標記項
-->
<dl>
<dt>水果</dt>
<dd>蘋果</dd>
<dd>梨子</dd>
<dd>香蕉</dd>
<dd>葡萄</dd>
<dt>水果</dt>
<dd>蘋果</dd>
<dd>梨子</dd>
<dd>香蕉</dd>
<dd>葡萄</dd>
</dl>
</body>
</html>
運行結果：
二、表格標籤
基本結構：
- 表格 table
- 行 tr rowspan(跨行)
- 列 td colspan（跨列）
- 實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格標籤table
border="1px" 邊框屬性
-->
<table border="1px">
<!--行和列-->
<!--第一行 tr,列 td-->
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
<hr>
<table border="1px">
<tr>
<!--實現跨列
colspan 對應的值:就是要跨幾列
-->
<td colspan="2">學生成績</td>
</tr>
<tr>
<!--科目名稱-->
<td>語文</td>
<td>100</td>
</tr>
<tr>
<!--成績-->
<td>數學</td>
<td>100</td>
</tr>
</table>
<hr>
<table border="1px">
<tr>
<!--rowspan 所跨的行數-->
<td rowspan="2">張三</td>
<td>語文</td>
<td>100</td>
</tr>
<tr>
<td>數學</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>語文</td>
<td>0</td>
</tr>
<tr>
<td>數學</td>
<td>0</td>
</tr>
</table>
</body>
</html>
運行結果：
三、視頻標籤
視頻 vedio
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>視頻</title>
</head>
<body>
<!--video 視頻標籤
這裏放到視頻，或者音樂，都是必須要能夠直接播放的。
src：視頻的路徑
controls: 提供播放按鈕，進度條、下載按鈕、全屏按鈕、音量控制
autoplay： 自動播放
loop: 循環播放
-->
<!--<video src="../statics/video/china.mp4" controls autoplay loop οnscrοll="this"></video>-->
<!--<video src="//player.bilibili.com/player.html?aid=68373450&cid=118499718&page=1" controls autoplay>-->
<!--</video>-->
<iframe src="//player.bilibili.com/player.html?aid=68373450&cid=118499718&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"
width="1000px" height="500px">
</iframe>
</body>
</html>
運行結果：
四、音頻標籤
音頻 audio
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--音頻播放-->
<audio src="../statics/audio/ab410f7bbbb0955e7ae476ae89527a5d.m4a" autoplay controls>
</audio>
</body>
</html>
運行結果：
五、網頁結構標籤
- 頁面的頭部
- 頁面的主體
- 頁面的尾部
html5 標籤，沒有任何作用，只是讓代碼結構更好看
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--這些標籤都是一些行業規範-->
<header>
我是頭部
</header>
<nav>導航欄</nav>
<aside>側邊欄</aside>
<article>文章主題</article>
<section> 獨立區域 </section>
<footer>
我是尾部
</footer>
</body>
</html>
運行結果：
六、內聯框架標籤
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--iframe 內聯框架
src： 地址
-->
<!--<iframe src="https://www.baidu.com/" width="1000px" height="600px"></iframe>-->
<iframe name="mainFrame"></iframe>
<a href="https://www.baidu.com/" target="mainFrame">點擊顯示</a>
<!--Ajax-->
</body>
</html>
運行結果：
