其他分享
首页 > 其他分享> > HTML02-网页标签（基本标签、多媒体标签和链接标签）

HTML02-网页标签（基本标签、多媒体标签和链接标签）

作者：互联网

一、网页基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>

<!--1.标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>

<!--2.段落标签-->
啊
啊 啊
啊 啊啊
啊啊啊啊啊

<p>啊</p>
<p>啊 啊</p>
<p>啊 啊啊</p>
<p>啊啊啊 啊</p>

<!--3.换行标签-->
啊<br/>
啊 啊<br/>
啊 啊啊<br/>
啊啊啊啊啊<br/>

<!--4.水平线标签-->
<hr/>

<!--5.粗体、斜体-->
<h1>字体样式</h1>
粗体：<strong>学习Java</strong> <br/>
斜体：<em>学习Java</em>

<hr/>
<!--6.特殊符号-->
空 格<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br>

大于号：&gt;
小于号：&lt;<br/>

&copy;版权所有<br/>
其他特殊字符可以通过&+字母查询
</body>

</html>

二、多媒体标签

网页中的多媒体元素以图片居多，所以主要关注图片标签的使用：

Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多媒体(图片、音频、视频)标签</title>
</head>
<body>
<!--图片标签-->
<!--src、alt必填-->
<img src="../resource/images/year-2022.jpg" alt="2022" title="2022冲">

<!--音频标签-->
<!--src必填、controls(显示音频控制)-->
<audio src="../resource/audios/毛不易%20-%20平凡的一天.flac" controls></audio>

<!--视频标签-->
<!--src必填、controls(显示视频控制)-->
<video src="../resource/videos/1.mp4" controls></video>
</body>
</html>

三、超链接标签

超链接标签很重要！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签学习</title>
</head>
<body>

<!--锚链接顶部标记-->
<a name="top">顶部</a>
<hr/>

<!--a 超链接标签
href：必填，表示跳转到哪个网页
target:表示网页在哪里打开（当前标签or新标签）,默认当前标签
-->
文本超链接<br/>
<a href="1.第一个网页.html" target="_self" a>点击我跳转到网页“第一个网页”</a>
<a href="3.多媒体标签.html" target="_blank">点击我跳转到网页“多媒体标签”</a>
<hr/>
图片超链接<br/>
<a href="1.第一个网页.html">
    <img src="../resource/images/year-2022.jpg" alt="" title="跳转到第一个网页">
</a>
<p>
    往
</p>
<p>
    下
</p>
<p>
    翻
</p>
<p>
    还
</p>
<p>
    有
</p>
<p>
    知
</p>
<p>
    识
</p>
<p>
    点
</p>
<p>
    ！
</p>
<hr/>
<!--a 锚标签-->
<!--可以跳到其他网页中的标记位置-->
<a href="#top">回到顶部</a>

<hr/>
<!--功能性标签
邮件链接
QQ链接:百度QQ推广，登录，点击推广工具，复制链接代码
-->
<a href="mailto">邮箱地址</a>
<br/>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=个人QQ号&site=qq&menu=yes">
    <img border="0" src="生成代码" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>

</body>
</html>

四、列表和表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表和表格标签</title>
</head>
<body>

<!--1.列表标签-->
<!--有序列表ol-->
有序列表<br/>
<ol>
    <li>第一条</li>
    <li>第二条</li>
    <li>第三条</li>
</ol>

<!--无序列表ul-->
无序列表<br/>

<ul>
    <li>无序</li>
    <li>无序</li>
    <li>无序</li>
</ul>

<!--自定义列表dl-->
自定义列表<br/>
<dl>
    <dt>相关知识</dt>
    <dd>知识1</dd>
    <dd>知识2</dd>
    <dd>知识3</dd>

    <dt>关于我们</dt>
    <dd>我啊</dd>
    <dd>你</dd>
    <dd>找不到</dd>
</dl>

<hr/>
表格标签<br/>

<!--2.表格标签
tr:行
td:列

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

</table>

</body>
</html>

标签：多媒体,标签,啊啊啊,HTML02,超链接,网页,nbsp
来源： https://www.cnblogs.com/zcx-cn/p/15831638.html