HTML代码大全

HTML（HyperText Markup Language）是构建网页的标准标记语言，它通过标签描述网页的结构和内容。无论是简单的静态页面还是复杂的动态应用，掌握HTML代码都是前端开发者的基础。以下是常见HTML代码的分类和示例整理，帮助开发者快速查阅与应用。

一、基础结构标签

HTML文档必须包含DOCTYPE声明和基本结构，用于定义文档类型和根元素。

 
 

     
     
     


    
    
主标题
    
这是一个段落。
    

二、文本与段落标签

用于组织文本内容，调整排版样式。

代码示例：

文章标题
第一段内容。
换行后内容。

警告：请勿关闭此页面。

三、链接与图片

超链接和图片是网页的核心交互元素。

超链接（）

点击跳转

• href：跳转的URL。
• target="_blank"：在新标签页打开链接。

图片（）

• src：图片路径。
• alt：图片无法显示时的替代文本（对SEO和可访问性重要）。
• width/height：设置图片尺寸。

四、列表标签

用于有序或无序排列内容。

无序列表

    
苹果
    
香蕉
    
橙子

有序列表

    
第一步：注册账号
    
第二步：登录系统
    
第三步：完成任务

五、表单与输入

HTML表单用于收集用户输入数据。

基本表单结构

    用户名：
    
    

    密码：
    
    

    

常用输入类型

• ：文本框。
• ：密码框。
• ：邮箱输入（带格式验证）。
• ：复选框。
• ：单选按钮。
• 和：下拉选择框。

  示例：

  
      
  喜欢的水果：
      

  苹果 香蕉 北京 上海

  ---

  六、表格标签

  用于展示结构化数据。

  
      
  
          
  
              
  姓名
              
  年龄
              
  职业
          
      
      
  
          
  
              
  张三
              
  28
              
  工程师
          
          
  
              
  李四
              
  32
              
  设计师
          
      
  

  • ：表头。
  • ：表体。
  • ：行。
  • ：表头单元格。
  • ：普通单元格。

  ---

  七、语义化标签（HTML5新增）

  提高代码可读性和SEO优化。

  标签	用途
  	页眉
  	页脚
  	导航栏
  	文档中的节
  	独立的内容块
  	侧边栏或附加内容

  示例：

  
      
  网站名称
      
  
  
  
      
  
          
  文章标题
          
  正文内容...
      
      
  
  
  

  ---

  八、音视频标签

  HTML5支持原生音视频播放。

  视频

  音频

  ---

  总结

  HTML作为网页的骨架，其标签的合理使用直接影响用户体验和可访问性。从基础的文本排版到复杂的表单交互，再到语义化结构和多媒体支持，掌握这些代码能显著提升开发效率。建议结合实践不断练习，同时参考MDN Web Docs获取最新规范。