01. Web前端之Html&CSS

什么是Web？

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

web网站的开发模式

初识Web前端

网页由哪几部分组成？

文字、图片、视频、音频、超链接...

我们看到的网页，背后本质是什么？

程序员写的前端代码

前端代码如何转换成用户眼中的网页？

通过浏览器转换成用户看到的网页。
浏览器对代码进行解析渲染的部分称为浏览器内核。

注意：不同浏览器，内核不同，对于相同的前端代码解析的效果可能会存在差异。

Web标准

Web标准也称网页标准，由一系列的标准组成，大部分由W3C(World Wide Web Consortium, 万维网联盟)负责制定。
三个组成部分：
- HTML：负责网页的结构（页面元素和内容）。
- CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
- JavaScript：负责网页的行为（交互效果）。

HTML&&CSS

什么是HTML？

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

具体的标签学习，可以通过https://www.w3school.com.cn/网站进行学习。

什么是CSS？

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

HTML快速入门

创建网页的步骤：

新建文本文件，后缀名改成.html
编写HTML的基本骨架，定义标题

  3. 在<body>中填写内容

网页头部：用来存放给浏览器看的信息，如：CSS样式。
网页主题：用来存放给用户看的信息，如：文字、图片、视频。

代码实现

<html>
	<head>
		<title>HTML快速入门</title>
	</head>
	
	<body>
		<h1>Hello HTML</h1>
		<img src="https://shared.cdn.queniuqe.com/store_item_assets/steam/apps/4057050/bcfa9227a7b42cb03cedc3c5367a6eaaead58550/ss_bcfa9227a7b42cb03cedc3c5367a6eaaead58550.1920x1080.jpg?t=1765782005">	
	</body>

</html>

html语言的特点：

标签不区分大小写，但是最好风格统一
字符串可以用双引号表示也可以用单引号表示。
标签是成对出现的，如果去掉结尾标签，也可以正常展示，但是不建议去掉。html语法结构松散，但是建议规范书写。

VSCode安装使用

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

下载好以后，推荐安装的插件有：Auto CloseTag、Auto Rename Tag、Chinese Language、File Utils、HTML CSS Support、IntelliJ IDEA Keybindings、Live Server、Mithril Emment、open in browser、Path Intellisense、Trae、Vue3-snippets。

常见标签&样式

数据展示标签&样式

案例：新浪新闻-标题排版

- 图片标签：<img>
  - src：指定图像的url(绝对路径 / 相对路径)
  - alt：替换文本，图片无法显示的时候显示的文字
  - width：图像的宽度（像素 / 相对于父元素的百分比）
  - height：图像的高度（像素 / 相对于父元素的百分比）

- 标题标签：<h1> - <h6>
- 水平线标签：<hr>

实现

01.新浪新闻-标题-排版.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 图片img 
        src属性：设置要展示的图片路径
          绝对路径：D:\java_project\HTML_project\img\logo.jpg
          绝对网络地址：https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
          相对路径：
               ./：当前目录(当前路径是可以省略的)
               ../：上一级目录
        width属性：设置图片的宽度，单位px，或者是%百分比，只写一个宽度的时候，高度会等比例缩放
        height属性：设置图片的高度
        alt属性：当图片不存在的时候，展示内容
    -->
     <img src="img/logo.jpg" alt="logo.ping" width=""> 新浪政务>正文
     <!-- 标题标签h1-h6 -->
       <h1>教育部发布20条举措 进一步加强中小学日常考试管理</h1>
      
     <!-- 水平线标签 hr--> 
    <hr>
    2025年12月17日 14:26 央视
    <hr>

</body>
</html>

新浪新闻-标题样式

CSS引入方式：
- 行内样式：写在标签的style属性中(不推荐)

<h1 style="XX: xxx; XXX: XXX;"> 中国新闻网</h1>

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

<style>
h1{
  xxx:xxx;
  xxx:xxx;
}
</style>

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

h1{
  xxx:xxx;
  xxx:xxx;
}

