跳到主要内容

HTML基础

介绍​

HTML(超文本标记语言)是用于创建网页结构的标准标记语言。它使用一系列标签来定义网页内容的结构和含义，是Web开发的基础。

原理​

HTML的工作原理是通过标签来描述网页内容的结构和语义：

  • 标签通常成对出现，由开始标签和结束标签组成
  • 标签可以嵌套，形成层次结构
  • 标签可以包含属性，提供额外信息
  • 浏览器解析HTML文档，生成DOM树，然后渲染显示

图示​

<!-- 文档类型声明：指定HTML版本为HTML5 -->
<!DOCTYPE html>
<!-- html标签：HTML文档的根元素 -->
<html>
  <!-- head标签：包含文档的元数据 -->
  <head>
    <!-- title标签：定义文档的标题，显示在浏览器标签页 -->
    <title>页面标题</title>
  </head>
  <!-- body标签：包含文档的可见内容 -->
  <body>
    <!-- h1标签：一级标题 -->
    <h1>标题</h1>
    <!-- p标签：段落 -->
    <p>段落</p>
  </body>
</html>

实例​

基本HTML结构​

<!-- 文档类型声明：指定HTML版本为HTML5 -->
<!DOCTYPE html>
<!-- html标签：HTML文档的根元素，lang属性指定语言为中文 -->
<html lang="zh-CN">
<!-- head标签：包含文档的元数据 -->
<head>
    <!-- meta标签：设置字符编码为UTF-8 -->
    <meta charset="UTF-8">
    <!-- meta标签：设置视口，确保在移动设备上正确显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- title标签：定义文档的标题 -->
    <title>我的第一个HTML页面</title>
</head>
<!-- body标签：包含文档的可见内容 -->
<body>
    <!-- h1标签：一级标题 -->
    <h1>欢迎来到我的网站</h1>
    <!-- p标签：段落 -->
    <p>这是一个段落。</p>
    <!-- a标签：超链接，href属性指定链接目标 -->
    <a href="https://www.example.com">这是一个链接</a>
    <!-- img标签：图片，src属性指定图片路径，alt属性提供替代文本 -->
    <img src="image.jpg" alt="图片描述">
</body>
</html>

列表示例​

<!-- 无序列表：使用项目符号标记项目 -->
<ul>
    <!-- li标签：列表项 -->
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

<!-- 有序列表：使用数字标记项目顺序 -->
<ol>
    <!-- li标签：列表项 -->
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

<!-- 定义列表：用于展示术语和定义 -->
<dl>
    <!-- dt标签：术语 -->
    <dt>术语1</dt>
    <!-- dd标签：术语的定义 -->
    <dd>术语1的定义</dd>
    <dt>术语2</dt>
    <dd>术语2的定义</dd>
</dl>

专业解决方案​

HTML5新特性​

  • 语义化标签：header(头部), nav(导航), main(主要内容), section(区块), article(文章), footer(页脚)等：提高文档结构清晰度和可访问性
  • 表单增强：新的输入类型(email, tel, url, number等)和属性(required, placeholder等)：改善用户体验和数据验证
  • 多媒体支持：audio(音频), video(视频)标签：原生支持媒体播放
  • 画布：canvas标签用于绘图：提供2D和3D绘图能力
  • 本地存储：localStorage(本地存储), sessionStorage(会话存储)：在客户端存储数据

最佳实践​

  • 使用语义化标签提高可访问性和SEO
  • 确保HTML结构合理，层次清晰
  • 使用适当的缩进提高代码可读性
  • 为所有图片添加alt属性
  • 使用UTF-8字符编码
  • 避免使用废弃的标签和属性

可访问性​

  • 使用ARIA属性增强可访问性
  • 确保所有内容都可以通过键盘导航访问
  • 为表单元素添加正确的标签关联
  • 提供足够的颜色对比度

工具推荐​

  • W3C HTML验证器：检查HTML代码的有效性
  • HTMLHint：HTML代码检查工具
  • Prettier：代码格式化工具