前言
Java后端技术点
StringUtils常用API
学习时笔记(Linux)
学习时笔记(Git)
学习时笔记(Docker)
学习时笔记(Vue2+3)
面试宝典
学习时笔记(JavaScript)
学习时笔记(JavaWeb)
1.初识前端
2.JavaScript-vue
3.Vue&Element
4.Maven-SpringBootWeb
5.SpringBootWeb请求响应
6.MySQL
7.MySQL查询
8.MySQL多表查询-MyBatis入门
9.MyBatis
10.springBoot-案例
11.springBoot-案例
12.springBootWeb 登录认证
13.SpringBoot AOP
14.SpringBoot原理
15.Maven进阶
学习时笔记(Java)
学习时笔记(Python)
1.HTML入门
编写简单html页面
- 新建文本，后缀改为.html
- 编写HTML结构标签
- 在种填写内容
<html> <head> <title>HTML入门</title> </head> <body> Hello HTML! </body> </html>
2.Vs Code开发工具
- Visual Studio Code(简称 VS Code) 是 Microsoft发布的一款代码编辑器
- VS Code 对前端代码有非常强大的支持，同时也可编译其他编程语言（C++、Java、Phthon...）
VS Code 提供了非常强大的插件库，提高了开发效率
2.1、插件安装
- Chinese(Simplified) Language Pack
- 改变界面为中文
- Code Spell Checker
- 拼写检查器
- HTML CSS Support
- 编写样式表的时候，自动补全功能，缩减编写时间
- JavaScript (ES6) code snippets
- 支持ES6语法提示
- Mithril Emmet
- 补全代码
- "Path" Intellisense
- 路径提示插件
- Vue 3 Snippets
- 开发中提供代码片段，语法高亮和格式化的插件
- VueHelper
- 代码提示插件
- Auto Close Tag
- 自动闭合HTML/XML标签
- Auto Rename Tag
- 自动完成另一侧标签的同步修改
- Beautify
- 格式化
- Bracket Pair Colorizer
- 给括号加上不同颜色，便于区分不同的区块
- open in browser
- 支持快捷键与鼠标右键快速在浏览器中打开html文件
- Vetur
- 语法高亮，智能提示，emmet，错误提示，格式化，自动补全
- File Utils
- 快捷的创建、复制、移动、重命名
- IntelliJ IDEA Keybindings
- 同步 IDEA 中的快捷键
3.基础标签&样式
3.1、新浪新闻-标题
3.1.1、标题排版
- 图片标签：img
- src:指定图像的url
- 绝对路径：
- 绝对磁盘路径：C:/....
- 绝对网络路径：https://....
- 相对路径
- ./：当前目录（也可省略）
- ../：上一级目录
- 绝对路径：
- width：宽度（px像素 || %相对于父元素的百分比）
- height:高度
- src:指定图像的url
- 标题标签：h1 —h6
- 水平线标签：hr
<!-- 该标签意为：文档类型为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>
</head>
<body>
<img src="http://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"/> 新浪政务>正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
2023年03月02日 21:50 央视网
<hr>
</body>
</html>
3.1.2、标题样式
CSS引入方式
- 行内样式：些在标签的style属性中（不推荐）
<h1 style="color:red">内容</h1>- 内嵌样式：写在style标签中（通常些在head标签中）
<style> h1 { color:red; } </style>- 外联样式：写在单独的.css文件中（通过link引入）
<link rel="stylesheet" href="css/文件名.css"/>颜色表达形式：
CSS选择器：用来选取需要设置样式的元素（标签）
- 元素选择器
元素名称 { color:red; }- id选择器
#id值 { color:red; }- 类选择器
.class值{ color:red; }
<!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:bulue;
} */
/* 属性选择器 */
/* .cls{
color:red;
} */
/* ID选择器 */
#time{
color: #968D92;
font-size:14px;
}
/* 优先级：ID>属性>元素 */
</style>
</head>
<body>
<img src="http://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"/> 新浪政务>正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
<span class="cls" id="time">2023年03月02日 21:50</span> <span>央视网</span>
<hr>
</body>
</html>
3.1.3、超链接
标签
<a href="..." target="...">内容</a>属性
- href：指定资源访问的url
- target：指定在何处打开资源链接
- _self：默认值，在当前页面打开
- _blank：在空白页面打开
- css属性：
- text_decoration：规定添加到文本的修饰，none表示定义标准的文本（无下划线）
<!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:14px;
}
a {
color:black;
text-decoration:none; /* 默认为文本（无下划线） */
}
</style>
</head>
<body>
<img src="http://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.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><a href="" target="_blank">央视网</a></span>
<hr>
<video src="video/1.mp4" controls width="750px"></video>
<!-- <audio src="audio/1.mp3" controls></audio> -->
</body>
</html>
3.2、新浪新闻-正文
3.2.1、正文排版
- 视频标签：video
- src:规定视频的url
- controls：显示播放控件（值为：controls）
- 音频标签：audio
- src:规定音频的url
- controls：显示播放控件
- 段落标签：
- 文本加粗标签：b/strong
- CSS样式
- line-height:设置行高
- text-indent:定义第一行内容缩进
- text-align:规定元素中的文本水平对齐方式【right,left,top,bottom】
- 空格占位符： 
<!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:14px;
}
a {
color:black;
text-decoration:none; /* 默认为文本（无下划线） */
}
p {
text-indent: 35px; /* 设置首行缩进 */
line-height: 40px; /* 设置字体行高 */
}
#right {
text-align:right; /* 对齐方式：left,right,center */
}
</style>
</head>
<body>
<img src="http://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.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><a href="" target="_blank">央视网</a></span>
<hr>
<video src="video/1.mp4" controls width="750px"></video>
<p><strong>央视网消息</strong>（焦点访谈）：党的十八大以来，以习近平同志为核心的党中央始终把解决粮食安全问题作为治国理政的头等大事，重农抓粮一系列政策举措有力有效，我国粮食产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？</p>
<p>人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。</p>
<img src="img/1.jpg"/>
<p>中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。在以习近平同志为核心的党中央坚强领导下，亿万中国人民辛勤耕耘、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“国之大者”，把中国人的饭碗牢牢端在自己手中，夯实中国式现代化基础。</p>
<p id="right">责任编辑：王树淼 SN242</p>
</body>
</html>
3.2.2、页面布局
- 盒子：
- 页面中所有的元素（标签），都可以看作是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
- 盒子模型组成：
- 内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)
- 布局标签：实际开发网页中，会大量频繁的使用div和span两个没有语义的局部标签
- div
- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高
- span
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
- CSS
- padding：内边距
- margin：外边距
- border：边框属性
<!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:14px;
}
a {
color:black;
text-decoration:none; /* 默认为文本（无下划线） */
}
p {
text-indent: 35px; /* 设置首行缩进 */
line-height: 40px; /* 设置字体行高 */
}
#right {
text-align:right; /* 对齐方式：left,right,center */
}
#center {
width:65%;
margin: 0px auto;/* margin: 上 下 左 右 */ /* margin:上下 左右 */
}
</style>
</head>
<body>
<div id="center">
<img src="http://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.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><a href="" target="_blank">央视网</a></span>
<hr>
<video src="video/1.mp4" controls width="750px"></video>
<p><strong>央视网消息</strong>（焦点访谈）：党的十八大以来，以习近平同志为核心的党中央始终把解决粮食安全问题作为治国理政的头等大事，重农抓粮一系列政策举措有力有效，我国粮食产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？</p>
<p>人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。</p>
<img src="img/1.jpg"/>
<p>中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。在以习近平同志为核心的党中央坚强领导下，亿万中国人民辛勤耕耘、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“国之大者”，把中国人的饭碗牢牢端在自己手中，夯实中国式现代化基础。</p>
<p id="right">责任编辑：王树淼 SN242</p>
</div>
</body>
</html>
4.表格、表单标签
4.1、表格标签
- 标签
<!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>Document</title>
</head>
<body>
<table border="1px" width="600px" cellspacing="0">
<tr>
<th>序号</th>
<th>品牌Logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr>
<td>1</td>
<td><img src="img/huawei.jpg"/></td>
<td>华为</td>
<td>华为技术有限公司</td>
</tr>
<tr>
<td>2</td>
<td><img src="img/alibaba.jpg"/></td>
<td>阿里</td>
<td>阿里巴巴集团控股有限公司</td>
</tr>
</table>
</body>
</html>
4.2、表单标签
- 标签：
- 表单项
- ：定义表单项，通过type属性控制输入形式
- select：定义下拉列表
- textarea:定义文本域
- 属性：
- action：规定当前提交表单时向何处发送数据,URL
- method：规定用于发送表单数据的方式。get、post
<!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>Document</title>
</head>
<body>
<form action="" method="post">
姓名：<input type="text" name="userName"/><br/><br/>
密码：<input type="password" name="password"/><br/><br/>
性别：
<label>
<input type="radio" value="男" name="sex"/>男
</label>
<label>
<input type="radio" value="女" name="sex"/>女
</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="file"/><br/><br/>
生日：<input type="date" name="date"/><br/><br/>
时间：<input type="time" name="time"/><br/><br/>
日期时间：<input type="datetime" name="dateTime"/><br/><br/>
邮箱：<input type="email" name="email"/><br/><br/>
年龄：<input type="number" name="age"/><br/><br/>
学历：
<select name="degree">
<option>请选择</option>
<option>大专</option>
<option>本科</option>
<option>硕士</option>
<option>博士</option>
</select>
<br/><br/>
描述：<textarea name="describe"></textarea>
<input type="hidden" name="id"/>
<br/><br/>
<input type="button" value="按钮"/>
<input type="reset" value="重置"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>