01-前端Web开发（HTML+css）

原创于 2026-04-03 21:26:57 发布 · 506 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #html #css

1.初识Web前端

1.1介绍

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

主要明确以下三个问题：

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

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

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

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

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

通过浏览器转化（解析和渲染）成用户看到的网页
浏览器中对代码进行解析和渲染的部分，称为 浏览器内核

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

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

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

1.2 Web标准

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

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

那在我们的前端课程中，除了会讲解HTML、CSS、JS这些技术以外，还会讲解现在前端开发中的高级技术Vue、ElementPlus、Axios。

而Web前端开发的内容呢，我们在设计的时候，也进行了分层的设计，分为了两个部分：

Web前端基础：HTML、CSS、JS、Vue3、Ajax、Axios，前端基础部分为两天时间。
Web前端进阶：Vue工程化、ElementPlus、Tlias智能学习辅助系统案例，前端进阶部分为三天时间。

那今天我们就先来讲解Web前端基础的第一部分： HTML & CSS。

什么是HTML？

HTML: HyperText Markup Language，超文本标记语言。

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

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

什么是CSS？

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

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

2.HTML快速入门

2.1操作步骤

新建文本文件，后缀名改为 .html，命名为：01. html快速入门.html

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

2.写HTML的基本骨架，定义标题

选中文件，鼠标右击，选择使用记事本打开文件，并且编写网页的标题。

首先html有固定的基本结构.

<html>
     <head>
          <title>HTML 快速入门</title>
     </head>
     <body>
                
     </body>
</html>

其中<html>是根标签，<head>和<body>是子标签。

<head> : 定义网页的头部，用来存放给浏览器看的信息，如：CSS样式、网页的标题。
<body> : 定义网页的主体部分，存放给用户看的信息，也是网页的主体内容，如：文字、图片、视频、音频、表格等。

3.在<body>中编写HTML的核心内容

<html>
     <head>
        <title>HTML 快速入门</title>
     </head>
     <body>
        <h1>Hello HTML</h1>
        <img src="img/1.png">
     </body>
</html>

其中 <h1> 标签是一个一级标题的标签。 <img> 标签是一个图片标签，用来展示图片，而其中的 src 属性是用来指定要展示的图片。

4.然后选中文件，鼠标右击，选择使用浏览器打开文件

浏览器呈现效果如下:

2.2 总结

1). HTML页面的基础结构标签

<html>
    <head>
        <title> </title>
    </head>
    <body>
       
    </body>
</html>

<title>中定义标题显示在浏览器的标题位置，<body>中定义的内容会呈现在浏览器的内容区域

2). HTML中的标签特点

HTML标签不区分大小写，建议小写
HTML标签的属性值，采用单引号、双引号都可以，一般写双引号
HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)前端开发工具前端开发工具3.前端开发工具

3.前端开发工具

我们通过快速入门案例，发现由记事本文件开发html是非常不方便的，所以接下来我们需要学习一款前端专业的开发工具VS Code。

Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。VS Code 提供了非常强大的插件库，大大提高了开发效率。

官网： https://code.visualstudio.com
安装：VsCode安装文档

需要注意的是，我们作为一名开发者，不应该将软件软装在包含中文名的路径中。
由于安装了IDEA快捷键的插件，VSCode快键键与IDEA是一致的。

4.常见标签&样式

那我们在讲解HTML的常见基础标签及 CSS的基本样式时，我们就以新浪新闻页面为例，来进行讲解，这样大家不仅能够知道常见标签及样式的作用，还能够知道具体的应用场景。

新浪新闻的具体页面效果如下：

原始页面网址：https://news.cctv.com/2024/05/15/ARTIflTnFvNMx9nUVc4PA7T2240515.shtml

而大家可以看到，上述新闻网页，其实分为两个部分，一个是新闻的标题部分，另一个是新闻的正文部分。那接下来，我们就先来完成央视新闻标题部分的制作。

4.1央视新闻-标题

前面我们提到，我们在浏览器中看到的网页程序呈现出来的效果，实际上是浏览器解析并渲染了前端代码而呈现出来的。而我们所编写的HTML页面，在浏览器中渲染的时候，是从上往下逐行解析展示的。所以，我们在编写html页面的时候，要根据页面的布局，从上往下编写。

4.1.1标题排版

在制作网页的时候，我们可以充分的利用AI辅助工具通义灵码，来帮我们实现对应的功能，我们只需要在编辑器中给定对应的注释（提示词），通义灵码就可以帮我们实现对应的功能效果，然后我们再基于生成的代码进行调试即可。

接下来，我们就可以通过VsCode打开HTML文件夹，然后在其中创建一个html页面，命名为：02. 央视新闻-标题排版.html。

然后在这个文件中来制作新浪新闻网页，标题部分的排版内容为：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
</head>
<body>

  <!-- 定义网页标题, 标题内容： 【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
  <h1 id="title">【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
  
  <!-- 定义一个超链接, 链接地址：https://news.cctv.com/, 链接内容：央视网 -->
  <a href="https://news.cctv.com/" target="_blank">央视网</a>
  2024年05月15日 20:07
  
</body>
</html>

那在上述我们用到的两个标签，一个是标题标签 <h1></h1>，另一个是超链接标题 <a></a>。这两个标签的具体用法如下：

标题标签 h 系列：

效果：h1为一级标题，字体也是最大的； h6为六级标题，字体是最小的。

注意：HTML标签是预定义好的，不能随意定义，也就以为着，标题标签就只有这六个，没有 <h7>

超链接 a 标签：

标签：<a href="....." target=".....">央视网</a>

属性：

href: 指定资源访问的url
target: 指定在何处打开资源链接
- _self: 默认值，在当前页面打开
- _blank: 在空白页面打开

4.1.2标题样式

我们可以看到，目前我们制作的新闻标题部分，新闻发布时间 2024年05月15日 20:07 的字体颜色是黑色，而在原始的央视新闻页面中，字体的颜色呈现灰色，具体的呈现效果如下：

那接下来，我们要来控制字体的颜色，而这部分其实是属于网页的样式，所以这里呢，就要通过CSS样式控制。

这些基础的功能我们就可以直接通过AI工具帮我们实现，参考如下提示词(prompt)：

你是一名前端开发工程师，请通过css为网页中的新闻发布时间设置字体颜色为灰色。网页内容如下：

<!DOCTYPE html>

<head>

<title>【新思想引领新征程】推进长江十年禁渔谱写长江大保护新篇章</title>

</head>

<body>

<h1 id="title">【新思想引领新征程】推进长江十年禁渔谱写长江大保护新篇章</h1>

2024年05月15日 20:07

</body>

</html>

AI给出的最终代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
  <style>
    .publish-date {
      color: gray;
    }
  </style>
</head>
<body>

  <!-- 定义网页标题, 标题内容： 【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
  <h1 id="title">【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
  
  <!-- 定义一个超链接, 链接地址：https://news.cctv.com/, 链接内容：央视网 -->
  <a href="https://news.cctv.com/" target="_blank">央视网</a>
  <span class="publish-date">2024年05月15日 20:07</span>

</body>
</html>

我们可以看到，通过上面这样一段代码，就可以控制字体的颜色，而其实上面这一段代码就是AI生成的CSS样式。最终效果如下：