返回技术栈

HTML

网页内容的结构标记语言

什么是HTML?

HTML(HyperText Markup Language,超文本标记语言)是构建网页内容的标准标记语言。它使用标签来定义网页的结构和内容,是Web开发的基础技术之一。HTML不是编程语言,而是一种用于描述网页结构的标记语言。

HTML的核心概念

🏷️ 标签和元素

  • 标签(Tag):用尖括号包围的关键词,如<h1>、<p>
  • 元素(Element):由开始标签、内容和结束标签组成
  • 属性(Attribute):标签内的额外信息,如id、class
  • 嵌套结构:元素可以包含其他元素

📋 语义化

  • 语义化标签:使用有意义的标签表示内容
  • 可访问性:帮助屏幕阅读器理解页面结构
  • SEO友好:搜索引擎更好地理解页面内容
  • 代码可读性:开发者更容易理解代码结构

🔗 超链接

  • 链接(Link):连接不同页面或资源
  • 锚点(Anchor):页面内部跳转
  • 相对路径:相对于当前页面的路径
  • 绝对路径:完整的URL地址

HTML5的新特性

🏗️ 语义化标签

  • <header>:页面或区块的头部
  • <nav>:导航链接
  • <main>:页面主要内容
  • <section>:页面中的一个区块
  • <article>:独立的文章内容
  • <aside>:侧边栏内容
  • <footer>:页面或区块的底部

🎥 多媒体元素

  • <audio>:音频文件播放
  • <video>:视频文件播放
  • <canvas>:绘制图形和动画
  • <svg>:可缩放矢量图形

📝 表单增强

  • 新的输入类型:email、tel、date、color等
  • 表单验证:required、pattern、min/max等属性
  • 占位符:placeholder属性提供输入提示
  • 自动完成:autocomplete属性

HTML的作用

🏗️ 定义网页结构

HTML为网页内容提供基本的结构框架,定义了标题、段落、列表、表格等内容的层次关系。

🎯 内容语义化

通过语义化标签,HTML能够清晰地表达内容的意义和重要性,便于搜索引擎和辅助设备理解。

🔗 创建超链接

HTML的超链接功能是Web的核心特性,让用户能够在不同页面和资源之间自由导航。

📱 响应式基础

HTML提供了meta标签等功能,为响应式设计提供了基础支持。

常用HTML标签

📝 文本标签

  • <h1>-<h6>:标题,从大到小
  • <p>:段落
  • <strong>:重要文本(粗体)
  • <em>:强调文本(斜体)
  • <br>:换行

📋 列表标签

  • <ul>:无序列表
  • <ol>:有序列表
  • <li>:列表项
  • <dl>:定义列表

🖼️ 媒体标签

  • <img>:图片
  • <audio>:音频
  • <video>:视频
  • <iframe>:内嵌框架

HTML的重要性

  • Web的基础:所有网页都基于HTML构建
  • 易于学习:语法简单,入门门槛低
  • 标准化:由W3C维护的国际标准
  • 向后兼容:新版本保持对旧版本的兼容
  • 跨平台:在所有浏览器和设备上运行
  • SEO友好:搜索引擎优化的基础

HTML的发展历程

  • 1990年:Tim Berners-Lee创建第一个HTML版本
  • 1995年:HTML 2.0成为IETF标准
  • 1997年:HTML 3.2由W3C推荐
  • 1999年:HTML 4.01发布
  • 2014年:HTML5成为W3C推荐标准
  • 现在:HTML持续发展,称为HTML Living Standard