Document

VS Code的下载和安装，以及HTML和CSS

2024-05-03
dfer
273
css html vscode 笔记 CSDN

文章目录

一、web开发介绍
二、web前端开发
三、HTML和CSS
四、VS Code开发工具
- 插件安装
- 建议
五、基础标签&样式
六、表格、表单标签

一、web开发介绍

1.web是什么

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

2.网站程序组成

1、网页程序，也即前端程序，将数据以好看的样式呈现出来。运行在前端服务器
2、数据在数据库程序（也即数据库服务器）中存储和管理
3、Java程序，也即后端程序，主要负责数据的逻辑处理，运行在后端服务区

3.前后端分离开发

打开浏览器，输入域名，敲回车，浏览器会根据请求的域名请求对应的前端服务器，前端服务器接收到请求之后，会把对应的前端代码返回给浏览器，浏览器也是一个程序，内置了解析代码的解析引擎，浏览器接收到前端代码以后，自动解析前端代码，从而展现出对应的页面样式（只有框架），在前端代码中都会指定去哪获取数据，浏览器解析到前端代码中数据的获取路径，会根据该获取路径，访问部署在后端程序的Java程序，后端程序继续访问数据库，数据获取之后，后端程序再将数据返回给浏览器，浏览器获取到数据之后，将数据填充到空架子的前端页面当中，从而形成完整的页面，呈现给用户。

4.混合开发

浏览器发起请求到服务器后，服务器会将数据以及前端代码一并返回给浏览器，浏览器进行解析和展示

5.前端web开发

前端网页开发相关技术：HTML、CSS、JavaScript
基于JavaScript封装的高级技术：Vue、Element
前端程序部署的服务器：Nginx

6.后端web开发

Java项目的构建工具：Maven
SpringBoot Web基础篇
MySQL
通过Java程序操作数据库的技术：Spring Boot Mybatis
SpringBoot web开发篇
SpringBoot web进阶篇

二、web前端开发

1.网页由哪些部分组成？

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

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

程序员写的前端代码

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

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

4.web标准

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

三、HTML和CSS

1.什么是HTML？

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

2.什么是CSS？

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

3.HTML快速入门

新建文本文件，后缀名改为.html
编写HTML结构标签
在<body >中填写内容

4.HTML语法特点

（1）HTML当中的标签，不区分大小写

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

（2）HTML属性值单双引号均可

<html>
	<head>
		<title>HTML快速入门</title>
	</head>
	<body>
		<h1>Hello HTML</h1>
		<img src=‘1.jpg’>
	</body>
</html>

（3）HTML的语法松散
直接删掉后面的</html>对页面的展示没有影响，但是在编写HTML的程序的时候，要严谨！

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

四、VS Code开发工具

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

插件安装

1.Chinese(Simplified)Language Pack
2.Code Spell Checker
3.HTML CSS Support
4.JavaScript(ES6) code snippets
5.Mithril Emmet
6.Path Intellisense
7.Vue 3 Snippets
8.VueHelper
9.Auto Close Tag
10.Auto Rename Tag
11.Beautify
12.Bracket Pair Colorizer
13.open in browser
14.Vetur
15.IntelliJ IDEA Keybindings

建议

安装与开发相关的软件，尽量安装在一个没有中文，不带空格的目录下。

五、基础标签&样式

1.新浪新闻-标题

（1）标题排版

VS Code快捷键
一键生成标签：!（注意是英文的+ 回车
注释：Ctrl + Shift + /
生成图片标签：img + 回车

标题标签

…

（h1～h6重要程度依次降低）
注意：HTML标签都是预定好的，不能自己随意定义

图片标签

src：指定图像的url（图片资源路径）

绝对路径

绝对磁盘路径

右键 -> 属性 -> 安全 ->对象名称 -> 获取到绝对磁盘路径：D:/xxxx

打开浏览器：右键 -> Open In Default Browser 或 Alt + B

绝对网络路径

右键点击图片 -> 在新标签页中打开链接 -> 右键点击logo -> 在新标签页中打开图片 -> 获取到绝对网络路径：https://xxxx

要保证在互联网上有这张图片，并且访问时要联网

相对路径（推荐）

./：当前目录（可省略）
…/：上一级目录

操作完记得保存

width

宽度（px：像素/%：相对于父元素的百分比）

height

高度（px：像素/%：相对于父元素的百分比）

