HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。以下是一个简略的 HTML 教程,介绍了 HTML 的基本结构和常用标签。
基本结构
HTML 文档的基本结构如下:
html
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<h1>欢迎使用 HTML</h1>
<p>这是一个段落。</p>
</body>
</html>
常用标签
1. 标题标签
用于定义六个不同级别的标题,<h1>
是最高级别,<h6>
是最低级别。
html
复制代码
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
2. 段落标签
用于定义段落。
html
复制代码
<p>这是一个段落。</p>
3. 链接标签
用于创建超链接。
html
复制代码
<a href="https://www.example.com">这是一个链接</a>
4. 图片标签
用于在网页中嵌入图像。
html
复制代码
<img src="image.jpg" alt="描述文本">
5. 列表标签
无序列表
html
复制代码
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
有序列表
html
复制代码
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
6. 表格标签
用于创建表格。
html
复制代码
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
7. 表单标签
用于创建用户输入表单。
html
复制代码
<form action="/submit" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<input type="submit" value="提交">
</form>
8. div 和 span 标签
div
标签
用于定义文档中的块级区域。
html
复制代码
<div>
<h2>这是一个 div 块</h2>
<p>块级元素可以包含段落、标题、表格等。</p>
</div>
span
标签
用于定义文档中的行内区域。
html
复制代码
<p>这是一段包含 <span>行内元素</span> 的文本。</p>
9. 注释
用于在 HTML 文档中添加注释。
html
复制代码
<!-- 这是一个注释 -->
10. 元数据标签
用于在 <head>
部分包含元数据。
html
复制代码
<meta charset="UTF-8">
<meta name="description" content="这是一个描述">
<meta name="keywords" content="HTML, CSS, JavaScript">
11. 内嵌 CSS 和 JavaScript
内嵌 CSS
html
复制代码
<style>
body {
background-color: lightblue;
}
h1 {
color: navy; margin-left: 20px;
}
</style>
内嵌 JavaScript
html
复制代码
<script>
function greet() {
alert("Hello, World!");
}
</script>
这是一个简略的 HTML 教程,涵盖了 HTML 的基本结构和常用标签。