前端基础篇-深入了解用 HTML 与 CSS 实现标题排版

news2024/11/18 21:43:38

🔥博客主页： 【小扳_-CSDN博客】
❤感谢大家点赞👍收藏⭐评论✍   

文章目录

        1.0 HTML 与 CSS 概述

        2.0 HTML - 标题排版

        2.1 图片标签

        2.2 标题标签

        2.3 水平标签

        2.4 实现标题排版

        3.0 HTML - 标题样式(style 样式)

        3.1 CSS 的引入方式

        3.2 实现标题排版样式

        4.0 HTML - 标题样式(CSS 选择器)

        4.1 元素选择器

        4.2 id 选择器

        4.3 类选择器

        4.4 元素、类、 id 选择器的优先级大小

        4.5 实现标题排版样式

        5.0 HTML - 标题样式(超链接)

        1.0 HTML 与 CSS 概述

        HTML(HyperText Markup Language) 和 CSS(Cascading Style Sheets) 是构建网页的两种基本技术。

        HTML：HTML 是一种标记语言，用于描述网页的结构和内容。通过使用 HTML 标签，可以定义网页中的文本、图像、链接等元素的结构和排版。HTML 提供了一种标准化的方式来创建网页内容，并且是构建网页的基础。

        CSS：CSS 是一种样式表语言，用于控制网页的外观和布局。通过使用 CSS 样式规则，可以定义网页元素的样式，如字体、颜色、大小、间距、布局等。CSS 可以将样式和结构分离，使得网页设计更加灵活和易于维护。

        简单来说，HTML 负责网页中有什么内容，而 CSS 负责网页长什么样子的。

        举个例子，HTML：一只青蛙四条腿两只眼；CSS：一只大大的青蛙，四条长长的腿，两只清澈的眼。

        2.0 HTML - 标题排版

        标题排版需要用到图片标签、标题标签和水平标签。

        2.1 图片标签

        图片标签（Image Tag）是 HTML 中用来插入图像的标签，通常用于在网页中显示图片。

    <img src="" alt="">
    <!-- src:指定图像的url(绝对路径/相对路径) -->
    <!-- width:图像的宽度(像素/相对父元素的百分比) -->
    <!-- height:图像的高度(像素/相对父元素的百分比) -->

        在 img 标签中，一般有两个参数，参数之间只需要空格相隔开来。

        路径的书写方式如下：

        一、绝对路径：

                1）绝对磁盘路径：从根目录开始一直到文件所在位置的路径。

                2）绝对网络路径：绝对网络路径是指文件或资源在网络上的完整路径。

        二、相对路径：

                是相对于当前文件所在位置的路径，可以方便地链接到同一网站内的其他页面。

                ./ ：当前目录，../：上一级目录

        像素：在Web开发中，像素通常用于描述网页中元素的大小和位置。在 CSS 中，通常使用像素（px）作为单位来指定元素的大小，例如 width: 200px;表示元素的宽度为 200 像素。

        相对父元素百分比：相对父元素百分比是指在Web开发中，元素的尺寸（如宽度、高度）或定位（如偏移量）可以相对于其父元素的尺寸来指定的一种方式。

        2.2 标题标签

        标题标签（Heading Tags）是用来定义 HTML 文档中标题的标签，通常用于呈现文档结构和内容层次。在 HTML 中，标题标签由 <h1> 到 <h6> 共六个级别，分别表示不同的标题级别，其中<h1> 是最高级别的标题，<h6> 是最低级别的标题。

    <h1>标题名</h1>
    <h2>标题名</h2>
    <h3>标题名</h3>
    ...
    <h6>标题名</h6>

        2.3 水平标签

        在 HTML 中，可以使用 <hr> 标签来插入水平线。水平线标签通常用于在内容中插入水平分隔线，用于分隔不同部分或内容块。可以帮助提高页面的可读性和视觉分隔效果。

    <hr><hr>

        2.4 实现标题排版

        根据以上介绍的相关知识来实现该标题排版。

代码如下：

<!-- 文档类型 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符集为utf-8 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《白头神探》电影拍新版 《忍者神龟2》定档</title>
</head>
<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">  新浪娱乐 > 电影宝库 > 好莱坞 > 正文
    <h1>《白头神探》电影拍新版 《忍者神龟2》定档</h1>
    <hr>
    2024年03月07日 06:40 新浪娱乐
    <hr>

</body>
</html>