空白区域右键 -> 检查 -> 箭头 -> 鼠标放在图片上

同时设置高度和宽度，就会按照指定的高度和宽度铺满这个区域，可能会变形。所以一般设置高度和宽度时，只设置其中一个，那么就会按照原来的比例等比例缩放，不会变形。

水平线标签

<hr>水平分割线

（2）标题样式

CSS引入方式

行内样式（不推荐）

写在标签的style属性中，仅仅针对当前一个标签有效

<!--属性名:属性值-->
<h1> style="xxx:xxx;xxx:xxx;">

内嵌样式

写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）

<style>
<!--h1称之为选择器，针对与当前html文件中所有h1标签都有效-->
	h1{
		xxx:xxx;
		xxx:xxx;
	}
</style>

外联样式

写在一个单独的.css文件中（需要通过link标签在网页中引入）

<!--可以将css代码单独地定义在一个css文件中-->
h1 {
	xxx:xxx;
	xxx:xxx;
}

<!--在每个html页面当中，要想使用这段css样式，直接通过link标签来引入对应的css文件就可以（在head标签中）-->
<link rel="stylesheet" href="css/news.css">

VS Code 删除注释：Ctrl + Y

颜色表示

关键字

预定义的颜色名，如：red、green、blue…

rgb表示法

红绿蓝三原色，每项取值范围：0～255
如：rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)

十六进制

#开头，将数字转换成十六进制表示
如：#000000、#ff0000、#cccccc
简写：#000、#f00、#ccc

识色器

颜色属性

color

设置文本内容的颜色

CSS选择器

用来选取需要设置样式的元素（标签）

元素选择器

也叫标签选择器
根据标签的名字来选择要设置样式的元素

标签名{

}

如：

span{
		color：#968D92;
}

<span>2023年03月02日 21:50</span> <span>央视网</span>

类选择器

可以根据标签中所指定的class属性来选择对应的元素，在一个页面当中class属性是可以重复的

.class属性值{
	
}

如：

.cls{
		color：#968D92;
}

<span class="cls">2023年03月02日 21:50</span> <span>央视网</span>

id选择器

可以给某个标签指定相应的id属性，通过id来选择要设置CSS样式的元素，id在页面中不能重复

#id属性值{

}

#time{
		color：#968D92;
}

<span id = "time">2023年03月02日 21:50</span> <span>央视网</span>

优先级

id选择器 > 类选择器 > 元素选择器

CSS属性

font-size设置字体大小（记得加px）

#time{
		color：#968D92;
		font-size:12px;
}

<span id = "time">2023年03月02日 21:50</span> <span>央视网</span>

（3）超链接

属性

href：指定资源访问的url

target：指定在何处打开资源链接

_self：在当前页面打开（默认值）

<img src="img/news_logo.png"> <a href="https://gov.sina.com.cn/" target="_self">新浪政务</a>

_blank：在空白页面打开

<span id = "time">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank"> 央视网</a></span>

CSS属性

color：定义文本颜色

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

把超链接的文字设置为普通字体（超链接默认是蓝色加下划线的）

a {
	color:black;
	text-decoration:none;
}

2.新浪新闻-正文

（1）正文排版

视频标签<video>

src：规定视频的url

controls：显示播放控件

width：播放器的宽度

height：播放器的高度

<video src="video/1.mp4" controls="controls" width="950px"></video>

<!--如果属性名和属性值相同，可以简写成controls，如下-->
<video src="video/1.mp4" controls></video>

音频标签<audio>

src：规定音频的url

controls：显示播放控件

<audio src="audio/1.mp3" controls </audio>

换行标签<br>

一个<br>换一行

段落标签<p>

<p>
央视网消息（焦点访谈）：党的十八大以来，……
</p>

文本加粗标签<b>或<strong>

后者带有强调含义，如果仅仅是想加粗，用前者就可以

<p>
<b>央视网消息</b>（焦点访谈）：党的十八大以来，……
</p>

或者

<p>
<strong>央视网消息</strong>（焦点访谈）：党的十八大以来，……
</p>

CSS样式

text-indent：定义第一个行内容的缩进

line-height：设置行高

p{
	text-indent:50px;
	line-height:40px;
}

text-align：规定元素中的文本的水平对齐方式（center、left、right）

#plast{
	text-align:right;
}

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

注意

在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符：“&nbsp”;

（2）页面布局

CSS盒子模型

