HTML 教程-优快云博客

本文链接：https://blog.youkuaiyun.com/csbysj2020/article/details/145957756

HTML 教程

引言

HTML，即超文本标记语言（HyperText Markup Language），是构建网页和网站的基础。自从1990年由蒂姆·伯纳斯-李发明以来，HTML一直是互联网发展的基石。本教程旨在为初学者提供全面的HTML知识，帮助您快速入门并掌握HTML的基本技能。

HTML基础

HTML文档结构

一个标准的HTML文档由以下几部分组成：

<!DOCTYPE html>：声明文档类型，告知浏览器使用哪个HTML版本。
<html>：HTML文档的根元素。
<head>：包含文档的元信息，如标题、字符集等。
<body>：包含文档的可视内容，如文本、图片、链接等。

HTML标签

HTML标签用于定义网页内容。以下是一些常用的HTML标签：

<h1> 至 <h6>：标题标签，用于定义标题的级别。
<p>：段落标签，用于定义文本段落。
<a>：超链接标签，用于创建链接。
<img>：图像标签，用于插入图片。
<div>：块级元素，用于对文档内容进行分组。

HTML属性

HTML属性用于扩展标签的功能。以下是一些常用的HTML属性：

href：用于<a>标签，指定链接的目标地址。
src：用于<img>标签，指定图像的来源地址。
alt：用于<img>标签，提供图像的替代文本。

HTML进阶

表格

表格是用于展示数据的一种常见方式。以下是一个简单的表格示例：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>程序员</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>设计师</td>
  </tr>
</table>

列表

列表用于展示一系列相关的信息。以下是一个无序列表的示例：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ul>

表单

表单用于收集用户输入的数据。以下是一个简单的表单示例：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="提交">
</form>

HTML与CSS

HTML与CSS（层叠样式表）相结合，可以创建美观且功能丰富的网页。以下是一个简单的HTML与CSS示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f0f0f0;
    }
    h1 {
      color: #333;
    }
  </style>
</head>
<body>
  <h1>欢迎来到我的网站</h1>
</body>
</html>