目录
前言
博主很久以前就学习了Html和css,也学习了Java基础,但是一直没有使用过,写过的项目也都是在使用Python。这不,最近期末结课了,时间挺多,所以准备学学Java Web。网课已经备好了,笔记也会同步分享,有一样的小伙伴一起来看看吧
本章导学
今天我们先来回顾一下网页部分的Html和css基础知识,这部分知识相信大多数小伙伴都已经学习过,博主我也一样,但是问题是学习了以后就没怎么实际的去使用过,所以很多知识都已经忘了,为了避免拖慢后续的学习进度,所以还是回顾一下相关知识。
Html知识回顾
HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。
常用标签
文本标签(font)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 文本标签 -->
<font size="7" face="隶书" color="red">测试font标签</font>
</body>
</html>
段落标签(p)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 段落标签 -->
<p>【测试p标签】我是一名大学生!我很喜欢计算机!我的每一天都在和代码打交道!</p>
<p>【测试p标签】如果你看到这段话说明你也在学习Java Web!一起加油吧!</p>
</body>
</html>
换行标签 (br)
这个标签需要区别于上一个的段落标签,两者容易混淆。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 段落标签 -->
<p>【测试p标签】我是一名大学生!我很喜欢计算机!<br/>我的每一天都在和代码打交道!</p>
<p>【测试p标签】如果你看到这段话说明你也在学习Java Web!一起加油吧!</p>
</body>
</html>
标题标签(h1、h2…)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>测试h标签</h1>
<h2>测试h标签</h2>
<h3>测试h标签</h3>
<h4>测试h标签</h4>
<h5>测试h标签</h5>
<h6>测试h标签</h6>
</body>
</html>
图片标签(img)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="./images/p1.png" alt="我爱技术部"/>
</body>
</html>
超链接标签(a)
- 普通a标签可以跳转页面和打开图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="https://www.baidu.com">点我访问百度</a><br/>
<a href="images/p1.png">点我打开图片</a>
</body>
</html>
- a标签可以设置锚点,当页面长度足够时可以出现效果
列表标签(li)
- 无序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
</ul>
</body>
</html>
- 有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
<li><a href="https://www.baidu.com">aaaa</a></li>
<li>aaa</li>
</ol>
</body>
</html>
表格标签(table)
- 一般表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" width="600">
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>小柯</td>
<td>男</td>
<td>189899</td>
</tr>
<tr>
<td>小小柯</td>
<td>男</td>
<td>199899</td>
</tr>
</table>
</body>
</html>
- 特殊样式表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" width="600">
<caption>个人信息表</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>小柯</td>
<!-- 合并列-->
<td rowspan="2">男</td>
<td>189899</td>
</tr>
<tr>
<td>小小柯</td>
<td>199899</td>
</tr>
<tr>
<td>小小</td>
<td>女</td>
<td>166699</td>
</tr>
<tr>
<td height="25" colspan="3">其他:</td>
</tr>
</table>
</body>
</html>
表单标签(form)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- form不在页面显示,仅仅是一个区域
lable显示文字标签
radio单选name需要一样 -->
<form action="" method="get">
<label>请输入姓名:</label><input type="text" name="" id=""/><br/>
<label>请输入密码:</label><input type="password" name="" id=""/><br />
<label>请再次输入密码:</label><input type="password" name="" id=""/><br />
<label>性别:</label>
<input type="radio" name="sex" id="" value="1"/>男
<input type="radio" name="sex" id="" value="0"/>女<br />
<label>兴趣爱好:</label>
<input type="checkbox" name="" id="" value="1"/>游泳
<input type="checkbox" name="" id="" value="2"/>爬山
<input type="checkbox" name="" id="" value="2"/>跳水
<input type="checkbox" name="" id="" value="2"/>跑步<br />
<select>
<!-- selected="selected"表示默认选中项 -->
<option value="1999" selected="selected">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
</select>年
<select>
<!-- selected="selected"表示默认选中项 -->
<option value="01" selected="selected">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
</select>月
<select>
<!-- selected="selected"表示默认选中项 -->
<option value="01" selected="selected">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
</select>日<br />
<button type="button">按钮一</button>
<button type="submit">提交</button><br />
<!-- submit用于提交表单 -->
<textarea rows="8" cols="100" name="" id="">请输入</textarea><br />
<input type="file" /><input type="button" value="上传" /><br />
<!-- 这是一个隐藏域,用作提交不显示的数据 -->
<input type="hidden" name=""/>
</form>
</body>
</html>
html综合案例
针对一些特殊的情况我们可以采用表格布局,下面我们将上面的表单使用表格进行布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="" method="">
<table border="1" width="500">
<tr>
<td align="right">请输入用户名:</td>
<td><input type="text" name="" id="" /></td>
</tr>
<tr>
<td align="right">请输入密码:</td>
<td><input type="password" name="" id="" /></td>
</tr>
<tr>
<td align="right">请再输入密码:</td>
<td><input type="text" name="" id="" /></td>
</tr>
<tr>
<td align="right">性别:</td>
<td><input type="radio" name="sex" id="" />男
<input type="radio" name="sex" id="" />女
</td>
</tr>
<tr>
<td align="right">兴趣爱好:</td>
<td>
<input type="checkbox" name="" id="" value="1" />游泳
<input type="checkbox" name="" id="" value="2" />爬山
<input type="checkbox" name="" id="" value="2" />跳水
<input type="checkbox" name="" id="" value="2" />跑步
</td>
</tr>
<tr>
<td align="right">出生年月:</td>
<td>
<select> -->
<!-- selected="selected"表示默认选中项 -->
<option value="1999" selected="selected">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
</select>年
<select>
<!-- selected="selected"表示默认选中项 -->
<option value="01" selected="selected">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
</select>月
<select>
<!-- selected="selected"表示默认选中项 -->
<option value="01" selected="selected">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
</select>日<br />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</body>
</html>
css知识回顾
css(层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
访问菜鸟教程
内部样式表
内部样式表是指我们直接将css样式与html文件放在一起,这种方式一般不常用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 这段代码展示内部样式表 */
p{
background-color: red;
font-size: 30px;
}
</style>
</head>
<body>
<p>我爱学习!</p>
<p>我在学习Java Web!</p>
</body>
</html>
外部样式表
外部样式表是指将css样式与html分开存放,这种方法方法比较常用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引用外部样式类 -->
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<p>我爱学习!</p>
<p>我在学习Java Web!</p>
</body>
</html>
/* 这段代码展示内部样式表 */
p {
background-color: red;
font-size: 30px;
}
body {
background-color: yellow;
background-image: url(./imgs/2.png);
/* 设置如何平铺对象的 background-image 属性 */
background-repeat: no-repeat;
/* 设置背景图像是否固定或者随着页面的其余部分滚动 */
background-attachment: fixed;
/* 设置背景图像的位置位置 */
background-position: 20px 40px;
}
背景样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 这段代码展示内部样式表 */
p {
background-color: red;
font-size: 30px;
}
body{
background-color: yellow;
background-image: url(./imgs/2.png);
/* 设置如何平铺对象的 background-image 属性 */
background-repeat: no-repeat;
/* 设置背景图像是否固定或者随着页面的其余部分滚动 */
background-attachment: fixed;
/* 设置背景图像的位置位置 */
background-position: 20px 40px;
}
</style>
</head>
<body>
<p>我爱学习!</p>
<p>我在学习Java Web!</p>
</body>
</html>
文本样式
p {
/* 设置文本颜色 */
color: blue;
/* 文本方向/书写方向 */
direction: ltr;
/* 设置字符间距 */
letter-spacing: 10npx;
/* 设置行高 */
line-height: 20npx;
/* 设置文本对齐方式 */
text-align: center;
/* 文本的修饰 */
text-decoration: line-through;
/* 文本设置阴影 */
text-shadow: coral;
/* 改变字母大小写 */
text-transform: lowercase;
/* 首行缩进 */
text-indent: 10npx;
}
字体样式
ul{
/* 设置列表项目外观 */
list-style-type: circle;
/* 设置列表符号位置 */
list-style-position: outside;
/* 设置列表项目标记 */
list-style-image: url(./imgs/3.gif);
}
选择器
伪类选择器
状态伪类
状态发生变化的时候。
/* 未访问的链接 */
a:link{
color: red;
}
/* 已访问的链接 */
a:visited{
color: #0000FF;
}
/* 鼠标移动到连接上(浮动 悬停) */
a:hover{
color: #FF7F50;
font-size: 30px;
}
/* 向被激活的元素添加样式 */
a:active{
color: blue;
}
/* 选择拥有键盘输入焦点的元素 */
/* a:focus{
} */
label:hover{
color: #FF0000;
}
结构伪类
/*
:first-child------>选择元素的第一个子元素
:last-child------->选择某个元素的最后一个子元素
:nth-child------->选择某个元素的一个或者多个特定子元素
:nth-last-child------>选择某个元素的一个或者多个特定元素,
从这个元素的最后一个子元素开始算
:first-of-child-------->选择一个上级元素下的第一个同类子元素*/
h1:first-child{
background-color: #FF0000;
}
h3:last-child{
background-color: #FF7F50;
}
伪元素选择器
/* 可以在文本之前插入新内容 */
p::before{
content: "大家好";
}
/* 可以在文本之后插入新内容 */
p::after{
content: "你们好";
}
/* 选择制定选择器的首行 */
p::first-line{
background-color: chocolate;
}
/* 选择文本的第一个字符 */
p::first-letter{
font-size: 30px;
}
/* 选择指定元素被选中的内容 */
*::selection{
background-color: green;
}
其他选择器
class选择器
允许重复!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引用外部样式类 -->
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<!-- 测试class选择器 -->
<p class="p1">测试Class选择器!</p>
</body>
</html>
.p1{
color: red;
font-size: 20px;
}
id选择器
不允许重复!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引用外部样式类 -->
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<!-- 测试id选择器 -->
<p id="p11">测试Class选择器!</p>
</body>
</html>
#p11{
color: yellow;
font-size: 20px;
}
逗号选择器
用于联合选择器!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引用外部样式类 -->
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<!-- 测试逗号选择器 -->
<p id="p11">测试选择器!</p>
<p class="p22">测试语句,不知道写什么!</p>
</body>
</html>
#p11{
color: yellow;
font-size: 20px;
}
.p22{
color: red;
font-size: 30px;
}
#p11,.p22{
background-color: #55aaff;
}
空格选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引用外部样式类 -->
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="div1">测试语句1</div>
<div id="div2">测试语句2</div>
<div id="div3"><p>测试语句3</p><br/><p>测试语句4</p></div>
</body>
</html>
#div3 p{
background-color: #55AAFF;
}
>选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引用外部样式类 -->
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
<p>测试语句3</p><br />
<p>测试语句4</p>
</div>
</div>
<p>测试语句1</p>
</div>
</body>
</html>
#div1>p{
background-color: #55AAFF;
}
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引用外部样式类 -->
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
<p>测试语句3</p><br />
<p>测试语句4</p>
</div>
</div>
<p class="p1">测试语句</p>
<p class="p2">测试语句</p>
<p id="p3">测试语句</p>
</div>
</body>
</html>
p[class='p2']{
background-color: #55AAFF;
}
p[id='p3']{
color: red;
}
选择器优先级
排名 | 名称 |
---|---|
1 | !important |
2 | 行内样式 |
3 | id选择器 |
4 | 类选择器 |
5 | 标签 |
6 | 通配符 |
7 | 浏览器默认属性 |
div设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引用外部样式类 -->
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="div1">
这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。这是一条文字信息。
</div>
</body>
</html>
#div1{
background-color: aqua;
width: 200px;
height: 200px;
top: 220px;
left: 220px;
/* 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定 */。
position: absolute;
/* 超出隐藏 */
/* overflow: hidden; */
/* 超出显示拖动条 */
/* overflow: auto; */
/* 设置div边框样式 */
/* outline: dotted; */
/* 设置底部线条 */
border-bottom: solid;
}
居中样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引用外部样式类 -->
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="div1">
文字信息
</div>
</body>
</html>
#div1{
background-color: aqua;
width: 200px;
height: 200px;
/* 设置文字居中 */
text-align: center;
/* 利用行高实现文字垂直居中 */
line-height: 200px;
/* 实现对象居中 */
/* 设置auto的容器必须有宽度 */
margin: 0px auto;
}
定位机制
浮动效果
这里我们要清楚默认的文档流,即元素从上往下以此布局,当使用浮动的时候,元素就会脱离标准文档流。
浮动引起崩塌
我们知道,当我们的父级div没有设置高度或者宽度的时候,他会被子一级元素撑开,否则就会是一条横线。
清除浮动
有些时候我们为了避免这种浮动现象,需要我们在css样式手动清除样式,这样一来我们就可以避免浮动造成的一系列的页面布局的问题了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引用外部样式类 -->
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="div1">
<div id="div2">
这是2
</div>
<div id="div3">
这是3
</div>
<div id="clear"></div>
<div id="div4">
这是4
</div>
</div>
</body>
</html>
#div1 {
background-color: aqua;
}
#div2 {
background-color: red;
width: 200px;
height: 200px;
/* div2浮动 */
float: left;
}
#div3 {
background-color: yellow;
width: 220px;
height: 220px;
/* div3浮动 */
float: left;
}
/* 这是清除浮动的第二种方法,设置一个专门的div标签 */
/* #clear {
clear: both;
} */
#div4 {
background-color: blue;
height: 240px;
width: 240px;
/* 这是清除浮动的第一种方法,对于需要清除浮动的标签使用clear属性 */
/* 设置清除浮动 */
/* clear: both; */
}
/* 这是设置清除浮动的第三种方式,这种方式使用伪类,广泛使用于大型网站 */
#clear::after {
content: "";
visibility: hidden;
height: 0px;
display: block;
clear: both;
}
/* 解决IE浏览器的一些异常 */
#clear{
zoom: 1;
}
总结
这篇文章算是对web的一个回顾,为的是能更快的进入Java Web的学习中来,因为是回顾,所以文章对于内容的细节描述的并不是很多,基本都是通过一个简单的例子来展示用法,有基础的同学基本上一趟看下来就可以回忆起来,没有基础的建议还是先对这些基础知识进行一个补充。这部分有一个最关键的点-----------》页面布局,我们接下来单独做一篇文章讲解。