网页基本标签

最新推荐文章于 2023-03-11 21:54:31 发布

q1575290554

最新推荐文章于 2023-03-11 21:54:31 发布

阅读量311

点赞数

分类专栏：前端 # HTML 文章标签：前端 html

本文链接：https://blog.csdn.net/Q1575290554/article/details/125460455

版权

前端同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

网页基本标签

标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号
- 注释：
- 空格：
- 小于：<
- 大于：>
- 引号："
- 版权号： ©

<!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>换季的秋风在等待</p>
<p>我还在等时间掩埋</p>
<p>是怎样的存在</p>
<p>让我如此依赖</p>
<p>可没这么轻易被取代</p>
<p>总会遇见被辜负的爱</p>
<p>被遗落的人 就只剩空白</p>
<p></p>
    
<!--水平线标签-->
<hr/>
    
<!--换行标签-->
换季的秋风在等待<br/>
我还在等时间掩埋<br/>
是怎样的存在<br/>
让我如此依赖<br/>
可没这么轻易被取代<br/>
总会遇见被辜负的爱<br/>
被遗落的人 就只剩空白<br/>

<!--粗体,斜体-->
<strong>粗体</strong>
<em>斜体</em>
<br/>

<!--特殊符号-->
空格
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br>
&gt;
<br>
&lt;
<br>
&copy;

</body>
</html>

图像标签

常见的图像格式
- JPG
- GIF
- PNG
- BMP（位图）
- …

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>图像标签</title>
</head>
<body>
<!--img学习
src : 图片地址(必填)
        相对路径(推荐使用),绝对路径
        ../ -- 上一级目录
alt : 图片名字(必填)
-->
<img src=""../resources/image/panda.jpg"" alt=""?"" title=""悬停文字"">

</body>
</html>

超链接标签

文本超链接
图像超链接

<a href=""链接路径"" target=""目标窗口位置"">链接文本或图像</a>

超链接

页面间链接：从一个页面跳转到另一个页面
锚链接
功能性链接

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>链接标签</title>
</head>
<body>
<!--使用name作为标记-->
<a name=""top"">顶部</a>

<!--a标签
href : 必填,表示要跳转到那个页面
target : 表示窗口在哪里打开
    _blank : 在新标签中打开
    _self : 在自己网页中打开
-->
<a href=""1.我的第一个网页.html"" target=""_blank"">点击我跳转到页面一</a>
<a href=""https://www.baidu.com"">点击我跳转到百度</a>
<a href=""http://koibito.top"">点击我跳转到博客</a>

<br>

<a href=""http://koibito.top""><img src=""../resources/image/panda.jpg"" alt=""?"" title=""悬停文字""></a>

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


<!--功能性链接
邮件链接 : mailto:
QQ链接 :
-->
<a href=""mailto:1575290554@qq.com"">点击联系我</a>
<a target=""_blank"" href=""http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"">
    <img border=""0"" src=""http://wpa.qq.com/pa?p=2::51"" alt=""滴滴"" title=""滴滴""/></a>


</body>
</html>

列表和表格标签

1.列表标签

列表

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

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

<!--有序列表-->
<ol>
    <li>JAVA</li>
    <li>Python</li>
    <li>C语言</li>
    <li>运维</li>
    <li>前端</li>
</ol>

<hr/>
<!--无序列表
应用范围 : 导航,侧边栏-->
<ul>
    <li>JAVA</li>
    <li>Python</li>
    <li>C语言</li>
    <li>运维</li>
    <li>前端</li>
</ul>

<hr/>
<!--自定义列表
dl : 标签
dt : 列表名称
dd : 列表内容

公司网站官网底部
-->
<dl>
    <dt>高手</dt>

    <dd>JAVA</dd>
    <dd>Python</dd>
    <dd>Web</dd>
    <dd>Linux</dd>

    <dt>位置</dt>

    <dd>湖南</dd>
    <dd>湘潭</dd>
</dl>
</body>
</html>

2.表格标签

表格

为什么使用表格
- 简单通用
- 结构稳定
基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列

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

<!--表格 table
行 tr rows
列 td

-->

<table border=""1px"">
    <tr>
        <!--colspan 跨列-->
        <td colspan=""4"">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</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>
        <td>3-4</td>
    </tr>
</table>

<table border=""1px"">
    <tr>
        <td colspan=""3"">学生成绩</td>
    </tr>
    <tr>
        <td rowspan=""2"">小明</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan=""2"">小红</td>
        <td>语文</td>
        <td>99</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>99</td>
    </tr>

</table>

</body>
</html>