运行结果为：

        标题的排版大致是一样的。

        3.0 HTML - 标题样式(style 样式)

        通过对比以上的两张图片，可以明显的看出颜色就相差很大了。因此可以通过 CSS 控制样式 。

        3.1 CSS 的引入方式

        1）行内样式：写在标签的 style 属性中

    <!-- 行内样式 -->
    <h1 style = "color: red;">《白头神探》电影拍新版 《忍者神龟2》定档</h1>

        直接在标签中插入 style ，只能针对当前标签 h1 起作用。

        2）内嵌样式：写在 style 标签中(可以写在页面任何位置，但通常约定写在 head 标签中)

    <!-- 内嵌样式 -->
    <style>
        h1 {
            color: blue;
        }
    </style>

        对于所有标签为 h1 都起作用。需要注意的是，用到的花括号。

        3）外联样式：写在一个单独的 .css 文件中(需要通过 link 标签在网页中引入)

先单独创建 .css 文件：

再通过 link 标签：

    <!-- 外联样式 -->
    <link rel="stylesheet" href="./css/color.css">

参数 rel ：默认为 "stylesheet" ；参数 href：资源路径。

        4）对比三种引入 css 样式

        5）颜色表示样式

        关键字：预定义的颜色名，比如；red、green、blue ...

        rgb表示法：红绿蓝三原色，每项取值范围：0 - 255，比如；rgb(0,0,0)、rgb(255,0,0)

        十六进制表示法：#开头，将数字转换成十六进制表示，比如；#000000、#ff0000

        3.2 实现标题排版样式

        通过 CSS 样式来控制标题的颜色。

代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《白头神探》电影拍新版 《忍者神龟2》定档</title>
    <style>
        h1 {
            color: #4d4553;
        }
    </style>
</head>
<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">  新浪娱乐 > 电影宝库 > 好莱坞 > 正文
    <h1>《白头神探》电影拍新版 《忍者神龟2》定档</h1>
    <hr>
    2024年03月07日 06:40 新浪娱乐
    <hr>
</body>
</html>

运行结果为：

        

        4.0 HTML - 标题样式(CSS 选择器)

        CSS 选择器用于选择要样式化的 HTML元素。通过 CSS 选择器，可以根据元素的标签名、类名、ID 等属性来选择元素并应用样式。

        简单来说，CSS 选择器用来选取需要设置样式的元素(标签)。常用的选择器有元素选择器、id 选择器、类选择器。

        4.1 元素选择器

语法结构：

元素选择器 {
     color:red;   
}

        举个例子，将 <h1 >《白头神探》电影拍新版 《忍者神龟2》定档</h1> 颜色变为指定的颜色，那么可以用到元素选择器。需要注意的是，该选择器是放到 style 标签中。


<html lang="en">
<head>
    <style>
        h1 {
            color: #4d4f53;
        }
    </style>
</head>
<body>
    <h1 >《白头神探》电影拍新版 《忍者神龟2》定档</h1>
</body>
</html>

        4.2 id 选择器

语法结构：

#id属性值 {
    color:red;
}

        举个例子，将 "2024年03月07日 06:40 " 颜色变成指定的颜色，而 "新浪娱乐"  颜色保持不变，需要用到 span 标签，是一个没有语义的标签。通过指定不同的 id 属性值，就可以将这两句话相隔开。


<html lang="en">
<head>
    <style>
        #id1 {
            color: #968D92;
        }
    </style>

</head>
<body>
    <span id="id1">2024年03月07日 06:40 </span> <span id="id2">新浪娱乐</span>
</body>
</html>

        id 属性值是不能重复的，是唯一的。

        补充 span 标签：是一个在开发网页时大量会用到的没有语义的布局标签。一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开。

        4.3 类选择器

语法结构：

.class属性值{
    color:red;
}

        举个例子，将 "2024年03月06日 17:45" 颜色变成指定的颜色,可以通过类选择器。


<html lang="en">
<head>
        .cls{
            color: red;
        }
    </style>
</head>
<body>
    <span class="cls">2024年03月07日 06:40 </span> <span id="id2">新浪娱乐</span>
</body>
</html>

        跟 id 选择器最大的区别就是：id 选择器不可以重复名称，而类选择器可以重复名称。

         4.4 元素、类、 id 选择器的优先级大小

        若三个选择器都作用在 "2024年03月07日 06:40" 中，那么最终的显示什么颜色？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《白头神探》电影拍新版 《忍者神龟2》定档</title>
    <style>
        h1 {
            color: #4d4553;
        }

        #id1{
            color: #968D92;
        }
        span{
            color:red;
        }
        .cls{
            color: #000;
        }

    </style>
