网页基本标签_网页标记跳转到标记-CSDN博客

本文链接：https://blog.csdn.net/lidong777777/article/details/126150303

本次博客带领大家学习HTML中的基本标签。

标题标签

标题标签是用<h+数字></h+数字>，数字越小，标题字体越大，例如<h1></h1>。

<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签

段落标签使用的是<p></p>,将HTML中的文字进行分段，进入直接在HTML中输入文字的情况，是不会分段的，要使用<p>才会进行分段处理。

<!--段落标签-->
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有眼睛，</p>
<p>一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>

换行标签

换行标签是用<br/>进行换行，它与段落标签<p>的区别是：换行标签是紧挨着换行输出，而段落标签是分段换行输出，间隙较大。

<!--换行标签-->
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有眼睛，<br/>
一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>

水平线标签

水平线标签使用的是<hr/>进行分割，使用水平线标签可以使得我们的网页板块更加清晰。

字体样式标签

粗体样式：使用<strong></strong>对字体进行加粗。
斜体样式：使用<em></em>将字体变为斜体。

粗体：<strong>i love you</strong>
斜体：<em>i love you</em>

特殊符号

空格：  HTML中没有使用 的特殊符号，自己手打的空格，最后也只会输出一个。

大于号：>

小于号：<

版权符号：©

<!--特殊符号-->
空    格：
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br>
大于号：&gt;
<br>
小于号：&lt;
<br>
版权符号:&copy;

图像标签

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--
src：图片地址：相对地址，绝对地址 (必填）
    ../ --返回上一级目录

-->
<img src="../resources/image/1.JPG" alt="风景图" title="风景图" width="300" height="300">
</body>
</html>

链接标签

请添加图片描述

文本超链接：

<a href="firstHtml.html" target="_blank">点击我跳转到页面一</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>

图像超链接：

<a href="firstHtml.html">
    <img src="../resources/image/1.JPG" alt="风景图" title="风景图" width="300" height="300">
</a>

锚链接：本身可以作为对指向目标页面的内容概述。但是单页站锚链接与锚文本有所不同。
1. 需要一个锚标记。
2. 跳转到标记。

<!--使用name作为标记-->
<a name="top">顶部</a>
<!--a标签
href：必填，表示要跳转到哪个页面
target : 表示窗口在哪里打开
        _blank 在新标签中打开
        _self 在自己的网页打开
-->

<a href="firstHtml.html" target="_blank">点击我跳转到页面一</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>

<br>
<a href="firstHtml.html">
    <img src="../resources/image/1.JPG" alt="风景图" title="风景图" width="300" height="300">
</a>
<p>
    <a href="firstHtml.html">
        <img src="../resources/image/1.JPG" alt="风景图" title="风景图" width="300" height="300">
    </a>
</p><p>
    <a href="firstHtml.html">
        <img src="../resources/image/1.JPG" alt="风景图" title="风景图" width="300" height="300">
    </a>
</p><p>
    <a href="firstHtml.html">
        <img src="../resources/image/1.JPG" alt="风景图" title="风景图" width="300" height="300">
    </a>
</p><p>
    <a href="firstHtml.html">
        <img src="../resources/image/1.JPG" alt="风景图" title="风景图" width="300" height="300">
    </a>
</p>

<!--锚链接
1.需要一个锚标记
2.跳转到标记

-->
<a href="#top">回到顶部</a>

功能链接：邮件链接：mailto

<!--功能链接
邮件链接：mailto:
-->
<a href="mailto:1661367006@qq.com">联系我</a>

行内元素和块元素

块元素
- 无论内容多少，该元素独占一行。
- (p、h1-h6…)
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行。
- (a,strong,em…)

列表标签

什么是列表
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
列表的分类
- 无序列表(ul)
- 有序列表(ol)
- 自定义列表(dl)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围：试卷，问答...
-->

<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
</ol>
<hr>
<!--无序列表
应用范围：导航，侧边栏....
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
    <dt>学科</dt>

    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>

    <dt>位置</dt>

    <dd>北京</dd>
    <dd>汕头</dd>
    <dd>广州</dd>
    <dd>厦门</dd>
</dl>

</body>
</html>

表格标签

基本结构：使用<table></table>生成表格。
- 单元格：使用<tr></tr>生成。
- 行：使用<tr></tr>生成行。
- 列：使用<td></td>生成列。
- 跨行：使用rowspan合并多行。
- 跨列：使用colspan合并多列。

<table border="1px">
    <tr>
        <!--colspan 跨列-->
        <td colspan="4">1-1</td>

    </tr>
    <tr>
        <!--rowspan 跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>

</table>

视频和音频标签

视频标签：使用<video></video>表示，其中src要填充视频的地址。
音频标签：使用<audio></audio>表示，其中src要填充音频的地址。
可以使用controls来控制音频的播放与暂停，使用autoplay控制是否自动播放。

<video src="../resources/video/3.mp4" controls autoplay></video>
<audio src="../resources/video/3.mp4" controls autoplay></audio>

网页基本标签

标题标签

段落标签

换行标签

水平线标签

字体样式标签

特殊符号

图像标签

链接标签

行内元素和块元素

列表标签

表格标签

视频和音频标签

“相关推荐”对你有帮助么？