HTML（超文本标记语言）是构建网页的基础语言，它通过一系列标签（Tags）来定义网页的结构和内容，掌握HTML的基本命令是学习网页开发的第一步，下面将详细介绍一些常用的HTML标签及其代码示例,帮助读者快速上手。
HTML文档的基本结构由<!DOCTYPE html>声明、<html>根元素、<head>头部和<body>主体四部分组成。<!DOCTYPE html>声明文档类型，确保浏览器以标准模式渲染页面；<html>元素包含整个页面的内容；<head>部分用于存放元数据，如字符编码、页面标题、CSS样式和JavaScript脚本等；<body>部分则包含用户可见的页面内容，如文本、图片、链接等。
标签用于定义不同级别的标题，从<h1>到<h6>，<h1>为最高级别，字体最大，<h6>为最低级别，字体最小。<h1>这是一个一级标题</h1>会在页面上显示一个最大的一级标题，段落标签<p>用于定义文本段落，如<p>这是一个段落。</p>，换行标签<br>用于强制换行，无需闭合标签，如<br>。
文本格式化标签可以改变文本的显示样式，加粗标签<strong>或<b>用于加粗文本，如<strong>加粗文本</strong>；斜体标签<em>或<i>用于斜体文本，如<em>斜体文本</em>；下划线标签<u>用于为文本添加下划线，如<u>下划线文本</u>；删除线标签<del>用于为文本添加删除线，如<del>删除线文本</del>。
列表标签分为有序列表、无序列表和定义列表，无序列表<ul>使用项目符号显示列表项，每个列表项用<li>标签定义,如：
<ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul>
有序列表<ol>使用数字或字母排序列表项,如：
<ol> <li>第一步</li> <li>第二步</li> <li>第三步</li> </ol>
定义列表<dl>用于定义术语和描述,如：
<dl> <dt>HTML</dt> <dd>超文本标记语言</dd> <dt>CSS</dt> <dd>层叠样式表</dd> </dl>
链接标签<a>用于创建超链接，通过href属性指定链接地址，如<a href="https://www.example.com">访问示例网站</a>，图片标签<img>用于在页面中显示图片，通过src属性指定图片路径，alt属性提供图片的替代文本，如<img src="image.jpg" alt="示例图片">。
表格标签<table>用于创建表格，包含<tr>（表格行）、<th>（表头单元格）和<td>（普通单元格）等子标签。
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>
表单标签<form>用于创建用户输入表单，包含<input>、<textarea>、<select>等输入元素。
<form> <label for="name">姓名：</label> <input type="text" id="name" name="name"> <br> <label for="email">邮箱：</label> <input type="email" id="email" name="email"> <br> <input type="submit" value="提交"> </form>
<input>标签的type属性可以定义不同类型的输入，如text（文本框）、password（密码框）、checkbox（复选框）、radio（单选框）等。
语义化标签是HTML5引入的重要特性，用于描述内容的含义而非样式。<header>定义页面或区域的头部，<nav>定义导航链接，<main>定义页面的主要内容，<section>定义文档中的节，<article>定义独立的文章内容，<footer>定义页面或区域的底部，使用语义化标签可以提高网页的可读性和可访问性,也有利于搜索引擎优化。
下面是一个简单的HTML页面示例,展示了上述部分标签的使用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">我的第一个网页</title>
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
<nav>
<a href="#home">首页</a> | <a href="#about">lt;/a> | <a href="#contact">联系</a>
</nav>
</header>
<main>
<section>
<h2>关于我们</h2>
<p>这是一个段落，用于介绍网站内容。</p>
<ul>
<li>服务一</li>
<li>服务二</li>
<li>服务三</li>
</ul>
</section>
<article>
<h3>最新文章</h3>
<p>这是一篇文章的内容。</p>
</article>
</main>
<footer>
<p>© 2023 我的网站，保留所有权利。</p>
</footer>
</body>
</html>
通过以上介绍，读者可以了解到HTML的基本命令及其使用方法，HTML是静态网页的基础，结合CSS和JavaScript可以实现更丰富的网页效果，建议初学者多练习编写HTML代码,逐步掌握网页开发的基本技能。
相关问答FAQs：
-
问：HTML和CSS有什么区别？
答：HTML（超文本标记语言）主要用于定义网页的结构和内容，如标题、段落、图片等；而CSS（层叠样式表）用于控制网页的样式和布局，如颜色、字体、间距等，HTML是骨架，CSS是外观,两者结合才能创建美观的网页。 -
问：如何让图片在页面中居中显示？
答：可以通过CSS实现图片居中，一种方法是使用margin属性，将图片的左右外边距设置为auto，并添加display: block，<img src="image.jpg" style="display: block; margin: 0 auto;">，另一种方法是使用Flexbox布局，将父容器设置为display: flex; justify-content: center; align-items: center;,然后将图片放入父容器中。
