【前端基础】HTML常见标签

Digital_Spring
46 阅读6分钟

前端基础--HTML常见标签

1. HTML基本概念

1.1 HTML语法

（1）双标签

双标签（标记）也叫常规标记（标签）

<标记的名字 属性名=“属性值” 属性名2=“属性值2”…></标记名称>

例如：

<p class="box-p">这是一个段洛</p>

（2）单标签

单标签（标记）也叫空标记（标签）

 <标记的名字 属性名=“属性值” 属性名2=“属性值2”…/>

<img src="" width="100px" height="100px"/>

例如：

注意：/可以不写，但是为了语法的严谨最好写进去、/是放在结束的位置

1.2 HTML文档

<!doctype html> 
<!--声明文档类型是html超文本标记语言的-->
<html>
<!--html 也叫根元素-->
<head>
<meta charset="utf-8">
<!--设置编码格式国际编码-->
    <link rel="icon" href="https://www.a1l.xyz/img/yjtp.png">
<!--网站标题小图标-->
<title>HTML基础-第一阶段学习</title>
<!--网页标题-->
</head>

<body>
<!--页面主体-->
</body>
</html>

2. HTML常见元素

2.1 标题元素

为了使得网页页面结构更加有语义化，页面内会使得标题元素加以标记，HTML中标题类元素主要有<h1>~<h6>

代码格式：

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

<head>
    <meta charset="UTF-8">
    <title>标题元素</title>
</head>

<body>
    <h1>文字的标题除了h1都可以重复使用一般用于网站的logo</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

</html>

预览图

image-20231020231218237.png

2.2 段落元素

为了使网页文字的段落排列更加整齐，段落之间使用<p>和</p>标签定义

格式：<p></p>

特点：自带段间距和换行

代码格式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落元素</title>
</head>

<body>
    <div>
        <h1>标题一</h1>
        <p>这是一个段落</p>
    </div>
</body>
</html>

效果图：

image-20231020231656017.png

2.3 加粗元素

文字进行强调，但又不是标题

格式：<b></b> bold的首字母

<strong></strong>

代码格式:

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

<head>
    <meta charset="UTF-8">
    <title>加粗元素</title>
</head>

<body>
    <p>这是个文字</p>
    <p><b>这是个加粗的文字</b></p>
    <strong>加粗</strong>
</body>

</html>

效果图

image-20231020232059096.png

2.4 倾斜元素

倾斜标签,倾斜文字 不会换行

格式：<em></em>建议使用em

<i></i>

代码格式:

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

<head>
    <meta charset="UTF-8">
    <title>倾斜元素</title>
</head>

<body>
    <p>这是个文字</p>
    <p><em>这是个倾斜的文字</em></p>
    <p><i>这是个倾斜的文字</i></p>
</body>

</html>

效果图:

image-20231020232407950.png

2.5 列表元素

注意：ol、ul的儿子只能是li

  1. 无序列表

自带实心圆的符号 type=“circle空心圆/disc实心圆/square方形 type="none"把无序列表自带的实心圆去掉 格式：

<ul> <li></li> </ul>

代码格式:

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

<head>
    <meta charset="UTF-8">
    <title>无序列表</title>
</head>

<body>
    <ul>
        <li>默认</li>
        <li>实心圆</li>
    </ul>
    <ul type="circle">
        <li>空心圆</li>
        <li></li>
    </ul>
    <ul type="square">

        <li>方块</li>
        <li></li>
    </ul>
    <ul type="none">
        <li>没有</li>
    </ul>

</body>

</html>

效果图

image-20231020232742944.png

  1. 有序列表

<ol> <li></li> </ol> type类型 start 开始 type=”A” start=”4 如果想从最末位开始排序，用reversed属性即可。 type的类型：

