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>): 显示项目的顺序不重要，通常使用圆点或其他符号作为标记。

<div>
        <h1>无序列表</h1>
        <!-- 快捷方式 ul>li*3>{无序列表$} -->
        <ul>
            <li>无序列表1</li>
            <li>无序列表2</li>
            <li>无序列表3</li>
        </ul>
</div>

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

<div>
        <h1>有序列表</h1>
        <!-- ol>li*3>{有序列表$} -->
        <ol>
            <!-- li 行 -->
            <li>有序列表1</li>
            <li>有序列表2</li>
            <li>有序列表3</li>
        </ol>
    </div>

定义列表 (<dl>): 用于展示术语及其定义。

<div>
        <h1>自定义列表</h1>
        <dl>
            <!-- 前方没有缩进 -->
            <dt>系定义列表1</dt>
            <!-- 有缩进 -->
            <dd>自定义列表1</dd>
        </dl>
    </div>

四、表格标签

<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 页面中嵌入另一个文档（如另一个网页）。

<iframe src="要嵌入的文档地址" width="宽度值" height="高度值"></iframe>

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

<a>超链接标签

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

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

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

_self（默认值）：在当前窗口或标签页中打开链接。

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

六、表单标签

<form>: 定义表单。

  <form action="提交地址" method="提交方式">
    <!-- 表单元素放置在这里 -->
  </form>

<input>: 定义输入字段。类型由 type 属性指定（如 text, password, submit 等）。

<input type="text" name="username" placeholder="请输入用户名">

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>