vscode快捷键整理:
https://zhuanlan.zhihu.com/p/44044896
-
光标移动到首行:Home
-
光标移动到行尾:End
-
光标移动到文件结尾:Ctrl+End
-
光标移动到文件开头:Ctrl+Home
-
选择当前光标位置到行尾:Shift+End
-
同时选中所有匹配的内容:Ctrl+Shift+L
-
回退上一个光标操作:Ctrl+U
P1 导学
课程特色:
-
前后端分离,接口文档
-
前端Vue脚手架工程化前端项目
-
后端spring boot高效学习SSM
-
企业开发模式,需求分析-表结构设计-接口文档-功能实现-测试
掌握:
-
数据表设计、操作能力
-
主流前后端设计开发模式,接口文档管理平台YAPI
-
接口开发能力
-
常见web开发解决方案,文件存储、登录认证
P2 Web开发介绍
了解web网站的工作流程:
浏览器中内置解析前端代码的解析引擎,从而展示出样式
了解web网站的开发模式:
-
混合开发
-
前后端分离
P3 web前端开发
前端代码经过浏览器转化(解析和渲染,浏览器内核)得到网页。
不同浏览器内核不同解析出前端代码可能存在差异。
web标准:
-
HTML
-
CSS
-
JS
了解:
-
HTML、CSS
-
JS、Vue
-
异步交互Ajax、Axios,ElementUI,前端部署Nginx
P4 HTML
HTML超文本标记语言
CSS层叠样式表
<html>
<head>
<title>HTML 快速入门</title>
</head>
<body>
<h1>Hello HTML</h1>
<img src="1.jpg"/>
</body>
</html>
P5 VSCode
csdn上面上传了vscode安装文档,以便查看。
安装完vscode,打开安装以下插件:
-
简体中文
-
code spell checker
-
HTML CSS Support
-
……
P6 HTML实现标题-排版
在.html文件中输入!生成html模板,
添加注释ctrl + /,
alt+B默认浏览器打开
ctrl+s保存
推荐使用相对路径
ctrl+shift+I打开开发者工具
img标签的属性:
-
src,img标签路径指定方式,绝对路径(绝对磁盘路径、绝对网络路径)和相对路径(./当前目录,…/上一级目录),
-
width,px:像素,%:相对于父元素的百分比
-
height,一般宽高设置一个,另外一个等比例缩放
P7 HTML实现标题-样式1
使用CSS进行样式控制
css引入方式:
-
行内样式(不推荐)
-
内嵌样式(使用style标签,一般写在head中)
-
外联样式(写在一个单独的.css文件中,使用link进行指定)
<link rel="stylesheet" href="./css/news.css">
颜色表示形式:
-
关键字
-
RGB表示,rgb(0,0,0)
-
十六进制表示,#000000
拾色器:google浏览器插件live color picker
P8 HTML实现标题-样式2
没有语义特性使用span标签
css选择器,选择需要设置样式的元素标签:
-
元素选择器,根据标签名字选择
-
id选择器,
#id属性值
-
类选择器,
.class属性值
id选择器优先级>类选择器>元素选择器
P9HTML实现标题-超链接
超链接<a href="" target="">
标签
属性:
-
href
,指定资源访问Url -
target
,指定在何处打开资源链接,*self
默认值在当前页打开,_blank
*在空白页打开
使用css样式更改超链接的效果
/* 元素选择器 */
a {
color:black;
text-decoration: none; /* 设置文本为标准文本*/
}
P10HTML实现正文-排版
视频标签:<video>
-
src
,视频Url -
controls
,显示播放控件,如果便签名和属性名一样,可以直接写一个 -
width,height
,播放器宽高
音频标签:<audio>
段落标签:<p>
文本加粗标签:<b> / <strong>
换行<br>
段落首行缩进使用css样式
text-align
设置文本对齐方式
P11HTML实现正文-布局
盒子模型:
-
内容区域content
-
内边距区域padding
-
边框区域border
-
外边距区域margin
布局标签,使用div
和span
这两个没有语义的布局标签
div
:一行只显示一个,宽度默认父元素的宽度,高度由内容撑开,可设置宽高
span
:一行可多个,宽高默认由内容撑开,不可设置宽高
版面内容位于中间,称为版面居中
P12HTML表格标签
下面是一个案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
<style>
td {
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> <img src="img/huawei.jpg" width="100px"></td>
<td> 华为</td>
<td> 华为技术有限公司</td>
</tr>
<tr>
<td>2</td>
<td><img src="img/alibaba.jpg" width="100px"></td>
<td>阿里</td>
<td>阿里巴巴集团控股有限公司</td>
</tr>
</table>
</body>
</html>
P13HTML表单标签
场景,在网页中主要负责数据采集功能,如注册登录等,
标签<form>
,将采集数据保存提交到服务端
表单项,不同类型的input元素、下拉列表、文本域等。
-
<input>
-
<select>
下拉列表 -
<textarea>
文本域
form
属性:
-
action
,规定当提交表单时何时向何处发送表单数据,url。如果不指定,默认提交到当前页面,后端开发可以写后端url地址。 -
method
,用于发送表单数据的方式,GET、POST-
get方式为默认方式,get方式请求会在url后面拼接表单数据,例如?username=&,不适合较大表单的提交,长度有限
-
post方式,表单数据在消息体中/请求体中传递,表单大小无限制的
-
P14HTML表单项标签
表单项:
<input>
表单项,通过type属性控制输入形式,https://www.w3school.com.cn/html/html_forms.asp
input的type属性有很多,如下图所示:
<select>
,下拉列表,<option>
定义列表项
<textarea>
,文本域
案例:了解各种表单项的属性,例如value值
注意单选框或复选框中选项使用<label>
标签进行包裹了,可以使得点击该区域即可聚焦到该属性,即时点击文字也能选中。
<body>
<form action="" method="post">
姓名:<input type="text" name="name"> <br><br>
密码:<input type="password" name="password"> <br><br>
性别:<label><input type="radio" name="gender" value="1"> 男</label>
<label><input type="radio" name="gender" value="2">女</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="singing">singing</label><br><br>
图像:<input type="file" name="image"> <br><br>
生日:<input type="date" name="birthday"> <br><br>
时间:<input type="time" name="time"><br><br>
日期时间:<input type="datetime-local" name="datetime"> <br><br>
邮箱:<input tabindex="email" name="email"> <br><br>
年龄:<input type="number" name="age"> <br><br>
学历:<select name="degree">
<option value="">---------请选择-------</option>
<option value="1">大专 </option>
<option value="2">本科 </option>
<option value="3">硕士 </option>
<option value="4">博士 </option>
</select><br><br>
<!-- cols控制一行可以输入多少字符,rows代表可输入多少行-->
描述:<textarea name="description" cols="30" rows="10"></textarea> <br><br>
<!-- 表单常见按钮 -->
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交"> <br>
</form>
</body>
</html>