目录
个人笔记梳理---仅供参考
路线:html、css、js--ajax、axios--vue、element--前端工程化(vue脚手架)--maven--springBoot基础--springMVC基础--mysql--JDBCmybatis--web案例--会话跟踪技术--filter interceptor--AOP--springBoot原理
web网站的工作流程:浏览器--前端服务器--后端服务器--数据库服务器
前端web开发:html、css、JavaScript、vue、element、nginx
*后端web开发:maven、springboot web基础、mysql、springboot mybatis、springboot web开发、springboot web进阶
web标准三个组成部分:html--负责网页的结构(页面元素和内容)
css--负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)
JavaScript:负责网页的行为(交互效果)
html结构标签
<html>
<head>
<title>标题</title>
</head>
<boby>
</boby>
</html>
特点:html标签不区分大小写
html标签属性值单双引号都可以
html语法松散
·标题排版
图片标签:<img>
*src指定图像的url(绝对磁盘路径"D:\html\img\news_logo.png"
绝对网络路径https://img.alicdn.com/imgextra/i2/O1CN01S5Uq0k1FkUlCfPAmD_!!6000000000525-0-tps-660-660.jpg
相对路径:./:当前目录(./可以省略)../:上级目录
*width图像的宽度(px像素/相对于父元素的百分比%)
*height图像的高度(px像素/相对于父元素的百分比%)
标题标签:<h1>-<h6>
水平分割线:<hr>
·CSS 引入方式
*行内样式:写在标签的style属性中(不推荐)<hr style="xxx:xxx;xxx:xxx;>秘密</hr>
*内嵌样式:写在style标签中(可以写在页面任何位置,但通常约定写在head标签中)
<style>
h1{
xxx:xxx;
xxx:xxx;
}
</style>
*外链样式:写在一个单独的.css文件中(需要通过link标签在网页中引入)
h1{
xxx:xxx;
xxx:xxx;
}
<link rel="stylesheet" href="css/news.css">
vscode添加注释:ctrl+shift+/ 删除注释:ctrl+y
<span>没有含义的标签
·css选择器
用来选取需要设置样式的元素(标签)(优先级id选择器-类选择器-元素选择器)
*元素选择器
/id选择器
/类选择器
css属性:color:颜色 font-size:字体大小(记得+px)
·超链接
css属性:text-decoration规定添加到文本的修饰,none表示定义标准的文本(无下划线)
·正文排版
<br> 文字换行标签
·页面布局
注意:表单必须有name属性才可以提交
表格效果
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1px" cellspacing="0" width="600px">
<tr>
<th>序号</th>
<th>品牌logo</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>
表单效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- form表单属性:action:表单提交的url,往何处提交数据,如果不指定,默认提交到当前页面
method:表单的提交方式
get:在url后面拼接表单数据,比如:?username=Tom&age=12,url长度有限制
post:在消息体(请求体)中传递的,参数大小无限制
-->
<form action="" method="post">
用户名:<input type="text" name="username">
年龄:<input type="text" name="age">
<input type="submit" value="提交">
</form>
</body>
</html>
表单项标签效果
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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="python">python</label>
<label><input type="checkbox" name="hobby"value="mysql">mysql</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 type="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>
描述:<textarea name="description" cols="30" rows="10"></textarea><br><br>
<input type="hidden" name="id" value="1">
<!-- 表单常见按钮 -->
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
<br>
</form>
</body>
</html>