JavaWeb学习第一天
什么是web？
- Web：全球广域网 也叫万维网
Web网站的工作流程
首先在浏览器上输入一个域名之后 浏览器会将访问域名的请求传递给前端服务器中的前端程序 接着前端程序会将前端代码返回给浏览器 浏览器中的处理引擎会分析前端代码 并将前端代码中的url地址传递给后端服务器 后端服务器又会传递给数据库服务器并从中拿取数据 最后再返回给浏览器 由此一来 一个域名的基本网页框架和数据就都可以呈现在页面上了
前端程序和后端程序分别占用不同服务器运行的模式叫做前后端分离技术 早期还存在一种开发模式叫做混合开发 原理是将前端程序和后端程序放在一台服务器上开发
前端Web开发
-
HTML，CSS，JavaScript
-
Vue，Element，Nginx
Web标准
-
三个组成部分
-
HTML：负责网页结构和内容
-
CSS：负责网页表现和外观
-
JS：负责网页的动作和行为
-
HTML
-
HTML：超文本标记语言
-
超文本：超越了文本的限制，可以定义图片，音频，超链接
-
标记语言：由标签构成的语言
- HTML标签是预定义好的 eg：使用表示超链接
- HTML代码在浏览器中运行，HTML标签由浏览器解析
-
特点：
-
标签不区分大小写
-
属性值单双引号都可以
-
语法松散
-
CSS
- CSS：层叠样式表，用于控制页面样式
后端Web开发
-
Maven
-
SpringBoot Web基础
-
MySQL
-
SpringBoot Mybatis
-
SpringBoot Web开发
-
SpringBoot Web进阶
新浪新闻-标题-排版
<!-- 声明当前文档类型为html -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 声明当前页面字符集 -->
<meta charset="UTF-8">
<!-- 设置浏览器兼容性 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1</title>
</head>
<body>
<!-- img标签：
src：图片资源路径
width：宽度(px,像素/%,相对于父元素的百分比)
height：高度(px,像素/%,相对于父元素的百分比) -->
<!-- 路径书写方式：
绝对路径：
1 绝对磁盘路径：本地图片属性值里的磁盘路径
2 绝对网络路径：网站上图片的网址路径 要保证图片在网址上存在 且需要联网 -->
<!-- 相对路径：
./ ：当前目录，./可以省略的
../ : 上一级目录 -->
<!-- 图片标签 -->
<img src="https://search.sina.com.cn/images/logo_new_yan.png">新浪政务 > 正文
<!-- 标题标签h1-h6 -->
<h1>焦点访谈</h1>
<!-- 水平线标签 -->
<hr>
2023年03月02日 21:50 央视网
<hr>
</body>
</html>
新浪新闻-标题-样式
-
CSS引入方式：
-
行内样式：写在标签中的style属性中
-
内嵌样式：写在style标签中(可以写在页面任何位置 但通常约定写在head标签中)
-
外嵌样式：写在一个单独的.css文件中(需要通过link标签在网页中引入)
-
-
颜色表示方式
-
关键字：预定义颜色名
-
rgb表示法：红绿蓝三原色，每项取值范围：0-255
-
十六进制表示法：#开头，将数字转换成十六进制表示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈</title> <!-- 方式二：内嵌样式 --> <style> h1{ /* color: red; */ /* color:rgb(0, 0, 255); */ color: #4d4f53; } </style> <!-- 方式三：外联样式 --> <!-- <link rel="stylesheet" href="css/news.css"> --> </head> <body> <img src="https://search.sina.com.cn/images/logo_new_yan.png">新浪政务 > 正文 <!-- 方式一：行内样式 --> <!-- <h1 style="color: rgb(255, 0, 0);">焦点访谈：中国第七 新思想夯实大国粮仓</h1> --> <h1>焦点访谈</h1> <hr> 2023年03月02日 21:50 央视网 <hr> </body> </html>
-
-
css选择器：
-
元素选择器：根据元素名称设置样式
-
id选择器：根据id属性值设置样式
-
类选择器：根据class属性值设置样式
-
优先级：id选择器>类选择器>元素选择器
焦点访谈
-
新浪新闻-标题-超链接
-
超链接属性
-
href：指定资源访问的url
-
target：指定在何处打开资源链接
-
_self：默认值，在当前页面打开
-
_blank：在空白页面打开
-
-
CSS属性
-
text-decoration：规定添加到文本的修饰，none表示定义标准的文本
-
color：定义文本的颜色
-
···
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈</title>
<style>
h1{
color: #4d4f53;
}
#time{
color: #968d92;
font-size: 15px;
}
a{
color: black;
/* 设置文本为一个标准的文本 */
text-decoration: none;
}
</style>
</head>
<body>
<img src="https://search.sina.com.cn/images/logo_new_yan.png"> <a href="http://gov.sina.com.cn" target="_self"> 新浪政务</a> > 正文
<h1>焦点访谈</h1>
<hr>
<span class="cls" id="time">2023年03月02日 21:50</span> <span class="cls"> <a href="https://tv.cctv.com/">央视网</a></span>
<hr>
</body>
</html>
新浪新闻-正文-排版
-
视频标签
-
src：规定视频的url
-
controls：现实播放控件
-
width：播放器宽度
-
height：播放器高度
-
-
音频标签
-
src：规定视频的url
-
controls：现实播放控件
-
-
段落标签
-
文本加粗标签
-
注意
- 在html中无论输入多少个空格，只会显示一个，可以使用空格占位符  ；
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>焦点访谈</title> <style> h1{ color: #4d4f53; } #time{ color: #968d92; font-size: 15px; } a{ color: black; /* 设置文本为一个标准的文本 */ text-decoration: none; } p{ /* 首行缩进 */ text-indent: 35px; /* 设置行高 */ line-height: 40px; } #plast{ /* 规定元素中的文本水平对齐方式 */ text-align: right; } </style> </head> <body> <img src="https://search.sina.com.cn/images/logo_new_yan.png"> <a href="http://gov.sina.com.cn" target="_self"> 新浪政务</a> > 正文 <h1>焦点访谈</h1> <hr> <span class="cls" id="time">2023年03月02日 21:50</span> <span class="cls"> <a href="https://tv.cctv.com/">央视网</a></span> <hr> <!-- 正文 --> <video src="https://vodpub1.v.timewarn.com/20230302/7a9a8a5a_v2.mp4" controls width="950px"></video> <!-- 音频 --> <!-- <audio src="https://vodpub1.v.timewarn.com/20230302/7a9a8a5a_v2.mp4" controls></audio> --> <p> <strong>央视网消息</strong> （焦点访谈）： </p> <br> <p> 人勤春来早，春耕农事忙。 </p> <img src="https://n.sinaimg.cn/sinakd20230302ac/639/w1080h659/20230302/9d6d-5c6e8e4e6a6a9e6e3e8a9e6e3e6e8a9.jpg"> <p> 今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。 </p> <img src="https://n.sinaimg.cn/sinakd20230302ac/639/w1080h659/20230302/9d6d-5c6e8e4e6a6a9e6e3e8a9e6e3e6e8a9.jpg"> <p> aaa </p> <p id="plast"> 责任编辑 </p> </body> </html>
新浪新闻-正文-布局
-
盒子：页面中所有元素或标签，都可以看作是一个盒子，有盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
-
盒子模型组成：内容区域content，内边距区域padding，边框区域border，外边距区域margin
-
布局标签：实际开发网页中 会大量使用div和span两个没有语义的标签
-
特点
-
div标签
-
一行只显示一个
-
宽度默认是父元素的宽度 高度默认由内容展开
-
可以设置宽高
-
-
span标签
-
一行可以显示多个
-
宽高默认由内容展开
-
不可设置宽高
焦点访谈 -
-
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
text-align: center;
}
</style>
</head>
<body>
<table border="1px" cellspacing="0" width="600px">
<tr>
<th>序号</th>
<th>品牌</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
表单标签
-
场景：在网页中主页负责数据采集功能，如注册，登录等数据采集
-
标签：
-
表单项：不同类型的input元素，下拉列表，文本域等
-
：定义表单项，通过type属性控制输入形式
-
：定义下拉列表
- ：定义文本域
-
-
属性：
-
action：规定当提交表单时向何处发送表单数据，url
-
method：规定用于发送表单数据的方式，get，post
HTML表单 <form action="" method="get"> 用户名：<input type="text" name="username"> 年龄：<input type="text" name="age"> <input type="submit" value="提交"> </form>
-
74
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
