HTML入门小白必看篇HTML入门基础知识以及一些学习经验分享，小白必看，这些都是一些比较容易混淆的标签，希望对你能有所

列表（ol，ul， dl）

ol：定义有序列表。列表项按照顺序编号。（order list）

<ol>
    <li>这里是有序标签1</li>
    <li>这里是有序标签2</li>
</ol>

ul：定义无序列表。列表项前面通常有项目符号。(unorder list)

<ul>
    <li>这里是无序标签1</li>
    <li>这里是无序标签1</li>
</ul>

dl：定义描述列表。通常用于术语及其定义的配对。(define list) （<dt> 用于术语，<dd>用于定义。）

<dl>
    <dt>key1</dt>
    <dd>value1</dd>
                
    <dt>key2</dt>
    <dd>value2</dd>

    <dt>key3</dt>
    <dd>value3</dd>
</dl>

超链接标签（a）

创建超链接。

href: 链接的目标URL。
target: 指定链接的打开方式（如 _blank 在新窗口打开）。

<a href="http://baidu.com" target="_blank">

img, audio, vedio

img：插入图像。
- src: 图像的URL。
- alt: 图像的替代文本，用于无障碍访问。

<img src="" alt="" width="400"/>

audio：插入音频文件。
- controls: 显示音频播放控件。
- <source>: 指定音频源文件及其格式。
- loop：循环播放。
- muted：静音播放。

<audio src="" controls></audio>

vedio：插入视频文件。
- controls: 显示视频播放控件。
- width 和 height: 设置视频的宽度和高度。
- <source>: 指定视频源文件及其格式。
- loop：循环播放。
- muted：静音播放。
- autoplay：自动播放，为了提升用户体验，浏览器支持在静音状态下自动播放。浏览器中，想要自动播放必须要有muted属性。

<vedio src="" controls></vedio>

input

placeholder：占位符，range：范围，number：指定输入的数值的范围，date：日历。

<input placeholder="please input!">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2024-10-10">
<textarea>Hey</textarea>

<!--多选框-->
<p>
    <label><input type="checkbox" />🍎</label>
    <label><input type="checkbox" checked />🍏</label>
</p>

<!--单选框-->
<p>
    <label><input type="radio" name="sport" />⚽</label>
    <label><input type="radio" name="sport" />🏀</label>
</p>

<!--下拉框-->
<p>
<select>
    <option>🥑</option>
    <option>🥩</option>
    <option>🥓</option>
</select>
</p>

<!--下拉框-->
<input list="countries" />
<datalist id="countries">
    <option>Greece</option>
    <option>United Kingdom</option>
    <option>United States</option>
</datalist>

cite，code，strong，em

cite：用于表示作品的标题，如书籍、电影、歌曲、绘画等。（览器通常会将 <cite>元素中的文本显示为斜体。）
code：用于表示计算机代码片段。它通常用于显示代码示例。（浏览器通常会将 <code>元素中的文本显示为等宽字体。）
strong：用于表示文本的重要性、严重性或紧急性。这是一种语义化的标签，通常用于强调文本。（浏览器通常会将 <strong>元素中的文本加粗显示。）
em：用于表示文本的强调。虽然与 <strong>相似，但 <em>更多地表示语气上的强调。（浏览器通常会将 <em>元素中的文本显示为斜体。）

    <blockquote cite="http://t.cn/RfjKO0F">
      <p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
    </blockquote>

    <p>我最喜欢的一本书是<cite>小王子</cite>。</p>

    <p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

    <p><code>const</code>声明创建一个只读的常量。</p>

    <pre><code>
    const add = (a, b) => a + b;
    const multiply = (a, b) => a * b;
    </code></pre>

    <p>在投资之前，<strong>一定要做风险评估</strong>。</p>

    <p>Cats <em>are</em> cute animals.</p>

按钮：button

<button type="">按钮</button>

type属性：
1. submit：提交按钮，点击后可以提交数据到后台。
2. reset：重置按钮，点击后将表单控件恢复默认值。
3. button：普通按钮，默认没有功能，一般配合JavaScript使用。
通过form标签来绑定按钮事件，参数action的值为发送数据的地址。

<form action="">....</form>

表格

标签：table（表格）嵌套tr（行），tr嵌套td（内容单元格）、th（表头单元格）。

提示：表格默认没有边框线，使用border属性可以添加边框线。

表格结构标签

用表格结构标签把内容划分区域，让表格结构更清晰。

标签：thread（表格头部）、tbody（表格主体），tfoot（表格底部）。

合并单元格

将多个单元格合并成一个单元格，以合并同类信息。

分类：跨行合并、跨列合并。
步骤：
1. 明确合并的目标（不能跨结构合并）
2. 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
  - 纵向合并：添加属性rowspan。
  - 横向合并：添加属性colspan。
3. 删除其他单元格。

<body>
    <h2 style="text-align: center;">成绩表</h2>

    <table>
      <tr>
        <th rowspan="2">姓名</th>
        <th colspan="3">成绩</th>
      </tr>
      <tr>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>85</td>
        <td>90</td>
        <td>88</td>
      </tr>
      <tr>
        <td>李四</td>
        <td colspan="3">优秀</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>78</td>
        <td>82</td>
        <td>80</td>
      </tr>
    </table>

  </body>

单标签

<br>：换行。
<hr>：画一条直线。

文本格式化标签

为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线。

加粗：strong、b
倾斜：em、i
下划线：ins、u
~~删除线~~：del、s

字符实体

作用：在网页中显示预留字符。

  ：空格。

< ：小于号。

> ：大于号。

无语意的布局标签

作用：布局网页（划分网络区域、摆放内容。）

div：独占一行。
span：不换行。

<body>
    <div>div标签</div>
    <span>span标签</span>
    <span>span标签</span>
</body>

HTML入门小白必看篇