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

文章目录

一、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

设置文本内容的颜色

标签

<span>是一个在开发网页时大量会用到的没有语义的布局标签

特点

一行可以显示多个(组合行内元素),宽度和高度默认由内容撑开

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)超链接

标签
<a bref="…" target="…">央视网</a>
属性
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)文本域

<textarea>

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>