HTML（HyperText Markup Language）即超文本标记语言，是构建网页内容的基础语言。它通过使用标记（tags）来描述网页中的结构和元素，帮助浏览器正确展示文本、图像、视频等各种信息。HTML 是构建网页的核心语言之一，并且是每一个网站和网页的基础。

HTML 是一种标记语言，不同于编程语言，它没有复杂的逻辑运算，主要用于结构化文档和内容的展示。通过嵌套各种标签，开发者能够指定网页中的不同部分，比如标题、段落、表格、链接等。

HTML的基本特性

  1. 标记语言
    HTML 使用标记来标识文档结构。每个标记都由一对尖括号（< 和 >）包围，通常以成对出现。一个标记对包括开始标记和结束标记。例如：<h1> 是开始标记，</h1> 是结束标记。
  2. 结构化内容
    HTML 文档通过标签分为不同的部分，如标题、段落、列表、链接等。每种标记都有特定的功能和含义，用于描述页面的不同部分。
  3. 网页内容展示
    HTML 允许你展示各种类型的内容，包括文本、图片、音频、视频和其他嵌入元素。HTML 主要负责网页结构，而样式和布局通常由 CSS（层叠样式表）来控制。
  4. 网页浏览器支持
    HTML 被所有现代网页浏览器所支持，如 Chrome、Firefox、Safari 和 Edge 等，用户通过浏览器查看 HTML 页面。

HTML的基本组成

一个 HTML 文档的基本结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    <h1>欢迎学习HTML</h1>
    <p>这是一个HTML文档的示例。</p>
</body>
</html>

解释：

  • <!DOCTYPE html>：声明文档类型，告诉浏览器这是一个 HTML5 文档。
  • <html>：HTML 文档的根元素。
  • <head>：包含文档的元数据，比如字符集、网页标题等。
  • <body>：页面的主体部分，显示具体的内容，如文本、图像等。

常见HTML标签

  1. 标题标签：用于定义网页的标题。
    • <h1> 至 <h6>：定义不同级别的标题，<h1> 是最大标题，<h6> 是最小标题。
    <h1>这是主标题</h1> <h2>这是副标题</h2>
  2. 段落标签：用于显示段落内容。
    • <p>：定义一个段落。
    <p>这是一个段落。</p>
  3. 超链接标签：用于创建指向其他页面的链接。
    • <a>：定义一个超链接，href 属性指定链接的目标地址。
    <a href="https://www.example.com">访问示例网站</a>
  4. 图片标签：用于嵌入图片。
    • <img>：嵌入图片，src 属性指定图片的路径，alt 属性指定图片无法显示时的替代文本。
    <img src="image.jpg" alt="描述文本">
  5. 列表标签：用于创建无序或有序列表。
    • <ul>：无序列表（项目符号）。
    • <ol>：有序列表（编号）。
    • <li>：列表项。
    <ul> <li>第一项</li> <li>第二项</li> </ul> <ol> <li>第一项</li> <li>第二项</li> </ol>

HTML5 新特性

HTML5 是 HTML 的最新版本，它引入了许多新特性：

  1. 语义化标签
    HTML5 引入了更多具有明确意义的标签，比如 <header>、<footer>、<nav>、<article> 等，用于增强网页的可读性和结构化。
  2. 多媒体支持
    HTML5 增强了对音频和视频的支持，<audio> 和 <video> 标签允许在网页中直接嵌入媒体文件，而不需要额外的插件。<video controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
  3. 表单增强
    HTML5 增强了表单输入类型，如 email、date、number 等，使得表单验证和交互更加简便。<input type="email" placeholder="请输入电子邮件"> <input type="date" placeholder="选择日期">
  4. 本地存储
    HTML5 提供了 localStorage 和 sessionStorage，使得浏览器能够在客户端存储数据。

总结

HTML 是构建网页的基石，它定义了网页的结构、内容和布局。随着 HTML5 的引入，Web 开发变得更加简便和强大，支持更多的多媒体和交互特性。学习 HTML 是成为前端开发者的第一步，它为你进入更加复杂的Web开发技术（如 CSS、JavaScript）奠定了基础。

参考资料

  1. MDN Web Docs HTML教程
  2. W3Schools HTML教程
  3. HTML5 新特性 – HTML5 Rocks

如果你有任何具体的问题或需要进一步深入了解某个部分，随时告诉我！