基本结构
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文档标题</title>
</head>
<body>
<h1>欢迎来到HTML世界!</h1>
</body>
</html>
|
常用标签
段落与标题
1
2
| <h1>主标题</h1>
<p>这是一个段落，包含一些文字内容。</p>
|
超链接
1
| <a href="https://www.example.com">点击这里访问Example网站</a>
|
图片
1
| <img src="image.jpg" alt="描述图片内容">
|
列表
有序列表
1
2
3
4
5
| <ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
|
无序列表
1
2
3
4
5
| <ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
|
表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</table>
|
表单
1
2
3
4
5
| <form action="/submit" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<input type="submit" value="提交">
</form>
|
引用与强调
1
2
3
4
5
| <blockquote>
<p>“这是一个引用的示例。”</p>
</blockquote>
<strong>强调的文本</strong>
<em>斜体文本</em>
|
注释
常见属性
了解属性的用法
1
| <a href="https://www.example.com" target="_blank" title="访问Example">外部链接</a>
|
语义化标签
使用语义化标签提高可读性
1
2
3
4
5
6
7
8
9
10
| <article>
<h2>文章标题</h2>
<p>文章内容这里...</p>
</article>
<aside>
<h3>侧边栏</h3>
</aside>
<footer>
<p>版权信息</p>
</footer>
|
HTML5特性
视频和音频
1
2
3
4
5
6
7
8
9
| <video controls>
<source src="movie.mp4" type="video/mp4">
你的浏览器不支持视频标签。
</video>
<audio controls>
<source src="audio.mp3" type="audio/mp3">
你的浏览器不支持音频标签。
</audio>
|
小结
通过学习本教程，你已经掌握了HTML的基本语法和常见标签的使用。接下来，可以尝试自己创建一个简单的网页，运用所学到的知识。
