什么是HTML？
- 定义：
HTML（超文本标记语言）是构建网页的基础语言。
HTML基本结构
<!DOCTYPE html>：声明文档类型。<html>：根元素。<head>：文档的元数据。<body>：网页的主体内容。
示例代码
1
2
3
4
5
6
7
8
9
| <!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
</body>
</html>
|
常用标签介绍
<h1> 到 <h6>：标题标签，<h1>最大，<h6>最小。<p>：段落标签，表示文本段落。<a>：链接标签，使用 href 属性设置链接地址。
示例代码
1
2
3
| <h1>这是一个标题</h1>
<p>这是一个段落，包含一些文本内容。</p>
<a href="https://www.example.com">点击这里访问示例网站</a>
|
列表的使用
- 有序列表使用
<ol> 标签。
- 无序列表使用
<ul> 标签。
- 列表项使用
<li> 标签。
示例代码
1
2
3
4
5
6
7
8
9
10
11
12
13
| <h2>我的爱好</h2>
<ul>
<li>阅读</li>
<li>旅行</li>
<li>编程</li>
</ul>
<h2>我的学习计划</h2>
<ol>
<li>学习HTML</li>
<li>学习CSS</li>
<li>学习JavaScript</li>
</ol>
|
图像的插入
- 使用
<img> 标签插入图片，使用 src 属性指定图片路径，alt 属性提供替代文本。
示例代码
1
| <img src="your-image.jpg" alt="描述性文本">
|
表格的创建
- 使用
<table> 标签创建表格，<tr> 创建行，<td> 创建单元格，<th> 创建表头。
示例代码
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>18</td>
</tr>
<tr>
<td>小红</td>
<td>20</td>
</tr>
</table>
|
HTML表单
- 使用
<form> 标签定义表单，常见控件有 <input>、<textarea> 和 <button>。
示例代码
1
2
3
4
5
6
7
8
9
| <form action="/submit" method="POST">
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<br>
<label for="comment">评论:</label>
<textarea id="comment" name="comment"></textarea>
<br>
<button type="submit">提交</button>
</form>
|
HTML注释
- 使用
<!-- 注释内容 --> 来添加注释，不会在网页中显示。
示例代码
HTML文档的最佳实践
- 使用有效的标签结构，确保无误。
- 针对SEO优化合理使用标题层级。
- 为图片使用描述性
alt 文本，提升可访问性。
小结与学习资源
希望这个教程能帮助你入门 HTML，开启你的网站开发之旅！
