当前位置： 首页 > news >正文

HTML常用标签积累

news 来源：原创 2024/4/28 3:51:43

HTML常用标签积累

目录

  • 01-主体标签:html、head、titile、body
  • 02-b标签:加粗标签
  • 03-strong标签:文本加粗效果(文本强调效果)
  • 04-i标签:文本倾斜效果
  • 05-em标签:文本倾斜效果(带文本强调的效果)
  • 06-u标签:下划线效果
  • 07-ins标签:下划线效果
  • 08-del标签:删除线效果(中划线)
  • 09-s标签:删除线效果(中划线)
  • 10-font标签:字体设置标签
    • 10-01:font标签的color属性(设置字体颜色)
    • 10-02:font标签的size属性(设置字体大小)
    • 10-03:font标签的face属性(设置字体的样式)
  • 11-big标签:字体变大到原来的115%
  • 12-small标签:字体变小到原来的85%
  • 13-sub标签:下标效果
  • 14-sup标签:上标效果
  • 15-注释标签
  • 16-p标签:段落标签
    • 16-01:p标签的align属性(设置对齐方式)
  • 17-br标签:换行标签
  • 18-hr标签:分隔横线标签
    • 18-1:hr标签的width属性(线条长度)
    • 18-2:hr标签的size属性(线条粗线)
    • 18-3:hr标签的color属性(线条颜色)
    • 18-4:hr标签的align属性(对齐方式)
    • 18-4:hr标签的noshade属性(无阴影效果)
  • 19-h1~h6标签:标题标签
    • 19-1 h1~h6标签的align属性(对齐方式)
  • 20-div标签:块标签
  • 21-span标签:行内块标签
  • 22-ol和li标签:有序列表标签
    • 22-01-ol标签的type属性:改变列表序号的样式
    • 22-02-ol标签的start属性:改变列表序号的起始值
    • 22-03-有序列表标签的嵌套
  • 23-ul和li标签:无序列表标签
    • 23-01 ul和li标签的type属性
    • 23-02 无序列表的嵌套
  • 24-img标签:图片标签
  • 25 a标签:链接标签

01-主体标签:html、head、titile、body

<html>
	<head><title>网页标题</title></head>
	<body>大部分的内容</body>
</html>

说明：html是最大的标签哈。

02-b标签:加粗标签

示例代码如下：

<p>我需要强调的是<b>我对你并没有恶意</b></p>

效果如下图所示：
在这里插入图片描述

03-strong标签:文本加粗效果(文本强调效果)

示例代码如下

<p>我需要强调的是<strong>对你并没有恶意</strong></p>

效果如下图所示：
在这里插入图片描述

04-i标签:文本倾斜效果

示例代码如下：

<p><i>这是引用别人的叙述</i></p>

效果如下图所示：
在这里插入图片描述

05-em标签:文本倾斜效果(带文本强调的效果)

示例代码如下：

<p><em>这是引用别人的叙述</em></p>

效果如下图所示：
在这里插入图片描述

06-u标签:下划线效果

示例代码如下：

<p>这是<u>马云、马化腾</u>曾经说过的</p>

效果如下图所示：
在这里插入图片描述

07-ins标签:下划线效果

示例代码如下：

<p>这是<ins>马云、马化腾、刘强东</ins>曾经说过的</p>

效果如下图所示：
在这里插入图片描述

08-del标签:删除线效果(中划线)

示例代码如下：

<p>这是马云、马化腾、<del>刘强东</del>曾经说过的</p>

效果如下图所示：
在这里插入图片描述

09-s标签:删除线效果(中划线)

示例代码如下：

<p>这是马云、<s>马化腾</s>、刘强东曾经说过的</p>

效果如下图所示：
在这里插入图片描述

10-font标签:字体设置标签

10-01:font标签的color属性(设置字体颜色)

color属性常用的取值有如下这些：
red、yellow、blue、green
也可用16进制的RGB值作为颜色属性值，搜索引擎搜索“在线 调色板”就有很多网页提供这个功能。比如网页 https://www.ip138.com/yanse/index.htm

用英文单词作为颜色属性值的示例代码如下：

<p><font color="red">我要用红色显示这段文字</font></p>

效果如下图所示：
在这里插入图片描述

用16进制的RGB值作为颜色属性值的示例代码如下：
在这里插入图片描述

<p><font color="#6633FF">我要用紫蓝色显示这段文字</font></p>

