本文介绍了JavaWeb技术的基础概念，涵盖了前端开发（HTML、CSS、Vue、Nginx）和后端开发（Maven、SpringBoot、MySQL、Mybatis）的学习路线。重点讲解了网页组成、HTML/CSS基础、Web标准、浏览器解析、以及div和span在页面布局中的应用。
JavaWeb
web是指Internet的图形、多媒体部分。万维网（World Wide web）简称Web。Web由众多Web页组成。要浏览Web，可以使用Web浏览器的程序。
JavaWeb是指由Java语言开发出可以在万维网上访问浏览的程序。
web通过一系列的通信与Java交互，java是你的后台，进行逻辑处理，中间层与数据交互，web显示出来给用户看
就好像你买东西付款，就是你能看到的钱——web，收钱和找零钱的手——中间层，计算找零多少的大脑——java后台。
学习路线：
前端web开发：
- HTML、CSS、JavaScript
- Vue、Element、Nginx
后端web开发：
- Maven
- SpringBoot Web基础
- MySQL
- SpringBoot Mybatis
- SpringBoot Web开发
- SpringBoot Web进阶
初始web前端
网页由哪些部分组成：文字、图片、音频、视频、超链接...
我们看到的网页，背后的本质就是程序员写的前端代码
前端的代码是如何转换成用户眼中的网页：
- 通过浏览器转化（解析和渲染）成用户看到的网页
- 浏览器中对代码进行解析渲染的部分，称为浏览器内核
tip：不同的浏览器，内核不同，对于相同的前端代码解析的效果会存在差异
Web标准
Web标准也称为网页标准，有一系列的标准组成，大部分由W3C（World Wide Consortium，万维网联盟）负责制定
三个组成部分：
- HTML：负责网页的结构（页面元素和内容）
- CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）
- JavaScript：负责网页的行为（交互效果）
HTML、CSS
什么是HTML、CSS？
HTML（HyperText Markup Language）：超文本标记语言
- 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
- 标记语言：由标签构成的语言
- HTML标签都是预定义好的。例如<a>展示超链接，使用<img>展示图片，<video>展示视频
- HTML代码直接在浏览器中运行，HTML标签由浏览器解析
CSS（Cascading Style Sheet)：表叠样式表，用于控制页面的样式（表现）
<h1 style="color: red">HTML入门</h1>
<img src="1.jpg">HTML快速入门
- 新建文本文件
- 编写HTML结构标签
- 在<body>中编写内容
<html>
<head>
<title>HTML快速入门</title>
</head>
<body>
<h1>Hello HTML</h1>
<img src="1.jpg"/>
</body>
</html>特点：
- HTML标签不区分大小写
- HTML标签属性值单双引号都可以
- HTML语法松散
基础标签&样式
- 标题排本
- 标题样式
- 超链接
标题排版
图片标签：<img>
- src:指定图像的url（绝对路径 / 相对路径）
- width：图像的宽度（像素 / 相对于父元素的百分比）
- height：图像的高度（像素 / 相对于父元素的百分比）
标题标签：<h1> - <h6>
水平线标签：<hr>
<!-- 指定文件类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 字符集为UTF-8 -->
<meta charset="UTF-8">
<!-- 设置浏览器兼容性 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>This is a title!</title>
</head>
<body>
<!--
img标签:
src:图片资源路径
width:宽度(px,像素 ; % , 相对于父元素的百分比)
height:高度
路径书写方式:
绝对路径:
1.绝对磁盘路径:"C:\Users\31114\Pictures\Screenshots\屏幕截图 2023-09-02 223259.png"
<img src="C:\Users\31114\Pictures\Screenshots\屏幕截图 2023-09-02 223259.png">
2.绝对网络路径：互联网上的图片
相对路径:"../img/屏幕截图 2023-09-02 223259.png"
./ : 当前目录，(./可以省略)
../ : 上一级目录
-->
<img src="../img/屏幕截图 2023-09-02 223259.png">
<h1>小哆啦来冒险</h1> <!-- 一级标题 -->
<hr> <!-- 水平分界线 -->
第一季
<hr>
</body>
</html>
标题样式
控制标题字体的颜色，引入CSS样式控制。
CSS引入方式：
1.行内样式：写在标签的style属性中（不推荐）
<h1 style="xxx:xxx; xxx:xxx;">小哆啦冒险记</h1>2.内嵌样式：写在style标签中，（可以写在页面任何位置，但通常约定写在head中）
<style>
h1 {
xxx:xxx;
xxx:xxx;
}
</style>3.外联样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入)
<link rel="stylesheet" href="./css/test.css">代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>This is a title!</title>
<!-- 方式二：内嵌样式 -->
<!-- <style>
h1 {
color : brown;
}
</style> -->
<!-- 方式三：外联样式 -->
<link rel="stylesheet" href="./css/tset.css">
</head>
<body>
<img src="../img/屏幕截图 2023-09-02 223259.png">
<!-- 方式一：行内样式 -->
<!-- <h1 style="color:brown; ">小哆啦来冒险</h1> -->
<h1>小哆啦来冒险</h1>
<hr>
第一季
<hr>
</body>
</html>
若想要颜色更细致，可采用其他颜色表示形式：
| 表示方式 | 表示含义 | 取值 |
| 关键字 | 预定义的颜色名 | red、green、blue... |
| rgb表示法 | 红绿蓝三原色，每项取值：0-255 | rgb(0,0,0)、rgb(255,255,255) |
| 十六进制表示法 | #开头，将数字转换为十六进制表示 | #000000、#ff0000、 #cccccc，简写：#000、 #ccc |
<style>
h1 {
color : rgb(255, 0, 0);
color : #ff0000 /* 红色 */
}
</style>CSS选择器：用来选取需要设置样式的元素（标签）
1.元素选择器
元素名称{
color:red;
}
h1{
color:red;
}
<h1> Hello CSS </h1>2.id选择器
#id属性值{
color:red;
}
#hid{
color:red;
}
<h1 id="hid"> CSS id Selector</h1>3.类选择器
.class属性值{
color:red;
}
.cls{
color:red;
}
<h1 class="cls"> CSS class Selector </h1>代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>This is a title!</title>
<style>
h1{
color:brown;
}
span{
color:darkcyan;
}
.cls{
color:chocolate;
}
#hid{
color:darkcyan;
font-size: 12px;
}
</style>
</head>
<body>
<img src="../img/屏幕截图 2023-09-02 223259.png">
<h1>小哆啦来冒险</h1>
<hr>
<span class="cls">第一季</span> <span id="hid">第一集</span>
<hr>
</body>
</html>
优先级：ID选择器>类选择器>元素选择器
超链接
标签：
<a href="..." target="...">小哆啦</a>属性:
- href:指定资源访问的url
- target:指定在何处打开资源链接
- _self:默认值，在当前页面打开
- _blank:在空白页面打开
代码演示
<img src="../img/Dora.png" width="50px"> <a href="https://dora-world.com/" target=""_self>哆啦记</a> > 小哆啦来冒险
再调整一下超链接标签的颜色
a {
color:aqua;
}
如何除去超链接标签的下划线呢
a{
color:aqua;
text-decoration: none
}
正文
正文排版
视频标签：<video>
- src：规定视频的url
- controls：显示播放控件
- width：播放器的宽度
- height：播放器的高度
音频标签：<audio>
- src：规定音频的url
- controls：显示播放控件
段落标签：<p>
文本加粗标签：<b> / <strong>
<video src="../video/Dora.mp4" controls></video>代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>This is a title!</title>
<style>
h1 {
color:brown;
}
.cls{
color:chocolate;
}
#hid{
color:darkcyan;
font-size: 12px;
}
a {
color:aqua;
text-decoration: none;
}
p {
text-indent: 35px; /* 设置首行缩进 */
}
</style>
</head>
<body>
<img src="../img/Dora.png" width="50px"> <a href="https://dora-world.com/" target=""_self>哆啦记</a> > 小哆啦来冒险
<h1>小哆啦来冒险</h1>
<hr>
<span class="cls">第一季</span> <span id="hid">第一集</span>
<hr>
<video src="../video/Dora.mp4" controls width="700px"></video>
<p><b>小哆啦来冒险第一季正式开幕了！</b></p>
</body>
</html>效果展示：x
页面布局
盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
布局标签：实际开发网页中，会大量使用div和span这两个没有语义的布局标签
标签：<div> <span>
特点：
1.div标签：
- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（height、width）
2.span标签
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高（width、height）
扫一扫
3615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