type=”1” 显示形式为1,2,3(默认形式）。 type=”A” 显示形式为A,B,C。 type=”a” 显示形式为a,b,c。 type=”I” 显示形式为大写罗马数字。 type=”i” 显示形式为小写罗马数字。

代码格式

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

<head>
    <meta charset="UTF-8">
    <title>有序列表</title>
</head>

<body>
    <ol type="1">
        <li></li>
        <li></li>
    </ol>
    <ol type="A">
        <li></li>
        <li></li>
    </ol>
    <ol type="I">
        <li></li>
        <li></li>
    </ol>
    <ol type="a">
        <li></li>
        <li></li>
    </ol>
    <ol type="i">
        <li></li>
        <li></li>
    </ol>

</body>

</html>

效果图：

image-20231021020441370.png

  1. 自定义列表

默认情况下, dd会相对于dd有一个Tab键的效果, 如果不需要, 将margin改为0

<dl> <dt></dt> <dd></dd> <dl>

代码格式

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <dl>
        <dt>可以是文字也可以图</dt>
        <dd>相关文字</dd>
    </dl>
</body>

</html>

效果图

image-20231021020935521.png

2.6 img元素

不会换行 插入图片不写宽高，默认是图片本身的宽高。如果只写宽不写高，是等比例缩放

格式

<img src=“图片路径” title=“鼠标悬停上去之后的提示信息” alt=“图片不显示之后的提示信息" width=”宽度” height=”高度”/>

效果图

bbc9624e8f8e41aeab7f6667dd510234.png

2.7 路径分类

路径分类：绝对路径、相对路径

(1)、绝对路径

绝对路径是指文件在硬盘上真正存在的路径。例如f0f503b8cda8748e0e425f8705a7790.jpg个图片是存放在硬盘的D:\桌面\扎乱\国风图片目录下，那么 f0f503b8cda8748e0e425f8705a7790.jpg这个图片的绝对路径就是D:\桌面\扎乱\国风图片\f0f503b8cda8748e0e425f8705a7790.jpg。 注意：绝对路径在实际的开发过程中很少去使用，如果使用D:\桌面\扎乱\国风图片\f0f503b8cda8748e0e425f8705a7790.jpg来指定背景图片的位置，在自己的计算机上 浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了，绝对路径可以使用\或/字符作为目录的分隔字符

注意： 在服务器里面不要使用中文文档，可能会报错

(2)、相对路径

相对路径，就是相对于自己的目标文件位置。

1)当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名； <imgsrc="pic4.gif" /> 2)当当前文件与目标文件所处的文件夹在同一目录下，写法如下： 文件夹名/目标文件全称+扩展名； <imgsrc="img/pic.png“/> 3)当当前文件所处的文件夹和目标文件在同一目录下，写法如下： ../目标文件文件名+扩展名 <img src="../seespring-logo.png"/>

2.8 链接元素

<a href=“路径” title=“鼠标悬停上去之后的提示信息” target=“规定在何处打开文档">内容</a>

Target属性：规定在何处打开文档。

    • A.target=“_self“ 默认值
    • B.target=“_blank“ 新窗口打开

代码格式

<a href="https:\\seespring.com.cn" title="网站">见春天官网</a>//默认值
<a href="https:\\seespring.com.cn" title="网站" target="_blank" >见春天官网</a>//新窗口打开

截图：

fef0c49a762549fbb065c44f524e6c0e.png

8c0b406ea1ba49778649bd1f3a10e86d.gif

注意： 换行的标签建议作为父元素进行嵌套

3. 不常用标签


  1. 删除标签
    不换行 <s></s> <del></del>

代码格式:

<del>这是删除用的</del>
 <s>见春天官网</s>

截图：

9d81ac80bfa44c818159d6a3149749a2.png


  1. 水平线

默认水平居中 <hr/>

代码格式:

<del>这是删除用的</del>
    <hr>
   <s>见春天官网</s>

截图：

2b733a95c63b4123a7fafff5a4cbc077.png

  1. 换行

<br/>


代码格式:

<del>这是删除用的</del>
    <br>
<s>见春天官网</s>

截图：

fa4fa961107b4f9dadd3830773dcd208.png 4. 下划线
<u></u>

代码格式:

    <del>这是删除用的</del>
    <br>
   <u>见春天官网</u>

截图：

b7f10e73017f4cc09d2af6b71e4d7fa1.png

  1. 上标和下标
    <sup>上标</sup> <sub>下标</sub>

代码格式:

<p>H<sup>2</sup>O</p>
<p>H<sub>2</sub>O</p>

截图：

fd77b7b9d8d94ea0904140e9aa41d6c9.png

4. div与span元素


<div></div> 可以理解为一个容器（大盒子）换行 div标签里可以嵌套任意标签 所有的标签都可以理解为是一个”盒子“，只不过div标签是一个大盒子


<span></span>不会换行，可以理解为一个没有任何意义的一个小盒 子一般用在选取文章的一小节或者一小段的时候用 没有具体含义,当与CSS一同使用时，元素可用于为部分文本设置样式属性


5. 特殊字符

一些转义字符

html源码显示结果描述
&lt;<小于号或显示标记
&gt;>大于号或显示标记
&amp;&可用于显示其它特殊字符
&quot;"引号
&reg;®已注册
&copy;©版权
&trade;™商标
&nbsp; 不断行的空白

版权声明：本文为本博主在CSDN账号「Ein hübscher Kerl.」的首发原创文章,本文是修改订正版，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：blog.csdn.net/qq_54026286…

avatar
文章
阅读
粉丝