【HTML】常用标签汇总

已于 2023-07-24 11:04:49 修改
阅读量449 收藏 1
点赞数
分类专栏： HTML 笔记 文章标签： 前端 html
于 2022-07-23 10:24:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45677671/article/details/125944209
版权

文章目录

一、块元素

特点：

  1. 块元素在网页中就是以块的形式显示，所谓的块状就是元素显示为矩形区域。
  2. 默认情况下，块元素都会独占一行，按顺序自上而下排列，不会出现两块相邻的块状元素并列显示的现象
  3. 块状元素都可以自定义自己的宽度和高度
  4. 块状元素一般作为其他元素的容器，常把这种容器比喻为一个盒子。
    类似在元素后面添加换行符，也就是说其他元素不能再其后面并列显示### 盒子：div
  • <div>没有具体含义，统称为块标签，用来设置文档区域，是文档布局常用对象
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				border: 1px greenyellow solid;
				margin: 50px;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

标题：h1-h6

  • <h1>：定义最大的标题， <h6>： 定义最小的标题，都自带上下外边距（margin）。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				border: 1px greenyellow solid;
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<div>
			<h1>h1 标题大小及样式</h1>
			<h2>h2 标题大小及样式</h2>
			<h3>h3 标题大小及样式</h3>
			<h4>h4 标题大小及样式</h4>
			<h5>h5 标题大小及样式</h5>
			<h6>h6 标题大小及样式</h6>
		</div>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

段落：p

  • 段落是通过 <p> 标签定义的，自带上下外边距（margin）。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				border: 1px greenyellow solid;
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<div>
			<p>这是一个段落</p>
			<p>这是一个段落</p>
			<p>这是一个段落</p>
		</div>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

水平线：hr

  • <hr /> 标签在 HTML 页面中创建水平线，自带上下外边距（margin）。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				border: 1px greenyellow solid;
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<div>
			<hr /><hr /><hr />
		</div>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

列表：ul、ol、dl

参考：https://blog.csdn.net/qq_45677671/article/details/123874633

表单：form

参考：https://blog.csdn.net/qq_45677671/article/details/111718381

表格：table

参考：https://blog.csdn.net/qq_45677671/article/details/123866131

二、行内元素（内联元素）

特点：

  1. 内联元素的表现形式是始终以行内逐个进行显示
  2. 内联元素也会遵循盒模型基本规则，如可以定义padding、border、margin等属性，但个别属性不能正确显示（padding/margin-top/bottom）
  3. 内联元素没有自己的形状，不可以自定义自己的宽度和高度，它显示的宽度和高度由内容确定。它只能根据所包含内容的高度，最小单元也会呈现矩形形状。

换行：br

  • <br />标签常用于文本换行
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				border: 1px greenyellow solid;
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<div>
			这是一段文本内容。<br />
			这是一段文本内容。<br />
			这是一段文本内容。<br />
		</div>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

自定义：span

  • <span>文本节点标签，可以是某一小段文本或是某一个字。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				border: 1px greenyellow solid;
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<div>
			<span>这是一个span标签的文本内容。</span>
			<span>这是一个span标签的文本内容。</span>
			<span>这是一个span标签的文本内容。</span>
		</div>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

斜体：i、em

  • <i>和<em>标签都是用来设置文本字体的倾斜效果，但是 em 比 i 的语义化更好，不推荐使用 i 。
  • 其实就是内置了 css 属性： font-style: italic;
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				border: 1px greenyellow solid;
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<div>
			<i>这是一段文本内容。</i>
			<em>这是一段文本内容。</em>
		</div>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

粗体：b、strong

  • <b>和<strong>标签都是用来设置文本字体的加粗效果，但是 strong 比 b 的语义化更好，不推荐使用 b 。
  • 其实就是内置了 css 属性： font-weight: bold;
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				border: 1px greenyellow solid;
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<div>
			<b>这是一段文本内容。</b>
			<strong>这是一段文本内容。</strong>
		</div>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

下划线：u

  • <u>标签：用于设置文本下划线。
  • 其实就是内置了 css 属性： text-decoration: underline;
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				border: 1px greenyellow solid;
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<div>
			<u>这是一段文本内容。</u>
			<u>这是一段文本内容。</u>
		</div>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

上下标：sub、sup

  • 上标标签<sup>，下标标签<sub>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				border: 1px greenyellow solid;
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<div>
			上标<sup>上标内容</sup>
			下标<sub>下标内容<sub>
		</div>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

超链接：a

参考：https://blog.csdn.net/qq_45677671/article/details/123876601

三、行内块元素（内联块元素）

内联块元素：可以理解为块状元素和内联元素的结合

  • 特点：
1. 位于块状元素或其他内联元素内
2. 可容纳其他块状元素或内联元素
3. 设置宽度和高度生效

图片：img

参考：https://blog.csdn.net/qq_45677671/article/details/125969007

