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

🔥博客主页： 【小扳_-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.mzph.cn/news/746037.shtml

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

相关文章

《系统架构设计师教程（第2版）》第6章-数据库设计基础知识-04-应用程序与数据库的交互

《系统架构设计师教程（第2版）》第6章-数据库设计基础知识-04-应用程序与数据库的交互

文章目录 1. 库函数级别访问接口2. 嵌入SQL访问接口2.1 概述2.2 数据库厂商 3. 通用数据接口标准3.1 开放数据库连接 (ODBC)3.2 一些数据库接口1&#xff09;数据库访问对象 (DAO)2&#xff09;远程数据库对象 (RDO)3&#xff09;ActiveX数据对象 (ADO)4&#xff09;Java数据库…
阅读更多...
【科普文】三种处理器：CPU,GPU,NPU到底是什么？

【科普文】三种处理器：CPU,GPU,NPU到底是什么？

更多内容在 从最早的CPU到GPU, 再到现在的NPU。处理器的型号和种类越来越多。每种处理器适用与不同的产品以及功能。下面来介绍三种处理器的区别和应用场景 CPU (中央处理器) CPU是计算机系统的核心&#xff0c;负责执行程序指令、处理数据和控制其他硬件设备。它通常由控制单…
阅读更多...
Ollama管理本地开源大模型，用Open WebUI访问Ollama接口

Ollama管理本地开源大模型，用Open WebUI访问Ollama接口

现在开源大模型一个接一个的&#xff0c;而且各个都说自己的性能非常厉害&#xff0c;但是对于我们这些使用者&#xff0c;用起来就比较尴尬了。因为一个模型一个调用的方式&#xff0c;先得下载模型&#xff0c;下完模型&#xff0c;写加载代码&#xff0c;麻烦得很。 对于程…
阅读更多...
新火种AI|GPT-4诞生1年，OpenAI把它放到了机器人上

新火种AI|GPT-4诞生1年，OpenAI把它放到了机器人上

作者&#xff1a;一号 编辑&#xff1a;美美 ChatGPT拥有了身体&#xff0c;机器人也有了灵魂。 从OpenAI在去年3月14日拿出GPT-4后&#xff0c;已经过了整整一年。显然&#xff0c;在GPT-4诞生之后的这一年&#xff0c;一切都迭代得太快了&#xff0c;从GPT-4展现多模态能力&…
阅读更多...
计算机组成原理-练手题集合【期末复习|考研复习】

计算机组成原理-练手题集合【期末复习|考研复习】

前言 总结整理不易&#xff0c;希望大家点赞收藏。 给大家整理了一下计算机组成原理中的各章练手题&#xff0c;以供大家期末复习和考研复习的时候使用。 参考资料是王道的计算机组成原理和西电的计算机组成原理。 计算机组成原理系列文章传送门&#xff1a; 第一/二章 概述和数…
阅读更多...
2024.3.14 C++

2024.3.14 C++

思维导图 封装类 用其成员函数实现&#xff08;对该类的&#xff09;数学运算符的重载&#xff08;加法&#xff09;&#xff0c;并封装一个全局函数实现&#xff08;对该类的&#xff09;数学运算符的重载&#xff08;减法&#xff09;。 #include <iostream>using nam…
阅读更多...
GPT-SoVITS开源音色克隆框架的训练与调试

GPT-SoVITS开源音色克隆框架的训练与调试

GPT-SoVITS开源框架的报错与调试 遇到的问题解决办法 GPT-SoVITS是一款创新的跨语言音色克隆工具&#xff0c;同时也是一个非常棒的少样本中文声音克隆项目。 它是是一个开源的TTS项目&#xff0c;只需要1分钟的音频文件就可以克隆声音&#xff0c;支持将汉语、英语、日语三种…
阅读更多...
【PyQT】大地线长度计算工具实现

【PyQT】大地线长度计算工具实现

本设计实现了一个大地线长度计算工具&#xff0c;用户可以输入两个点的经纬度坐标&#xff0c;然后点击计算按钮&#xff0c;程序会根据输入的经纬度坐标计算出这两个点之间的大地线长度&#xff0c;并将结果显示在界面上。如下图所示。 附录完整代码如下&#xff1a; # 导入所…
阅读更多...
L1-5 猜帽子游戏

L1-5 猜帽子游戏

宝宝们在一起玩一个猜帽子游戏。每人头上被扣了一顶帽子&#xff0c;有的是黑色的&#xff0c;有的是黄色的。每个人可以看到别人头上的帽子&#xff0c;但是看不到自己的。游戏开始后&#xff0c;每个人可以猜自己头上的帽子是什么颜色&#xff0c;或者可以弃权不猜。如果没有…
阅读更多...
【C语言_C语言语句_复习篇】

【C语言_C语言语句_复习篇】

目录 一、C语言的语句有哪些 1.1 空语句 1.2 表达式语句 1.3 函数调用语句 1.4 复合语句 1.5 控制语句 二、分支语句&#xff08;两种&#xff09; 1.1 if语句 1.1.1 普通分支语句(if、if_else) 1.1.2 嵌套if语句 1.1.3 else嵌套if两种写法的比较 1.1.4 else悬空问题 1.1.…
阅读更多...
MapReduce解析：从定义到核心思想，编程规范与序列化解读

MapReduce解析：从定义到核心思想，编程规范与序列化解读

目录 一、 MapReduce1.1 MapReduce定义1.2 MapReduce优缺点1.2.1 优点1.2.2 缺点 1.3 MapReduce核心思想1.4 MapReduce进程1.5 常用数据序列化类型1.6 MapReduce编程规范1.6.1Mapper阶段1.6.2 Reduce阶段1.6.3 Driver阶段 1.7 WordCount案例实操1.7.1 本地测试1.7.2 提交到集群…
阅读更多...
TEC温度器温度控制器

TEC温度器温度控制器

一 主要特点 1 两路独立的串口&#xff0c;可同时手动和串口指令设定 PID 和温度&#xff1b; 2 一拖二结构&#xff0c;一个调试器控制两个控温模块单元&#xff1b; 3 精准控制温度&#xff0c;用户可自行修正&#xff1b;PT100/PT1000/NTC3435 温度电阻偏差&#xff1b; …
阅读更多...
1.1 课程架构介绍：STM32H5信息安全特性概览

1.1 课程架构介绍：STM32H5信息安全特性概览

1.1 课程架构介绍&#xff1a;STM32H5信息安全特性概览 1. 概述 开发者在打造嵌入式系统时&#xff0c;安全和性能是产品开发设计的考量重点。为实现这一目标&#xff0c;ST推出了STM32H5系列&#xff0c;该系列作为微控制器新标杆面向工业应用市场&#xff0c;将为用户带来更…
阅读更多...
windows中如何将已安装的node.js版本进行更换

windows中如何将已安装的node.js版本进行更换

第一步&#xff1a;先清除已经安装好的node.js版本 1.按健winR弹出窗口&#xff0c;键盘输入cmd,然后敲回车&#xff08;或者鼠标直接点击电脑桌面最左下角的win窗口图标弹出&#xff0c;输入cmd再点击回车键&#xff09; 然后进入命令控制行窗口&#xff0c;并输入where node…
阅读更多...
【Axure教程】能增删改的树形表格

【Axure教程】能增删改的树形表格

多层级表格又成为树形表格&#xff0c;是在后台常用的一种表格形式&#xff0c;当表格数据存在多层级关系是&#xff0c;可以通过多层级表格&#xff0c;从而更加清晰的呈现数据内容&#xff0c;帮助人们更好地理解和分析数据之间的关系&#xff0c;从而更加有效地传递信息。 …
阅读更多...
【吊打面试官系列】Java虚拟机JVM篇 - 关于JVM 新生代、老年代、永久代的区别

【吊打面试官系列】Java虚拟机JVM篇 - 关于JVM 新生代、老年代、永久代的区别

大家好&#xff0c;我是锋哥。今天分享关于JVM新生代、老年代、永久代的区别的JVM面试题&#xff0c;希望对大家有帮助&#xff1b; JVM 新生代、老年代、永久代的区别? 在 Java 中&#xff0c;堆被划分成两个不同的区域&#xff1a;新生代 ( Young ) 、老年代 ( Old ) 。而新…
阅读更多...
【微服务】nacos注册中心

【微服务】nacos注册中心

Nacos注册中心 国内公司一般都推崇阿里巴巴的技术&#xff0c;比如注册中心&#xff0c;SpringCloudAlibaba也推出了一个名为Nacos的注册中心。 1.1.认识和安装Nacos Nacos是阿里巴巴的产品&#xff0c;现在是SpringCloud中的一个组件。相比Eureka功能更加丰富&#xff0c;在…
阅读更多...
C++ 改造红黑树,封装map和set

C++ 改造红黑树,封装map和set

C 改造红黑树,封装map和set 一.前言:已经实现好了的红黑树二.简化STL库里面对于map和set的封装1.STL库中红黑树的简化代码2.STL库中set的简化代码3.STL库中map的简化代码4.封装map和set的第一步5.红黑树第一个模板参数的价值6.红黑树节点的定义 三.仿函数1.解除仿函数的误解2.仿…
阅读更多...
Android App冷启动耗时优化

Android App冷启动耗时优化

Android应用启动过程 Android应用启动过程&#xff0c;主要包含app::onCreate及执行前的Application阶段及Activity::onCreate执行之后的Activity阶段&#xff0c;以及两个阶段之间的间隙handleMessage阶段和最终页面渲染上屏完成前数据加载阶段四个区间组成。 具体来看&#x…
阅读更多...
IDEA中配置Tomcat

IDEA中配置Tomcat

在IDEA中配置Tomcat 第一步&#xff1a;选择这个方框 第二步&#xff1a;选择号&#xff0c;找到Tomcat Server&#xff08;Local&#xff09; 第三步&#xff1a;将红方框内填完整 第四步&#xff1a;创建artifaces&#xff0c;选择Deployment–>Artia…选择 *.war expl…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023