web基础常用标签

原创已于 2025-05-19 08:47:55 修改 · 560 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

于 2025-05-19 08:47:29 首次发布

Python3.8

Python 是一种高级、解释型、通用的编程语言，以其简洁易读的语法而闻名，适用于广泛的应用，包括Web开发、数据分析、人工智能和自动化脚本

h标题标签

h标签标签一共有h1,h2,h3,h4,h5，h6共六个个标题标签，分别为一级标题，二级标题，三级标题，四级标题，五级标题，六级标签，没有七级及以下的标题

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

</body>
</html>

运行结果:

p段落标签

用来页面布局里面添加文字的标签

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
</head>
<body>

<p>今天是2025.5.19日</p>

</body>
</html>

运行结果

img图片标签

用于在页面布局添加图片的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
</head>
<body>

<img src="图片的相对路径和绝对路径">

</body>
</html>

src里面添加图片的相对路径和绝对路径，相对路径来说比较好一些，因为绝对路径是在电脑的里面，在进行项目的时候，在当前电脑能运行的出图片效果而转换到其他电脑的时候出现不了效果

a超链接标签

HTML中的超链接标签 <a> 用于创建从一个网页到另一个网页、文件、位置或任何URL的链接

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
</head>
<body>

<a href="https://www.baidu.com">点击跳转到百度</a>

</body>
</html>

运行结果

注：我们单写一个a标签没有写文字是不会显现这个标签的

ul/ol列表标签

ul为无序列表标签

ol为有序列表标签

详情使用参考HTML 列表 | 菜鸟教程

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
</head>
<body>
无序列表
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>

有序列表
<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ol>
</body>
</html>

运行结果

table表格标签

HTML 表格由 <table> 标签定义，表格中的每一行由 <tr> 标签定义，行中的每个单元格由 <td> 标签定义。表头单元格通常使用 <th> 标签定义，表头单元格的内容通常以粗体显示并居中。

详情使用参考HTML 表格 | 菜鸟教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
</head>
<body>

<table border="1">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

</body>
</html>

运行结果：