前端+AI：HTML5语义标签（一）

文章目录

• 1.HTML5
• • [1.1 标签关系](#1.1 标签关系)
  • [1.2 视频 video标签](#1.2 视频 video标签)
  • [1.3 音频 audio标签](#1.3 音频 audio标签)
  • [1.4 超链接](#1.4 超链接)
  • • [1.4.1 分类](#1.4.1 分类)
  • [1.5 锚点链接](#1.5 锚点链接)
  • [1.6 列表标签](#1.6 列表标签)
  • • [1.6.1 分类](#1.6.1 分类)
  • [1.7 表格](#1.7 表格)
  • • [1.7.1 表格合并（合并数量遵循左上原则）](#1.7.1 表格合并（合并数量遵循左上原则）)
  • [1.8 表单](#1.8 表单)
  • • [1.8.1 分类](#1.8.1 分类)
    • [1.8.2 属性](#1.8.2 属性)
  • [1.9 字符实体/特殊字符](#1.9 字符实体/特殊字符)

编辑工具Trae： Trae AI

分享一个电脑使用技巧，针对windows电脑.

windows+ 左/右→ 可实现左右分屏。

hr是一个单标签。

下期文章~

前端+AI：CSS3（二）

文末有彩蛋哦✨✨✨~

1.HTML5

1.1 标签关系

• 并列关系
• 嵌套关系

1.2 视频 video标签

支持mp4、webm、ogg格式，主要用mp4格式。

• controls：播放控件（h5中属性键和值相同时，可省略值）
• loop：循环播放
• autoplay：自动播放（先要静音，才可以自动播放）
• muted：静音播放
• poster：预览图像（封面）
  

1.3 音频 audio标签

禁止自动播放。

1.4 超链接

target属性值：_self（默认值）、_blank（打开新的页签）

1.4.1 分类

• 空连接：href的值：#
• 下载链接：href的值：文件路径
• 邮件链接：hreft的值：mailto:+邮箱

1.5 锚点链接

• 定义锚点目标：使用id属性创建锚点目标
• 创建跳转链接：使用#标记锚点。

<h2 id="1""></h2>

<a href="#1"">111</a>

1.6 列表标签

1.6.1 分类

• 无序列表：ul > li
• 有序列表：ol > li
• 描述列表（自定义列表）dl (定义列表容器) > dt （定义被描述的术语）） > dd

1.7 表格

1.7.1 表格合并（合并数量遵循左上原则）

• 跨行合并：rowspan
• 跨列合并：colspan

1.8 表单

1.8.1 分类

• 表单容器
• 表单控件
• 辅助标签：label，某个元素的说明。

方式一：使用for和id相关联。

  <label for="nv">女</label>
  <input type="radio" id="nv">

方式二：直接包含

  <label>男
    <input type="radio">
  </label>

1.8.2 属性

• accesskey：s。使元素获得焦点的快捷键（windows：Alt+S mac：Control+Option+s）
• autocomplete：on / off。记录表单历史记录

1.9 字符实体/特殊字符

&开头，分号（;）结尾。

详细 HTML 笔记~，更适合新手宝子学习。创作不易，请给个免费的小关小注+点赞 💖

以下笔记均是作者初次学习印象笔记做的笔记~

1. 认识html、网页的基本结构与标签
2. 表单、表格、认识css、ps快捷键
3. 布局标签、样式表分类及权重、选择器分类、css属性
4. 各种选择器及权重、css属性(字体、文本)
5. HTML:第一周总结