列表，表格，媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ListTest</title>
</head>
<body>
<ol>
<li>前端</li>
<li>后端</li>
<li>测试</li>
<li>产品经理</li>
</ol>
</body>
</html>
<br/>
<ul>
<li>Jave</li>
<li>Pathon</li>
<li>C++</li>
<li>C#</li>
</ul>
</body>
</html>
<br/>
<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>英语</dd>
<dd>数学</dd>
<dt>年级</dt>
<dd>一年级</dd>
<dd>二年级</dd>
<dd>三年级</dd>
</dl>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TableTest</title>
</head>
<body>
<table border="1px">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TableTest</title>
</head>
<body>
<table border="1px">
<tr>
<td colspan="3">1-1</td>
<td>1-2</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
视频和音频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VideoTest</title>
</head>
<body>
<video src="../resources/video/a.mp4" controls autoplay></video>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AudioTest</title>
</head>
<body>
<audio src="../resources/audio/b.mp3" controls autoplay></audio>
</body>
</html>
页面结构分析
| 元素名 |
描述 |
| header |
标题头部区域的内容（用于页面或页面中的一块区域） |
| footer |
标记脚部区域的内容（用于整个页面或页面的一块区域） |
| section |
Web页面中的一块独立区域 |
| article |
独立的文章内容 |
| aside |
相关内容或应用（常用于侧边栏） |
| nav |
导航类辅助内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StructureTest</title>
</head>
<body>
<header>
<h1>网页头部</h1>
</header>
<section>
<h2>网页主体部分</h2>
</section>
<footer>
<h1>网页脚部</h1>
</footer>
</body>
</html>
iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>InlineTest</title>
</head>
<body>
<iframe src="https://www.baidu.com" name="hello" frameborder="0"width="800" height="800"></iframe>
<a href="https://www.baidu.com"target="hello">点击跳转</a>
</body>
</html>