前端基础---HTML常用标签

已于 2022-08-13 22:37:09 修改
阅读量3.4k 收藏 45
点赞数 4
文章标签： html5 前端
于 2022-08-11 19:56:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57051895/article/details/126216456
版权

目录

前言

网站在internet上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

网页是网站中的一“页”，就是HTML格式的文件，通过浏览器来展示其内容。

网页由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析出来显示给用户的。

HTML是超文件注标式语言，用来描述网页的一种标记语言，它不是一种编程语言。

一、HTML网页框架 

1、<! DOCTYPE html> 是文档声明，写在最前面。

2、<html> 根标签，所有代码都要写在根标签里面；一个页面只有一个根标签。

3、<head>头部标签，帮助浏览器编译页面信息，里面的内容不会显示在页面当中。

4、<body>身体标签，显示网页的主题内容，都写在body标签里面的内容在页面中显示。

5、<title>标题标签，是网页的标题，出现在网页的标题栏中。

6、<meta>是一个自结束标签/单标签，用于设置头标签信息。

charset="utf-8"    charset属性；utf-8是属性值.

注意：标签分为单标签/自结束标签和双标签，双标签必须成双成对出现。

        例如：双标签<titlt>,<titlt>开始，</title>结束 

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
   
    <title>网页标题</title><!--标题标签-->
</head>
<body><!--身体标签-->
    我的第一个页面！！！
</body>
</html>

运行示例： 

 

二、HTML常用标签

1.<p>

<p>标签成为段落标签，它是一个块元素，会单独在网页中占用一段，文字超过一行p标签自动换行，有默认字体和样式。

功能：用于网页中文章段落

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
   
    <title>网页标题</title><!--标题标签-->
</head>
<body><!--身体标签-->
    <p>
        我是p标签！！！教卡舟光毒我人后日并都回判么，为如此何我游君心，人亡艳葬二。 教卡舟光毒我人后日并都回判么，为如此何我游君心，人亡艳葬二。教卡舟光毒我人后日并都回判么，为如此何我游君心，人亡艳葬二。教卡舟光毒我人后日并都回判么，为如此何我游君心，人亡艳葬二。
    </p>
</body>
</html>

运行结果如下： 

 2.<h1>、<h2>、<h3>、<h4>、<h5>、<h6>

h1~h6文本标题标签，它是一个块元素，会单独在网页中占用一段，h1标题最大，以此类推，h6标题最小。

功能：用作网页内容中的文本标题

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
   
    <title>网页标题</title><!--标题标签-->
</head>
<body><!--身体标签-->
    <h1>我是h1标签</h1>
    <h2>我是h2标签</h2>
    <h3>我是h3标签</h3>
    <h4>我是h4标签</h4>
    <h5>我是h5标签</h5>
    <h6>我是h6标签</h6>
</body>
</html>

运行结果如下：

3.<center>

<center>居中标签,写在其标签中的内容在网页中居中显示。

功能：在网页中使内容居中显示

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
   
    <title>网页标题</title><!--标题标签-->
</head>
<body><!--身体标签-->
    <center><!--内容居中显示-->
        <h1>我是h1标签</h1>
        <h2>我是h2标签</h2>
        <h3>我是h3标签</h3>
        <h4>我是h4标签</h4>
        <h5>我是h5标签</h5>
        <h6>我是h6标签</h6>
    </center> 
</body>
</html>

运行结果如下：

4.<hr>

<hr>是水平线标签

功能：在网页中显示一条水平线

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
   
    <title>网页标题</title><!--标题标签-->
</head>
<body><!--身体标签-->
    <P>
        我是HR标签<hr>
    </P>
</body>
</html>

运行结果如下：

5.<br>

<br>标签是换行标签，在一段文字当中使用<br>标签使文字换到下一行，达到换行的效果

功能：从当前行换到下一行，同键盘中的回车键相同

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
   
    <title>网页标题</title><!--标题标签-->
</head>
<body><!--身体标签-->
    <P>
        我是HR<br>标签
    </P>
</body>
</html>

运行结果如下：

 7.<span>

<span>标签是行内元素，在行内定义一个区域包裹文字，达到特定的效果。

功能：包裹文字

注意：运行效果看起来和<p>标签看起来一样，但<p>标签是块元素，<span>标签是行内元素。

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
   
    <title>网页标题</title><!--标题标签-->
