HTML 入门教程：从零开始学习网页开发基础-EW帮帮网

一、HTML简介

1.1 什么是HTML？

HTML全称是Hyper Text Markup Language（超文本标记语言），由Tim Berners-Lee和同事Daniel W. Connolly于1990年创立。它是一种用于创建网页的标准标记语言，而不是编程语言。

1.2 HTML的特点

通过标记（标签）来描述网页内容
独立于各种操作系统平台
需要浏览器来解析和显示
简单易学，通过标签定义内容结构

1.3 HTML文档基本结构

一个标准的HTML文档包含以下基本结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <!-- 网页内容放在这里 -->
</body>
</html>

二、HTML基础标签

2.1 标题标签

HTML提供了6级标题标签，从<h1>到<h6>：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.2 段落标签

使用<p>标签定义段落：

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

2.3 文本格式化标签

HTML提供了多种文本格式化标签：

标签	描述
`<strong>`	强调文本（加粗）
`<em>`	强调文本（斜体）
`<sub>`	下标文本
`<sup>`	上标文本
`<del>`	删除线文本
`<ins>`	下划线文本
`<b>`	加粗（无语义）
`<i>`	斜体（无语义）

2.4 水平线标签

使用<hr>标签创建水平分隔线：

<hr>
<hr size="3" width="80%" color="red">

2.5 特殊字符

HTML中一些特殊字符需要使用实体代码：

字符	实体代码
空格	` `
<	`<`
>	`>`
&	`&`
©	`©`
®	`®`

三、HTML图片与链接

3.1 图片标签

使用<img>标签插入图片：

<img src="image.jpg" alt="图片描述" width="200" height="150">

3.2 链接标签

使用<a>标签创建超链接：

<a href="https://www.example.com" target="_blank">访问示例网站</a>

四、HTML列表

4.1 有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

4.2 无序列表

<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>

五、HTML表格

5.1 基本表格结构

<table border="1">
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
</table>

5.2 表格合并

<table border="1">
    <tr>
        <th colspan="2">合并列</th>
    </tr>
    <tr>
        <td rowspan="2">合并行</td>
        <td>数据1</td>
    </tr>
    <tr>
        <td>数据2</td>
    </tr>
</table>

六、HTML表单

6.1 基本表单结构

<form action="submit.php" method="post">
    <!-- 表单元素放在这里 -->
</form>

6.2 常用表单元素

<!-- 文本框 -->
<input type="text" name="username" placeholder="请输入用户名">

<!-- 密码框 -->
<input type="password" name="password">

<!-- 单选按钮 -->
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">女</label>

<!-- 复选框 -->
<input type="checkbox" name="hobby" value="reading" id="reading">
<label for="reading">阅读</label>
<input type="checkbox" name="hobby" value="sports" id="sports">
<label for="sports">运动</label>

<!-- 下拉列表 -->
<select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
</select>

<!-- 多行文本框 -->
<textarea name="comments" rows="4" cols="50"></textarea>

<!-- 提交按钮 -->
<input type="submit" value="提交">

七、HTML注释

HTML注释不会显示在浏览器中，但可以帮助开发者理解代码：

<!-- 这是一个HTML注释 -->
<p>这是一个段落。</p>

八、HTML最佳实践

使用小写标签和属性名（<p>而不是<P>）
始终为属性值添加引号
使用语义化标签（如<header>, <footer>, <nav>等）
为图片添加alt属性
使用CSS来控制样式，而不是HTML属性

九、学习资源推荐

MDN Web Docs - 权威的Web开发文档
W3Schools - 交互式学习平台

十、总结

HTML是网页开发的基础，通过学习本教程，你已经掌握了HTML的基本概念和常用标签。接下来可以通过实践项目来巩固所学知识，并进一步学习CSS和JavaScript来创建更丰富的网页体验。

HTML 入门教程：从零开始学习网页开发基础