</head>
<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">  新浪娱乐 > 电影宝库 > 好莱坞 > 正文
    <h1>《白头神探》电影拍新版 《忍者神龟2》定档</h1>
    <hr>
    <span id="id1" class="cls">2024年03月07日 06:40</span> <span>新浪娱乐</span>
    <hr>
</body>
</html>

运行结果为：

        可知，现在的 "2024年03月07日 06:40" 由 id 选择器控制，那么把 id 选择器去掉，再来看情况：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《白头神探》电影拍新版 《忍者神龟2》定档</title>
    <style>
        h1 {
            color: #4d4553;
        }
    
        // 将 id 选择器屏蔽
        /* #id1{
            color: #968D92;
        } */

        span{
            color:red;
        }
        .cls{
            color: #000;
        }

    </style>
</head>
<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">  新浪娱乐 > 电影宝库 > 好莱坞 > 正文
    <h1>《白头神探》电影拍新版 《忍者神龟2》定档</h1>
    <hr>
    <span class="cls">2024年03月07日 06:40</span> <span>新浪娱乐</span>
    <hr>
</body>
</html>

运行结果为：

        现在的 "2024年03月07日 06:40" 由类选择器控制。

        因此三个选择器的优先级大小为：id 选择器 > 类选择器 > 元素选择器

        4.5 实现标题排版样式

        通过 CSS 样式来控制标题的颜色、字体大小。用 color 来控制颜色；用 font-size 来控制字体大小。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《白头神探》电影拍新版 《忍者神龟2》定档</title>
    <style>
        h1 {
            color: #4d4553;
        }

        #id1{
            color: #968D92;
            font-size: 13px;
        }

    </style>
</head>
<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">  新浪娱乐 > 电影宝库 > 好莱坞 > 正文
    <h1>《白头神探》电影拍新版 《忍者神龟2》定档</h1>
    <hr>
    <span id="id1">2024年03月07日 06:40</span> <span>新浪娱乐</span>
    <hr>
</body>
</html>

运行结果为：

        5.0 HTML - 标题样式(超链接)

        使用了 <a> 标签来创建超链接，并通过 href 属性指定链接的目标网址。

语法结构：

<a href="" target=""></a>

属性：

        href：指定资源访问的 url (路径)

        target：指定在何处打开资源链接，_self：默认值，在当前页面打开；_blank：在空白页面打开。

       

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《白头神探》电影拍新版 《忍者神龟2》定档</title>
    <style>
        h1 {
            color: #4d4553;
        }

        #id1{
            color: #968D92;
            font-size: 13px;
        }

    </style>
</head>
<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">  
        <a href="https://ent.sina.com.cn/" target="_self">新浪娱乐</a> > 
        <a href="https://ent.sina.com.cn/film/">电影宝库</a> > 
        <a href="https://ent.sina.com.cn/hollywood/">好莱坞</a> > 正文
    <h1>《白头神探》电影拍新版 《忍者神龟2》定档</h1>
    <hr>
    <span id="id1">2024年03月07日 06:40</span> <span> <a href="https://ent.sina.com.cn/hollywood/">新浪娱乐</a></span>
    <hr>
</body>
</html>

运行结果为：

        虽然已经加上了超链接，但是可以发现颜色还有多了一条下划线。那么可以通过 CSS 样式来控制，color 来控制颜色、text-decoration 来控制文本装饰。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《白头神探》电影拍新版 《忍者神龟2》定档</title>
    <style>
        h1 {
            color: #4d4553;
        }

        #id1{
            color: #968D92;
            font-size: 13px;
        }
        a {
            color: black;
            text-decoration: none;
        }

    </style>
</head>
<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">  
        <a href="https://ent.sina.com.cn/" target="_self">新浪娱乐</a> > 
        <a href="https://ent.sina.com.cn/film/">电影宝库</a> > 
        <a href="https://ent.sina.com.cn/hollywood/">好莱坞</a> > 正文
    <h1>《白头神探》电影拍新版 《忍者神龟2》定档</h1>
    <hr>
    <span id="id1">2024年03月07日 06:40</span> <span> <a href="https://ent.sina.com.cn/hollywood/">新浪娱乐</a></span>
    <hr>
</body>
</html>

运行结果为：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1507816.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

docker学习入门篇

docker学习入门篇

1、docker简介 docker官网&#xff1a; www.docker.com dockerhub官网&#xff1a; hub.docker.com docker文档官网&#xff1a;docs.docker.com Docker是基于Go语言实现的云开源项目。 Docker的主要目标是&#xff1a;Build, Ship and Run Any App, Anywhere(构建&…
阅读更多...
ScaleKD: Distilling Scale-Aware Knowledge in Small Object Detector

