HTML教程：从入门到精通

什么是HTML？

HTML是一种用于创建网页的标记语言。它由一系列的标签和属性组成，可以描述网页的结构和内容。使用HTML，我们可以创建文本、图片、音频、视频等内容，并对其进行格式化和布局。

HTML的基本结构

HTML文档由三部分组成：文档类型声明、html标签和文档内容。

我的网页

这是我的第一个网页。

文档类型声明告诉浏览器这是一个HTML文档。html标签包含了整个文档的内容。head标签包含了文档的元数据，如标题、样式等。body标签包含了文档的主要内容。

HTML标签

HTML标签用于描述文档的结构和内容。标签通常是成对出现的，包含了一个开始标签和一个结束标签。

例如，<p>标签用于定义一个段落，</p>标签用于结束该段落。

标签可以包含属性，属性用于描述标签的额外信息。属性通常包含一个名称和一个值，中间用等号连接。

例如，<img src="picture.jpg" alt="一张图片">标签用于插入一张图片。src属性指定图片的路径，alt属性指定图片的替代文本。

HTML元素

HTML元素是由开始标签、结束标签和内容组成的。元素可以包含其他元素。例如，<body>元素包含了页面的整个内容。

元素的内容可以是文本、其他元素、或者两者的组合。

例如，<p>这是一个段落</p>元素包含了文本内容，<ul><li>列表项1</li><li>列表项2</li></ul>元素包含了两个列表项元素。

HTML属性

HTML属性用于提供额外的信息给标签。属性通常包含一个名称和一个值，中间用等号连接。

例如，<a href="https://www.example.com">链接</a>标签用于创建一个链接。href属性指定链接的目标。

属性可以添加到任何标签中，只要该标签支持该属性。属性可以有默认值，如果没有提供值，则使用默认值。

HTML样式

HTML样式用于设置文档的外观和布局。样式可以通过内联样式、内部样式表和外部样式表来定义。

内联样式是直接添加到标签中的样式，它只适用于该标签。

<p style="color:red;font-size:16px;">红色字体，字号为16px</p>

内部样式表是在head标签中定义的样式，它适用于整个文档。

<head>
  <style>
    p {color:red;font-size:16px;}
  </style>
</head>

外部样式表是通过链接外部样式表文件来定义的，它通常适用于整个网站。

<head>
  <link rel="stylesheet" href="style.css">
</head>

HTML列表

HTML列表用于展示一组有序或无序的项目。

无序列表使用<ul>标签和<li>标签创建。

<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

有序列表使用<ol>标签和<li>标签创建。

<ol>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ol>

HTML表格

HTML表格用于展示有序的数据集合。

表格由<table>标签和多个<tr>标签组成。每个<tr>标签代表一行数据。每个<tr>标签包含多个<td>标签，代表该行的每个单元格。

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>性别</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
    <td>女</td>
  </tr>
</table>

HTML表单

HTML表单用于收集用户输入的数据。表单由<form>标签和多个表单元素组成。表单元素包括文本框、单选框、复选框、下拉框等。

<form action="submit.php" method="post">
  <label>用户名：<input type="text" name="username"></label>
  <label>密码：<input type="password" name="password"></label>
  <label>性别：<input type="radio" name="gender" value="male">男
            <input type="radio" name="gender" value="female">女</label>
  <label>爱好：<input type="checkbox" name="hobby" value="reading">阅读
            <input type="checkbox" name="hobby" value="music">音乐</label>
  <label>城市：<select name="city">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
          </select>
  </label>
  <button type="submit">提交</button>
</form>