组成：内容（content）、内边距（padding）、边框（border）、外边框（margin）
margin并不包含在盒子之内，border的大小就是盒子的大小。

布局标签

一行只显示一个（独占一行）
宽度默认是父元素的宽度，高度由内容撑开
可以设置宽高

div{
	width:200px;
	height:200px;
	box-sizeing:border-box;
	/*此时宽度和高度是盒子的宽和高*/
	/*如果没有设置第三个属性，宽和高为div内容区域的宽高*/
	padding:20px 20px 20px 20px;/*上 右 下 左（顺时针）*/
	/*如果上右下左都是一样的，可以简写为：*/
	/*padding:20px;*/
	
	border:10px solid red;/*宽度 线条类型 颜色*/
	margin:30px;
}

<div>
	A A A A A A A A A A A A A A A A A A A
</div>

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高

版心居中

#center{
	width:65%;
	margin:0% 17.5% 0% 17.5%;
	/*简化：*/
	/*margin:0 auto;*/
	/*此时，第一个值代表上下（上和下一样）*/
	/*第二个值代表左边和右边（左和右一样）*/
	/*auto：浏览器自动计算外边距（左边一半右边一半）*/
}

注意

如果只需要设置一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如：padding-top、padding-left、padding-right

六、表格、表单标签

1.表格标签

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

定义表格

border属性：规定表格边框的宽度

width：规定表格的宽度（不规定默认由内容撑开）

cellspacing：规定单元格之间的空白

定义表格中的行，一个表示一行

表示表头单元格，具有加粗居中效果

表示普通单元格

代码实现

<!DOCTYPE html>/*声明当前文档的类型为html*/
<html lang="en">
<head>
    <meta charset="UTF-8">/*当前页面的字符集为UTF-8*/
    <meta name="viewport" content="width=device-width, initial-scale=1.0">/*设置浏览器的兼容性*/
    <title>表格</title>
</head>
<body>
	<table border="1px" cellspacing="0" width="600px">
		<tr>
			<th>序号</th>
			<th>品牌logo</th>
			<th>品牌名称</th>
			<th>企业名称</th>
		</tr>
		<tr>
			<td>1</td>
			<td>"img/hauwei.jpg"</td>
			<td>华为</td>
			<td>华为技术有限公司</td>
		</tr>
		<tr>
			<td>2</td>
			<td>"img/alibaba.jpg"</td>
			<td>阿里</td>
			<td>阿里巴巴集团控股有限公司</td>
		</tr>
	</table>
</body>
</html>

2.表单标签

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

属性

action：表单数据提交的url地址

不写为提交到当前页面

method：表单提交方式

get（默认值）

表单数据拼接在url后面，?username=Tom&age=12，大小有限制

post

表单数据在（消息体）请求体中携带，大小没有限制

Network -> Payload

注意

表单项必须有name属性才可以提交

3.表单项标签

（1）表单项

<input>通过type属性控制输入形式

type取值	描述
text	定义单行的输入字段（默认值）
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date/time/datetime-local	定义日期/时间/日期时间
number	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit/reset/button	定义提交按钮/重置按钮/可点击按钮

（2）定义下拉列表

<select>定义下拉列表，通过<option>定义列表项

（3）文本域

4.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form</title>
</head>
<body>
    <form action="" method ="post">
    姓名：<input type="text" name="name"><br>
    密码：<input type="password" name="password"><br>
    <!--label可以使得点到该区域附近也能选择，不用一定要点到圆圈内-->
    性别：<label><input type="radio" name="gender" value="1">男</label>
         <label><input type="radio" name="gender" value="2">女</label><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>
    头像：<input type="file" name="image"><br>
    生日：<input type="date" name="birthday"><br>
    时间：<input type="time" name="time"><br>
    日期时间：<input type="datetime-local" name="datetime"><br>
    邮箱：<input type="email" name="email"><br>
    年龄：<input type="number" name="age"><br>
    学历：<select name="degree">
            <option value="1">大专</option>
            <option value="2">本科</option>
            <option value="3">硕士</option>
            <option value="4">博士</option>
        </select><br>
    描述：<textarea name="description" id="" cols="30" rows="10"></textarea><br>
    <input type="hidden" name="id" value="1"><br>
    <input type="button" value="按钮">
    <input type="reset" value="重置">
    <input type="submit" value="提交">
    </form>
</body>
</html>

上一篇：完整的会议室预定系统

下一篇： PHP高校科研积分管