</head>
<body><!--身体标签-->
    <span>
        我是一个span标签
    </span>
</body>
</html>

运行结果如下：

 8.<div>

<div>标签是块标签，它是一个块元素，对单独占用一段，通常用于页面布局，HTML之后的CSS中会学习到。

功能：划分区域，实现网页布局

接下来的运行效果中，<p>标签和<spa>标签都是在<div>标签的区域快中

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
   
    <title>网页标题</title><!--标题标签-->
</head>
<body><!--身体标签-->
    <div>
        <span>
            我是一个span标签
        </span>
        <p>
            我是一个p标签
        </p>
    </div>
</body>
</html>

运行效果如下：

 9.<del>

<del>是删除线标签，主要作用是在文字中加入删除线，实现删除的效果。

功能：在网页中显示一条删除线

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
   
    <title>网页标题</title><!--标题标签-->
</head>
<body><!--身体标签-->
    原价：<del>999.0</del>
</body>
</html>

运行效果如下：

10.<q>

<q>是引用标签，主要作用的引用语句，在<q>标签中的文字会被在两端加上“ ”

功能：引用网页内内容中的文字

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
   
    <title>网页标题</title><!--标题标签-->
</head>
<body><!--身体标签-->
    孔丘曰：<q>独学而无友，则孤陋而寡闻。</q>
</body>
</html>

运行结果如下：

 10.<img>

<img>是图片标签，主要作用是在网页中插入图片，使网页效果更佳美观

功能：在网页中插入图片

<img>标签属性如下

属性属性值
src图片所在的路径
alt图片不显示时，提示的内容
width设置图片的高度
height设置图片的宽度

src属性是引入图片所在路径，使用相对路径

相对路径： 通过./跳转，./是默认路径，可以省略（代码中使用）

                   通过../跳出当前目录，寻找跳转的目标目录，如果没有，再跳出当前目录

下面代码中插入的图片在网页中显示的是图片原始大小

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
   
    <title>网页标题</title><!--标题标签-->
</head>
<body><!--身体标签-->
    <img src="./game01.jpg" alt="这是一张照片">
</body>
</html>

运行结果如下：

 下面代码中图片引入路径错误，altsh属性显示提示文字

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
   
    <title>网页标题</title><!--标题标签-->
</head>
<body><!--身体标签-->
    <img src="./game0.jpg" alt="这是一张照片">
</body>
</html>

运行结果如下：

 接下来代码用width属性和height属性来改变图片的原始大小

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
    <title>网页标题</title><!--标题标签-->
</head>
<body><!--身体标签-->
    <img src="./game01.jpg" alt="这是一张照片" width="400px" height="200px">
</body>
</html>

运行结果如下：

三、超链接标签：<a>

超链接可以是一个字，一张图片，表格等等

属性：

        href 属性：设置超链接跳转的地址

                绝对路径：例如：“https://www.baidu.com”

                相对路径：通过./跳转，./是默认路径，可以省略

                                   通过../跳出当前目录，寻找跳转的目标目录，如果没有，再跳出当前目录

        target 属性：控制超链接的打开方式

                属性值：_self  在当前页面打开超链接，默认方式

                               _black  在新页面打开超链接

功能：

  1. 从一个页面跳转到另一个页面
  2. 从当前页面进行跳转（锚点功能）

功能一:从一个页面跳转到另一个页面

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
   
    <title>超链：从一个页面跳转到另一个页面</title><!--标题标签-->
</head>
<body><!--身体标签-->
    超链接标签：<a href="https://www.baidu.com/">(绝对路径)百度</a>
</body>
</html>

运行效果如下：

 功能二：从当前页面进行跳转（锚点功能）

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
   
    <title>超链：在当前页面跳转</title><!--标题标签-->
</head>
<body><!--身体标签-->
    超链接标签：
    <a href="#pic">照片</a>
    <P>也拢手在。</P>
    <P>也拢手在。</P>
    <P>也拢手在。</P>
    <P>也拢手在。</P>
    <P>也拢手在。</P>
    <P>也拢手在。</P>
    <P>也拢手在。</P>
    <P>也拢手在。</P>
    <P>也拢手在。</P>
    <P>也拢手在。</P>
    <P>也拢手在。</P>
    <P>也拢手在。</P>
    <P>也拢手在。</P>
    <P>也拢手在。</P>
    <P>也拢手在。</P>
    <P>也拢手在。</P>
    <P>也拢手在。</P>
    <P>也拢手在。</P>
    <img src="./game01.jpg" id="pic">
    <a href="#">回到顶部</a>
