前端基础篇-深入了解用 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>

运行结果为：

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

2024最新版使用PyCharm搭建Anaconda

2024最新版使用PyCharm搭建Anaconda

2024最新版使用PyCharm搭建Anaconda 因为pycharm自带的包不全&#xff0c;或者下载的时候比较慢&#xff0c;所以我们直接用anaconda的包&#xff0c;毕竟我们以后还会学到很多的包&#xff0c;不多说&#xff0c;直接开干&#xff01; 一、下载Pycharm、Anacoda pycharm中文网…
阅读更多...
02_electron快速建立项目

02_electron快速建立项目

一、安装 yarn 在此之前可以先安装 git&#xff1a;Git - Downloads (git-scm.com) 下面就是 yarn 安装的代码&#xff0c;在终端输入即可。 npm install --global yarn 检查是否安装成功&#xff1a; yarn --version 二、快速建立一个electron项目 其实在Getting Started - …
阅读更多...
用chatgpt写论文重复率高吗？如何降低重复率？

用chatgpt写论文重复率高吗？如何降低重复率？

ChatGPT写的论文重复率很低 ChatGPT写作是基于已有的语料库和文献进行训练的&#xff0c;因此在写作过程中会不可避免地引用或借鉴已有的研究成果和观点。同时&#xff0c;由于ChatGPT的表述方式和写作风格与人类存在一定的差异&#xff0c;也可能会导致论文与其他文章相似度高…
阅读更多...
06多表查询

06多表查询

多表查询 多表查询&#xff0c;也称为关联查询&#xff0c;指两个或更多个表一起完成查询操作。前提条件&#xff1a;这些一起查询的表之间是有关系的&#xff08;一对一、一对多&#xff09;&#xff0c;它们之间一定是有关联字段&#xff0c;这个 关联字段可能建立了外键&am…
阅读更多...
网络基础『 序列化与反序列化』

网络基础『 序列化与反序列化』

&#x1f52d;个人主页&#xff1a; 北 海 &#x1f6dc;所属专栏&#xff1a; Linux学习之旅、神奇的网络世界 &#x1f4bb;操作环境&#xff1a; CentOS 7.6 阿里云远程服务器 文章目录 &#x1f324;️前言&#x1f326;️正文1.协议的重要性2.什么是序列化与反序列化&…
阅读更多...
安装配置Kafka

安装配置Kafka

一个典型的Kafka集群中包含若干Producer&#xff08;可以是Web前端FET&#xff0c;或者是服务器日志等&#xff09;&#xff0c;若干Broker&#xff08;Kafka支持水平扩展&#xff0c;一般Broker数量越多&#xff0c;集群吞吐率越高&#xff09;&#xff0c;若干ConsumerGroup&…
阅读更多...
wordpress免费主题下载

wordpress免费主题下载

免费wordpress模板下载 简洁大气的文化艺术类wordpress模板&#xff0c;可以免费下载&#xff0c;实用易上手&#xff0c;新手也适合。 https://www.wpniu.com/themes/304.html 免费wordpress主题下载 高端大气上档次的wordpress主题&#xff0c;也可以是免费的&#xff0c;…
阅读更多...
【机器学习】无监督学习算法之：层次聚类

【机器学习】无监督学习算法之：层次聚类

层次聚类 1、引言2、层次聚类2.1 定义2.2 原理2.3 实现方式2.4 算法公式2.5 代码示例 3、总结 1、引言 小屌丝&#xff1a;鱼哥&#xff0c; 这周末过的滋润啊。 小鱼&#xff1a;… 每个周末都挺滋润的啊。 小屌丝&#xff1a;啊~ ~ 你这… 小鱼&#xff1a;周末加班&#xf…
阅读更多...
Skywalking(9.7.0) 告警配置

Skywalking(9.7.0) 告警配置

图片被吞&#xff0c;来这里看吧&#xff1a;https://juejin.cn/post/7344567669893021736 过年前一天发版&#xff0c;大家高高兴兴准备回家过年去了。这时候老板说了一句&#xff0c;记得带上电脑&#xff0c;关注用户反馈。有紧急问题在高速上都得给我找个服务区改好。 但是…
阅读更多...
矩阵乘法--Strassen算法

矩阵乘法--Strassen算法

一、矩阵乘法 从中可以看出&#xff0c;计算两个矩阵的乘积&#xff0c;需要三个 for 循环&#xff0c;可以简单写出代码&#xff1a; for(int i1;i<m;i)for(int j1;j<p;j)for(int k1;k<n;k)c[i][j]a[i][k]*b[k][j]; 时间复杂度的分析&#xff1a;很明显&#xff0c;…
阅读更多...
JDK环境变量配置-jre\bin、rt.jar、dt.jar、tools.jar

