(以下内容全部来自上述课程及课件)
web开发介绍
1. 什么是web？
- Web：全球广域网，也称为万维网，能够通过浏览器访问的网站。
2. Web网站的工作流程
3. Web标准
Web标准 也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。由三个组成部分：
- HTML：负责网页的结构（页面元素和内容）。
- CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
- JavaScript：负责网页的行为（交互效果）
HTML&CSS
1. 什么是HTML、CSS？
HTML: HyperText Markup Language，超文本标记语言。
CSS: Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。
2. 快速入门
- 第一步:创建一个名为HTML的文件夹，然后找到课程资料中的 1.jpg 文件放到该目录下，此时HTML文件夹中内容如下：
- 第二步：创建一个文本文件，然后修改文件名为hello.html,注意文件的后缀是.html,如下图所示：
- 第三步：选中文件，鼠标右击，选择使用记事本打开文件，并且编写前端代码
首先html有固定的基本结构
html
<html>
<head>
<title>HTML 快速入门</title>
</head>
<body>
<h1>Hello HTML</h1>
<img src="1.jpg"/>
</body>
</html>
- 第四步：然后选中文件，鼠标右击，选择使用浏览器打开文件，浏览器呈现效果如下:
3. 开发工具
- Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑
器。VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、
Python、PHP、Go等）。VS Code 提供了非常强大的插件库，大大提高了开发效率。 - 官网：https://code.visualstudio.com
注意：需要注意的是，我们作为一名开发者，不应该将软件软装在包含中文名的路径中 。
好用的插件：
- Chinese（Simplified）Language Pack
- Code Spell Checker
- HTML CSS Support
- JavaScript (ES6) code snippets
- Mithril Emmet
- Path Intellisense
- Vue 3 Snippets
- VueHelper
- Auto Close Tag
- Auto Rename Tag
- Beautify
- Bracket Pair Colorizer
- open in browser
- Vetur
- IntelliJ lDEA Keybindings
4. 基础标签 & 样式
参考页面：新浪新闻
4.1 新浪新闻-标题实现
4.1.1 标题排版（HTML）
4.1.2 标签
- 图片 img
html
A. 图片标签: <img>
B. 常见属性:
src: 指定图像的url (可以指定 绝对路径 , 也可以指定 相对路径)
width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比)
height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)
备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩
放。
C. 路径书写方式:
绝对路径:
1. 绝对磁盘路径:
C:\Users\Administrator\Desktop\HTML\img\news_logo.png
<img src="C:\Users\Administrator\Desktop\HTML\img\news_logo.png">
2. 绝对网络路径:
https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
相对路径:
./ : 当前目录 , ./ 可以省略的
../: 上一级目录- 标题标签 h 系列
html
A. 标题标签: <h1> - <h6>
<h1>111111111111</h1>
<h2>111111111111</h2>
<h3>111111111111</h3>
<h4>111111111111</h4>
<h5>111111111111</h5>
<h6>111111111111</h6>
B. 效果 : h1为一级标题，字体也是最大的 ； h6为六级标题，字体是最小的。- 水平分页线标签
html
<hr>4.1.3 标题样式（CSS）
- 内联样式会出现大量的代码冗余，不方便后期的维护，所以不常用。
- 内部样式，通过定义css选择器，让样式作用于当前页面的指定的标签上。
- 外部样式，html和css实现了完全的分离，企业开发常用方式。
4.1.4 颜色表示
备注: 要想拾取某一个网页中的颜色，我们可以借助于浏览器的拾色器插件来完成。
CSS选择器
顾名思义：选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求
也是多种多样的，所以选择器有很多种，因为我们是做后台开发的，所以对于css选择器，我们只学习
最基本的3种。
选择器通用语法如下：
html
选择器名 {
css样式名：css样式值;
css样式名：css样式值;
}01. 元素（标签）选择器：
- 选择器的名字必须是标签的名字
- 作用：选择器中的样式会作用于所有同名的标签上
html
元素名称 {
css样式名:css样式值；
}例子如下：
html
div{
color: red;
}02. id选择器:
- 选择器的名字前面需要加上#
- 作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）
html
#id属性值 {
css样式名:css样式值；
}例子如下：
html
#did {
color: blue;
}03. 类选择器：
- 选择器的名字前面需要加上 .
- 作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个
html
.class属性值 {
css样式名:css样式值；
}例子如下：
html
.cls{
color: green;
}4.1.5 发布时间字体颜色
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[非政治]</title>
<style>
h1 {
color: #4D4F53;
}
/* 元素选择器 */
/* span {
color: red;
} */
/* 类选择器 */
/* .cls {
color: green;
} */
/* ID选择器 */
#time {
color: #968D92;
font-size: 13px; /* 设置字体大小 */
}
</style>
</head>
<body>
<img src="img/news_logo.png"> 新浪政务 > 正文
<h1>[非政治]</h1>
<hr>
<span class="cls" id="time">[非政治]</span>
<span class="cls">[非政治]</span>
<hr>
</body>
</html>上述我们还使用了一个css的属性 font-size , 用来设置字体的大小。 但是需要注意，在设置字体
的大小时，单位px不能省略，否则不生效。
4.1.6 超链接
- 非政治在新浪新闻的标题部分，当我们点击顶部的 "新浪政务"，浏览器将自动在当前窗口访问新浪政务
首页这个资源（http://gov.sina.com.cn/） - 非政治当我们点击新闻发布时间之后的 "央视网"，浏览器将会自动打开一个新的标签页，然后在新的标
签页中访问央视网中的该新闻资源 （https://news.cctv.com/2023/03/02/ARTIUCKFf9k
E9eXgYE46ugx3230302.shtml）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[非政治]</title>
<style>
h1 {
color: #4D4F53;
}
#time {
color: #968D92;
font-size: 13px; /* 设置字体大小 */
}
a {
color: black;
text-decoration: none; /* 设置文本为一个标准的文本 , 去除掉超链接 下面默认的下划线 */
}
</style>
</head>
<body>
<img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/"
target="_self">新浪政务</a> > 正文
<h1>[非政治]</h1>
<hr>
<span id="time">2023年03月02日 21:50</span>
<span>
<a
href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx323030
2.shtml" target="_blank">[非政治]</a>
</span>
<hr>
</body>
</html>浏览器打开此页面，我们可以看到最终效果（超链接的字体，以及默认的下划线，通过css样式已经调
整好了）：
4.2 新浪新闻-正文实现
4.2.1 排版
整个正文部分的排版，主要分为这么四个部分：
- 视频 (当前这种新闻页面,可能也会存在音频)
- 文字段落
- 字体加粗
前面的标签 b、i、u、s 就仅仅是实现加粗、倾斜、下划线、删除线的效果，是没有强调语义的。 而
后面的strong、em、ins、del在实现加粗、倾斜、下划线、删除线的效果的同时，还带有强调语义。
- 图片
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[非政治]</title>
<style>
h1 {
color: #4D4F53;
}
#time {
color: #968D92;
font-size: 13px; /* 设置字体大小 */
}
a {
color: black;
text-decoration: none; /* 设置文本为一个标准的文本 */
}
p {
text-indent: 35px; /* 设置首行缩进 */
line-height: 40px; /* 设置行高 */
}
#plast {
text-align: right; /* 对齐方式 */
}
</style>
</head>
<body>
<!-- 标题 -->
<img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/"
target="_self">[非政治]</a> > 正文
<h1>[非政治]</h1>
<hr>
<span id="time">2023年03月02日 21:50</span>
<span><a
href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx323030
2.shtml" target="_blank">[非政治]</a></span>
<hr>
<!-- 正文 -->
<!-- 视频 -->
<video src="video/1.mp4" controls width="950px"></video>
<!-- 音频 -->
<!-- <audio src="audio/1.mp3" controls></audio> -->
<p>
<strong>[非政治]</strong>[非政治]
</p>
<p> [非政治]
</p>
<img src="img/1.jpg">
<p> [非政治]
</p>
<img src="img/2.jpg">
<p> [非政治]
</p>
<p id="plast">
[非政治]
</p>
</body>
</html>在上述的正文排版实现中，还用到了几个CSS属性：
- text-indent: 设置段落的首行缩进
- line-height: 设置行高
- text-align: 设置对齐方式, 可取值为 left / center / right
- 在HTML页面中无论输入了多少个空格, 最多只会显示一个。 可以使用空格占位符
（ ；）来生成空格，如果需要多个空格，就使用多次占位符。- 那在HTML中，除了空格占位符以外，还有一些其他的占位符(了解, 只需要知道空格的占位
符写法即可)，如下：
4.2.2 页面布局
目前，新闻页面的基本排版，我们都已经完成了，但是，大家会看到，无论是标题部分，还是正文部
分，都是铺满了整个浏览器。 而我们再来看看新浪新闻的原始页面，我们会看到新闻网页内容都是居
中展示的，左边、右边都是一定的边距的。
那接下来呢，我们就需要按照这个效果，来完成页面布局。 而要想完成这样一个页面布局，我们就需
要介绍一下CSS中的盒子模型 。
盒子模型
- 盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个
矩形区域内，通过盒子的视角更方便的进行页面布局 - 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边
距区域（margin）
CSS盒子模型，其实和日常生活中的包装盒是非常类似的，就比如：
盒子的大小，其实就包括三个部分： border、padding、content，而margin外边距是不包括在盒
子之内的。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style>
div {
width: 200px; /* 宽度 */
height: 200px; /* 高度 */
box-sizing: border-box; /* 指定width height为盒子的高宽 */
background-color: aquamarine; /* 背景色 */
padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边
距都一行, 可以简写: padding: 20px;*/
border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距
都一行, 可以简写: margin: 30px; */
}
</style>
</head>
<body>
<div>
A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A
A A A A
</div>
</body>
</html>代码编写好了, 可以通过浏览器打开该页面, 通过开发者工具,我们就可以看到盒子的大小, 以及盒子
各个组成部分(内容、内边距、边框、外边距)：
我们也可以，通过浏览器的开发者工具，清晰的看到这个盒子，以及每一个部分的大小：
布局实现
在实现新闻页面的布局时，我们需要做两部操作：
- 第一步：需要将body中的新闻标题部分、正文部分使用一个 div 布局标签将其包裹起来，方便
通过css设置内容占用的宽度，比如：65%。 - 第二步：通过css为该div设置外边距，左右的外边距分别为：17.5%，上下外边距靠边展示即
可，为：0%。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[非政治]</title>
<style>
h1 {
color: #4D4F53;
}
#time {
color: #968D92;
font-size: 13px; /* 设置字体大小 */
}
a {
color: black;
text-decoration: none; /* 设置文本为一个标准的文本 */
}
p {
text-indent: 35px; /* 设置首行缩进 */
line-height: 40px; /* 设置行高 */
}
#plast {
text-align: right; /* 对齐方式 */
}
#center {
width: 65%;
/* margin: 0% 17.5% 0% 17.5% ; */ /* 外边距, 上 右 下 左 */
margin: 0 auto;
}
</style>
</head>
<body>
<div id="center">
<!-- 标题 -->
<img src="img/news_logo.png"> <a
href="http://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文
<h1>[非政治]</h1>
<hr>
<span id="time">2023年03月02日 21:50</span>
<span><a
href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx323030
2.shtml" target="_blank">[非政治]</a></span>
<hr>
<!-- 正文 -->
<!-- 视频 -->
<video src="video/1.mp4" controls width="950px"></video>
<!-- 音频 -->
<!-- <audio src="audio/1.mp3" controls></audio> -->
<p>
<strong>[非政治]</strong>[非政治]
</p>
<p> [非政治]
</p>
<img src="img/1.jpg">
<p> [非政治]
</p>
<img src="img/2.jpg">
<p> [非政治]
</p>
<p id="plast">
[非政治]
</p>
</div>
</body>
</html>浏览器打开此页面，最终效果如下：
5. 表格标签
场景：在网页中以表格（行、列）形式整齐展示数据，我们在一些管理类的系统中，会看到数据通常都
是以表格的形式呈现出来的，比如：班级表、学生表、课程表、成绩表等等。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-表格</title>
<style>
td {
text-align: center; /* 单元格内容居中展示 */
}
</style>
</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 src="img/huawei.jpg" width="100px"> </td>
<td>华为</td>
<td>华为技术有限公司</td>
</tr>
<tr>
<td>2</td>
<td> <img src="img/alibaba.jpg" width="100px"> </td>
<td>阿里</td>
<td>阿里巴巴集团控股有限公司</td>
</tr>
</table>
</body>
</html>打开浏览器，效果如下图所示：
整合表格使用 table 标签包裹 , 其中的每一行数据都是一个 tr , 每一行中的每一个单元格都是
一个 td , 而如果是表头单元格, 可以使用 th (具有加粗居中展示的效果)。
6. 表单标签
6.1 GET方式提交的表单
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-表单</title>
</head>
<body>
<!--
form表单属性:
action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
method: 表单的提交方式 .
get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值
post: 在消息体(请求体)中传递的, 参数大小无限制的.
-->
<form action="" method="get">
用户名: <input type="text" name="username">
年龄: <input type="text" name="age">
<input type="submit" value="提交">
</form>
</body>
</html>表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单
的数据在url后面提交到服务端，格式为：?username=Tom&age=12。
6.2 POST方式提交表单
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-表单</title>
</head>
<body>
<!--
form表单属性:
action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
method: 表单的提交方式 .
get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值
post: 在消息体(请求体)中传递的, 参数大小无限制的.
-->
<form action="" method="post">
用户名: <input type="text" name="username">
年龄: <input type="text" name="age">
<input type="submit" value="提交">
</form>
</body>
</html>表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单
的数据在url后面提交到服务端，格式为：?username=Tom&age=12。
表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name
属性。 否则，无法提交该表单项。
用户名: <input type="text" name="username">
7. 表单项
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
<option value="">----------- 请选择 ----------
</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select> <br><br>
描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br>
<input type="hidden" name="id" value="1">
<!-- 表单常见按钮 -->
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
<br>
</form>
</body>
</html>通过浏览器打开上述的表单项html文件，最终展示出的表单信息如下：
而对于input type="hidden"，是一个隐藏域，在表单中并不会显示出来，但是在提交表单的时候，
是会提交到服务端的。 接下来，我们就点击提交按钮，来提交当前表单，看看提交的数据：
8. 文档查阅
文档地址: https://www.w3school.com.cn/index.html
8.1 HTML文档查阅
以video标签为例:
8.2 CSS文档查阅
以padding属性为例:
