• Web开发 前端介绍 HTML CSS

    Web开发介绍

    1 什么是web开发

    Web：全球广域网，也称为万维网(www World Wide Web)，能够通过浏览器访问的网站。

    所以Web开发说白了，就是开发网站的，例如下图所示的网站：淘宝，京东等等

    那么我们知道了web开发是开发网站的，那么我们需要学习哪些知识呢？以及这些知识在我们整个网站开发中占据什么位置呢？对于这些问题，我们就必须知道网站整体的工作流程。

    2 网站的工作流程

    接下来我们先来看看网站的工作流程，这样才能在我们的脑海中构建初步的知识架构体系。

    1.首先我们需要通过浏览器访问发布到前端服务器中的前端程序，这时候前端程序会将前端代码返回给浏览器。如下图所示：

    2.浏览器得到前端代码，此时浏览器会将前端代码进行解析，然后展示到浏览器的窗口中，这时候我们就看到了网站的页面，如下图所示：

    3.但是此时这个页面是没有数据的，因为数据在我们的数据库中，所以我们浏览器需要根据前端代码中指定的后台服务器的地址 向 我们的后台服务器（内部有java程序）发起请求，后台服务器再去从数据库中获取数据，然后返回给浏览器。

    4.浏览器拿到后台返回的数据后，然后将数据展示在前端资源也就是网页上，然后我们就看到了如下图所示的完整的内容

    整个流程如下：

    1.浏览器先向前端服务器请求前端资源，也就是我们所说的网页

    2.浏览器再向后台服务器发起请求，获取数据

    3.浏览器将得到的后台数据填充到网页上，然后展示给用户去看

    3 网站的开发模式

    接下来我们来聊聊网站的开发模式，主要有2种：前端台分离和混合开发

    前后台分离：（**目前企业开发的主流，**市场占有率70%以上）这种开发模式的特点如下

    • 前端人员开发前端程序，前端程序单独部署到前端服务器上
    • 后端人员开开发后端程序，后端程序单独部署到后端服务器上

    混合开发：（早期的开发技术，目前慢慢退出市场），这种开发模式的特点是：前端人员开发的代码和后端人员开发的代码在同一个项目中，一起打包部署。

    4 网站的开发技术

    最后我们来看看web阶段需要学习哪些技术呢？如下图我们列举了课程中需要学习的知识点

    以下是图表的方式整理了我们web阶段要学习的技术和其对应的作用

    前端web开发：

    技术

    描述

    HTML

    用于构建网站的基础结构的

    css

    用于美化页面的，作用和化妆或者整容作用一样

    JavaScript

    实现网页和用户的交互

    Vue

    主要用于将数据填充到html页面上的

    Element

    主要提供了一些非常美观的组件

    Nginx

    一款web服务器软件，可以用于部署我们的前端工程

    后端web开发：

    技术

    描述

    Maven

    一款java中用于管理项目的软件

    Mysql

    最常用的一款数据库软件之一

    SpringBoot

    spring家族的产品，当前最为主流的项目开发技术。

    Mybatis

    用于操作数据库的框架

    所以只有我们学完上述的技术，我们才能开发出一个麻雀虽小，五脏俱全的网站。

    1. 前端开发介绍

    我们介绍Web网站工作流程的时候提到，前端开发，主要的职责就是将数据以好看的样式呈现出来。说白了，就是开发网页程序，如下图所示：

    那在讲解web前端开发之前，我们先需要对web前端开发有一个整体的认知。主要明确一下三个问题：

    1). 网页有哪些部分组成 ?

    文字、图片、音频、视频、超链接、表格等等。

    2). 我们看到的网页，背后的本质是什么 ?

    程序员写的前端代码 (备注：在前后端分离的开发模式中，)

    3). 前端的代码是如何转换成用户眼中的网页的 ?

    通过浏览器转化（解析和渲染）成用户看到的网页

    浏览器中对代码进行解析和渲染的部分，称为 浏览器内核

    而市面上的浏览器非常多，比如：IE、火狐Firefox、苹果safari、欧朋、谷歌Chrome、QQ浏览器、360浏览器等等。 而且我们电脑上安装的浏览器可能都不止一个，有很多。

    但是呢，需要大家注意的是，不同的浏览器，内核不同，对于相同的前端代码解析的效果也会存在差异。 那这就会造成一个问题，同一段前端程序，不同浏览器展示出来的效果是不一样的，这个用户体验就很差了。而我们想达到的效果则是，即使用户使用的是不同的浏览器，解析同一段前端代码，最终展示出来的效果都是相同的。

    要想达成这样一个目标，我们就需要定义一个统一的标准，然后让各大浏览器厂商都参照这个标准来实现即可。 而这套标准呢，其实早都已经定义好了，那就是我们接下来，要介绍的web标准。

    Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。由三个组成部分：

    • HTML：负责网页的结构（页面元素和内容）。
    • CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
    • JavaScript：负责网页的行为（交互效果）。

    当然了，随着技术的发展，我们为了更加快速的开发，现在也出现了很多前端开发的高级技术。例如：vue、elementui、Axios等等。

    那这些内容呢，也是我们前端三天课程中要讲解的内容。 前端的3天课程安排如下：

    • HTML & CSS
    • JavaScript & Vue
    • Ajax & Axios & ElementUI & Nginx

    2. HTML & CSS

    1). 什么是HTML ?

    HTML: HyperText Markup Language，超文本标记语言。
    超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
    标记语言：由标签构成的语言
    HTML标签都是预定义好的。例如：使用 标签展示标题，使用 展示超链接，使用 展示图片， 展示视频。
    HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

    下面展示的是一段html代码经过浏览器解析，呈现的效果如右图所示：

    2). 什么是CSS ?

    CSS: Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。

    下面展示的是一段 html代码 及 CSS样式 经过浏览器解析，呈现的效果如右图所示：

    2.1 HTML快速入门

    2.1.1 操作

    第一步:创建一个名为HTML的文件夹，然后找到课程资料中的 1.jpg 文件放到该目录下，此时HTML文件夹中内容如下：

    第二步：创建一个文本文件，然后修改文件名为hello.html,注意文件的后缀是.html,如下图所示：

    第三步：选中文件，鼠标右击，选择使用记事本打开文件，并且编写前端代码

    首先html有固定的基本结构

    1. <html>
    2. 	<head>
    3. 		<title>HTML 快速入门</title>
    4. 	</head>
    5. 	<body>
    6. 		<h1>Hello HTML</h1>
    7. 		<img src="1.jpg"/>
    8. 	</body>
    9. </html>

    其中是根标签，和是子标签，中的字标签是用来定义网页的标题的，里面定义的内容会显示在浏览器网页的标题位置。</p> <p style="text-align:left;">而 <body> 中编写的内容，就网页中显示的核心内容。</p> <p style="text-align:left;">第四步：然后选中文件，鼠标右击，选择使用浏览器打开文件，浏览器呈现效果如下:</p> <p class="img-center"><img alt="" height="582" src="https://1000bd.com/contentImg/2023/11/20/153453650.png" ></p> <h4 style="text-align:left;"><a name="t9"></a>2.1.2 总结</h4> <p style="text-align:left;">1). HTML页面的基础结构标签</p> <pre data-index="1" class="set-code-show" name="code"><code class="hljs language-cobol"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span>html<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>head<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>title<span class="hljs-operator">></span> <span class="hljs-operator"><</span><span class="hljs-operator">/</span>title<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span><span class="hljs-operator">/</span>head<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>body<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span><span class="hljs-operator">/</span>body<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span><span class="hljs-operator">/</span>html<span class="hljs-operator">></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p style="text-align:left;"><title>中<span style="color:#c21c13;"><strong><strong><span style="color:#c21c13;"><strong>定义标题显示在浏览器的标题位置，<body>中定义的内容会呈现在浏览器的内容区域</strong></span></strong></strong></span></p> <p style="text-align:left;">2). HTML中的标签特点</p> <ul><li style="text-align:left;">HTML标签不区分大小写</li><li style="text-align:left;">HTML标签的属性值，采用单引号、双引号都可以</li><li style="text-align:left;">HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)</li></ul> <h3 style="text-align:left;"><a name="t10"></a>2.2 开发工具</h3> <ul><li style="text-align:left;">我们通过快速入门案例，发现由记事本文件开发html是非常不方便的，所以接下来我们需要学习一款前端专业的开发工具VS Code。</li><li style="text-align:left;">Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。VS Code 提供了非常强大的插件库，大大提高了开发效率。</li><li style="text-align:left;">官网： <a class="hyperlink" href="https://code.visualstudio.com" title="Visual Studio Code - Code Editing. Redefined">Visual Studio Code - Code Editing. Redefined</a></li><li style="text-align:left;">详细安装教程：参考 <strong><strong>资料/VSCode安装/安装文档/VS Code安装文档.md</strong></strong></li></ul> <blockquote> 注意：需要注意的是，我们作为一名开发者，不应该将软件软装在包含中文名的路径中 。 </blockquote> <h3 style="text-align:left;"><a name="t11"></a>2.3 基础标签 & 样式</h3> <p style="text-align:left;">那我们在讲解HTML的常见基础标签 及 CSS的基本样式时，我们就以 新浪新闻页面 为例，来进行讲解，这样大家不仅能够知道 常见标签及样式的作用，还能够知道具体的应用场景。</p> <p style="text-align:left;">新浪新闻的具体页面效果如下：</p> <p class="img-center"><img alt="" height="945" src="https://1000bd.com/contentImg/2022/06/12/024140877.png" ></p> <p style="text-align:left;">原始页面网址：<a class="hyperlink" href="https://news.sina.com.cn/gov/xlxw/2023-03-03/doc-imyipzuy7321600.shtml" title="焦点访谈：中国底气 新思想夯实大国粮仓_新浪新闻">焦点访谈：中国底气 新思想夯实大国粮仓_新浪新闻</a></p> <p style="text-align:left;">而对于这个新浪新闻的页面来说，核心内容分为两个部分，如下：</p> <ul><li style="text-align:left;">新浪新闻-标题部分</li><li style="text-align:left;">新浪新闻-正文部分</li></ul> <p class="img-center"><img alt="" height="767" src="https://1000bd.com/contentImg/2022/06/12/024140877.png" ></p> <h4 style="text-align:left;"><a name="t12"></a>2.3.1 新浪新闻-标题实现</h4> <h5 style="text-align:left;">2.3.1.1 标题排版</h5> <h6 style="text-align:left;">2.3.1.1.1 分析</h6> <p class="img-center"><img alt="" height="370" src="https://1000bd.com/contentImg/2023/11/20/153453804.png" ></p> <p style="text-align:left;">1). 第一部分，是一张图片，需要用到HTML中的图片标签 来实现。</p> <p style="text-align:left;">2). 第二部分，是一个标题，需要用到HTML中的标题标签 ... 来实现。</p> <p style="text-align:left;">3). 第三部分，有两条水平分割线，需要用到HTML中的 标签来定义水平分割线。</p> <h6 style="text-align:left;">2.3.1.1.2 标签</h6> <p style="text-align:left;">1). 图片标签 img</p> <pre data-index="2" class="set-code-show" name="code"><code class="hljs language-cobol"><ol class="hljs-ln" style="width:890px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">A. 图片标签: <span class="hljs-operator"><</span>img<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">B. 常见属性: </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> src: 指定图像的url (可以指定 绝对路径 , 也可以指定 相对路径)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> width: 图像的宽度 (像素 <span class="hljs-operator">/</span> 百分比 , 相对于父元素的百分比)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> height: 图像的高度 (像素 <span class="hljs-operator">/</span> 百分比 , 相对于父元素的百分比)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">C. 路径书写方式:</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 绝对路径:</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-number">1</span>. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.png</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>img src<span class="hljs-operator">=</span><span class="hljs-string">"C:\Users\Administrator\Desktop\HTML\img\news_logo.png"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-number">2</span>. 绝对网络路径: https:<span class="hljs-operator">/</span><span class="hljs-operator">/</span>i<span class="hljs-number">2</span>.sinaimg.cn<span class="hljs-operator">/</span>dy<span class="hljs-operator">/</span>deco<span class="hljs-operator">/</span><span class="hljs-number">2012</span><span class="hljs-operator">/</span><span class="hljs-number">0613</span><span class="hljs-operator">/</span>yocc<span class="hljs-number">20120613</span>img<span class="hljs-number">01</span><span class="hljs-operator">/</span>news_logo.png</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>img src<span class="hljs-operator">=</span><span class="hljs-string">"https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 相对路径:</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> .<span class="hljs-operator">/</span> : 当前目录 , .<span class="hljs-operator">/</span> 可以省略的</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> ..<span class="hljs-operator">/</span>: 上一级目录</div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p style="text-align:left;">2). 标题标签 h 系列</p> <pre data-index="3" class="set-code-show" name="code"><code class="hljs language-cobol"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">A. 标题标签: <span class="hljs-operator"><</span>h<span class="hljs-number">1</span><span class="hljs-operator">></span><span class="hljs-operator"> - </span><span class="hljs-operator"><</span>h<span class="hljs-number">6</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>h<span class="hljs-number">1</span><span class="hljs-operator">></span><span class="hljs-number">111111111111</span><span class="hljs-operator"><</span><span class="hljs-operator">/</span>h<span class="hljs-number">1</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>h<span class="hljs-number">2</span><span class="hljs-operator">></span><span class="hljs-number">111111111111</span><span class="hljs-operator"><</span><span class="hljs-operator">/</span>h<span class="hljs-number">2</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>h<span class="hljs-number">3</span><span class="hljs-operator">></span><span class="hljs-number">111111111111</span><span class="hljs-operator"><</span><span class="hljs-operator">/</span>h<span class="hljs-number">3</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>h<span class="hljs-number">4</span><span class="hljs-operator">></span><span class="hljs-number">111111111111</span><span class="hljs-operator"><</span><span class="hljs-operator">/</span>h<span class="hljs-number">4</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>h<span class="hljs-number">5</span><span class="hljs-operator">></span><span class="hljs-number">111111111111</span><span class="hljs-operator"><</span><span class="hljs-operator">/</span>h<span class="hljs-number">5</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>h<span class="hljs-number">6</span><span class="hljs-operator">></span><span class="hljs-number">111111111111</span><span class="hljs-operator"><</span><span class="hljs-operator">/</span>h<span class="hljs-number">6</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">B. 效果 : h<span class="hljs-number">1</span>为一级标题，字体也是最大的 ； h<span class="hljs-number">6</span>为六级标题，字体是最小的。</div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p style="text-align:left;">3). 水平分页线标签</p> <h6 style="text-align:left;">2.3.1.1.2 实现</h6> <p style="text-align:left;">1). 打开VsCode，选择左侧最底部的 "资源管理器"，然后选择打开文件夹，选择打开桌面的 HTML 文件夹</p> <p style="text-align:left;">2). 将资料中提供的 图片、音频、视频 文件夹的这三个文件夹（里面是图片、音视频素材），复制到 HTML 文件夹中。</p> <p class="img-center"><img alt="" height="178" src="https://1000bd.com/contentImg/2023/11/20/153453496.png" ></p> <p style="text-align:left;">3). 在VsCode中创建一个新的 html 文件，文件的后缀名设置为 .html</p> <p class="img-center"><img alt="" height="236" src="https://1000bd.com/contentImg/2023/11/20/153453496.png" ></p> <p style="text-align:left;">4). html 文件创建好之后，在其中输入 ！，然后直接回车，就可以生成 HTML 的基础结构标签</p> <p class="img-center"><img alt="" height="517" src="https://1000bd.com/contentImg/2023/11/20/153453493.png" ></p> <p style="text-align:left;"></p> <p style="text-align:left;">5). 编写标题排版的核心代码</p> <pre data-index="4" class="set-code-show" name="code"><code class="hljs language-cobol"><ol class="hljs-ln" style="width:921px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span>!-- 文档类型为HTML --<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span>!DOCTYPE html<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span>html lang<span class="hljs-operator">=</span><span class="hljs-string">"en"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span>head<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>!-- 字符集为UTF-<span class="hljs-number">8</span> --<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>meta charset<span class="hljs-operator">=</span><span class="hljs-string">"UTF-8"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>!-- 设置浏览器兼容性 --<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>meta http-equiv<span class="hljs-operator">=</span><span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-keyword">content</span><span class="hljs-operator">=</span><span class="hljs-string">"IE=edge"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>meta name<span class="hljs-operator">=</span><span class="hljs-string">"viewport"</span> <span class="hljs-keyword">content</span><span class="hljs-operator">=</span><span class="hljs-string">"width=device-width, initial-scale=1.0"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>title<span class="hljs-operator">></span>焦点访谈：中国底气 新思想夯实大国粮仓<span class="hljs-operator"><</span><span class="hljs-operator">/</span>title<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span><span class="hljs-operator">/</span>head<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span>body<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>!-- </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> img标签: </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> src: 图片资源路径</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> width: 宽度(px, 像素 ; % , 相对于父元素的百分比)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> height: 高度(px, 像素 ; % , 相对于父元素的百分比)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>img src<span class="hljs-operator">=</span><span class="hljs-string">"img/news_logo.png"</span> width<span class="hljs-operator">=</span><span class="hljs-string">"80%"</span> <span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 路径书写方式:</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 绝对路径:</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-number">1</span>. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.png</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>img src<span class="hljs-operator">=</span><span class="hljs-string">"C:\Users\Administrator\Desktop\HTML\img\news_logo.png"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-number">2</span>. 绝对网络路径: https:<span class="hljs-operator">/</span><span class="hljs-operator">/</span>i<span class="hljs-number">2</span>.sinaimg.cn<span class="hljs-operator">/</span>dy<span class="hljs-operator">/</span>deco<span class="hljs-operator">/</span><span class="hljs-number">2012</span><span class="hljs-operator">/</span><span class="hljs-number">0613</span><span class="hljs-operator">/</span>yocc<span class="hljs-number">20120613</span>img<span class="hljs-number">01</span><span class="hljs-operator">/</span>news_logo.png</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>img src<span class="hljs-operator">=</span><span class="hljs-string">"https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 相对路径:</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> .<span class="hljs-operator">/</span> : 当前目录 , .<span class="hljs-operator">/</span> 可以省略的</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> ..<span class="hljs-operator">/</span>: 上一级目录</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> --<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>img src<span class="hljs-operator">=</span><span class="hljs-string">"img/news_logo.png"</span><span class="hljs-operator">></span> 新浪政务 <span class="hljs-operator">></span> 正文</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="34"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>h<span class="hljs-number">1</span><span class="hljs-operator">></span>焦点访谈：中国底气 新思想夯实大国粮仓<span class="hljs-operator"><</span><span class="hljs-operator">/</span>h<span class="hljs-number">1</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="35"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="36"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>hr<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="37"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-number">2023</span>年<span class="hljs-number">03</span>月<span class="hljs-number">02</span>日 <span class="hljs-number">21</span>:<span class="hljs-number">50</span> 央视网</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="38"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>hr<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="39"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="40"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span><span class="hljs-operator">/</span>body<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="41"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span><span class="hljs-operator">/</span>html<span class="hljs-operator">></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h5 style="text-align:left;">2.3.1.2 标题样式</h5> <p style="text-align:left;">新浪新闻的标题部分的基本排版，我们已经完成了，然后大家会看到，我们编写的一级标题，默认字体颜色为纯黑色。 而原始的新浪新闻页面的新闻标题字体，并不是纯黑色，而是灰黑色， 那接下来，我们就要来设置这个字体的颜色。 而要设置这个字体的颜色，我们就需要通过CSS样式来控制 。</p> <p style="text-align:left;">那在HTML的文件中，我们如何来编写CSS样式呢，此时就涉及到CSS的三种引入方式。</p> <h6 style="text-align:left;">2.3.1.2.1 CSS引入方式</h6> <p style="text-align:left;">具体有3种引入方式，语法如下表格所示：</p> <div class="table-box"><table cellspacing="0"><tbody><tr><td colspan="1" rowspan="1" style="vertical-align:top;width:103px;"> <p style="text-align:left;"><strong><strong>名称</strong></strong></p> </td><td colspan="1" rowspan="1" style="vertical-align:top;width:257px;"> <p style="text-align:left;"><strong><strong>语法描述</strong></strong></p> </td><td colspan="1" rowspan="1" style="vertical-align:top;width:325px;"> <p style="text-align:left;"><strong><strong>示例</strong></strong></p> </td></tr><tr><td colspan="1" rowspan="1" style="vertical-align:top;width:128px;"> <p style="text-align:left;">行内样式</p> </td><td colspan="1" rowspan="1" style="vertical-align:top;width:522px;"> <p style="text-align:left;">在标签内使用style属性，属性值是css属性键值对</p> </td><td colspan="1" rowspan="1" style="vertical-align:top;width:650px;"> <p style="text-align:left;"><h1 style="xxx:xxx;">中国新闻网</h1></p> </td></tr><tr><td colspan="1" rowspan="1" style="vertical-align:top;width:128px;"> <p style="text-align:left;">内嵌样式</p> </td><td colspan="1" rowspan="1" style="vertical-align:top;width:492px;"> <p style="text-align:left;"><span style="color:#c21c13;"><strong><strong><span style="color:#c21c13;"><strong>定义<style>标签，在标签内部定义css样式</strong></span></strong></strong></span></p> </td><td colspan="1" rowspan="1" style="vertical-align:top;width:575px;"> <p style="text-align:left;"><style> h1 {...} </style></p> </td></tr><tr><td colspan="1" rowspan="1" style="vertical-align:top;width:128px;"> <p style="text-align:left;">外联样式</p> </td><td colspan="1" rowspan="1" style="vertical-align:top;width:537px;"> <p style="text-align:left;">定义<link>标签，通过<span style="color:#c21c13;"><strong><strong><span style="color:#c21c13;"><strong>href属性引入外部css文件</strong></span></strong></strong></span></p> </td><td colspan="1" rowspan="1" style="vertical-align:top;"> <p style="text-align:left;"><link rel="stylesheet" href="css/news.css"></p> </td></tr></tbody></table></div> <p style="text-align:left;">对于上述3种引入方式，企业开发的使用情况如下：</p> <ol><li style="text-align:left;">内联样式会出现大量的代码冗余，不方便后期的维护，所以不常用。</li><li style="text-align:left;">内部样式，通过定义css选择器，让样式作用于当前页面的指定的标签上。</li><li style="text-align:left;"><span style="color:#a639d7;"><strong><strong><span style="color:#a639d7;"><strong>外部样式，html和css实现了完全的分离，企业开发常用方式</strong></span></strong></strong></span>。</li></ol> <h6 style="text-align:left;">2.3.1.2.2 颜色表示</h6> <p style="text-align:left;">在前端程序开发中，颜色的表示方式常见的有如下三种：</p> <div class="table-box"><table cellspacing="0"><tbody><tr><td colspan="1" rowspan="1" style="vertical-align:top;width:145px;"> <p style="text-align:left;"><strong><strong>表示方式</strong></strong></p> </td><td colspan="1" rowspan="1" style="vertical-align:top;width:232px;"> <p style="text-align:left;"><strong><strong>表示含义</strong></strong></p> </td><td colspan="1" rowspan="1" style="vertical-align:top;width:321px;"> <p style="text-align:left;"><strong><strong>取值</strong></strong></p> </td></tr><tr><td colspan="1" rowspan="1" style="vertical-align:top;width:65px;"> <p style="text-align:left;">关键字</p> </td><td colspan="1" rowspan="1" style="vertical-align:top;width:212px;"> <p style="text-align:left;">预定义的颜色名</p> </td><td colspan="1" rowspan="1" style="vertical-align:top;width:391px;"> <p style="text-align:left;">red、green、blue...</p> </td></tr><tr><td colspan="1" rowspan="1" style="vertical-align:top;width:95px;"> <p style="text-align:left;">rgb表示法</p> </td><td colspan="1" rowspan="1" style="vertical-align:top;width:362px;"> <p style="text-align:left;">红绿蓝三原色，每项取值范围：0-255</p> </td><td colspan="1" rowspan="1" style="vertical-align:top;width:631px;"> <p style="text-align:left;">rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)</p> </td></tr><tr><td colspan="1" rowspan="1" style="vertical-align:top;width:125px;"> <p style="text-align:left;">十六进制表示法</p> </td><td colspan="1" rowspan="1" style="vertical-align:top;width:347px;"> <p style="text-align:left;">#开头，将数字转换成十六进制表示</p> </td><td colspan="1" rowspan="1" style="vertical-align:top;width:586px;"> <p style="text-align:left;">#000000、#ff0000、#cccccc，简写：#000、#ccc</p> </td></tr></tbody></table></div> <h6 style="text-align:left;">2.3.1.2.3 标题字体颜色</h6> <pre data-index="5" class="set-code-show" name="code"><code class="hljs language-cobol"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span>!DOCTYPE html<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span>html lang<span class="hljs-operator">=</span><span class="hljs-string">"en"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span>head<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>meta charset<span class="hljs-operator">=</span><span class="hljs-string">"UTF-8"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>meta http-equiv<span class="hljs-operator">=</span><span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-keyword">content</span><span class="hljs-operator">=</span><span class="hljs-string">"IE=edge"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>meta name<span class="hljs-operator">=</span><span class="hljs-string">"viewport"</span> <span class="hljs-keyword">content</span><span class="hljs-operator">=</span><span class="hljs-string">"width=device-width, initial-scale=1.0"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>title<span class="hljs-operator">></span>焦点访谈：中国底气 新思想夯实大国粮仓<span class="hljs-operator"><</span><span class="hljs-operator">/</span>title<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>!-- 方式二: 内嵌样式 --<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>style<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> h<span class="hljs-number">1</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator">/</span><span class="hljs-operator">*</span> color: red; <span class="hljs-operator">*</span><span class="hljs-operator">/</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator">/</span><span class="hljs-operator">*</span> color: rgb(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">255</span>); <span class="hljs-operator">*</span><span class="hljs-operator">/</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> color: #<span class="hljs-number">4</span>D<span class="hljs-number">4</span>F<span class="hljs-number">53</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span><span class="hljs-operator">/</span>style<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>!-- 方式三: 外联样式 --<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>!-- <span class="hljs-operator"><</span>link rel<span class="hljs-operator">=</span><span class="hljs-string">"stylesheet"</span> href<span class="hljs-operator">=</span><span class="hljs-string">"css/news.css"</span><span class="hljs-operator">></span> --<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span><span class="hljs-operator">/</span>head<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span>body<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>img src<span class="hljs-operator">=</span><span class="hljs-string">"img/news_logo.png"</span><span class="hljs-operator">></span> 新浪政务 <span class="hljs-operator">></span> 正文</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>!-- 方式一: 行内样式 --<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>!-- <span class="hljs-operator"><</span>h<span class="hljs-number">1</span> style<span class="hljs-operator">=</span><span class="hljs-string">"color: red;"</span><span class="hljs-operator">></span>焦点访谈：中国底气 新思想夯实大国粮仓<span class="hljs-operator"><</span><span class="hljs-operator">/</span>h<span class="hljs-number">1</span><span class="hljs-operator">></span> --<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>h<span class="hljs-number">1</span><span class="hljs-operator">></span>焦点访谈：中国底气 新思想夯实大国粮仓<span class="hljs-operator"><</span><span class="hljs-operator">/</span>h<span class="hljs-number">1</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>hr<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-number">2023</span>年<span class="hljs-number">03</span>月<span class="hljs-number">02</span>日 <span class="hljs-number">21</span>:<span class="hljs-number">50</span> 央视网</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>hr<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span><span class="hljs-operator">/</span>body<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span><span class="hljs-operator">/</span>html<span class="hljs-operator">></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p style="text-align:left;">备注: 要想拾取某一个网页中的颜色，我们可以<span style="background-color:#fbf5b3;"><strong><strong><span style="background-color:#fbf5b3;"><strong>借助于浏览器的拾色器插件来完成。【拾色器插件的安装，参照资料中提供的文档即可】</strong></span></strong></strong></span></p> <h6 style="text-align:left;">2.3.1.2.4 CSS选择器</h6> <p style="text-align:left;">顾名思义：选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种，因为我们是做后台开发的，所以对于css选择器，我们只学习最基本的3种。</p> <p style="text-align:left;"><strong><strong>选择器通用语法如下</strong></strong>：</p> <pre data-index="6" class="set-code-show" name="code"><code class="hljs language-undefined"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">选择器名 {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> css样式名：css样式值;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> css样式名：css样式值;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p style="text-align:left;">我们需要学习的<span style="color:#a639d7;"><strong><strong><span style="color:#a639d7;"><strong>3种选择器是元素选择器，id选择器，class选择器</strong></span></strong></strong></span>，语法以及作用如下：</p> <p style="text-align:left;"><strong><strong>1.元素（标签）选择器：</strong></strong></p> <ul><li style="text-align:left;">选择器的名字必须是标签的名字</li><li style="text-align:left;">作用：选择器中的样式会作用于所有同名的标签上</li></ul> <pre data-index="7" class="set-code-show" name="code"><code class="hljs language-css"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">元素名称 {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> css样式名:css样式值；</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p style="text-align:left;">例子如下：</p> <pre data-index="8" class="set-code-show" name="code"><code class="hljs language-css"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-selector-tag">div</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attribute">color</span>: red;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p style="text-align:left;"><strong><strong>2.id选择器:</strong></strong></p> <ul><li style="text-align:left;">选择器的名字前面需要加上#</li><li style="text-align:left;">作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）</li></ul> <pre data-index="9" class="set-code-show" name="code"><code class="hljs language-ruby"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">#id属性值 {</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> css样式名<span class="hljs-symbol">:css</span>样式值；</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p style="text-align:left;">例子如下：</p> <pre data-index="10" class="set-code-show" name="code"><code class="hljs language-less"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-selector-id">#did</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attribute">color</span>: blue;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p style="text-align:left;"><strong><strong>3.类选择器：</strong></strong></p> <ul><li style="text-align:left;">选择器的名字前面需要加上 .</li><li style="text-align:left;">作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个</li></ul> <pre data-index="11" class="set-code-show" name="code"><code class="hljs language-ruby"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">.<span class="hljs-keyword">class</span>属性值 {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> css样式名<span class="hljs-symbol">:css</span>样式值；</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p style="text-align:left;">例子如下：</p> <pre data-index="12" class="set-code-show" name="code"><code class="hljs language-css"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-selector-class">.cls</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attribute">color</span>: green;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h6 style="text-align:left;">2.3.1.2.5 发布时间字体颜色</h6> <pre data-index="13" class="set-code-show" name="code"><code class="hljs language-cobol"><ol class="hljs-ln" style="width:774px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span>!DOCTYPE html<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span>html lang<span class="hljs-operator">=</span><span class="hljs-string">"en"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span>head<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>meta charset<span class="hljs-operator">=</span><span class="hljs-string">"UTF-8"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>meta http-equiv<span class="hljs-operator">=</span><span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-keyword">content</span><span class="hljs-operator">=</span><span class="hljs-string">"IE=edge"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>meta name<span class="hljs-operator">=</span><span class="hljs-string">"viewport"</span> <span class="hljs-keyword">content</span><span class="hljs-operator">=</span><span class="hljs-string">"width=device-width, initial-scale=1.0"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>title<span class="hljs-operator">></span>焦点访谈：中国底气 新思想夯实大国粮仓<span class="hljs-operator"><</span><span class="hljs-operator">/</span>title<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>style<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> h<span class="hljs-number">1</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> color: #<span class="hljs-number">4</span>D<span class="hljs-number">4</span>F<span class="hljs-number">53</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator">/</span><span class="hljs-operator">*</span> 元素选择器 <span class="hljs-operator">*</span><span class="hljs-operator">/</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator">/</span><span class="hljs-operator">*</span> span {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> color: red;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> } <span class="hljs-operator">*</span><span class="hljs-operator">/</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator">/</span><span class="hljs-operator">*</span> 类选择器 <span class="hljs-operator">*</span><span class="hljs-operator">/</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator">/</span><span class="hljs-operator">*</span> .cls {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> color: green;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> } <span class="hljs-operator">*</span><span class="hljs-operator">/</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator">/</span><span class="hljs-operator">*</span> ID选择器 <span class="hljs-operator">*</span><span class="hljs-operator">/</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> #<span class="hljs-keyword">time</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> color: #<span class="hljs-number">968</span>D<span class="hljs-number">92</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> font-size: <span class="hljs-number">13</span>px; <span class="hljs-operator">/</span><span class="hljs-operator">*</span> 设置字体大小 <span class="hljs-operator">*</span><span class="hljs-operator">/</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span><span class="hljs-operator">/</span>style<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span><span class="hljs-operator">/</span>head<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span>body<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>img src<span class="hljs-operator">=</span><span class="hljs-string">"img/news_logo.png"</span><span class="hljs-operator">></span> 新浪政务 <span class="hljs-operator">></span> 正文</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="34"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="35"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>h<span class="hljs-number">1</span><span class="hljs-operator">></span>焦点访谈：中国底气 新思想夯实大国粮仓<span class="hljs-operator"><</span><span class="hljs-operator">/</span>h<span class="hljs-number">1</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="36"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="37"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>hr<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="38"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>span <span class="hljs-keyword">class</span><span class="hljs-operator">=</span><span class="hljs-string">"cls"</span> id<span class="hljs-operator">=</span><span class="hljs-string">"time"</span><span class="hljs-operator">></span><span class="hljs-number">2023</span>年<span class="hljs-number">03</span>月<span class="hljs-number">02</span>日 <span class="hljs-number">21</span>:<span class="hljs-number">50</span><span class="hljs-operator"><</span><span class="hljs-operator">/</span>span<span class="hljs-operator">></span> <span class="hljs-operator"><</span>span <span class="hljs-keyword">class</span><span class="hljs-operator">=</span><span class="hljs-string">"cls"</span><span class="hljs-operator">></span>央视网<span class="hljs-operator"><</span><span class="hljs-operator">/</span>span<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="39"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>hr<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="40"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="41"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span><span class="hljs-operator">/</span>body<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="42"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span><span class="hljs-operator">/</span>html<span class="hljs-operator">></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p style="text-align:left;">上述我们还使用了一个css的属性 font-size , 用来设置字体的大小。 但是需要注意，在设置字体的大小时，单位px不能省略，否则不生效。</p> <h5 style="text-align:left;">2.3.1.3 超链接</h5> <ul><li style="text-align:left;">在新浪新闻的标题部分，当我们点击顶部的 "新浪政务"，浏览器将自动在当前窗口访问新浪政务首页这个资源（<a class="hyperlink" href="http://gov.sina.com.cn/" title="新浪政务_政务工作解读_政务信息服务_新浪新闻_新浪网">新浪政务_政务工作解读_政务信息服务_新浪新闻_新浪网</a>）</li><li style="text-align:left;">当我们点击新闻发布时间之后的 "央视网"，浏览器将会自动打开一个新的标签页，然后在新的标签页中访问央视网中的该新闻资源 （<a class="hyperlink" href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" title="焦点访谈：中国底气 新思想夯实大国粮仓_新闻频道_央视网(cctv.com)">焦点访谈：中国底气 新思想夯实大国粮仓_新闻频道_央视网(cctv.com)</a>）</li></ul> <p style="text-align:left;"></p> <p style="text-align:left;">那接下来，我们就来完善新闻标题部分的这个功能，那此时呢，我们就需要用到HTML中的超链接的标签 。</p> <h6 style="text-align:left;">2.3.1.3.1 介绍</h6> <ul><li style="text-align:left;">标签: <a href="..." target="...">央视网</li><li style="text-align:left;">属性: <ul><li style="text-align:left;">href: 指定资源访问的url</li><li style="text-align:left;">target: 指定在何处打开资源链接 <ul><li style="text-align:left;">_self: 默认值，在当前页面打开</li><li style="text-align:left;">_blank: 在空白页面打开</li></ul></li></ul></li></ul> <h6 style="text-align:left;">2.3.1.3.2 实现</h6> <pre data-index="14" class="set-code-show" name="code"><code class="hljs language-cobol"><ol class="hljs-ln" style="width:917px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span>!DOCTYPE html<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span>html lang<span class="hljs-operator">=</span><span class="hljs-string">"en"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span>head<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>meta charset<span class="hljs-operator">=</span><span class="hljs-string">"UTF-8"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>meta http-equiv<span class="hljs-operator">=</span><span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-keyword">content</span><span class="hljs-operator">=</span><span class="hljs-string">"IE=edge"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>meta name<span class="hljs-operator">=</span><span class="hljs-string">"viewport"</span> <span class="hljs-keyword">content</span><span class="hljs-operator">=</span><span class="hljs-string">"width=device-width, initial-scale=1.0"</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>title<span class="hljs-operator">></span>焦点访谈：中国底气 新思想夯实大国粮仓<span class="hljs-operator"><</span><span class="hljs-operator">/</span>title<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>style<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> h<span class="hljs-number">1</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> color: #<span class="hljs-number">4</span>D<span class="hljs-number">4</span>F<span class="hljs-number">53</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> #<span class="hljs-keyword">time</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> color: #<span class="hljs-number">968</span>D<span class="hljs-number">92</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> font-size: <span class="hljs-number">13</span>px; <span class="hljs-operator">/</span><span class="hljs-operator">*</span> 设置字体大小 <span class="hljs-operator">*</span><span class="hljs-operator">/</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> a {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> color: black;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> text-decoration: none; <span class="hljs-operator">/</span><span class="hljs-operator">*</span> 设置文本为一个标准的文本 , 去除掉 超链接 下面默认的下划线 <span class="hljs-operator">*</span><span class="hljs-operator">/</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span><span class="hljs-operator">/</span>style<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span><span class="hljs-operator">/</span>head<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span>body<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>img src<span class="hljs-operator">=</span><span class="hljs-string">"img/news_logo.png"</span><span class="hljs-operator">></span> <span class="hljs-operator"><</span>a href<span class="hljs-operator">=</span><span class="hljs-string">"http://gov.sina.com.cn/"</span> target<span class="hljs-operator">=</span><span class="hljs-string">"_self"</span><span class="hljs-operator">></span>新浪政务<span class="hljs-operator"><</span><span class="hljs-operator">/</span>a<span class="hljs-operator">></span> <span class="hljs-operator">></span> 正文</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>h<span class="hljs-number">1</span><span class="hljs-operator">></span>焦点访谈：中国底气 新思想夯实大国粮仓<span class="hljs-operator"><</span><span class="hljs-operator">/</span>h<span class="hljs-number">1</span><span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>hr<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>span id<span class="hljs-operator">=</span><span class="hljs-string">"time"</span><span class="hljs-operator">></span><span class="hljs-number">2023</span>年<span class="hljs-number">03</span>月<span class="hljs-number">02</span>日 <span class="hljs-number">21</span>:<span class="hljs-number">50</span><span class="hljs-operator"><</span><span class="hljs-operator">/</span>span<span class="hljs-operator">></span> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>span<span class="hljs-operator">></span> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>a href<span class="hljs-operator">=</span><span class="hljs-string">"https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml"</span> target<span class="hljs-operator">=</span><span class="hljs-string">"_blank"</span><span class="hljs-operator">></span>央视网<span class="hljs-operator"><</span><span class="hljs-operator">/</span>a<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="34"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span><span class="hljs-operator">/</span>span<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="35"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-operator"><</span>hr<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="36"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="37"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span><span class="hljs-operator">/</span>body<span class="hljs-operator">></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="38"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-operator"><</span><span class="hljs-operator">/</span>html<span class="hljs-operator">></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p style="text-align:left;">浏览器打开此页面，我们可以看到最终效果（超链接的字体，以及默认的下划线，通过css样式已经调整好了）：</p> <p class="img-center"><img alt="" height="478" src="https://1000bd.com/contentImg/2023/11/20/153453532.png" ></p> <pre data-index="15" class="set-code-show" name="code"><code class="hljs language-cobol"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">[ 本文作者 ] 软工菜鸡</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">[ 博客链接 ] https:<span class="hljs-operator">/</span><span class="hljs-operator">/</span>blog.csdn.net<span class="hljs-operator">/</span>m<span class="hljs-number">0</span>_<span class="hljs-number">67184231</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">[ 版权声明 ] 如果您在非 CSDN 网站内看到这一行，</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">说明该死的侵权网络爬虫可能在本人还没有完整发布的时候就抓走了我的文章，</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">可能导致内容不完整，请去上述的原文链接查看原文。</div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p></p> </div> </div> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1263615">经纬恒润预期功能安全（SOTIF）解决方案为自动驾驶安全保驾护航</a> <br /> <a href="/Article/Index/1081482">腾讯开源项目——behaviac——学习1</a> <br /> <a href="/Article/Index/840455">java计算机毕业设计校园共享单车系统源码+系统+mysql数据库+lw文档</a> <br /> <a href="/Article/Index/762383">字符串替换StringUtils.replace（）</a> <br /> <a href="/Article/Index/1064763">深度学习 paper 代码复现参考</a> <br /> <a href="/Article/Index/918507">宝塔显示100%负载100%cpu解决办法</a> <br /> <a href="/Article/Index/638502">对毕业季即将踏入职场的年轻人的一点建议</a> <br /> <a href="/Article/Index/1008123">java计算机毕业设计vue校园菜鸟驿站管理系统MyBatis+系统+LW文档+源码+调试部署</a> <br /> <a href="/Article/Index/830655">用57000字讲解完2022年Java岗面试最常问的100道题，太肝了</a> <br /> <a href="/Article/Index/1069338">泰勒公式专题 拉格朗日余项与佩亚诺余项,麦克劳林公式</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/m0_67184231/article/details/134505656 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a>    <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>