ScaleKD: Distilling Scale-Aware Knowledge in Small Object Detector

ScaleKD: Distilling Scale-Aware Knowledge in Small Object Detector在小目标检测器中提取尺度感知知识 摘要 尽管通用目标检测取得了显著的成功&#xff0c;但小目标检测&#xff08;SOD&#xff09;的性能和效率仍然令人不满意。与现有的努力平衡推理速度和SOD性能之间的…
阅读更多...
华为数通方向HCIP-DataCom H12-821题库(多选题：121-140)

华为数通方向HCIP-DataCom H12-821题库(多选题：121-140)

第121题 以下哪些事件会导致IS-IS产生一个新的LSP? A、引入的IP路由发送变化 B、周期性更新 C、接口开销发生了变化 D、邻接Up或Down 【参考答案】ABCD 【答案解析】 第122题 以下哪些协议既支持网络配置管理又支持网络监控管理? A、Telemetry B、NETCONF C、SNMP D、LLDP …
阅读更多...
机器视觉学习（一）—— 认识OpenCV、安装OpenCV

机器视觉学习（一）—— 认识OpenCV、安装OpenCV

目录 一、认识OpenCV 二、通过pip工具安装OpenCV 三、PyCharm安装OpenCV 一、认识OpenCV OpenCV&#xff08;Open Source Computer Vision Library&#xff0c;开源计算机视觉库&#xff09;是一个跨平台的计算机视觉库&#xff0c;最初由威尔斯理工学院的Gary Bradski于199…
阅读更多...
Node.Js编码注意事项

Node.Js编码注意事项

Node.js 中不能使用 BOM 和 DOM 的 API&#xff0c;可以使用 console 和定时器 APINode.js 中的顶级对象为 global&#xff0c;也可以用 globalThis 访问顶级对象 浏览器端js的组成 Node.js中的JavaScript组成 相比较之下发现只有console与定时器是两个API所共有的&#xff…
阅读更多...
QQ邮箱API的安全性和隐私保护措施有哪些？

QQ邮箱API的安全性和隐私保护措施有哪些？

QQ邮箱API接口有哪些功能&#xff1f;如何申请电子邮箱API接口&#xff1f; QQ邮箱作为国内广受欢迎的电子邮箱服务&#xff0c;其API接口的安全性和隐私保护措施更是备受关注。那么&#xff0c;QQ邮箱API的安全性和隐私保护措施究竟有哪些呢&#xff1f;接下来&#xff0c;就…
阅读更多...
ABAP接口部分-Web Service提供者与消费者

ABAP接口部分-Web Service提供者与消费者