</body>
</html>

当点击“照片”链接时，跳转到照片（开心厨房），照片链接未点击时为蓝色，点击之后颜色变暗。

运行结果如下：（点击链接前）

运行代码如下：（点击链接后）

链接颜色变暗：

点击底部链接“回到顶部”时，从底部跳转到顶部 

运行结果如下：（点击链接前）

 运行结果如下:(点击链接后)

锚点功能：

  1. 回到顶部，href属性值为“#”
  2. 跳转任意位置，第一步，给要去的位置做标记id=”” , 第二步，在href属性的属性值将id属性值写上

空链接写法：

        第一种：<a href=”#”>空链接</a>

        第二种：<a href=”javascript”>空链接</a>

四、列表标签

列表分为有序列表、无序列表、自定义列表三种

1、有序列表：用ol创建列表，li表示列表项

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
   
    <title>列表</title><!--标题标签-->
</head>
<body><!--身体标签-->
    <ol>
        <li><!--列表项-->
            有序列表
        </li>
        <li><!--列表项-->
            有序列表
        </li>
        <li><!--列表项-->
            自定义列表
        </li>
    </ol>
</body>
</html>

运行结果如下：

 type属性可以改变有序列表的项目符号，有序列表项目符号可以是：a、A、1、i、I  

下面程序演示把列表项目符号更改为A开头

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
   
    <title>列表</title><!--标题标签-->
</head>
<body><!--身体标签-->
    <ol type="A">
        <li><!--列表项-->
            有序列表
        </li>
        <li><!--列表项-->
            有序列表
        </li>
        <li><!--列表项-->
            自定义列表
        </li>
    </ol>
</body>
</html>

运行结果如下：

 2、无序列表：用ul创建列表，li表示列表项

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
   
    <title>列表</title><!--标题标签-->
</head>
<body><!--身体标签-->
    <ul>
        <li><!--列表项-->
            有序列表
        </li>
        <li><!--列表项-->
            有序列表
        </li>
        <li><!--列表项-->
            自定义列表
        </li>
    </ul>
</body>
</html>

运行结果如下：

 无序列表也可通过type属性，来改变列表项。

无序列表属性值：disc  默认值，实心圆点

                             square  实心方块

                             circle  空心圆

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
   
    <title>列表</title><!--标题标签-->
</head>
<body><!--身体标签-->
    <ul type="circle"> 
        <li><!--列表项-->
            有序列表
        </li>
        <li><!--列表项-->
            有序列表
        </li>
        <li><!--列表项-->
            自定义列表
        </li>
    </ul>
</body>
</html>

运行结果如下：

3、自定义列表：用dl创建列表，dt定义列表，dd表示定义的列表项

注意：自定义列表没有项目符号

代码如下：

<!DOCTYPE html><!--文档声明-->
<html><!--根标签-->
<head><!--头部标签-->
    <meta charset="UTF-8">
   
    <title>列表</title><!--标题标签-->
</head>
<body><!--身体标签-->
    <dl> 
        <dt>
            <dd><!--列表项-->
                有序列表
            </dd>
            <dd><!--列表项-->
                有序列表
            </dd>
            <dd><!--列表项-->
                自定义列表
            </dd>
        </dt>
    </dl>
</body>
</html>

运行结果如下：

总结

以上就是今天要将的内容，本文仅仅简单介绍了HTML中的常用标签，学会以上全部常用标签足够学习下一阶段的CSS层叠样式表。

