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

    目录

    一、基本标签

    1、标题分组：hgroup

    2、居中：center 

    3、引用标签 

    3.1 块（长）引用标签：blockquote

    3.2  短引用标签：q

    4、水平线标签：hr 

    5、下划线标签：ins

    6、删除标签：del

    7、字体标签：font

    二、图像标签：img

    一、基本标签

    1、标题分组：hgroup

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第二个网页title>
    6. 	head>
    7. 	<body>
    8. 		<hgroup>
    9. 			<h1>只因你太美h1>
    10. 			<h3>阿坤h3>
    11. 		hgroup>
    12. 	body>
    13. html>

    2、居中：center 

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第二个网页title>
    6. 	head>
    7. 	<body>
    8. 		<center>
    9. 		<hgroup>
    10. 			<h1>只因你太美h1>
    11. 			<h3>阿坤h3>
    12. 		hgroup>
    13. 		center>
    14. 	body>
    15. html>

    3、引用标签 

    3.1 块（长）引用标签：blockquote

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

    用 q 元素来标记短的引用

    3.2  短引用标签：q

    引用标签 ( )表示一个封闭的并且是短的行内引用的文本. 这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用

    替代。此标签通常也称为 元素。 

    有个双引号。

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第二个网页title>
    6. 	head>
    7. 	<body>
    8. 		<blockquote cite="www.baidu.com" >
    9. 			<p>这是长引用标签，我们引入一首歌：p>
    10. 			短引用q标签：
    11. 			<q>我目睹街角的蝴蝶飞上了青天q>
    12. 		blockquote>
    13. 	body>
    14. html>

    4、水平线标签：hr 

    是一个单标签；

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

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

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

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第二个网页title>
    6. 	head>
    7. 	<body>
    8. 		<h1>初学者h1>
    9. 		<hr color="red" width="50%" size="5" align="left" />
    10. 	body>
    11. html>

    5、下划线标签：ins

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第二个网页title>
    6. 	head>
    7. 	<body>
    8. 		<ins cite="划重点" datetime="2022-11-14T15:06:24">偏爱ins>某个人
    9. 	body>
    10. html>

    6、删除标签：del

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第二个网页title>
    6. 	head>
    7. 	<body>
    8. 		<h2>大甩卖h2>
    9. 		原价：<del cite="划重点" datetime="2022-11-14T15:06:24">999del><br />
    10. 		活动价：299<br />
    11. 		大冤种快来抢购
    12. 	body>
    13. html>

    7、字体标签：font

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第二个网页title>
    6. 	head>
    7. 	<body>
    8. 		<font color="#0000FF" size="6" face="微软雅黑">雨纷纷，旧故里草木深font>
    9. 	body>
    10. html>

    二、图像标签：img

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

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

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

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

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

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

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

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>第二个网页title>
    6. 	head>
    7. 	<body>
    8. 		<img src="img/01.png" title="星之守护者" alt="伊泽瑞尔" width="400px" height="250"/>
    9. 	body>
    10. html>

     

     

     

     

     

     

     

     

     

     

     

  • 相关阅读:
    【蓝桥杯基础算法】dfs（上）组合数，全排列
    5G+AI数字化智能工厂建设解决方案
    MyBatisPlus 基础Mapperr接口：增删改查
    大数据定价方法的国内外研究综述及对比分析
    ＜C++＞【类与对象篇】（二）
    2023年前端面试题
    SpringMVC完整版详解
    重排和重绘
    钉钉微应用 - - - - - 钉钉内打开新页签
    算法：合并两个有序数组---双指针[1]
  • 原文地址：https://blog.csdn.net/CSDN_Loveletter/article/details/127819587