效果如下图所示：
在这里插入图片描述

10-02:font标签的size属性(设置字体大小)

size的属性值取值为1到7
示例代码如下

<p>font标签示例：<font color="#6633FF" size="5">我要用紫蓝色显示这段文字</font></p>

效果如下图所示：
在这里插入图片描述
值得注意的是：如果size的值超过7，那么和7的取值效果是一样的，比如size="99"和size="7"效果是一样的。

10-03:font标签的face属性(设置字体的样式)

示例代码如下

<p><font size="7" >默认</font></p>
<p><font size="7" face="宋体">宋体</font></p>
<p><font size="7" face="方正舒体">方正舒体</font></p>
<p><font size="7" face="幼圆">幼圆</font></p>
<p><font size="7" face="华文琥珀">华文琥珀</font></p>

效果如下所示：
在这里插入图片描述

11-big标签:字体变大到原来的115%

示例代码如下：

<p>这是一段<big>精彩</big>的文字</p>

效果如下所示：
在这里插入图片描述

12-small标签:字体变小到原来的85%

示例代码如下：

<p>这是一段精彩<small>的的的</small>文字</p>

效果如下所示：
在这里插入图片描述

13-sub标签:下标效果

示例代码如下：

<p>水的分子式为:H<sub>2</sub>O</p>

效果如下所示：
在这里插入图片描述

14-sup标签:上标效果

示例代码如下：

<p>2<sup>3</sup>=8</p>

效果如下所示：
在这里插入图片描述

15-注释标签

示例代码如下：

<p>这是第一行内容</p>
<!--这是注释内容-->
<p>这是第二行内容</p>

效果如下所示：
在这里插入图片描述
注意，它是一种多行注释，比如下面这个例子：

<!--这是第一行注释内容
这是第二行注释内容
这是第三行注释内容-->

在这里插入图片描述

16-p标签:段落标签

这个标签在上面的示例中已经广范用到了，这里再举一个例子。
p标签的特点是独占一行或一块。

<p>这是第一段内容</p><p>这是第二段内容</p>

效果如下所示：
在这里插入图片描述

16-01:p标签的align属性(设置对齐方式)

可取值有left center right
示例代码如下

<p align="left">p标签左对齐效果</p>
<p align="right">p标签右对齐效果</p>
<p align="center">p标签居中对齐效果</p>

运行效果如下图所示：
在这里插入图片描述

17-br标签:换行标签

换行标签是一个单标签
有两种写法：
第一种：

<br>

第二种(br标签的闭合形式)：

<br />

示例代码如下：

<p>空山新雨后,<br>天气晚来秋。<br>明月松间照,<br>清泉石上流</p>
<p>竹喧归浣女,<br />莲动下渔舟。<br />随意春芳歇,<br />王孙自可留</p>

运行效果如下图所示：
在这里插入图片描述

18-hr标签:分隔横线标签

hr标签是单标签，示例代码如下：

<p>这是分隔线前面的内容<hr />这是分隔线后面的内容</p>

效果如下
在这里插入图片描述

18-1:hr标签的width属性(线条长度)

示例代码如下

<p>这是分隔线前面的内容<hr width="300" />这是分隔线后面的内容</p>

效果如下：
在这里插入图片描述

18-2:hr标签的size属性(线条粗线)

示例代码如下

<p>这是分隔线前面的内容<hr width="300" size="10"/>这是分隔线后面的内容</p>

效果如下：
在这里插入图片描述

18-3:hr标签的color属性(线条颜色)

示例代码如下

<p>这是分隔线前面的内容<hr width="300" size="10" color="red"/>这是分隔线后面的内容</p>

效果如下：
在这里插入图片描述

18-4:hr标签的align属性(对齐方式)

可取值有left center right，默认值为 center
示例代码如下

<p><hr width="300" size="10" color="red" align="left" /></p>
<p><hr width="300" size="10" color="blue" align="center" /></p>
<p><hr width="300" size="10" color="green" align="right" /></p>

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

18-4:hr标签的noshade属性(无阴影效果)

noshade属性的可取值就只有一个，即noshade，其可取值与其名字一样，这种情况下，书写时可以省略其值。
即

<p><hr noshade="noshade" /></p>

等效于

<p><hr noshade /></p>

hr标签默认是有阴影的，有阴影和无阴影的放大对比效果如下图所示：
在这里插入图片描述
在这里插入图片描述

