HTML
1.基本概念
软件架构
1.C/S架构：客户端/服务器端
优点：用户体验更好
缺点：安装部署维护麻烦
2.B/S架构： 浏览器/服务器
优点：安装部署维护简单
缺点：如果应用过大，用户体验会受到影响，对硬件要求过高
BS架构
资源分类：
1.静态资源
静态网页开发技术，HTML，CSS，JavaScript
如果用户请求静态资源，那么服务器会直接将静态资源发送给浏览器，用户得到的资源一样
2.动态资源
使用动态网页及时发布的资源
所有用户访问，得到的结果可能不一样
jsp/servlet
基本概念
最基础的网页开发语言
Hyper Text Markup Language超文本标记语言
快速入门
标签分类：
1.围堵标签：有开始标签和结束标签。如,
2.自闭合标签：开始标签和结束标签在一起。如
2.文件标签
构成html最基本的标签
html：表示html文本的根标签
head：头标签。用于指定html一些属性，引入外部资源
title：标题标签
body：体标签
3.文本标签
和文本有关
h1：标题标签
p：段落标签
br：换行标签
hr：展示一条水平线
b：字体加粗
i：字体斜体
center:居中标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<!--注释-->
<!--换行-->
<h1>HelloWorld</h1><br>
<h2>HelloWorld</h2><br>
<h3>HelloWorld</h3><br>
<h6>HelloWorld</h6>
<!--h1到h6字号逐渐减小-->
<!--段落标签<p>-->
<p>HelloWorld</p>
<p>HelloWorld</p>
<p>HelloWorld</p>
<p>HelloWorld</p>
<!--<hr/>显示一条水平线-->
<hr/>
<!--可以通过参数改变水平线-->
<hr color="blue" width="500" size="5" align="right"/>
<!--<b></b>加粗-->
<b>HelloWorld</b><br>
<!--<i></i>斜体-->
<i>HelloWorld</i><br>
</body>
</html>
4.图片标签
img:展示图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--img标签，展示图片-->
<img src="img/picture.jpg" align="left" width="500" height="300"/>
</body>
</html>
相对路径：
./：代表当前路径
…/:代表上一级目录
5.列表标签
有序列表：
ol li
无序列表：
ul li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!--有序列表ol-->
Name
<ol type="disc">
<li>Kobe</li>
<li>James</li>
<li>Jordan</li>
</ol>
<hr>
Name
<ul type="A">
<li>Kobe</li>
<li>James</li>
<li>Jordan</li>
</ul>
</body>
</html>
6.链接标签
a：定义一个超链接
target(指定打开资源的方式)
_self:在当前页面打开
_blank:在空白页面打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--href：指定访问资源的url-->
<a href="https://www.csdn.net/">click</a>
<!--_self:在本页面打开；_blank在空白页面打开-->
<a href="https://www.csdn.net/" target="_self">click</a>
<a href="https://www.csdn.net/" target="_blank">click</a>
</body>
</html>
div：每一个div沾满一整行
span：文本信息在一行，行内标签
语义化标签：header，footer
7.表格标签
table：定义表格
tr：定义行
td：定义单元格
th：定义表头单元格
caption：表格标题
thead：表示表格的头部分
tbody：标识表格的体部分
tfoot：表示表格的脚部分
rowspan：合并行
colspan：合并列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1" width="50%">
<thead>
<caption>Information</caption>
<tr>
<th>Name</td>
<th>Number</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#8a2be2" align="center">
<td>Kobe</td>
<td>24</td>
<td>Los Angeles</td>
</tr>
<tr bgcolor="red" align="center">
<td>Jordan</td>
<td>23</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</body>
</html>
8.表单标签
表单：用于采集用户输入数据的，用于和服务器进行交互
标签：form
属性：
action：提交数据的url
method：指定提交方式。分类：get与post
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--form用于定义表单，定义一个范围，范围代表采集用户的范围-->
<!--表单中的属性要提交，必须制定name属性-->
<form action="" method="get">
用户名：<input name="username"><br>
密码：<input name="password"><br>
<input type="submit" value="登录">
</form>
</body>
</html>
get与post的区别：
1.提交方式为get，请求参数会在地址栏中显示；提交方式为post，请求参数不会在地址栏中显示，会封装在请求体中
2.get请求参数大小有限制，post请求参数的大小没有限制
3.get不太安全，post比较安全
表单项标签
input 可以通过type属性值，改变元素展示样式
type属性如下：
1.text：文本输入框
2.placeholder:指定输入框的提示信息，当输入框的内容发生变化会自动清空提示信息
3.password：密码输入框
4.radio：单选框
注意：
要想让多个单选框实现单选效果，则多个单选框的name属性值必须一样
一般会给每一个单选框提供value属性值，指定其被选中后提交的值
check属性，可以指定默认值
5.checkbox：复选框
6.label:指定输入项的文字描述
注意：
label的for属性一般会和input的id属性值对应，如果对应了，则点击label区域会让input输入框获取焦点
7.file：文件选择框
8.submit：提交按钮
9.button：与JavaScript实现动态效果
10.date/datetime-local:日期
select 下拉列表
textarea 文本域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--form用于定义表单，定义一个范围，范围代表采集用户的范围-->
<!--表单中的属性要提交，必须制定name属性-->
<form action="" method="get">
<label for="username">用户名：</label><input type="text" name="username" placeholder="请输入用户名" id="username"><br>
<label for="password">密码：</label><input type="password" name="password" placeholder="请输入密码" id="password"><br>
性别:<input type="radio" name="gender" value="male" checked="checked"> 男
<input type="radio" name="gender" value="female"> 女
<br>
爱好：<input type="checkbox" name="hobby" value="basketball"> 篮球
<input type="checkbox" name="hobby" value="game"> 游戏
<input type="checkbox" name="hobby" value="running"> 跑步<br>
图片：<input type="file"><br>
生日:<input type="date" name="birthday"><br>
省份：<select name="province">
<option value="">请选择</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">湖北</option>
</select>
<br>
自我描述:
<textarea cols="20" rows="5" name="des">
</textarea><br>
<input type="submit" value="登录">
</form>
</body>
</html>
CSS
1.基本概念
Cascading Style Sheets 层叠样式表
优点：
功能强大
将内容展示与样式控制分离
降低耦合度，提高开发效率
2.使用方法
内联样式：在标签内使用style属性制定CSS代码。不常用
内部样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color:red;
}
</style>
</head>
<body>
<!--内联样式
在标签内使用style属性制定css代码-->
<!--<div style="color: red;">HelloCSS</div>-->
<!--内部样式
在head标签内，定义style标签，style的标签体内容就是CSS代码-->
<div>HelloCSS</div>
</body>
</html>
外部样式：
1.定义CSS资源文件
2.在head标签内，定义link标签，引入外部资源文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/a.css">
</head>
<body>
<!--外部样式
定义CSS资源文件
在head标签内定义link标签，引入外部资源文件
-->
<div>HelloCSS</div>
</body>
</html>
CSS文件：
div{
color:red;
}
3.基本语法
格式：
选择器{
属性名1：属性值1；
…
}
选择器
筛选具有相似特征的元素
基本选择器
1.id选择器
选择具体的id属性值的元素
#id属性值{}
建议在一个页面中id值唯一
2.元素选择器
选择具有相同标签名的元素
标签名称{}
id选择器优先级高于元素选择器
3.类选择器
选择具有相同的class属性值的元素
.class属性值{}
类选择器优先级高于元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style>
#div1{
color: red;
}
div{
color: blue;
}
.cls{
color: blueviolet;
}
</style>
</head>
<body>
<!--1.id选择器-->
<div id="div1">HelloCSS</div>
<!--2.元素选择器-->
<div>HelloCSS</div>
<!--3.类选择器-->
<p class="cls">HelloCSS</p>
</body>
</html>
扩展选择器
1.选择所有元素
*{}
2.并集选择器
选择器1，选择器2{}
3.子选择器
筛选选择器1元素下的选择器2元素
选择器1 选择器2{}
4.父选择器
选择器1>选择器2{}
筛选选择器2的父选择器选择器1
5.属性选择器
选择元素名称，属性名=属性值的元素
元素名称[属性名=“属性值”]{}
6.伪类选择器
选择一些元素具有的状态
元素：状态{}
link:初始化状态
visited:被访问过的状态
activate:正在访问状态
hover:鼠标悬浮状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器</title>
<style>
div p{
color: blueviolet;
}
div>p{
border: 1px solid;
}
input[type="text"]{
broder:5px solid;
}
a:link{
color: red;
}
a:active{
color: blueviolet;
}
a:visited{
color: aqua;
}
a:hover{
color: brown;
}
</style>
</head>
<body>
<div>
<p>
HelloCSS
</p>
</div>
<p>
HelloCSS
</p>
<!--属性选择器-->
<input type="text">
<input type="password"><br>
<!--状态选择器-->
<a href="https://www.csdn.net/" target="_blank">click</a>
</body>
</html>
属性
1.字体文本
font-size字体大小
color文本颜色
text-align对齐方式
line-height行高
2.背景
background：背景色，复合属性
3.边框
border:设置边框
4.尺寸
width：宽度
height：高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性</title>
<style>
p{
color: blueviolet;
font-size: 30px;
text-align: center;
line-height: 100px;
border: 1px solid red;
}
div{
border: 1px solid red;
height: 200px;
width: 200px;
background: url("img/校徽.jpg") no-repeat center;/*不重复居中*/
}
</style>
</head>
<body>
<p>
HelloCSS
</p>
<div>HelloCSS</div>
</body>
</html>
5.盒子模型
控制布局
属性：
margin:外边距(margin-left/right/top/bottom)
padding:内边距。默认情况下默认内边距会影响盒子大小。可以设置盒子属性，让width与height是最终盒子大小
float:浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性</title>
<style>
div{
border: 1px solid blueviolet;
}
.div1{
width: 100px;
height: 100px;
/* margin: 50px;*/
}
.div2{
width: 200px;
height: 200px;
padding: 50px;
box-sizing: border-box;
}
.div3{
float: left;
}
.div4{
float: left;
}
.div5{
float: left;
}
</style>
</head>
<body>
<div class="div2">
<div class="div1">
HelloCSS
</div>
</div>
<div class="div3">HelloCSS</div>
<div class="div4">HelloCSS</div>
<div class="div5">HelloCSS</div>
</body>
</html>