设为首页收藏本站
开启辅助访问

前端重要的H标签详解（干货！）最新版

 您所在的位置：网站首页 › 前端所有标签是什么 › 前端重要的H标签详解（干货！）最新版

前端重要的H标签详解（干货！）最新版

2024-07-16 01:28| 来源: 网络整理| 查看: 265

目录 重要的H标签主要标签h系列标签主要用来做标题。h1到h6 依次缩小。p标签：段落。div标签：表示大的容器。span:放一些文本。a标签：超链接。img标签：增加背景图片块级标签和行内标签 补充br换行符hr水平线style标签优先级 ：!important 绝对优先文本标签

重要的H标签 主要标签 h系列标签主要用来做标题。h1到h6 依次缩小。 1 1 1 1 1 1

运行结果 在这里插入图片描述

p标签：段落。

p 元素会自动在其前后创建一些空白（段间距）。浏览器会自动添加这些空间，您也可以在样式表中规定。

p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。 p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。 p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。 p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。 p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

在这里插入图片描述

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注！ 欢迎关注微信公众号：宝藏女孩的成长日记 让这个可爱的宝藏女孩在努力的道路上与你一起同行！ 如有转载，请注明出处（如不注明，盗者必究）

div标签：表示大的容器。

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。

注意： Div span两个标签没有特殊的功能，只是作为一个内容容器，但使用频率很高，主要与CSS配合使用。 Div：块标签(它会独占一行，主要用于布局)

周杰伦的情歌不只有R&B，《彩虹》就是证明。 周杰伦的情歌不只有R&B，《彩虹》就是证明。 周杰伦的情歌不只有R&B，《彩虹》就是证明。 周杰伦的情歌不只有R&B，《彩虹》就是证明。

运行结果 在这里插入图片描述

span:放一些文本。

Span:行内标签(不会独占一行) 标签被用来组合文档中的行内元素。 注意：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

哪里有彩虹告诉我 能不能把我的愿望还给我 为什么天这么安静 所有的云都跑到我这里 有没有口罩一个给我 释怀说了太多就成真不了 也许时间是一种解药 也是我现在正服下的毒药 看不见你的笑 我怎么睡得着 你的声音这么近我却抱不到 没有地球太阳还是会绕 没有理由我也能自己走 你要离开 我知道很简单 你说依赖 是我们的阻碍 就算放开 但能不能别没收我的爱 当作我最后才明白 有没有口罩一个给我 释怀说了太多就成真不了 也许时间是一种解药 也是我现在正服下的毒药 看不见你的笑 我怎么睡得着

运行结果 在这里插入图片描述

a标签：超链接。 页面的切换：一个网站一般由很多个页面组成，这些页面之间的切换是通过超链接来完成的。超链接可以链接到站点内部的页面，也可以链接到外面站点的页面。如果要链接到站点下面某个子目录里面的文件，需要加上路径的名称。如果要从当前页面链接到上一级目录里面的页面，需要用到…/ 表示回到上一级目录，如果还有再上一级 …/…/在新的页签打开页面，需要给a标签添加一个target属性。_blank：新页签打开。_parent：在父窗口打开。 _self:表示在当前窗口打开（默认）。_top:在顶层窗口打开。在网页中添加一个锚点，给这个锚点取一个name属性 ，就可以在其他地方添加一个锚点链接，点击链接就可以打开一个页面的指定的锚点。 注意：锚点所在的位置，前面和后面都要有距离。mailto:后面跟上一个邮箱地址，当点击链接的时候，会自动打开发邮件的软件（前提是你的电脑已经安装了发邮件的软件）。< a href=“javascript:void(0);”>点击我< /a> ：这种写法，就屏蔽了a标签默认的行为（链接）。就相当于是一个独立的按钮。

例如

腾讯(外部站点) 首页(内部站点) 登录 打开新的页签访问腾讯(外部站点) 去购买住房 [email protected] 点击我 住房层

这个不好演示，你去运行一下就知道啦！

img标签：增加背景图片

比如说，我在同级目录img下面增加了一张图片

在这里插入图片描述

运行效果 在这里插入图片描述 当图片加载错误的时候回提示 在这里插入图片描述

块级标签和行内标签

任何一个标签都相当于一个容器。不管是块级的还是行内的，都可以通过display这个属性去设置它。

  块级元素：独占一行，div p ul 块级元素可以设置它的宽高。

  行内元素：都排在一行，一行排满之后，再从第二行开始排列。span a 行内元素不能设置它的宽高，设置了宽高也没有效果。 注意：行内元素如果设置了浮动属性，也可以对它设置宽高。

eg: Div：块标签(它会独占一行，主要用于布局) Span:行内标签(不会独占一行)

块标签与行内标签的区别：

块标签独占一行，宽度默认为100%； 行内标签多个并排一行，宽高为内容大小。

行内元素和块级元素是可以相互转换的。 display: inline; 这个元素就是行内元素。 display: block; 这个元素就是一个块级元素。

例如看下面的代码来理解

#box1{ width: 200px; height: 100px; background-color: red; display: inline; } #box2{ width: 200px; height: 150px; background-color: salmon; display: inline; } span{ display: block; } 我是 周杰伦 我是行内元素，但display: block了 我是行内元素，但display: block了 我是行内元素，但display: block了 我是行内元素，但display: block了 我是行内元素，但display: block了 我是行内元素，但display: block了 我是行内元素，但display: block了 我是行内元素，但display: block了

运行结果 在这里插入图片描述

补充 br换行符 宝藏女孩的成长日记 标签是单标签（意味着它没有结束标签，因此这是错误的） 宝藏女孩的成长日记

运行结果 在这里插入图片描述

hr水平线 宝藏女孩的成长日记 宝藏女孩的成长日记

在这里插入图片描述

style标签

定义和用法 style标签用于为 HTML 文档定义CSS样式。

p{ background-color: #FFDD33; } 宝藏女孩的成长日记 宝藏女孩的成长日记

这个就会引入一个优先级的知识

优先级 ：!important 绝对优先

CSS优先级：!important > 行内样式 > id选择器 > 类选择器 > 标签选择器

p{ background-color: #FFDD33 !important; } 宝藏女孩的成长日记 宝藏女孩的成长日记

在这里插入图片描述

文本标签

b标签和 strong标签 标签呈现粗体文本效果。 就这样记嘛：b是big的缩写 s是strong的缩写

i标签和 em 标签 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。

small标签 标签呈现小号字体效果。

注意：如果被包围的字体已经是浏览器所支持的最小字号，那么 标签将不起任何作用。

big标签 标签呈现大号字体效果。

u标签 标签可定义下划线文本。

del标签 定义文档中已被删除的文本。

sub标签 定义文档中的下标文本。

sup标签 定义文档中的上标文本。

https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭 欢迎您的关注！ 欢迎关注微信公众号：宝藏女孩的成长日记 创作不易，如有转载，请注明出处



【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3