19-h1~h6标签:标题标签

示例代码如下

<p>
	<h1>标题1</h1>
	<h2>标题2</h2>
	<h3>标题3</h3>
	<h4>标题4</h4>
	<h5>标题5</h5>
	<h6>标题6</h6>
</p>

运行效果如下
在这里插入图片描述
从这个运行效果中我们可以看出，一个标题会占据一行。
注意，它呈现的字体大小是数字越大字体越小，即h1最大而h6最小。

19-1 h1~h6标签的align属性(对齐方式)

可取值有left center right，默认值为left
示例代码如下：

<p>
	<h1 align="left">标题1</h1>
	<h2 align="center">标题2</h2>
	<h3 align="right">标题3</h3>
</p>

效果如下：
在这里插入图片描述

20-div标签:块标签

块标签的含义是哪怕里面只有一个字符，它也要把某个块独占。前面已经说明了的p标签也是一种块标签。
示例代码如下：

我<div>爱</div>你中国

效果如下
在这里插入图片描述
分析：爱这个字因为div标签的作用而独占一行，从而把字符串“我爱你中国”分成了三行。

21-span标签:行内块标签

这个标签的作用不太好说清，直接上示例代码吧！
示例代码如下：

屈原说-<span>路漫漫其修远兮，吾将上下而求过索。</span>屈原是一位理想主义者。

效果如下：
在这里插入图片描述
在这里插入图片描述
从运行结果可以看出，这个标签成的块的宽度就是它的内容的宽度。有人要说了，既然块的宽度就是它内容的宽度，那要它有什么有用？它的作用是我们可以对这个行内块设置一些格式属性啊，比如设置字体样式、加个边框什么的。
注意：由于span属于行内的块，所以是不可以设置这个块的宽高的。但是div标签形成的块就是可以的。

22-ol和li标签:有序列表标签

示例代码如下

<body>
	<ol>
		<li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
		<li>列表项4</li>
		<li>列表项4</li>
	</ol>
</body>

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

22-01-ol标签的type属性:改变列表序号的样式

type属性的可取值有以下这些：
1—默认值，代表数字型列表序号。
a—代表小写字母a b c …
A—代表大写字母A B C …
i—小写的罗马记数
I—大写的罗马记数
none—没有序号
示例代码如下：

<body>
	<ol type="1">
		<li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
	</ol>

	<ol type="a">
		<li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
	</ol>

	<ol type="A">
		<li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
	</ol>

	<ol type="i">
		<li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
	</ol>

	<ol type="I">
		<li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
	</ol>

	<ol type="none">
		<li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
	</ol>

</body>

效果如下：
在这里插入图片描述

22-02-ol标签的start属性:改变列表序号的起始值

示例代码如下：

<body>
	<ol type="1" start="3">
		<li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
	</ol>

	<ol type="a" start="4">
		<li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
	</ol>
</body>

效果如下
在这里插入图片描述

22-03-有序列表标签的嵌套

示例代码如下：

	<ol>
		<li>幼儿园
			<ol type="A">
				<li>小班</li>
				<li>中班</li>
				<li>大班</li>
			</ol>
		</li>
		<li>小学</li>
		<li>中学</li>
	</ol>

运行效果如下：
在这里插入图片描述

23-ul和li标签:无序列表标签

示例代码如下：

	<ul>
		<li>张三</li>
		<li>李四</li>
		<li>王五</li>
	</ul>

运行结果如下图所示：
在这里插入图片描述

23-01 ul和li标签的type属性

type属性的值none表示前没有排序符号；
type属性的值disc表示实心圆；
type属性的值circle表示空心圆；
type属性的值square表示小方块；

ul标签进行type属性设置的示例代码如下：

	<ul>
		<li>张三</li>
		<li>李四</li>
		<li>王五</li>
	</ul>

	<ul type="none">
		<li>张三</li>
		<li>李四</li>
		<li>王五</li>
	</ul>

	<ul type="circle">
		<li>张三</li>
		<li>李四</li>
		<li>王五</li>
	</ul>

	<ul type="square">
		<li>张三</li>
		<li>李四</li>
		<li>王五</li>
	</ul>

	<ul type="disc">
		<li>张三</li>
		<li>李四</li>
		<li>王五</li>
	</ul>

运行结果如下：
在这里插入图片描述
li标签进行type属性设置的示例代码如下：

23-02 无序列表的嵌套