一颗不甘坠落的流星
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue2遇到问题--mixins中watch被多次调用
GTbond的博客
11-29 1525
vue2监听事件重复多次
前端VUE【实战】—— mixin混入用法总结
最新发布
2401_84097678的博客
04-09 958
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
VUE（混入mixin、计算属性computed、监听watch）
m0_66970189的博客
06-25 2011
私有混入 在vue实例中通过mixins进行声明，而私有混入可以分成两种形式进行，一种是通过对象的形式，一种是通过数组的形式 通过对象的形式 通过数组的形式（放入数组中的数据，需要在实例外部进行声明） 混入总结 混入就是封装一个vue属性，可以在多个实例上使用，实例首先在自身data数据中查找，接着再到私有混入中查找（数组中的多个混入，谁在后就用谁），最后再去全局混入中查找 计算属性 computed 计算属性是监听变量的变化，进行以下的操作计算属性return出结果不改变原来变量的值，计
Vue中的混入mixin使用方法介绍
热爱前端的大三在校生
10-28 1826
数据对象进行合并，其中的基本数据类型在和组件的数据发生冲突时以组件数据优先，组件中的数据会覆盖混入对象的数据。数据对象中如果有引用数据类型，引用数据类型会进行深参差的递归合并。生命周期钩子函数混合为一个数组，当使用组件时，组件的函数和混和的函数都执行，混入中的函数会先执行，组件的函数后执行。值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。一般混入都是在单组件内应用比较合适也可以进行全局注册。
Vue — 详解mixins混入使用
前端小菜鸡的成长之路
05-27 1501
详解mixins混入使用 前言 当我们的项目越来越大，我们会发现组件之间可能存在很多相似的功能，你在一遍又一遍的复制粘贴相同的代码段（data，method，watch、mounted等），如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了Mixins特性   一、什么是Mixins？ mixins（混入），官方的描述是一种分发 Vue 组件
HTML标签汇总模板.doc
11-23
下面是常用的 HTML 标签汇总模板。 1. 主体标签 <body> 标签是 HTML 文档的主体部分，用于定义网页的主体内容。在 <body> 标签中，可以添加各种属性来控制网页的样式和布局。 * text：设置网页的默认文字颜色 * ...
帝国cms常用标签汇总
10-23
【帝国CMS常用标签汇总】 帝国CMS是一款功能强大的网站内容管理系统，其标签系统是其核心特性之一，方便用户在模板中快速调用数据。以下是一些常见的帝国CMS标签及其使用技巧： 1. 判断会员是否登录： ```php (!$_...
H5常用标签汇总总结
05-06
H5常用标签汇总总结
(完整word版)HTML常用标签属性汇总.doc
11-15
HTML常用标签属性汇总 HTML（HyperText Markup Language）是一种用于设计网页的标记语言，它包括了许多不同的标签，每个标签都有其特定的属性和用途。下面是HTML中一些常用的标签属性汇总： body标签 body标签是...
VUE复习深入学习10.可复用性 & 组合 mixin!!!!!!
weixin_43152108的博客
06-05 344
混入 基础 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 选项合并 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。 比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。 var mixin = { created: functio
Vue mixins 和 watch 动态监测屏幕的高度
weixin_41040445的博客
06-03 525
当页面内容的高度不确定的时候 header 始终在顶部--- fixed。footer是随内容移动的 内容很少则footer在ye ian底部，当内容很多footer在内容的地步
vue基础二
Duxiangtao的博客
05-26 272
数据请求 数据请求在前端开发中的使用有两种形式 使用原生javascript提供的数据请求 ajax( 四部曲，一般需要我们结合Promise去封装，使用不是很便利，但是效率很高 ) fetch( 本身结合了Promise,并且已经做好了封装，可以直接使用 ) 使用格式： 使用别人封装好的第三方库 目前最流行的，使用率最高的是 axios vue中我们最常使用的 vue ...
vue mixins和extends的妙用
weixin_33970449的博客
12-19 1645
写在前面 vue提供了mixins、extends配置项，最近使用中发现很好用。如有不对请指正，感谢尤大提供高效生产工具。 混合mixins和继承extends 看看官方文档怎么写的，其实两个都可以理解为继承，mixins接收对象数组（可理解为多继承），extends接收的是对象或函数（可理解为单继承）。 继承钩子函数 const extend = { created () { ...
Vue中的mixin,Vdom和watch的介绍
DingLei_的博客
05-24 953
mixin使用它的好处： 将 options 中的配置项可以单独抽离出来，单独管理，这样方便维护 使用： 新建一个对象用来保存 options 中某一个配置项，比如： methods 接下来要将我们创建好的对象混入到我们的 ViewModel 中，我们的混入形式有两种 局部混入 【 推荐 】 只是在当前 vm 中才有 new Vue({ mixins: [ ...
computed mixins watch
weixin_45213851的博客
06-21 706
计算属性（computed） 复杂逻辑,模板难以维护 (1) 基础例子 (2) 计算缓存 VS methods -计算属性是基于它们的依赖进行缓存的。 -计算属性只有在它的相关依赖发生改变时才会重新求值 (3) 计算属性 VS watch - v-model 计算属性： 业务： 将一个 字符串 反向 ？ 思路： str ->arr- arr反向...
vue的mixins属性
出埃及记
08-23 4974
首先先给出官网 https://vuejs.org/v2/guide/mixins.html 今天在开发项目的时候要改变一个标签的属性，因为项目中有多个地方都要改(业务逻辑相同)，所以就看有没办法只改变一个地方，把方法加进去,最后找官网就发现这个属性。 下面是我的-mixin.js 文件 import {mapGetters, mapMutations, mapActions} from '
computd watch methods和mixin
你好的博客
05-25 129
computd vs watch vs methods 项目中： computed计算属性： 有逻辑 像变量一样使用 一定要有return返回值 <div id="app"> <p> {{split_msg}} </p> </div> new Vue({ el:'#app', data:{ ...
vue 混入（mixin）的使用
weixin_44690156的博客
07-25 8244
当组件使用了mixin时,mixin中的生命周期函数会先执行,然后在执行组件中的生命周期。mixin对象里的(components、methods、computed、data)这些选项，混入组件时选项会被合并，重名冲突时优先采用组件中定义的数据。mixin中定义的方法和参数在各组件中不共享，即当前组件对mixins的属性的修改，其他也引用了这个mixins的组件不会受影响;mixin中定义的生命周期函数会比引用组件的生命周期先执行,会和组件中定义的methods,created等选项合并调用;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一颗不甘坠落的流星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值