一、列表标签
无序列表 （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>
运行结果：
