如何使用html标记

在HTML中，标记符号是构建网页结构与内容的核心语言，通过不同的标签组合，可以实现文本排版、多媒体嵌入、交互功能等多种效果,以下是HTML标记的详细使用方法及常见场景：

基础文本结构

1. • 段落：<p>标签用于定义普通段落，默认段落间会自动换行并留有空白。
   • ：<h1>~<h6>标签定义六级标题，<h1>为最高级别标题，字体最大，<h6>最小。
   • 示例：

     <h1>主标题</h1>
     <p>这是一个段落，用于阐述内容。</p>

2. 换行与横线

   • 换行：<br/>标签强制在同一段落内换行。
   • 横线：<hr/>标签生成水平分割线，用于分隔不同内容区域。
   • 示例：

     <p>第一行文字<br/>第二行文字</p>
     <hr/>

文本格式化标签

1. 强调文本
   | 标签 | 作用 | 示例效果 |
   |—————|——————–|———————-|
   | <b> | 加粗 | 加粗文本 |
   | <strong> | 语义化加粗（强调） | 强调文本 |
   | <i> | 斜体 | 斜体文本 |
   | <em> | 语义化斜体（强调） | 强调文本 |
   | <u> | 下划线 | 下划线文本 |
   | <del> | 删除线 | 删除线文本 |
   | <ins> | 下划线（插入） | 下划线文本 |

2. 示例：

   <p>这是<b>加粗</b>且<i>斜体</i>的文本，<del>已删除</del>部分和<ins>新增</ins>内容。</p>

列表与链接

1. 无序列表：<ul>内嵌套<li>项，圆点符号默认显示。
   示例：

   <ul>
     <li>项目一</li>
     <li>项目二</li>
   </ul>

2. 有序列表：<ol>生成数字序号列表。
   示例：

   

   <ol>
     <li>第一步</li>
     <li>第二步</li>
   </ol>

3. 定义列表：<dl>包含<dt>（术语）和<dd>（描述）。
   示例：

   <dl>
     <dt>HTML</dt>
     <dd>超文本标记语言，用于创建网页。</dd>
   </dl>

4. 超链接：<a href="URL">链接文本</a>，可打开外部网页或跳转到页面内锚点。
   示例：

   <a href="https://example.com">访问示例网站</a>

多媒体与嵌入内容

1. 图片：<img src="路径" alt="描述" />，alt属性用于图片无法显示时的文字替代。
   示例：

   <img src="image.jpg" alt="示例图片"/>

2. 视频：<video src="路径" controls></video>，controls属性显示播放控件。
   示例：

   <video src="video.mp4" controls></video>

3. 音频：<audio src="路径" controls></audio>，功能类似视频标签。
   示例：

   

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

表格与表单

1. 表格

   • 基本结构：<table>包含<tr>（行）、<td>（单元格）。
   • 合并单元格：rowspan（纵向合并）、colspan（横向合并）。
   • 边框控制：border="1"设置表格边框宽度。
     示例：

     <table border="1">
     <tr>
       <td rowspan="2">姓名</td>
       <td>数学</td>
       <td>语文</td>
     </tr>
     <tr>
       <td>90</td>
       <td>85</td>
     </tr>
     </table>

2. 表单

   • 输入框：<input type="text"/>（文本）、type="password"（密码）、type="radio"（单选）等。
   • 提交按钮：<input type="submit" value="提交"/>。
     示例：

     

     <form action="/submit" method="post">
     <input type="text" name="username"/>
     <input type="submit" value="登录"/>
     </form>

其他常用标签

1. 注释：<!-注释内容 -->，用于标注代码但不显示在页面中。
   示例：

   <!-这是一个隐藏的注释 -->

2. 分区容器：<div>用于块级分组，<span>用于行内分组，常配合CSS使用。
   示例：

   <div style="color:red;">红色区域</div>
   <span style="text-decoration:underline;">下划线文本</span>

FAQs

1. 如何创建水平分割线？
   使用<hr/>标签，<hr/>。

2. 如何标记已删除或新增的文本？

   • 删除文本：<del>内容</del>，显示删除线。
   • 新增文本：<ins>内容</ins>，显示下