html一文入门---标签大合集

一、文档结构标签

  • <!DOCTYPE html>: 声明文档类型和 HTML 版本,告诉浏览器使用 HTML5 解析文档。
  • <html>: HTML 文档的根元素。
  • <head>: 包含文档的元数据(如标题、字符集、样式表链接)。
  • <title>: 定义文档的标题,显示在浏览器标签栏上。
  • <body>: 包含文档的可见内容。

二、文档格式化标签

  • <h1> - <h6> : 定义六级标题,<h1> 是最高级标题,<h6> 是最低级标题。
  • <p>: 定义段落。
  • <b>: 使文本加粗,但不强调。
  • <strong>: 使文本加粗,并表示重要性。
  • <i>: 使文本斜体,但不强调。
  • <em>: 使文本斜体,并表示强调。
  • <u>: 下划线文本。
  • <del>:删除线
  • <br>: 插入换行符。
  • <hr>: 插入水平线,用于分隔内容。
  • **<div>:**一个块级元素,用于将内容分组和布局。
  • <sup>:文本的上标。
  • <sub>:文本的下标。

三、文档列表标签

  • 无序列表 (<ul>): 显示项目的顺序不重要,通常使用圆点或其他符号作为标记。

    无序列表

    • 无序列表1
    • 无序列表2
    • 无序列表3
  • 有序列表 (<ol>): 显示项目的顺序重要,通常使用数字或字母作为标记。

    有序列表

    1. 有序列表1
    2. 有序列表2
    3. 有序列表3
  • 定义列表 (<dl>): 用于展示术语及其定义。

    自定义列表

    系定义列表1
    自定义列表1

四、表格标签

  • <table>: 定义表格。

  • <tr>: 定义表格行。

  • <td>: 定义表格单元格。

  • <th>: 定义表格头单元格。

定义表格的例子:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="5" cellspacing="10" align="center" width="80%">
        <tr>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
            <th>表头单元格3</th>
        </tr>
        <tr> 
            <td colspan="2">               
                单元格1
            </td>
            <td>单元格1</td>
        </tr>
        <tr>
            <td>单元格2</td>
            <td rowspan="2" colspan="2">
                <table border="5" align="center" width="100%">
                    <tr>
                        <td>列1</td>
                        <td>列1</td>
                    </tr>
                    <tr>
                        <td>列2</td>
                        <td>列2</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>单元格3</td>
        </tr>
    </table>
</body>
</html>

结果:

其中table 中的参数 border ="5" 是外边框的宽度;cellspacing ="10" 两个表格之间的间距;align ="center"表格的位置;width="80%"表格的像素(大小)。

td 中的参数 rowspan ="2"行合并;colspan="2"列合并。

五、音频和嵌套、超链接标签

1、音频标签

  • <audio>:标签用于在网页中嵌入音频。
  • <video>:标签用于网页中嵌入视频。
  • <img>:标签用于网页中嵌入图片

三个标签的参数大致相同:

  • src属性用于指定视频文件的位置,可以是相对路径或绝对路径。
  • controls属性添加后会显示视频播放的控制条,包含播放、暂停、进度条等基本控制按钮。

2、嵌套、超链接标签

  • <iframe> 是 HTML 中的内联框架标签,用于在一个 HTML 页面中嵌入另一个文档(如另一个网页)。

src 属性指定要嵌入的文档的 URL,可以是一个网页地址、一个 HTML 文件路径等。widthheight 属性用于定义 <iframe> 的宽度和高度,可以使用像素、百分比等单位。

  • <a>超链接标签

    复制代码
     <a href="链接目标地址">链接显示的文本或内容</a>

href属性用于指定链接要指向的目标地址,可以是一个网页的 URL、文件路径或者锚点等。

常用属性target:用于指定链接打开的方式。

_self(默认值):在当前窗口或标签页中打开链接。

_blank:在新的窗口或标签页中打开链接

六、表单标签

  • <form>: 定义表单。

    复制代码
    <form action="提交地址" method="提交方式">
      <!-- 表单元素放置在这里 -->
    </form>
  • <input> : 定义输入字段。类型由 type 属性指定(如 text, password, submit 等)。

type="text"定义为文本输入框,name属性用于在提交数据时标识这个输入框的数据名称,placeholder属性提供一个提示文本。

  • <label>: 定义表单控件的标签。

  • <select>: 定义下拉列表。

    复制代码
    <select name="choices">
      <option value="option1">选项一</option>
      <option value="option2">选项二</option>
      <!-- 更多选项 -->
    </select>

<select>标签的name属性用于标识提交的数据名称,<option>标签表示列表中的选项,value属性定义选项对应提交的值。

  • <option>: 定义下拉列表的选项。

  • <button>: 定义按钮

七、html基本属性

1、id 属性

  • 作用:用于为 HTML 元素提供唯一的标识符。通过 JavaScript 或 CSS 可以精准地定位和操作具有特定 id 的元素。

示例

复制代码
  <div id="myDiv">这是一个带有特定 id 的 div 元素</div>

2、class 属性

  • 作用:用于为多个元素定义相同的样式类或表示它们属于同一类别,方便 CSS 进行样式的统一设置和 JavaScript 对一组相关元素进行操作。

示例

复制代码
<div>
        <!-- class 一个标签可以有多个类 一个类可以有多个标签 -->
        <h1>class 类</h1>
        <span class="span span">span1</span>
        <span class="span span">span2</span>
        <span class="span span">span3</span>
        <span class="span span">span4</span>
    </div>

3、style 属性

  • 作用:用于直接在 HTML 元素上定义内联 CSS 样式,可以覆盖外部 CSS 样式表中的样式规则。

示例

复制代码
  <div style="color: red; font-size: 16px;">这是一个直接设置了样式的 div 元素</div>
相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试