前端+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属性创建锚点目标
  • 创建跳转链接:使用#标记锚点。
javascript 复制代码
<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相关联。

javascript 复制代码
  <label for="nv">女</label>
  <input type="radio" id="nv">

方式二:直接包含

javascript 复制代码
  <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:第一周总结
相关推荐
普通码农4 小时前
Vue3 + dom-to-image 实现高质量截图复制与下载功能
前端
xhload3d4 小时前
WebGL/Canvas 内存泄露分析
低代码·3d·html5·webgl·数字孪生·可视化·软件开发·工业互联网·内存泄漏·轻量化·技术应用·hightopo
王六岁4 小时前
🐍 前端开发 0 基础学 Python 入门指南:数字与字符串篇
前端·python·全栈
Baihai_IDP4 小时前
LLM 应用评估综合指南(多轮对话系统、RAG、AI Agent)
人工智能·面试·llm
佛喜酱的AI实践4 小时前
告别传统RAG:用Claude Code 构建本地知识库
ai编程·claude
tiantian_cool4 小时前
HarmonyOS 开发环境配置指南 - macOS 版
前端
写不来代码的草莓熊4 小时前
vue前端面试题——记录一次面试当中遇到的题(10)
前端·vue.js·面试
tiantian_cool4 小时前
正确的 .gitignore 配置
前端·github
三小河4 小时前
封装 classNames:让 Tailwindcss 类名处理更优雅
前端·javascript