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

news/2024/4/29 12:26:41/文章来源:https://blog.csdn.net/CSDN_Loveletter/article/details/127819587

一、基本标签

1、标题分组：hgroup

2、居中：center

3、引用标签

3.1 块（长）引用标签：blockquote

3.2 短引用标签：q

4、水平线标签：hr

5、下划线标签：ins

6、删除标签：del

7、字体标签：font

二、图像标签：img

一、基本标签

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>