前端html标签汇总

码龄4年

关注

原创最新推荐文章于 2024-11-11 23:47:26 发布 456 阅读

Web前端开发 HTML常用标签大全本文全面介绍了HTML的常用标签，包括标签的结构、分类以及具体用法。超文本标记语言通过标签定义网页内容，文中提到双标签和单标签的使用，并示例了HTML文档的基本骨架。还介绍了注释、标题、段落、换行、文本格式化、图像、超链接、音频、视频等常见标签的定义和示例，强调了表单标签在用户信息收集中的重要性，如输入框、下拉菜单和按钮等。此外，文中提到了语义化标签，强调使用有语义的标签能提高网页可读性与结构清晰度。整体而言，文章为前端开发者提供了HTML标签知识的参考，适合初学者理解HTML基本元素及其应用阅读详情

#博学谷IT学习技术支持#

单标签：
- <hr> 水平线
- <br> 换行
标题标签:
- - 重要程度依次递减
  - 更改 crtl+D
段落标签：
- 代码：<p>内容</p>
- 段落之间存在间隙
文本格式化标签:
- 代码：
- strong——加粗——b
- ins——下划线——u
- em——倾斜——i
- del——删除——s
图片标签：
- 代码：<img src="所处位置" alt="文字" title="文字">
- src="" alt=""（替换文本，无网络时显示文字） title="" （提示文本，当鼠标悬停时显示文字）成为标签属性
- 注意：
  - 标签属性写在开始标签内部
  - 标签上可以同时存在多种属性
  - 属性之间以空格隔开
  - 标签名img 与属性之间必须以空格隔开
  - 属性之间没有顺序之分
路径:
- 绝对路径（了解）
  - 盘符开头：D：/
  - 完整的网络地址
- 相对路径
  - 同级目录
    - 法1:<img src="目标图片.gif">
    - 法2:<img src="./目标图片.gif"
    - ./表示当前文件夹
  - 下级目录
    - <img scr="文件夹名字/目标文件名">
    - 上级目录
      - <img scr="../目标文件名.gif">
      - ../ 表示返回上级文件夹
音频标签：
- 代码：<audio scr="音频路径" controls></audio>
视频标签：
- 代码：<video scr="路径" controls autoplay loop></video>
链接标签：
- 代码：<a href="">提示文字</a>
- 列表标签：
  - 无序列表
    - 无顺序之分的列表
    - 标签：
      - ul——表示无序列表的整体，用于包裹li标签
      - li——表示无序列表的每一项，用于包含每一行的内容
    - 显示特点:
      - 列表的每一项前默认显示圆点标识
    - 注意点：
      - ul标签中只允许包含li标签
      - li标签可以包含任意内容
  - 有序列表
    - 在网页中表示一组有顺序之分的列表，如:排行榜。
    - 标签：
      - ol——表示有序列表的整体，用于包裹li标签
      - li——表示有序列表的每一项，用于包含每一行的内容
    - 显示特点：
      - 列表的每一项前默认显示序号标识
    - 注意点：
      - ol标签中只允许包含li标签
      - li标签可以包含任意内容
  - 自定义列表
    - 场景：在网页的底部导航中通常会使用自定义列表实现
    - 标签：
      - dl——自定义列表的整体，用于包裹dt/dd标签
      - dt——自定义列表的主题
      - dd——自定义列表的针对主题的每一项内容
表格标签：
- 基本标签：
  - table——表格整体，可用于包裹多个tr
  - th——表格表头，字体变粗
  - tr——表格每行，可用于包裹td
  - td——表格单元格，可用于包裹内容
- 基本属性：
  - border——边框宽度（数字表示）
  - width——表格宽度（数字表示）
  - height——表格高度（数字表示）
- 表格标题和表格单元格标签:
  - 在表格中表示整体大标题和一系列小标题
  - 标签：
    - caption——表格大标题（默认在表格整体顶部居中位置显示）
    - th——表头单元格（表示一列小标题，通常用于表格第一行，默认内部字体加粗并居中显示）
    - 注意：
      - caption标签书写在table标签内部
      - th标签写在tr标签内部（用于替换td标签）
- 合并单元格：
  - 步骤：
    - 明确合并哪几个单元格
    - 通过左上原则，确定保留谁删除谁
    - 给保留的单元格设置：跨行合并或跨列合并
      - rowspan——跨行合并（属性值为合并单元格的个数）
      - colspan——跨列合并（属性值为合并单元格的个数）
  - 标签：
    - rowspan——跨行合并（属性值为合并单元格的个数）
    - colspan——跨列合并（属性值为合并单元格的个数）
表单标签：
- input系列标签
  - 场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
  - 标签名：input（type属性值不同，展示不同效果）
  - type属性值：
    - text——文本框，用于输入单行文本
      - 常用属性：placeholder——占位符，提示用户输入内容当文本
    - password——密码框
    - radio——单选框，用于多选一
      - 常用属性
        name——分组，有相同name属性的单选框为一组，一组中同时只能有一个被选中
        checked——默认选中
    - checkbox——多选框，用于多选多
    - file——文件选择，用于之后上传文件
      - multiple——多文件选择
    - 按钮功能：
      - submit——提交按钮
      - reset——重制按钮
      - button——普通按钮，默认无功能，之后配合js添加功能（添加属性value=“文字”）
      - 注意：要实现按钮功能，需要配合form标签使用（即用form标签包裹表单标签）
      - button系列标签
        场景：在网页中显示用户点击的按钮
        type属性值（同input的按钮系列）：
        submit——提交按钮
        reset——重置按钮
        button——普通按钮
- select下拉菜单标签
  - 场景：在网页中提供多个选择项的下拉菜单表单控件
  - 标签组成：
    - select标签——下拉菜单整体
    - option——下拉菜单中的每一项
  - 常见属性：selected——默认选中
- textarea文本域标签
  - 场景：在网页中提供可输入多行文本的表单控件
  - 标签名：textarea
  - 常见属性：
    - cols——规定了文本域内可见宽度
    - rows——规定了文本域内可见行数
- label标签
  - 场景：常用于绑定内容与表单标签的关系
  - 标签名：label
无语意标签：
- div标签：一行只显示一个（独占一行，块级元素）
- span标签：一行可以显示多个（行内元素）