HTML标签笔记

前置知识

• HTML是用来组织页面的，重点在于结构，而样式、美化去学CSS。
• 学HTML就是学习标签。
• 元素关系
  • 并列
  • 嵌套
• 语义化
• 标签属性为键值对，如果键值内容相同可只保留键
• 块级元素、内联元素
  • 块级元素可包含其他元素，占一行
  • 内联元素不可包含其他元素，不独占一行

HTML基础标签

• HTML文档
• 标题、段落
  • 标题h1只用一次，标题最好不超过3个
• 强调与重要性
  • 粗体 strong
  • 斜体 em
  • 下划线 ins
  • 删除 del
  • 这是新的语义化标签，老的无语义化，不推荐使用，了解即可。
• 图片标签
  • 属性：地址src，备选文本alt，悬停文本title，修改宽高仅一个即可
• 音视频标签
  • 视频
    • 属性：控件controls，autoplay，loop，muted，封面poster，宽高
    • 兼容性写法
      • source+type
      • p
    • 视频自动播放必须先静音
  • 音频
    • 属性：同视频
    • 音频不允许自动播放
• 超链接
  • 属性：悬停文字title，是否打开新标签页target: _ self、_ blank
  • 空链接：#
  • 下载链接
  • 邮箱链接：mailto:123@qq.com
• 锚点链接
  • 定义锚点链接
    • id = xx
  • 创建跳转链接
    • ‘#xx’

HTML结构标签

• 页面结构
  • 头部 header
  • 导航栏 nav
  • 网页内容 main
  • 文章 article
  • 侧边栏 aside
  • 页脚 footer
  • 分块 section
• 无语义标签
  • 块级 div
  • 行内 span
• 列表
  • 无序 ul li
  • 描述 dl dt dd
  • 有序 ol li
• 表格
  • 基本组成
    ![[Pasted image 20251209114052.png]]
  • 结构标签
    • thead，tbody，tfoot
  • 合并单元格
    • 跨行rowspan，跨列colspan
    • 左上原则
• 表单
  • 表单容器
  • 表单控件
    • input
      • type=text，password
        • placeholder：提示信息
        • name：对应信息
        • maxlength
        • accesskey：获得焦点快捷键
        • autocomplete：记录输入内容，默认开启
      • type=radio，checkbox
        • name分组
        • value后端提交值
        • checked默认是否选中
      • type=file
        • multiple多个文件
        • accept文件类型
    • textarea
      • name后端接收值
      • placeholder提示信息
      • rows默认2
      • cols默认20
    • select（丑，了解即可，一般用其他标签代替）
      • name后端接收名
      • option value值
      • selected默认值
    • button
      • disabled
  • 辅助标签
    • for+id
    • 直接包含
• 字符实体