【HTML】HTML标签总结

若北辰

已于 2024-04-28 19:33:42 修改

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： html 前端

于 2021-07-13 21:34:37 首次发布

本文链接：https://blog.youkuaiyun.com/PoGeN1/article/details/118710319

71 篇文章

订阅专栏

本文详细介绍了HTML的基本元素，包括不同级别的标题、段落的使用，创建链接的方法，如何插入和设置图像，表格的结构和内容标签，无序和有序列表的创建，以及如何构建表单。此外，还讲解了框架的运用和HTML水平线的插入，是初学者理解HTML语法的良好参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

下述案例代码均是填写到body标签里面的，为节约空间下述案例均给出body标签里的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
下述案例代码均是填写到这里面
</body>
</html>

1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。

<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>

效果：
在这里插入图片描述

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

效果：
在这里插入图片描述

<a href="https://www.baidu.com/">访问百度</a>

效果：
在这里插入图片描述

<img src="boat.gif" alt="Big Boat">

效果：
在这里插入图片描述

表格结构语义标签：
 1.<table>：表格根元素。
 2.<thead>：表格头。
 3.<tbody>：表格体。
 4.<tfoot>：表格尾，一般可忽略该结构。
 5.<tr>：表格行。
表格内容标签：
 1.<th>：表头单元格。
 2.<td>：表体单元格。

具体实例如下：
在这里插入图片描述

无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

效果：
在这里插入图片描述
有序列表使用<ol>标签

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

效果：
在这里插入图片描述

在这里插入图片描述

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

height 和 width 属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如：“80%”)。

实例

<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>

<p>这是一个段落</p>
<hr>
<!-- 这是注释,页面中不会显示 -->
<p>这是另外一个段落</p>

效果：
在这里插入图片描述