HTML 基础标签学习笔记

一、文档结构标签

1. 

  • 作用:声明文档为 HTML5 类型

  • 位置:文档最开头

 
  

运行 HTML

2. 

  • 作用:根元素,包裹整个页面内容

  • 结构:包含  和 


  

运行 HTML

3. 

  • 作用:存放元数据(标题、字符集、CSS/JS 链接)

  • 常用子标签
    </code>:页面标题<br> <code><meta></code>:字符集声明(必须)<br> <code><link></code>:引入 CSS<br> <code><script></code>:引入 JS</p> </li> </ul> <pre><head> <meta charset="UTF-8"> <title>我的网页

    运行 HTML

    4. 

    • 作用:存放所有可见内容

    
      

    欢迎!

    这是我的第一个网页

    运行 HTML


    二、文本内容标签

    1. 标题 

    -
    • 层级:h1(最大)→ h6(最小)

    主标题

    子标题

    运行 HTML

    2. 段落 

    这是一个段落。

    运行 HTML

    3. 换行 

    • 特点:单标签,无段落间距

    第一行
    第二行

    运行 HTML

    4. 分隔线 

    第一部分


    第二部分

    运行 HTML

    5. 强调文本

    • :加粗(语义更重)

    • :斜体(语气强调)

    警告! 这是重要内容。

    运行 HTML


    三、多媒体与链接

    1. 图片 

    • 属性
      src:图片路径
      alt:替代文本(必写)

    一只橘猫

    运行 HTML

    2. 超链接 

    • 属性
      href:链接地址(支持邮件链接)
      target="_blank":新窗口打开

    示例网站
    联系我们

    运行 HTML


    四、列表

    1. 无序列表 

    • 苹果
    • 香蕉

    运行 HTML

    2. 有序列表 

    1. 第一步
    2. 第二步

    运行 HTML

    3. 描述列表 

    HTML
    网页结构标记语言

    运行 HTML


    五、表格

    姓名 年龄
    张三 25

    运行 HTML

    • :表格行

    • :表头(自动加粗居中)

    • :单元格


    六、表单

    1. 表单容器 

    
      
    

    运行 HTML

    2. 输入控件 

    类型 说明 代码示例
    文本框 单行文本输入
    密码框 隐藏输入内容
    单选按钮 单选选项
    复选框 多选选项
    提交按钮 提交表单

    3. 关联标签 

    • 提升表单可访问性

    
    

    运行 HTML

    4. 按钮 

    运行 HTML


    七、学习建议

    1. 所有标签建议小写书写

    2. 必须闭合标签(如 

      ...

      ,单标签如
      需写为

    3. 优先使用语义化标签(如用代替

    4. 通过实际写代码练习巩固记忆

    示例完整页面结构: 

    
    
    
      
      学习笔记示例
    
    
      

    HTML 练习

    开始你的第一个网页吧!

你可能感兴趣的:(html,学习,笔记)