HTML基础标签汇总

最新推荐文章于 2024-07-22 21:44:46 发布

Moon_Sir

最新推荐文章于 2024-07-22 21:44:46 发布

阅读量62

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_59761601/article/details/129354302

版权

1. HTML普通标签

1. `h1`

<!-- 文本标题,默认加粗,会换行,h1标签一个页面只能存在一个 -->
<h1></h1>
<!-- 标题一共有6个,从h1到h6,除了h1其他标签皆可多次使用 -->
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h2>
<h6></h6>

2. `p`

<!-- 
	段落标签, 会换行
	注意:最好只在p标签内放文字,放入其他的标签可能会出问题
-->
<p></p>
<!-- 这样就会出现问题,解析会错误 -->
<p>
<h1></h1>
</p>

3. `b strong` 加粗

<!-- 加粗标签, 可以加粗文字 -->
<b></b>
<strong></strong>

4. `i em` 倾斜

<!-- 倾斜标签,倾斜文字 -->
<i></i>
<em></em>

5. `del s` 删除线

<!-- 删除线 -->
<del></del>
<s></s>

####6. sup sub 上下标

<!-- 上标和下标 -->
<sup></sup>
<sub></sub>

7. `u` 下划线

<!-- 下划线 -->
<u></u>

8. `br` 强制换行

<!-- 强制换行 -->
<!-- 空标签 -->
<br />

9. `hr` 水平线

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

<!-- 补充: 水平线默认水平,想要让水平线竖起,在弹性盒中, 主轴为横轴即可 -->

10. `ul ol dl` 列表标签

<!-- 无序列表 -->
<ul>
  <li></li>
  <li></li>
</ul>
<!-- 有序列表 -->
<ol>
  <li></li>
  <li></li>
</ol>
<!-- 自定义列表 -->
<dl>
  <!-- 默认情况下, dd会相对于dd有一个Tab键的效果, 如果不需要, 将margin改为0 -->
  <dt></dt>
  <dd></dd>
  <dd></dd>
</dl>

11. `img` 图片标签

<!-- 图片标签 -->
<!--
	src: 图片地址
	title: 鼠标悬停上去之后的提示信息
	alt: 图片不显示之后的提示信息
-->
<!-- 注: 搜索引擎会优先搜索有alt标签的图片, 无论alt有没有给值, 所以一般都会写 -->
<img src="" alt="" title=""/>

<!-- 注: img其实行内块元素, 有宽高, 但是在布局时下方会出现一条小缝, 所以为了好布局, 我们一般直接把图片display: block; 改为块元素

12. `a` 超链接

#####1. 普通使用

<!-- 超链接标签 -->
<!-- 
	href: 路径
  title: 鼠标悬停上去的提示信息
	target: 规定在何处打开网页
    属性值
		1. _self(默认值): 本窗口打开
		2. _blank: 新窗口打开
-->
<a href="" title="" target=""></a>

<!-- 如果超链接图片都有title,则会显示图片的title -->
<a href="#" title="123"><img title="图片" src="" alt="" /> </a>

2. 锚点链接

概念：命名锚点链接是网页制作中超级链接的一种，又叫命名锚记
作用
- 在同一页面内的不同位置进行跳转
- 不同页面内也可以设置跳转(了解)

<!-- 同页面跳转 -->
<a href="#green">跳转到绿色</a>
<div class="red"></div>
<div id="yellow">
  <div id="green"></div>
</div>

<!-- 不同页面跳转 -->
<a href="./02-浮动.html#id">不同页面跳转</a>

3. 利用锚点做电子图片

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }

    .box {
      position: relative;
      border: 1px solid #333;
      overflow: hidden;
      display: inline-block;
      text-align: center;
      background-color: #333;
      color: white;
      padding-left: 10px;
      padding-bottom: 20px;
      margin-top: 30px;
    }

    h1{
      font-size: 16px;
      line-height: 30px;
    }

    img {
      display: block;
    }

    a {
      display: block;
    }

    .imgBox {
      float: left;
      overflow: hidden;
      height: 196px;
    }

    .mini {
      overflow: auto;
      height: 196px;
      float: left;
    }
  </style>
</head>

<body>
  <div class="box">
    <h1>电子相册</h1>
    <div class="imgBox">
      <img id="img1" src="./images/mn1.jpg" alt="">
      <img id="img2" src="./images/mn2.jpg" alt="">
      <img id="img3" src="./images/mn3.jpg" alt="">
      <img id="img4" src="./images/mn4.jpg" alt="">
      <img id="img5" src="./images/mn5.jpg" alt="">
      <img id="img6" src="./images/mn6.jpg" alt="">
      <img id="img7" src="./images/mn7.jpg" alt="">
      <img id="img8" src="./images/mn8.jpg" alt="">
    </div>

    <div class="mini">
      <a href="#img1"><img src="./images/c1.jpg" alt=""></a>
      <a href="#img2"><img src="./images/c2.jpg" alt=""></a>
      <a href="#img3"><img src="./images/c3.jpg" alt=""></a>
      <a href="#img4"><img src="./images/c4.jpg" alt=""></a>
      <a href="#img5"><img src="./images/c5.jpg" alt=""></a>
      <a href="#img6"><img src="./images/c6.jpg" alt=""></a>
      <a href="#img7"><img src="./images/c7.jpg" alt=""></a>
      <a href="#img8"><img src="./images/c8.jpg" alt=""></a>
    </div>
  </div>
</body>

</html>

效果图

在这里插入图片描述

13. `div` 盒子标签

<!-- 盒子标签, 块元素, 会换行, 其中可包任意标签, 注意: 不要一直套盒子, 可以, 但不推荐 -->
<div></div>

14. `span` 行内标签

<!-- 没有具体含义, 与css一同使用, 用于部分文本设置样式 -->
<span></span>

Moon_Sir

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础标签汇总

####1. 普通使用。
复制链接

扫一扫

HTML基础标签汇总

1. HTML普通标签

1. h1

2. p

3. b strong 加粗

4. i em 倾斜

5. del s 删除线

7. u 下划线

8. br 强制换行

9. hr 水平线

10. ul ol dl 列表标签

11. img 图片标签

12. a 超链接