HTML各种标签以及使用-CSDN博客

本文链接：https://blog.csdn.net/lxl12138/article/details/142032173

1. 基本结构标签

HTML文档的基本结构通常如下：

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

<!DOCTYPE html>: 声明文档类型为HTML5。
<html>: 根元素，所有内容都在该标签内。
<head>: 包含元数据，如标题、字符集、样式等。
<body>: 网页的可见内容。

2. 标题标签

HTML提供了6个不同层级的标题标签，从<h1>到<h6>，标题的字体大小依次变小。

<h1>这是一级标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

3. 段落标签

段落标签 <p> 用于定义文本段落，浏览器自动在段落前后添加空白。

<p>这是一个段落。</p>

<p>这是另一个段落。</p>

4. 超链接标签

超链接使用 <a> 标签创建，href 属性指定链接的目标。

<a href="https://www.example.com">点击这里访问Example</a>

属性：

target="_blank"：在新窗口中打开链接。

5. 图片标签

图片标签 <img> 用于在网页中嵌入图片，src 属性指定图片的路径，alt 属性为图片添加替代文本。

<img src="image.jpg" alt="示例图片" width="300" height="200">

属性：

width 和 height：设置图片的宽度和高度。
alt：图片无法显示时的替代文本。

6. 列表标签

HTML中有无序列表、有序列表和定义列表三种类型的列表。

无序列表（bulleted list）: 使用 <ul> 和 <li> 标签。

<ul>

<li>苹果</li>

<li>香蕉</li>

<li>橘子</li>

</ul>

有序列表（numbered list）: 使用 <ol> 和 <li> 标签。

<ol>

<li>第一项</li>

<li>第二项</li>

<li>第三项</li>

</ol>

7. 表格标签

表格使用 <table> 标签，行使用 <tr>，单元格使用 <td>。

<table border="1">

<tr>

<th>姓名</th>

<th>年龄</th>

</tr>

<tr>

<td>张三</td>

<td>25</td>

</tr>

<tr>

<td>李四</td>

<td>30</td>

</tr>

</table>

<th>：表头单元格。
border：表格边框。

8. 表单标签

表单用于用户输入信息，通常使用 <form>、<input> 和 <button> 标签。

</form>

属性：

action：表单提交的目标地址。
method：提交方式（GET 或 POST）。

9. 分区标签

用于页面布局的标签：

<div>：块级元素，用于分隔内容块。
<span>：行内元素，用于给行内内容分隔。

<div>

<h1>分区标题</h1>

<p>这是一个内容块。</p>

</div>

<span>这是一个行内元素</span>

10. 注释标签

注释不会显示在网页上，通常用于在代码中添加备注。

11. 视频和音频标签

HTML5允许直接嵌入视频和音频文件。

视频标签:

<video controls width="500">

<source src="video.mp4" type="video/mp4">

您的浏览器不支持视频播放。

</video>

音频标签:

<audio controls>

<source src="audio.mp3" type="audio/mpeg">

您的浏览器不支持音频播放。

</audio>

12. 内联框架（iframe）标签

<iframe> 用于在网页中嵌入另一个网页。

<iframe src="https://www.example.com" width="600" height="400"></iframe>

13. 元数据标签

<meta> 标签: 用于指定文档的元数据，如字符集、关键词、描述等。

<meta charset="UTF-8"> <meta name="description" content="这是一个网页的描述"> <meta name="keywords" content="HTML, CSS, JavaScript">

14. 空白和换行标签

<br>：用于换行。
<hr>：插入水平线。

<p>这是第一行。<br>这是第二行。</p>

<hr>

<p>分隔线下面的内容。</p>

15. 强调文本标签

<strong>: 强调加粗文本。
<em>: 强调倾斜文本。

<strong>这是重要的文字。</strong>

<em>这是强调的文字。</em>