ABAP接口部分-Web Service提供者与消费者 文章目录 ABAP接口部分-Web Service提供者与消费者Web Service提供者Web Service测试配置[SOA网址](https://mysap.goodsap.cn:44300/sap/bc/webdynpro/sap/appl_soap_management )测试 Web Service消费者创建Services Consumer消费者创…
阅读更多...
C# 中 Replace 字符串操作方法

C# 中 Replace 字符串操作方法

在 C# 中&#xff0c;Replace 是一个字符串操作方法&#xff0c;用于替换字符串中的指定字符或子字符串。它接受两个参数&#xff1a;要查找和替换的字符串。Replace 方法在源字符串中查找所有匹配的字符或子字符串&#xff0c;并用指定的替换字符串进行替换。 下面是 Replace…
阅读更多...
CV论文--2024.3.7

CV论文--2024.3.7

1、FAR: Flexible, Accurate and Robust 6DoF Relative Camera Pose Estimation 中文标题&#xff1a;FAR&#xff1a;灵活、准确和稳健的6DoF相机相对姿态估计 简介&#xff1a;在计算机视觉领域&#xff0c;估计图像之间的相对相机姿态一直是一个关键问题。通常&#xff0c;…
阅读更多...
多核多cluster多系统之间缓存一致性概述

多核多cluster多系统之间缓存一致性概述

目录 1.思考和质疑2.怎样去维护多核多系统缓存的一致性2.1多核缓存一致性2.2多Master之间的缓存一致性2.3dynamIQ架构同一个core中的L1和L2 cache 3.MESI协议的介绍4.ACE维护的缓存一致性5.软件定义的缓存和替换策略6.动图示例 本文转自 周贺贺&#xff0c;baron&#xff0c;代…
阅读更多...
Day6 java 常用API

Day6 java 常用API

文章目录 1、Calendar1.1 Calendar日历对象 2、JDK8 之后新增的时间类2.1 LocalDate、LocalTime 、LocalDateTime2.2 ZoneId 、ZoneIdTime2.3 Instant2.4 DateTimeFormatter2.5 Period2.6 Duration 1、Calendar 在了解calendar之前&#xff0c;先用SimpleDateFormat 写一个小例…
阅读更多...
企企通解决方案总监汤水卿：打造企业间接采购数字化平台，赋能供应链高效跃进新篇章

企企通解决方案总监汤水卿：打造企业间接采购数字化平台，赋能供应链高效跃进新篇章

3月5日&#xff0c;国务院总理李强在政府工作报告中提出&#xff0c;制定支持数字经济高质量发展政策&#xff0c;积极推进数字产业化、产业数字化&#xff0c;促进数字技术和实体经济深度融合。 近日&#xff0c;企企通受邀参加了2024华南采购峰会&#xff0c;与各行各业的采购…
阅读更多...
C#/.NET/.NET Core拾遗补漏合集（持续更新）

C#/.NET/.NET Core拾遗补漏合集（持续更新）

前言 在这个快速发展的技术世界中&#xff0c;时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NET Core拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节&#xff0c;以帮助大家更全面地了解这些技术栈的特性和发展方向。 GitHub开源地…
阅读更多...
电脑右下角出线白色弹窗的解决方法

电脑右下角出线白色弹窗的解决方法

电脑无缘无故&#xff0c;在右下角出现一个白色弹窗&#xff0c;无法关闭&#xff0c;非常恶心&#xff0c;后来经过查询&#xff0c;发现可能是360之类的弹bug&#xff0c;解决只需要&#xff1a; 1、鼠标左键 点击一下白框 2、键盘输入 AltF4 虽不是技术问题&#xff0c;但解…
阅读更多...
Github上那些好用的安全工具(三)

Github上那些好用的安全工具(三)

专注于web漏洞挖掘、内网渗透、免杀和代码审计&#xff0c;感谢各位师傅的关注&#xff01;网安之路漫长&#xff0c;与君共勉&#xff01; URLFinder 一款快速提取网页信息的工具。该项目可以快速爬取网页上的 URL 地址、JS 文件里的 API 接口等信息&#xff0c;支持批量抓取、…
阅读更多...
日期工具的逻辑与数据请求函数的完善

日期工具的逻辑与数据请求函数的完善

src\libs\utils.js 获取当前日期格式 /*** 获取当前日期格式* param {*} field * returns */ function getNowDate(field) {const date new Date()let year date.getFullYear(),month date.getMonth() 1,day date.getDate()switch (field) {case day:return ${year}-${mo…
阅读更多...
Halcon测量专栏-圆度

Halcon测量专栏-圆度

1.前言 1.1什么是圆度 圆度是指工件的横截面接近理论圆的程度&#xff0c;最大半径与最小半径之差为0时&#xff0c;圆度为0&#xff0c;测量工具为圆度仪&#xff0c;用途是测环形工件的圆度。圆度是限制实际圆对理想圆变动量的一项指标&#xff0c;其公差带是以公差值t为半…
阅读更多...
FFmpeg——开源的开源的跨平台音视频处理框架简介

FFmpeg——开源的开源的跨平台音视频处理框架简介

引言&#xff1a; FFmpeg是一个开源的跨平台音视频处理框架&#xff0c;可以处理多种音视频格式。它由Fabrice Bellard于2000年创建&#xff0c;最初是一个只包括解码器的项目。后来&#xff0c;很多开发者参与其中&#xff0c;为FFmpeg增加了多种新的功能&#xff0c;例如编码…
阅读更多...
现在可以在Mac桌面上快速打开C知道进行AI提问

现在可以在Mac桌面上快速打开C知道进行AI提问

看&#xff0c;我的Mac桌面有个C知道组件&#xff0c;点击即可快速打开C知道页面进行提问使用&#xff0c;再也不需要先打开浏览器&#xff0c;再输入csdn.net访问网站&#xff0c;然后点击页面上的C知道入口。 这是如何实现的呢&#xff1f; 首先&#xff0c;我们来做一些准…
阅读更多...
A股风格因子看板 (2024.3 第3期)

A股风格因子看板 (2024.3 第3期)

该因子看板跟踪A股风格因子&#xff0c;该因子主要解释沪深两市的市场收益、刻画市场风格趋势的系列风格因子&#xff0c;用以分析市场风格切换、组合风格景 露等。 今日为该因子跟踪第3期&#xff0c;指数组合数据截止日2024-02-29&#xff0c;要点如下 近1年A股风格因子收益走…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023