luckyboy!
关注
  • 4
    点赞
  • 踩
  • 45
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html网页框架
04-17
html网页的框架例子
前端——HTML中的常用标签详解
xh1605004242的博客
05-06 4633
HTML中的常用标签
HTML页面标签
最新发布
m0_59716343的博客
03-26 270
此外，还有许多其他的HTML标签，用于创建不同的元素和效果。需要根据具体需求选择合适的标签来编写HTML页面。HTML页面标签是用于定义 HTML 文档结构和呈现内容的元素。每个标签都有不同的作用和功能。
HTML 基本标签大全
热门推荐
qq_46028517的博客
06-08 1万+
HTML基础------认识标签
前端基础，超全html常用标签大汇总
Rosia629的博客
10-15 6759
新手一天搞定html常用标签，超全汇总，快来学习~
html的根标签是什么,html标签
weixin_39626298的博客
06-15 5542
第一部分什么是 HTMLHTML(HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的元素(elements)组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 一对标签(tags)可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。...
前端学习 ---常用标签
xss125的博客
02-15 1548
文本标签是双标签，自带加粗效果，有自己对应的文本大小，并且独占一行，有默认间距。
前端基础-CSS样式的分类
01-08
css样式的分类 1.内部样式—-内联样式 使用的是style标签 /* 样式 */ 多学一招：把页面的公共...多学一招：做项目最常用的是外部样式，link标签 三种样式表总结 样式表 优点 缺点 使用情况 控制范围 行内样
web前端基础知识——HTML常用标签篇
01-08
二、HTML常用标签的学习： head标签 头标签 title标签 显示在网页的选项卡区域 body标签 显示网页的所有内容 meta标签 信息标签 charset=utf-8 meta 标签在head里面 标注当前网页的编码格式 utf-8
04-vscode常用标签.html
07-01
04-vscode常用标签.html
Javaweb前端——HTML常用标签.pdf
04-09
Javaweb前端——HTML常用标签.pdf
HTML5基础知识-HTML5多媒体标签.pptx
05-06
单元一 HTML5基础知识端基础前WebHTML5多媒体标签1常用多媒体格式2播放音频audio播放视频video34其他多媒体标签1常用多媒体格式音频格式1、WAV 微软和IBM共同开发的PC标准声音格式，文件后缀名.wav。2、MP3 MP3是一...
前端的那些基本标签【a table tr caption image等等......】
qq_46906413的博客
07-11 3880
关注博主，带你短期零基础入门前端，刷题中学习，刷题中成长，在一款可以伴程序员一生的app上成长于蜕变。后期会有python刷题专栏。
前端基础知识学习——Html常见标签 img标签、a标签、h标题、p段落、列表、选择符（二）
weixin_45496521的博客
05-23 1435
Html常见标签 img标签、a标签、h标题、p段落、列表、选择符
速看！！！前端基础标签汇总！
weixin_49016330的博客
08-23 194
3. div 块 4.span分割 5. p段落。一 . 前端的基本框架，只要是写HTML5代码必须写的框架。这里是常用的前端30个标签！30.表单标签<form>1.h1-h6标题标签。7——14：简单的标签。15 -20.列表标签。29.iframe标签。21-24 图片标签。25-28.表格标签。
Web前端小白必看【网页开发工具/HTML常用标签】
weixin_73833411的博客
03-06 1967
包含vscode在前端网页开发部分的基本使用；以及前端Html常用的标签。
HTML基本标签
m0_57898822的博客
04-02 9652
HTML标签
html基础标签-学习笔记1
m0_51273315的博客
05-12 517
根标签 、头标签 、网页体标签6、背景颜色/图片标签。10、无序/有序列表标签。11、认识基本主体标签。8、a标签设置超链接。
前端——11.列表标签
m0_52096593的博客
03-14 1048
前面我们学了表格标签，知道表格标签是用来显示数据的，那么列表标签就是用来布局的。列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。根据使用情景不同，列表可以分为三大类：无序列表有序列表自定义列表下面具体来看一下几个列表：无序列表有序列表。
web前端的html常用标签
04-30
以下是一些常用的 HTML 标签： 1. `<html>`：定义一个 HTML 文档 2. `<head>`：定义一个文档的头部，包含关于文档的信息和元数据 3. `<title>`：定义文档的标题，显示在浏览器的标题栏或标签上 4. `<body>`：定义文档的主体，包含页面的内容 5. `<h1>`~`<h6>`：定义标题，从大到小依次递减 6. `<p>`：定义一个段落 7. `<a>`：定义一个超链接 8. `<img>`：定义一个图像 9. `<ul>`：定义一个无序列表 10. `<ol>`：定义一个有序列表 11. `<li>`：定义列表项 12. `<table>`：定义一个表格 13. `<tr>`：定义一个表格行 14. `<td>`：定义一个表格单元格 15. `<form>`：定义一个表单 16. `<input>`：定义一个输入框 17. `<textarea>`：定义一个文本域 18. `<button>`：定义一个按钮 19. `<select>`：定义一个下拉列表 20. `<option>`：定义下拉列表的选项

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值