html标签

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+Yab-->
1   2  3
<p>1</p>
<p>2</p>
<p>3</p>

<!--换行标签，<br/>-->
一<br/> 二<br/>  三<br/>  四<br/>

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

<!--粗体，斜体-->
粗体：<strong>粗体</strong>
<br/>
斜体：<em>斜体</em>
<br/>
<!--特殊符号-->
空      格<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
大于号：&gt;
<br/>
小于号：&lt;
<br/>
版权符号：&copy;版权所有权小明
<br/>

</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签学习</title>
</head>
<body>
<a name="AAA">4的锚链接跳转</a>

<!--img学习
src:图片地址
相对路径，绝对路径
../  上一级目录

-->
<img src="../resource/image/img.png" alt="加载是失败返回" title="悬停文字" width="1214" height="565">

</body>
</html>

链接标签

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


<!--a标签
href:        必填，表示要跳转到哪个页面
target：     表示窗口在哪里打开
       _blank：在新标签中打开
       _self:自身网页打开
-->
<a href="1.第一个网页.html" target="_blank">点击我跳转到第一个页面</a>
<br/>
<a href="https://www.baidu.com/" target="_self">点击我跳转到百度</a>
<br/>

<a href="1.第一个网页.html">
    <img src="../resource/image/img.png" alt="加载失败显示" title="悬停文字" width="1214" height="565">
</a>



<!--锚链接-->
<a href="#top">回到顶部</a>
<hr/>
<a href="2.基本标签.html"#AAA>跳转其他页面的标记</a>

<!--功能性链接
发邮件链接:  <a href="mailto:"></a>

-->
<a href="mailto:pl01780099@2980.com">点击发送邮件</a>
</body>
</html>

列表标签

<!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>

<hr/>
<!--自定义列表
dl:标签
dt：列表名称
dd：列表内容
-->
<dl>
    <dt>列表名称1</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    <dt>列表名称2</dt>
    <dd>内容3</dd>
    <dd>内容4</dd>
    <dd>5</dd>
</dl>
</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格：table
行  tr
列  td
border:边框宽度
-->
<table border="1px">
    <tr>
        <!--colspan 跨列-->
        <td colspan="2">1-1</td>
        <td>1-3</td>
    </tr>

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

媒体标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
src     资源路径
controls  进度条
autoplay   自动播放
-->
<video src="../resource/video/孤勇者.mp4" controls autoplay></video>


<audio src="../resource/audio/孤勇者.m4a" controls autoplay></audio>
</body>
</html>
posted @   小幼虫虫  阅读(22)  评论(0)  编辑  收藏  举报
相关博文：
·  Markdown语法
·  html div标签
·  网页标签之超链接标签
·  Day01
·  HTML总结笔记
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 使用C#创建一个MCP客户端
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae