目录
个人笔记梳理---仅供参考
路线：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>
4069
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