**实现**
``` html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
  h1{
    color: #4D4F53;
  }
</style>

<body>
     <img src="img/logo.jpg" alt="logo.ping" width=""> 新浪政务>正文
     
       <h1>教育部发布20条举措 进一步加强中小学日常考试管理</h1>
      
    <hr>
    <span>2025年12月17日 14:26</span> <span>央视网</span>
    <hr>

</body>
</html>

<link rel="stylesheet" href="css/news.css">

注意：CSS引入方式的优先级：行内样式 > 内部样式（外部样式）【谁后加载谁的优先级高】
颜色表示形式：

CSS选择器

元素选择器：标签名
类选择器：.class属性值
id选择器：#id属性值{}
优先级：id选择器 > 类选择器 > 元素选择器

CSS属性

color：设置文本的颜色
font-size：字体大小(注意：记得加px)

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
/* 
CSS选择器优先级：
  id选择器 > 类选择器 > 元素选择器
*/
  /* CSS选择器一：元素选择器 */
  h1{
    color: #4D4F53;
  }

  span{
    color: blue;
  }
  /* CSS选择器二：类选择器 */
  .cls{
    color: #888888;
    font-size: 14px; /* 设置字体大小，单位：像素px */
  }
  
  /* CSS选择器三：ID选择器 */
  /* #timer{
    color: red;
  } */
   #timer1{
    color: rgb(17, 2, 2);
  }
</style>

<body>
     <img src="img/logo.jpg" alt="logo.ping" width=""> 新浪政务>正文
     
       <h1>教育部发布20条举措 进一步加强中小学日常考试管理</h1>
      
    <hr>
    <span class="cls" id="timer">2025年12月17日 14:26</span> <span id="timer1">央视网</span>
    <hr>

</body>
</html>

新浪新闻-功能完善

超链接

  - 标签：
  <a href="..." target="...">央视网</a>
  - 属性：
    href：指定资源访问的url
    target：指定在何处打开资源链接
    _self：默认值，在当前页面打开
    _blank：在空白页面打开

CSS属性

text-decoration：规定添加到文本的修饰，none表示定义标准的文本。

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>

  /* CSS选择器一：元素选择器 */
  h1{
    color: #4D4F53;
  }

  span{
    color: blue;
  }
  /* CSS选择器二：类选择器 */
  .cls{
    color: #888888;
    font-size: 14px; /* 设置字体大小，单位：像素px */
  }
  
   #timer1{
    color: rgb(17, 2, 2);
  }

  a{
    text-decoration: none; /* 取消下划线 */
    color: #4D4F53;
  }
</style>

<body>
  <!-- 超链接标签：a
     作用：跳转到指定的URL
     属性：
        href：指定跳转的URL
        target：指定跳转的方式。_blank表示在新窗口打开，_self表示在当前窗口打开。
  -->
     <img src="img/logo.jpg" alt="logo.ping" width=""> <a href="https://gov.sina.com.cn/" target="_blank">新浪政务</a> >正文
     
       <h1>教育部发布20条举措 进一步加强中小学日常考试管理</h1>
      
    <hr>
    <span class="cls" id="timer">2025年12月17日 14:26</span> <span id="timer1"><a href="https://content-static.cctvnews.cctv.com/snow-book/index.html?&toc_style_id=feeds_default&share_to=wechat&item_id=7542343923677690909&track_id=652CCE92-BBC2-4C35-9212-9BDC4A5FF834_787645970173">央视</a></span>
    <hr>

</body>
</html>

新浪新闻-正文排版

- 视频标签：<video>
  - src:规定视频的url
  - controls：显示播放控件
  - width：播放器的宽度
  - height：播放器的高度
  - 注意：当key与value 相同时，value可以省略不写

- 音频标签：<audio>
  - src：规定音频的url
  - controls：显示播放控件

- 段落标签：<p>

- 文本格式化标签：
  - 加粗：<b> / <strong>
  - 下划线：<u> / <ins>
  - 倾斜：<i> / <em>
  - 删除线：<s> / <del>

- CSS样式
  - line-height:设置行高
  - text-indent：定义第一个行内容的缩进(px/em)
  - text-align:规定元素中的文本的水平对齐方式

- 常见的字符实体
  - 空格： &bnsp;
  - <: &lt;
  - >: &gt;

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>

  /* CSS选择器一：元素选择器 */
  h1{
    color: #4D4F53;
  }

  span{
    color: rgb(14, 14, 15);
  }
  /* CSS选择器二：类选择器 */
  .cls{
    color: #888888;
    font-size: 14px; /* 设置字体大小，单位：像素px */
  }
  
   #timer1{
    color: rgb(17, 2, 2);
  }

  a{
    text-decoration: none; /* 取消下划线 */
    color: #4D4F53;
  }

  p{
    text-indent: 32px; /* 设置缩进 */
    line-height: 12px; /* 设置行高 */
  }

  video{
  
    display: block;
    margin: 0 auto;
  }

  #img1{
    display: block;
    margin: 0 auto;
  }
    #img2{
    display: block;
    margin: 0 auto;
  }

  #editor{
    text-align: right; /* 右对齐 */ 
  }
</style>

<body>
  <!-- 超链接标签：a
     作用：跳转到指定的URL
     属性：
        href：指定跳转的URL
        target：指定跳转的方式。_blank表示在新窗口打开，_self表示在当前窗口打开。
  -->
     <img src="img/logo.jpg" alt="logo.ping" width=""> <a href="https://gov.sina.com.cn/" target="_blank">新浪政务</a> >正文
     
       <h1>新疆阿拉山口：全国首单航空煤油出口中亚</h1>
      
    <hr>
    <span class="cls" id="timer">2025年12月17日 14:26</span> <span id="timer1"><a href="https://content-static.cctvnews.cctv.com/snow-book/index.html?&toc_style_id=feeds_default&share_to=wechat&item_id=7542343923677690909&track_id=652CCE92-BBC2-4C35-9212-9BDC4A5FF834_787645970173">央视</a></span>
    <hr>

    <!-- 正文部分 -->
     <!-- 视频标签 video
      当key与value 相同时，value可以省略不写
      controls：添加视频控制器
      width：设置视频的宽度
      height：设置视频的高度
     -->
     <video src="video/全国首单航空煤油出口中亚.mp4" controls width="600" height="400" ></video>

     <!-- <audio src="audio/全国首单航空煤油出口中亚.mp3" controls></audio> -->

     <!-- 段落标签 p -->
      <!--加粗：b / Strong -->
     <p>
      <b>12月12日</b>，440余吨中石油航空煤油经阿拉山口公路口岸出境，发往哈萨克斯坦，标志着全国首单出口中亚的中石油航空煤油成功发运。该批航煤为1000吨外贸订单的首批发货，实现了中哈能源合作从“资源引进”到“产品出口”的全链条覆盖。
     </p>

     <img id="img1" src="img/1.gif" alt="">
     
     <p>
      阿拉山口口岸通过优化通关流程、建设专业化仓储体系，为航煤等高附加值能源产品贸易提供高效通道。此次出口填补了区域跨境能源运输细分领域空白，推动口岸贸易结构向战略性能源产品升级。
     </p>
     
     <img id="img2" src="img/2.gif" alt="">

     <p>
      目前，该业务将带动口岸物流、通关等相关产业协同发展，进一步巩固阿拉山口作为国家物流枢纽的地位。（监制 王新宇 主编 苏蒙 编辑 努尔达娜·托汗 合作媒体 阿拉山口市融媒体中心）
     </p>

     <p id="editor">
      责任编辑：王树淼 SN242
     </p>

     <span>
      <!-- &nbsp: 非断行空格 -->
      <b>关键字</b>：新疆&nbsp;&nbsp;阿拉山口&nbsp;&nbsp;航空煤油&nbsp;&nbsp;出口&nbsp;&nbsp;中亚
     </span>
    

</body>
</html>

数据展示标签&样式

盒子模型

盒子：页面中所有的元素(标签)，都可以看作是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。
盒子模型组成：内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)
布局标签：网页开发中，会大量使用div和span这两个没有语义的布局标签。

- 特点：
  - <div>标签：
    - 一行只显示一个(独占一行)
    - 宽度默认是父元素的宽度，高度默认由内容撑开。
    - 可以设置宽高(width、height)
  
  - <span> 标签：
    - 一行可以显示多个
    - 宽度和高度默认由内容撑开
    - 不可以设置宽高(width、height)

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
<style>
    div{
       width: 200px;
       height: 200px;
       background-color: #FF6666;   /*背景颜色*/
       padding: 20px,20px,20px,20px;  /* 设置内边距：上、右、下、左 */
       border: 5px solid #000000; /* 设置边框：宽度 样式 颜色 */
       margin: 20px;  /* 设置外边距：上、右、下、左 */
       box-sizing: border-box; /* 设置盒子大小*/
    }

</style>

</head>
<body>
    <!-- <div>我是div1</div>
    <div>我是div2</div>
    <div>我是div3</div>

    <span>我是span1</span>
    <span>我是span2</span>
    <span>我是span3</span> -->

    <div>
        你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！
    </div>

</body>
</html>

新浪新闻-页面布局

实现案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>

  /* CSS选择器一：元素选择器 */
  h1{
    color: #4D4F53;
  }

  span{
    color: rgb(14, 14, 15);
  }
  /* CSS选择器二：类选择器 */
  .cls{
    color: #888888;
    font-size: 14px; /* 设置字体大小，单位：像素px */
  }
  
   #timer1{
    color: rgb(17, 2, 2);
  }

  a{
    text-decoration: none; /* 取消下划线 */
    color: #4D4F53;
  }

  p{
    text-indent: 32px; /* 设置缩进 */
    line-height: 25px; /* 设置行高 */
  }

  video{
  
    display: block;
    margin: 0 auto;
  }

  #img1{
    display: block;
    margin: 0 auto;
  }
    #img2{
    display: block;
    margin: 0 auto;
  }

  #editor{
    text-align: right; /* 右对齐 */ 
  }

  #div01{
    /*外边距*/
    width: 60%;
    margin: 0 20% 0 20%; /* auto会自动计算距离，居中展示 */
  }

</style>

<body>
 <div id="div01">
   <!-- 超链接标签：a
     作用：跳转到指定的URL
     属性：
        href：指定跳转的URL
        target：指定跳转的方式。_blank表示在新窗口打开，_self表示在当前窗口打开。
  -->
     <img src="img/logo.jpg" alt="logo.ping" width=""> <a href="https://gov.sina.com.cn/" target="_blank">新浪政务</a> >正文
     
       <h1>新疆阿拉山口：全国首单航空煤油出口中亚</h1>
      
    <hr>
    <span class="cls" id="timer">2025年12月17日 14:26</span> <span id="timer1"><a href="https://content-static.cctvnews.cctv.com/snow-book/index.html?&toc_style_id=feeds_default&share_to=wechat&item_id=7542343923677690909&track_id=652CCE92-BBC2-4C35-9212-9BDC4A5FF834_787645970173">央视</a></span>
    <hr>

    <!-- 正文部分 -->
     <!-- 视频标签 video
      当key与value 相同时，value可以省略不写
      controls：添加视频控制器
      width：设置视频的宽度
      height：设置视频的高度
     -->
     <video src="video/全国首单航空煤油出口中亚.mp4" controls width="600" height="400" ></video>

     <!-- <audio src="audio/全国首单航空煤油出口中亚.mp3" controls></audio> -->

     <!-- 段落标签 p -->
      <!--加粗：b / Strong -->
     <p>
      <b>12月12日</b>，440余吨中石油航空煤油经阿拉山口公路口岸出境，发往哈萨克斯坦，标志着全国首单出口中亚的中石油航空煤油成功发运。该批航煤为1000吨外贸订单的首批发货，实现了中哈能源合作从“资源引进”到“产品出口”的全链条覆盖。
     </p>

     <img id="img1" src="img/1.gif" alt="">
     
     <p>
      阿拉山口口岸通过优化通关流程、建设专业化仓储体系，为航煤等高附加值能源产品贸易提供高效通道。此次出口填补了区域跨境能源运输细分领域空白，推动口岸贸易结构向战略性能源产品升级。
     </p>
     
     <img id="img2" src="img/2.gif" alt="">

     <p>
      目前，该业务将带动口岸物流、通关等相关产业协同发展，进一步巩固阿拉山口作为国家物流枢纽的地位。（监制 王新宇 主编 苏蒙 编辑 努尔达娜·托汗 合作媒体 阿拉山口市融媒体中心）
     </p>

     <p id="editor">
      责任编辑：王树淼 SN242
     </p>

     <span>
      <!-- &nbsp: 非断行空格 -->
      <b>关键字</b>：新疆&nbsp;&nbsp;阿拉山口&nbsp;&nbsp;航空煤油&nbsp;&nbsp;出口&nbsp;&nbsp;中亚
     </span>
 </div>
</body>
</html>

表格标签

场景：在网页中以表格(行、列)形式整齐展示数据，如：班级表。

- 标签：
  - <table>：定义表格整体，可以包裹多个<tr>。
  - <tr>：表格的行，可以包裹多个<td>.
  - <td>：表格单元格(普通)，可以包裹内容；如果是表头单元格，可以替换为<th>

提示：HTML表格的边框、宽度的设置推荐使用CSS样式进行控制。

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
<style>
    table{
        width: 50%;
        text-align: center; /* 设置文本居中 */
        border-collapse: collapse; /* 合并边框 */
    }
    
    td,th{
        border: 1px solid #000;
    }

    img{
        width: 80px;
        height: 50px;
    }

</style>

</head>
<body>
    <!-- 表格标签 -->
     <table>
        <tr>
            <th>序号</th>
            <th>品牌logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>001</td>
            <td><img src="./img/hw.jpg" alt="1.jpg"></td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
         <tr>
            <td>002</td>
            <td><img src="./img/ali.jpeg" alt="1.jpg"></td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>

     </table>
</body>
</html>

表单标签

场景：在网页中主要负责数据采集功能，如注册、登录登数据采集。

- 标签：<form>
- 表单项：不同类型的input元素、下拉列表、文本域等。
  - <input>：定义表单项，通过type属性控制输入形式。
  - <select>：定义下拉列表。
  - <textarea>：定义文本域。

- 属性：
  - action：规定当提交表单时向任何发送表单数据，URL。
  - method：规定用于发送表单数据的方式。GET、POST。

  - get：将表单数据提交到action指定的地址,以键值对的形式拼接在地址后面,不安全.?username=张三&age=18，大小有限制。
  - post：请求数据通过请求体传递,以键值对的形式提交,安全。username=张三&age=18，大小无限制。
  
注意：如果要提交数据，必须添加name属性。

案例

<!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>
    <!-- 表单标签：form 
     作用：用于定义表单，用于收集用户信息   
         属性：
            action：指定表单数据提交的地址,不写的话默认是当前页面
            method：指定表单数据提交的方式.
                get：将表单数据提交到action指定的地址,以键值对的形式拼接在地址后面,不安全.?username=张三&age=18，大小有限制
                post：请求数据通过请求体传递,以键值对的形式提交,安全。username=张三&age=18，大小无限制。
            注意：如果要提交数据，必须添加name属性。
    -->
    <form action="" method="get">
        姓名：<input type="text" name = "username">
        年龄：<input type="text" name  = "age">
        <input type="submit" value="get提交">
    </form>

    <form action="" method="post">
        姓名：<input type="text" name = "username">
        年龄：<input type="text" name  = "age">
        <input type="submit" value="post提交">
    </form>
</body>
</html>

表单标签-表单项

- <input>：定义表单项，通过type属性控制输入形式。
- <select>：定义下拉列表。
- <textarea>：定义文本域。

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML -表单项标签</title>
</head>
<body>
    <!-- value 表单项标签 -->
     <form action="" method="post">
        姓名： <input type="text" name="name"> <br><br>
        密码：<input type="password" name="password"> <br><br>
        性别：<input type="radio"name="gender" value="1"> 男
             <label><input type="radio" name="gender" value="2"> 女</label><br><br>
        爱好：<label><input type="checkbox" name="hobby" value="java"> java </label>
              <label><input type="checkbox" name="hobby" value="game"> game </label>
              <label><input type="checkbox" name="hobby" value="sing"> sing </label><br><br>
        图像：<input type="file" name="image"> <br><br>
        生日：<input type="date" name="birthday"><br><br>
        时间：<input type="time" name="time"><br><br>
        日期时间：<input type="datetime-local" name="datetime"><br><br>
        邮箱：<input type="email" name="email"><br><br>
        年龄：<input type="number" name="age"><br><br>
        学历：<select name="degree" id="">
            <option value="1">大专</option>
            <option value="2">本科</option>
            <option value="3">硕士</option>
            <option value="4">博士</option>
        </select>   <br><br>
        描述：<textarea name="description" id="" cols="30" rows="10"></textarea>    <br>
        <input type="hidden" name="id" value="1">

        <!-- 表单常见按钮 -->
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="按钮">
        <br>
     </form>
</body>
</html>

posted @ 2026-01-13 15:58 狂风将军阅读(0) 评论(0) 收藏举报

刷新页面返回顶部

gyg9006

01. Web前端之Html&CSS

初识Web前端

Web标准

HTML&&CSS

展示标题，使用展示图片，使用

HTML快速入门

VSCode安装使用

下载好以后，推荐安装的插件有：Auto CloseTag、Auto Rename Tag、Chinese Language、File Utils、HTML CSS Support、IntelliJ IDEA Keybindings、Live Server、Mithril Emment、open in browser、Path Intellisense、Trae、Vue3-snippets。

常见标签&样式

数据展示标签&样式

新浪新闻-标题样式

新浪新闻-功能完善

新浪新闻-正文排版

数据展示标签&样式

新浪新闻-页面布局

表格标签

表单标签

表单标签-表单项

公告

gyg9006

01. Web前端之Html&CSS

初识Web前端

Web标准

HTML&&CSS

展示标题，使用展示图片，使用展示视频。

HTML快速入门

VSCode安装使用

下载好以后，推荐安装的插件有：Auto CloseTag、Auto Rename Tag、Chinese Language、File Utils、HTML CSS Support、IntelliJ IDEA Keybindings、Live Server、Mithril Emment、open in browser、Path Intellisense、Trae、Vue3-snippets。

常见标签&样式

数据展示标签&样式

新浪新闻-标题样式

新浪新闻-功能完善

新浪新闻-正文排版

数据展示标签&样式

新浪新闻-页面布局

表格标签

表单标签

表单标签-表单项

公告

展示标题，使用展示图片，使用