HTML（超文本标记语言）

最新推荐文章于 2022-08-07 18:56:40 发布

山河故人丶

最新推荐文章于 2022-08-07 18:56:40 发布

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

文章标签： HTML

本文链接：https://blog.youkuaiyun.com/Lixc_18/article/details/91658606

这篇博客介绍了HTML的基本结构和常用标记，包括标题、普通标签、特殊符号、图像、链接、列表、表格、音频和视频以及内联框架的使用。重点讲解了链接的target属性和锚点链接，以及如何嵌入音频、视频和内联框架。

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

HTML 被称为超文本标记语言，这里的超文本是指在网页中可以加入图片、声音、动画、视频等内容。事实上，每个 HTML 文档都是一种静态的网页文件，这个文件中包含了各种标签。

一、HTML 的基本结构

一个典型的 HTML 文档结构如下：

<html>
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
文档的主体，正文部分
</body>
</html>

二、HTML常用标记

1、标题标签

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

标签 h1 代表最大，h6 最小。

2、普通标签

<p>段落标签</p>
<br>换行    <!--单个标签-->
<hr>水平线   <!--单个标签-->
<strong>加粗</strong>
<em>斜体</em>

3。特殊符号

小于号：    &gt;
大于号：    &lt;
空格：      &nbsp;    &emsp;
引号：      &quot;
版权符号：  &copy;

4、图像标签

<img src="图片的路径" title="鼠标悬停显示的字" alt="图片名字" width="宽" heigth="高">

在写图路径的时候我们一般使用相对路径，用 …/ 可以表示该文档的上一级目录。

5、链接标签

链接标签就是为文字或者图片加上一个超链接，我们可以用 target 设置目标跳转的网页打开方式：

_blank : 打开新的网页
_self : 在本网页打开

<a target="_blank" href="链接的地址">文字或者图片</a>

锚点链接

锚链接
<a name="锚点"></a>
<a href="#锚点">跳转</a>

锚点链接可以在一个网页中自动跳转，如网页中的回到顶部的操作。

功能性链接

<a mailto:lixc56@163.com>发送邮箱</a>

这个链接点击的时候会自动跳转到邮箱。

6、列表标签

<ul> </ul>代表无序列表 <li></li>代表列表项，使用方法如下代码：

<ul>
    <li>李十八</li>
    <li>李十八</li>
    <li>李十八</li>
    <li>李十八</li>
</ul>

<ol> </ol>代表有序列表 <li></li>代表列表项，使用方法和无序列表一样

<dl> </dl>代表自定义列表， <dt></dt>代表列表标题， <dd></dd>代表列表项，使用方法如下：

<dl>
    <dt>火影忍者</dt>
    <dd>鸣人</dd>
    <dd>佐助</dd>
    <dd></dd>

    <dt>海贼王</dt>
    <dd>路飞</dd>
    <dd>索隆</dd>
  
</dl>

7、表格标签

<table> </table>标签代表表格，使用方法如下：

<!--
table : 表格
tr : 行 
td : 列
colspan：跨列
colspan：跨行
-->
<table border=1px>
    <tr>
        <!--colspan=跨列-->
        <td colspan="2">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <!--colspan=跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
        <td>2-5</td>
    </tr>
 
   
</table>

8、音频和视频标签

<!--
video标签：视频标签
src ： 视频路径 
controls ： 给视频增加控制播放的按钮
autoplay ：自动播放视频
width：宽
height：高
-->
<video src="视频链接" controls width="1280px" height="720px" autoplay></video>

<!--
audio标签：音频标签
src ：音频路径
controls ： 给音频增加控制播放的按钮
autoplay ： 自动播放视频
-->
<audio src="音频路径" controls autoplay></audio>

9、内联框架

iframe 就是内联框架的标签，它可以起到一个容器的作用，可以在一个网页中嵌入另外一个网页。具体代码如下：

<iframe name="markup" ></iframe>
<a href="https://www.baidu.com" target="markup">百度</a><!--在iframe中嵌入百度这个网页-->

注意，a 标签的 target 属性的名字需要和 iframe 标签的 name 属性一致。