2、HTML——标题分组、居中、引用标签、水平线标签下划线标签、删除标签、＜font＞标签、图像标签

最新推荐文章于 2024-05-10 12:57:47 发布

恰似情书

最新推荐文章于 2024-05-10 12:57:47 发布

阅读量5k

点赞数 5

分类专栏：前端Java Web 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/CSDN_Loveletter/article/details/127819587

版权

前端Java Web 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

3.1 块（长）引用标签：blockquote

一、基本标签

1、标题分组：hgroup

用来为标题分组，可以将一组相关的标题同时放入，样式看不出区别，语义上就有关系了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第二个网页</title>
	</head>
	<body>
		<hgroup>
			<h1>只因你太美</h1>
			<h3>阿坤</h3>
		</hgroup>
	</body>
</html>

2、居中：center

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第二个网页</title>
	</head>
	<body>
		<center>
		<hgroup>
			<h1>只因你太美</h1>
			<h3>阿坤</h3>
		</hgroup>
		</center>
	</body>
</html>

3、引用标签

3.1 块（长）引用标签：blockquote

<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

用 q 元素来标记短的引用

3.2 短引用标签：q

引用标签 ( <q>)表示一个封闭的并且是短的行内引用的文本. 这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用 <blockquote> 替代。此标签通常也称为 <q>元素。

有个双引号。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第二个网页</title>
	</head>
	<body>
		<blockquote cite="www.baidu.com" >
			<p>这是长引用标签，我们引入一首歌：</p>
			短引用q标签：
			<q>我目睹街角的蝴蝶飞上了青天</q>
		</blockquote>
	</body>
</html>

4、水平线标签：hr

<hr />是一个单标签；

color属性：设置水平线的颜色；

width属性：设置水平线的宽度（长度）；可以是具体的像素值，水平线的宽度不会改变；可以设置百分比，水平线的宽度随浏览器窗口大小的变化而变化；

size属性：设置水平线的粗细；

align属性：设置水平线的对齐方式；常用值：left 左对齐；center (默认值)居中对齐；right 右对齐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第二个网页</title>
	</head>
	<body>
		<h1>初学者</h1>
		<hr color="red" width="50%" size="5" align="left" />
	</body>
</html>

5、下划线标签：ins

<ins> 标签定义已经被插入文档中的文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第二个网页</title>
	</head>
	<body>
		<ins cite="划重点" datetime="2022-11-14T15:06:24">偏爱</ins>某个人
	</body>
</html>

6、删除标签：del

呈现为带有删除线的文本，属性用法和ins标签一样。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第二个网页</title>
	</head>
	<body>
		<h2>大甩卖</h2>
		原价：<del cite="划重点" datetime="2022-11-14T15:06:24">999</del><br />
		活动价：299<br />
		大冤种快来抢购
	</body>
</html>

7、字体标签：font

定义了该内容的字体大小、顏色与表现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第二个网页</title>
	</head>
	<body>
		<font color="#0000FF" size="6" face="微软雅黑">雨纷纷，旧故里草木深</font>
	</body>
</html>

二、图像标签：img

<img>标签在HTML文档中定义图像。此标签通常也称为 <img>元素；

<img> 标签有两个必需的属性：src 和 alt。

alt 属性是在图片不能正常显示时出现的文本提示；

title 属性是在鼠标在移动到图片上上的文本提示。

src属性：设置图片的路径；

width属性：设置图片的宽度（长度）；

height属性：设置图片的高度。宽度和高度一般只设置一个，另外一个会根据原来图片的比例进行等比例方法或缩小。

在项目管理器的项目中，会自动生成一个img文件（没有的话自己建一个）；将图片保存在img中，在设置src是方便引用。或用计算机内的图片存储地址（绝对路径）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第二个网页</title>
	</head>
	<body>
		<img src="img/01.png" title="星之守护者" alt="伊泽瑞尔" width="400px" height="250"/>
	</body>
</html>

恰似情书

关注

5
点赞
踩
55

收藏

觉得还不错? 一键收藏
0
评论
2、HTML——标题分组、居中、引用标签、水平线标签下划线标签、删除标签、＜font＞标签、图像标签

一、基本标签1、标题分组：hgroup2、居中：center3、引用标签3.1 块（长）引用标签：blockquote3.2 短引用标签：q4、水平线标签：hr5、下划线标签：ins6、删除标签：del7、字体标签：font二、图像标签：img
复制链接

扫一扫

专栏目录