2024/9/16
DAY1：前言
属于前端内容，看懂即可
一、课程收获：
（一）掌握数据库表的设计、操作
1.数据库单表、多表的设计能力
2.数据的操作能力
3.基本优化能力
（二）掌握主流的前后端分离开发模式
1.前后端分离开发模式
2.接口文档
3.接口测试、联调测试
（三）掌握Web开发核心知识、接口开发能力
1.主流Web开发的核心知识
2.根据（原型+需求+接口文档开发接口的能力）
（四）常见的Web开发的解决方案
1.文件存储解决方案
2.登录认证的解决方案
二、Web网站的开发模式
前后分离开发
浏览器>（请求与相应）>前端服务器（前端程序）>后端服务器（java程序）>数据库服务器
三、Web开发课程安排
（一）前端Web开发：
HTML、CSS、Javascript
Vue、Element、Nginx
（二）后端Web开发
Maven
SpringBoot Web基础篇
MySQL
SpringBoot Mybatis
SpringBoot Web开发篇
SpringBoot Web进阶篇
四、初识Web前端
（一）网页
网页由文字、图片、音频、视频、超链接。。。
本质上是前端代码，通过浏览器转化（解析和渲染）成用户看到的网页。浏览器中对代码进行解析渲染的部分，成为浏览器内核。不同的浏览器内核不同，对于相同前端代码解析的效果会存在差异。
（二）Web标准
也称为网页标准，由一系列的标准组成，大部分由W3C负责制定。
三个组成部分：
HTML：负责网页的结构（页面元素与内容）
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）
Javascript：负责网页的行为（交互效果）
详细：
HTML：超文本标记语言
超文本，即超过了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
标记语言，由标签构成的语言。HTML标签都是预定义好了的，例如<a>表示超链接，<img>展示图片，<video>展示视频；HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
CSS:叠层样式表，用于控制页面的样式（表现）。
五、案例
（一）网站
w3schools.com.cn
（二）HTML快速入门
1.新建文本文件（后缀.html）
2.文本文件右键打开方式>进入编写
3.在<body>中填写内容
特点：
1.HTML标签不区分大小写
2.HTML标签属性值单双引号都可以
3.HTML语法松散
六、HTML-新浪新闻
(一)实现标题
1.标题排版（均属body部分）
(1)图片标签：<img>
src：指定图像的url（绝对路径 / 相对路径）
width：图像的宽度（像素 / 相对父元素的百分比）
height：图像的高度（像素 / 相对父元素的百分比）
绝对路径：绝对磁盘路径（D：/xxxx）、绝对网络路径（https：//xxxx）
相对路径：从当前文件开始查找。（./：当前目录，../：上级目录）
（2）标题标签：<h1> - <h6>
（3）水平线标签：<hr>：表示一个一个的段落
（注意）·vscode空白处右键>Open in default browser来打开书写网页
·打开网页后，右键>检查进行查看具体信息（或使用fn+F12）
(2)标题样式
1.CSS引入方式：
·行内样式：写在标签的style属性中（不推荐）
<h1 style = "...">
·内嵌样式：写在style标签中（可以写在页面任意位置，通常在head标签中）
<style>...</style>
·外联样式：写在单独的.css文件中（需要通过link标签在网页中引入）
xxx.css <link href = "...">
2.颜色表示方式
·关键字：预定义的颜色名（red、green...）
·rgb表示发：rgb（255，0，0）、rgb（134，100，89）
·十六进制：#ff0000、#ccc
3.颜色属性
color：设置文本内容的颜色
4.<span>标签
(1)<span>是一个在开发网页时大量会用到的没有语义的布局标签。
(2)特点：一行可以显示多个（组合行内元素），宽度和高度默认有内容撑开。
5.CSS选择器
用来选取需要设置样式的元素（标签）
·元素选择器：h1{color：red；}
·id选择器：#hid{color：red；}
·类选择器：.cls{color：red；}
6.CSS属性
·color：设置文本的颜色
·font-size：字体大小（注意：记得加px）
7.超链接
(1)标签：<a>
(2)属性：
href：指定资源访问的url
target：指定在何处打开资源链接
_self：默认值，在当前页面打开
_blank：在空白页面打开
8.CSS属性
text-decoration：规定添加到文本的修饰，none表示定义标准的文本。
color：定义文本的颜色。
(二)正文排版
1.音频、视频标签
<audio> <video>
·src：规定音频/视频的url
·controls：显示播放控件
·width：播放器的宽度
·height:播放器的高度
2.换行、段落标签
换行：<br>；段落：<p>
3.文本加粗标签
<b> <strong>
4.CSS样式
line-height：设置行高
text-indent：定义第一个行内容的缩进
text-align：规定元素中的文本的水平对齐方式
5.注意
在HTML中，无论输入多少个空格，只会显示一个。可以使用空格占位符： ；
6.页面布局
(1)CSS盒子模型
组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）
页面中所有的元素（标签），都可以看作是一个盒子，由盒子将页面中的元素含在一个矩形框中，通过盒子的视角更方便的进行页面布局。
·布局标签：实际开发网页中，会频繁使用div和span两个没有语义的布局标签。
特点：
div标签：
·一行只显示一个（独占一行）
·宽度默认是父元素的宽度、高度默认由内容撑开
·可以设置宽高（width、height）
span标签：
·一行可以显示多个
·宽度和高度默认由内容撑开
·不可以设置宽高（width、height）
(2)CSS属性
·width：设置宽度
·height：设置高度
·border：设置边框的属性，如1px solid #000；
·padding：内边距
·margin：外边距
注意：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上 -位置，如：padding-top、padding-left、padding-right...
(3)版心居中
(三)表格、表单标签
1.表格标签
场景：在网页中以表格（行、列）形式整齐展示数据，如班级表。
<table>：定义表格，可包裹多个<tr>
·border：规定表格边框的宽度
·width：规定表格的宽度
·cellspacing：规定单元之间的空间
<tr>：定义表格中的行，一个<tr>表示一行，可以包裹多个<td>
<th>：表示表头单元格，具有加粗居中效果
<td>：表示普通单元格
2.表单标签
场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。
(1)表单标签：<form>
(2)表单项：不同类型的input元素、下拉列表、文本域等。
<input>：定义表单项，通过type属性控制输入形式
<select>：定义下拉列表
<textarea>：定义文本域
(3)表单属性
·action：表单数据提交的url地址
·method:表单的提交方式
·get:表单数据拼接在url后面，？username=java，大小没有限制
·post：表单数据在请求体中携带，大小没有限制
注意：表单项必须有name属性才可以提交
3.表单项
扫一扫
1005
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