JDK环境变量配置-jre\bin、rt.jar、dt.jar、tools.jar

我们主要看下rt.jar、dt.jar、tools.jar的作用&#xff0c;rt.jar在​%JAVA_HOME%\jre\lib&#xff0c;dt.jar和tools.jar在%JAVA_HOME%\lib下。 rt.jar&#xff1a;Java基础类库&#xff0c;也就是Java doc里面看到的所有的类的class文件。 tools.jar&#xff1a;是系统用来编…
阅读更多...
网络通信（一）

网络通信（一）

网络编程概述 可以让设备中的程序与网络上其他设备中的程序进行数据交互&#xff08;实现网络通信的&#xff09;。 Java提供了哪些网络编程的解决方案 java.net.*包下提供了网络编程的解决方案 基本的通信架构 基本的通信架构有2种形式&#xff1a;CS架构&#xff08;Clie…
阅读更多...
webgl instance 绘制

webgl instance 绘制

webgl instance 绘制 效果: key1: 创建实例缓存 function createMesh() {for (let i 0; i < NUM_CUBE; i) {const angle i * 2 * Math.PI / NUM_CUBE;const x Math.sin(angle) * RADIUS;const y 0;const z Math.cos(angle) * RADIUS;cubes[i] {scale: new THREE.V…
阅读更多...
redis穿透、雪崩、击穿及其解决方案

redis穿透、雪崩、击穿及其解决方案

redis穿透、雪崩、击穿及其解决方案 redis三个问题及解决方案缓存穿透缓存雪崩缓存击穿 redis三个问题及解决方案 缓存穿透 缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在&#xff0c;这样缓存永远不会生效&#xff0c;这些请求都会打到数据库。也就是说key对应的…
阅读更多...
黑马程序员-瑞吉外卖Day10

黑马程序员-瑞吉外卖Day10

1.菜品分页查询 而在我们的实体类 Dish 中&#xff0c;仅仅包含 categoryId&#xff0c; 不包含 categoryName&#xff0c;那么我们应该如何封装查询的数据呢&#xff1f; 其实&#xff0c;这里我们可以返回DishDto对象&#xff0c;在该对象中我们可以拓展一个属性 categoryN…
阅读更多...
高精度10m/30米NPP净初级生产力分布数据

高精度10m/30米NPP净初级生产力分布数据

引言 第一性生产力是绿色植物呼吸后所剩下的单位面积单位时间内所固定的能量或所生产的有机物质&#xff0c;即是总第一性生产量减去植物呼吸作用所剩下的能量或有机物质。多种卫星遥感数据反演净初级生产力&#xff08;NPP&#xff09;产品是地理遥感生态网平台推出的生态环境…
阅读更多...
java-ssm-jsp的问卷调查系统的设计与实现

java-ssm-jsp的问卷调查系统的设计与实现

java-ssm-jsp的问卷调查系统的设计与实现
阅读更多...
使用Python查询和下载Sentinel卫星数据

使用Python查询和下载Sentinel卫星数据

欢迎学习本教程，了解如何使用 Python 访问和下载 Sentinel 卫星数据。在深入探讨技术方面之前，让我们先了解一下哨兵卫星是什么以及它们为何如此重要。 哨兵家族。资料来源：欧空局。 Sentinel 卫星是欧洲航天局 (ESA) 开发的一组地球观测任务，是哥白尼计划的一部分，该计划…
阅读更多...
论文阅读 Stepwise Feature Fusion: Local Guides Global

论文阅读 Stepwise Feature Fusion: Local Guides Global

1&#xff0c;另一个ssfomer 我在找论文时发现&#xff0c;把自己的分割模型命名为ssformer的有两个&#xff1a;&#xff0c;一个论文SSformer: A Lightweight Transformer for Semantic Segmentation中提出的一种轻量级Transformer模型&#xff0c;结构如下 这个结构很简单&…
阅读更多...
安装配置HBase

安装配置HBase

HBase集群需要整个集群所有节点安装的HBase版本保持一致&#xff0c;并且拥有相同的配置&#xff0c;具体配置步骤如下&#xff1a; 1. 解压缩HBase的压缩包 2. 配置HBase的环境变量 3. 修改HBase的配置文件&#xff0c;HBase的配置文件存放在HBase安装目录下的conf中 4. 首…
阅读更多...
最新文章

Copyright @ 2022~2023