HTML基本标签

最新推荐文章于 2024-06-27 20:35:09 发布

筱寒小记

最新推荐文章于 2024-06-27 20:35:09 发布

阅读量103

点赞数

分类专栏： # HTML+CSS+JS 文章标签： HTML

本文链接：https://blog.csdn.net/qq_45165703/article/details/117332508

版权

HTML+CSS+JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

HTML基本标签

一、网页基本信息

<!--告诉浏览器，使用什么规范 -->
<!DOCTYPE html>
<!--所有内容都在html标签范围中-->
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--meta是描述性标签-->
    <meta charset="UTF-8">
    <meta name="keywords" content="臻一科技">
    <meta name="description" content="致力中小企业信息化">

    <!--title标签代表网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
hellow world
</body>
</html>

二、网页基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>123 123</p>
<p>321</p>

<!--换行标签-->
asd saf<br/>
fsaf  saf <br/>

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

<!--字体样式标签-->
<strong>粗体</strong> <br/>
<em>斜体</em> <br/>

<!--特殊符号-->
空&nbsp;&nbsp;&nbsp;格：<br/>

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

版权符号：&copy;版权所有臻一科技

<!--
特殊符号记忆方式
先打出一个'&' 然后从弹出的列表找
-->
</body>
</html>

在这里插入图片描述

三、图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--
    src：图片地址
    相对路径/绝对路径，推荐使用相对路径
    ../ 表示上一级目录
-->
<!--alt的作用是如果图像加载不出来，就显示alt内容-->
<!--title为光标悬停在图片上时所显示的文字-->
<!--width和height表示图片大小-->
<img src="../resource/image/蓝步兵.jpeg" alt="蓝步兵" title="悬停文字" width="300" height="300">


</body>
</html>

四、链接标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--顶部锚点-->
<a name="top">顶部</a>


<!--
a标签
href:必填，表示要跳转到的页面
target：表示窗口在哪里打开 _blank 在新标签页中打开 / _self 在原标签页打开
-->
<a href="MyFirstWeb.html" target="_blank"> 点击我跳转到初始页面 </a>
<a href="https://www.baidu.com" target="_blank"> 点击我跳转到百度 </a>
<br>
<!--图片作为触发点-->
<a href="https://www.baidu.com" target="_blank">
    <img src="../resource/image/蓝步兵.jpeg" alt="蓝步兵" title="悬停文字" width="300" height="300">
</a>
<br>

<!--
锚链接
1. 需要一个锚标记
2. 跳转到标记
-->
<a href="#top">回到顶部</a>

</body>
</html>

五、列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--有序列表
应用范围：试卷，问答...
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>C++</li>
</ol>

<hr/>

<!--无序列表-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>C++</li>
</ul>

<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
-->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>PHP</dd>
    <dd>C</dd>

    <dt>学科</dt>
    <dd>Java</dd>
    <dd>PHP</dd>
    <dd>C</dd>
</dl>

</body>
</html>

在这里插入图片描述

六、表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
表格table
行 tr
列 td
-->

<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-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

七、媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
音频和视频
src：资源路径
controls：控制条
autoplay：自动播放
-->

<video src="../resource/videos/蓝哨兵.mp4" controls autoplay></video>

<audio src="xxx" controls autoplay> </audio>
</body>
</html>