示例代码如下：

	<ul>
		<li>音乐</li>
		<li>运动
			<ul>
				<li>足球</li>
				<li>篮球</li>
				<li>跑步</li>
			</ul>
		</li>
		<li>看书</li>
	</ul>

运行效果如下图所示：
在这里插入图片描述
从上我们可以看出，嵌套时前面的符号会自动实现区别。

24-img标签:图片标签

img标签是一个单标签，所以通常的形式如下：

<img />

示例代码如下：

	<p>
		下面显示一幅美景图：<br />
		<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0403%2F16c9b14dj00qqyz8z0050c000xc00mgm.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666409590&t=cf1fbe23ff7732190a2d49d4cb180916" />
	</p>

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

25 a标签:链接标签

示例代码如下：

<a href="https://blog.csdn.net/wenhao_ir">点击这里查看昊虹AI笔记网的CSDN博客</a>

运行效果如下图所示：
在这里插入图片描述
如果要在新标签中打开链接页面，可以像下面这样写：

<a href="https://blog.csdn.net/wenhao_ir" target="_blank">点击这里查看昊虹AI笔记网的CSDN博客</a>

.

相关文章：

  • 【一起学SQLite】--SQLite中一些与众不同的特性？(2-1)
  • A+文档丨Azure MySQL 数据库高可用性解析
  • 【Python基础】Numpy：切片和索引操作
  • 【PAT甲级】1004 Counting Leaves
  • 【Vue】vue基础学习笔记
  • 边缘检测算子之间的优劣
  • 在软件测试摸爬滚打了8年，失业半年了。offer你在哪儿呀！
  • 15分钟了解sql注入(一) union注入
  • 基于混沌映射与差分进化自适应教与学优化算法-附代码
  • nginx基本使用一 ——————反向代理、负载均衡
  • 通讯录管理系统精解
  • 线上展厅表现形式 广州商迪
  • CDH 07Cloudera Manager freeIPA安装配置(markdown新版)
  • 22-09-23 西安 谷粒商城（05）CompletableFuture异步编排、nginx实现页面静态化
  • 【Javaweb】JSP标准标签库
  • [js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示
  • Angular数据绑定机制
  •  D - 粉碎叛乱F - 其他起义
  • Druid 在有赞的实践
  • es的写入过程
  • JS学习笔记——闭包
  • js正则，这点儿就够用了
  • Nginx 通过 Lua + Redis 实现动态封禁 IP
  • npx命令介绍
  • Python_OOP
  • Spring声明式事务管理之一：五大属性分析
  • Vue 2.3、2.4 知识点小结
  • Vue组件定义
  • webpack+react项目初体验——记录我的webpack环境配置
  • WePY 在小程序性能调优上做出的探究
  • 个人博客开发系列：评论功能之GitHub账号OAuth授权
  • 基于axios的vue插件，让http请求更简单
  • 前端自动化解决方案
  • 双管齐下，VMware的容器新战略
  • 《天龙八部3D》Unity技术方案揭秘
  • Java性能优化之JVM GC（垃圾回收机制）
  • 浅谈sql中的in与not in,exists与not exists的区别
  • ​DB-Engines 12月数据库排名： PostgreSQL有望获得「2020年度数据库」荣誉?
  • ​一帧图像的Android之旅 :应用的首个绘制请求
  • #我与Java虚拟机的故事#连载08：书读百遍其义自见
  • （￥1011）－（一千零一拾一元整）输出
  • (day6) 319. 灯泡开关
  • (zt)基于Facebook和Flash平台的应用架构解析
  • （附源码）ssm教材管理系统 毕业设计 011229
  • (免费领源码）python#django#mysql校园校园宿舍管理系统84831-计算机毕业设计项目选题推荐
  • （三）终结任务
  • (转)Google的Objective-C编码规范
  • （转）winform之ListView
  • （转）全文检索技术学习(三)——Lucene支持中文分词
  • ./mysql.server: 没有那个文件或目录_Linux下安装MySQL出现“ls: /var/lib/mysql/*.pid: 没有那个文件或目录”...
  • .class文件转换.java_从一个class文件深入理解Java字节码结构
  • .mat 文件的加载与创建 矩阵变图像？ ∈ Matlab 使用笔记
  • .Net MVC4 上传大文件，并保存表单
  • .net 后台导出excel ,word
  • .NET 中使用 Mutex 进行跨越进程边界的同步