- 前言
- 本章导学
- Html知识回顾
- 常用标签
- 文本标签（font)
- 段落标签（p）
- 换行标签 （br）
- 标题标签（h1、h2......）
- 图片标签（img）
- 超链接标签（a）
- 列表标签（li)
- 表格标签（table)
- 表单标签（form）
- html综合案例
- css知识回顾
- 内部样式表
- 外部样式表
- 背景样式
- 文本样式
- 字体样式
- 选择器
- 伪类选择器
- 状态伪类
- 结构伪类
- 伪元素选择器
- 其他选择器
- class选择器
- id选择器
- 逗号选择器
- 空格选择器
- >选择器
- 属性选择器
- 选择器优先级
- div设置
- 居中样式
- 定位机制
- 浮动效果
- 浮动引起崩塌
- 清除浮动
- 总结
博主很久以前就学习了Html和css，也学习了Java基础，但是一直没有使用过，写过的项目也都是在使用Python。这不，最近期末结课了，时间挺多，所以准备学学Java Web。网课已经备好了，笔记也会同步分享，有一样的小伙伴一起来看看吧
本章导学今天我们先来回顾一下网页部分的Html和css基础知识，这部分知识相信大多数小伙伴都已经学习过，博主我也一样，但是问题是学习了以后就没怎么实际的去使用过，所以很多知识都已经忘了，为了避免拖慢后续的学习进度，所以还是回顾一下相关知识。
Html知识回顾HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
访问菜鸟教程
常用标签 文本标签（font)font标签
段落标签（p）测试font标签
p标签
换行标签 （br）【测试p标签】我是一名大学生！我很喜欢计算机！我的每一天都在和代码打交道！
【测试p标签】如果你看到这段话说明你也在学习Java Web！一起加油吧！
br标签
这个标签需要区别于上一个的段落标签，两者容易混淆。
标题标签（h1、h2…）【测试p标签】我是一名大学生！我很喜欢计算机！
我的每一天都在和代码打交道！【测试p标签】如果你看到这段话说明你也在学习Java Web！一起加油吧！
h标签
图片标签（img）测试h标签
测试h标签
测试h标签
测试h标签
测试h标签
测试h标签
img标签
超链接标签（a）
a标签
- 普通a标签可以跳转页面和打开图片
点我访问百度
点我打开图片
- a标签可以设置锚点，当页面长度足够时可以出现效果
li标签
- 无序列表
- aaa
- aaa
- aaa
- aaa
- aaa
- aaa
- aaa
- 有序列表
表格标签（table)
- aaa
- aaa
- aaa
- aaa
- aaa
- aaaa
- aaa
table标签
- 一般表格
| 姓名 | 性别 | 电话 |
|---|---|---|
| 小柯 | 男 | 189899 |
| 小小柯 | 男 | 199899 |
- 特殊样式表格
| 姓名 | 性别 | 电话 |
|---|---|---|
| 小柯 | 男 | 189899 |
| 小小柯 | 199899 | |
| 小小 | 女 | 166699 |
| 其他： | ||
html综合案例
针对一些特殊的情况我们可以采用表格布局，下面我们将上面的表单使用表格进行布局。
css知识回顾
css(层叠样式表)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
访问菜鸟教程
内部样式表是指我们直接将css样式与html文件放在一起，这种方式一般不常用。
外部样式表我爱学习！
我在学习Java Web！
外部样式表是指将css样式与html分开存放，这种方法方法比较常用。
我爱学习！
我在学习Java Web！
p {
background-color: red;
font-size: 30px;
}
body {
background-color: yellow;
background-image: url(./imgs/2.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 20px 40px;
}
背景样式
文本样式我爱学习！
我在学习Java Web！
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;
}
label:hover{
color: #FF0000;
}
结构伪类
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选择器
允许重复！！！
测试Class选择器！
.p1{
color: red;
font-size: 20px;
}
id选择器
不允许重复！！！
测试Class选择器！
#p11{
color: yellow;
font-size: 20px;
}
逗号选择器
用于联合选择器！！
测试选择器！
测试语句，不知道写什么！
#p11{
color: yellow;
font-size: 20px;
}
.p22{
color: red;
font-size: 30px;
}
#p11,.p22{
background-color: #55aaff;
}
空格选择器
测试语句3
测试语句4
#div3 p{
background-color: #55AAFF;
}
>选择器
测试语句3
测试语句4
测试语句1
#div1>p{
background-color: #55AAFF;
}
属性选择器
测试语句3
测试语句4
测试语句
测试语句
测试语句
p[class='p2']{
background-color: #55AAFF;
}
p[id='p3']{
color: red;
}
选择器优先级
| 排名 | 名称 |
|---|---|
| 1 | !important |
| 2 | 行内样式 |
| 3 | id选择器 |
| 4 | 类选择器 |
| 5 | 标签 |
| 6 | 通配符 |
| 7 | 浏览器默认属性 |
点击查看
#div1{
background-color: aqua;
width: 200px;
height: 200px;
top: 220px;
left: 220px;
。
position: absolute;
border-bottom: solid;
}
居中样式
#div1{
background-color: aqua;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
margin: 0px auto;
}
定位机制
浮动效果
这里我们要清楚默认的文档流，即元素从上往下以此布局，当使用浮动的时候，元素就会脱离标准文档流。
我们知道，当我们的父级div没有设置高度或者宽度的时候，他会被子一级元素撑开，否则就会是一条横线。
有些时候我们为了避免这种浮动现象，需要我们在css样式手动清除样式，这样一来我们就可以避免浮动造成的一系列的页面布局的问题了。
#div1 {
background-color: aqua;
}
#div2 {
background-color: red;
width: 200px;
height: 200px;
float: left;
}
#div3 {
background-color: yellow;
width: 220px;
height: 220px;
float: left;
}
#div4 {
background-color: blue;
height: 240px;
width: 240px;
}
#clear::after {
content: "";
visibility: hidden;
height: 0px;
display: block;
clear: both;
}
#clear{
zoom: 1;
}
这篇文章算是对web的一个回顾，为的是能更快的进入Java Web的学习中来，因为是回顾，所以文章对于内容的细节描述的并不是很多，基本都是通过一个简单的例子来展示用法，有基础的同学基本上一趟看下来就可以回忆起来，没有基础的建议还是先对这些基础知识进行一个补充。这部分有一个最关键的点-----------》页面布局，我们接下来单独做一篇文章讲解。
