什么是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