课程学习路线，重点在后端。
学习可以掌握能力
Web工作流程,
不同的浏览器，内核不同，对于相同的前端代码解析的效果会存在差异。
Web标准
HTML：负责网页的结构。
CSS：负责网页的表现。
JS：负责网页的行为。
HTML、CSS
快速入门
在文件夹中新建一个后缀为html的文本文件，输入以下代码，就能在浏览器打开。
包含head和body两部分。
<html>
<head>
<title>HTML 快速入门</title>
</head>
<body>
<h1>Hello HTML</h1>
<img src="1.jpg" />
</body>
</html>注意：标签可以大写也可以小写。
图片中的引号可以是单引号也可以是双引号。
HTML语法松散。
安装VS Code
虽然Java语言现在通用的是IDEA，但是vscode作为优秀的前端开发工具，我们还是使用它。
安装完成后，使用以下插件。这是一些前端开发工具。
一如既往，推荐大家安装这个。
基本标签&样式
以新浪新闻为例，一个网页包括标题和正文。
标题包括标题排版、标题样式、超链接
正文包括
首先是标题
在vscode输入一个感叹号就可以快速生成html的基础格式
<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 字符集为UTF-8 -->
<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>Document</title>
</head>
<body>
</body>
</html>随后稍稍修改
<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 字符集为UTF-8 -->
<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>Document</title>
</head>
<body>
<!--
img标签：
src: 图片资源路径
width: 宽度（px，像素；%，占父元素宽度的百分比也就是body的宽度）
height: 高度
路径书写方式：
绝对路径：
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">
相对路径：
./ : 当前目录，./ 可以省略的
../ : 上一级目录
-->
<img src = img/news_logo.png width="100" height="100"> 新浪 > 正文
<h1>新闻题目</h1>
<hr>
2024.9.12
<hr>
</body>
</html>
运行出来这个样子，丑丑的，把图片后边的宽度和高度删掉就好了。
明天再修补。
标签：网页,JavaWeb,可以,正文,标题,HTML,前端 From： https://blog.51cto.com/u_16382144/11993599