一起学Java Web——html、css回顾

一起学Java Web——html、css回顾

目录

• • 前言
  • 本章导学
  • 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标签

	
		
		
	
	
		
		测试font标签
	

段落标签（p）

p标签

	
		
		
	
	
		
		
【测试p标签】我是一名大学生！我很喜欢计算机！我的每一天都在和代码打交道！
		
【测试p标签】如果你看到这段话说明你也在学习Java Web！一起加油吧！
	

换行标签 （br）

br标签

    这个标签需要区别于上一个的段落标签，两者容易混淆。

	
		
		
	
	
		
		
【测试p标签】我是一名大学生！我很喜欢计算机！
我的每一天都在和代码打交道！
		
【测试p标签】如果你看到这段话说明你也在学习Java Web！一起加油吧！
	

标题标签（h1、h2…）

h标签

	
		
		
	
	
		测试h标签
		测试h标签
		测试h标签
		测试h标签
		测试h标签
		测试h标签
	

图片标签（img）

img标签

超链接标签（a）

a标签

• 普通a标签可以跳转页面和打开图片

	
		
		
	
	
		点我访问百度

		点我打开图片
	

• a标签可以设置锚点，当页面长度足够时可以出现效果
  
  

列表标签（li)

li标签

• 无序列表

	
		
		
	
	
		

			
aaa
			
aaa
			
aaa
			
aaa
			
aaa
			
aaa
			
aaa
		
		
	

• 有序列表

	
		
		
	
	
		

			
aaa
			
aaa
			
aaa
			
aaa
			
aaa
			
aaaa
			
aaa
		
		
	

表格标签（table)

table标签

• 一般表格

	
		
		
	
	
		
		
		姓名
		性别
		电话
		
		
		小柯
		男
		189899
		
		
		小小柯
		男
		199899
		
		
	

• 特殊样式表格

	
		
		
	
	
		
			个人信息表
		
		姓名
		性别
		电话
		
		
		小柯
		
		男
		189899
		
		
		小小柯
		199899
		
		
		小小
		女
		166699
		
		
			其他：
		
		
	

表单标签（form）

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;
}

空格选择器

	
		
		
		
		
	
	
	测试语句1					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/zaji/5694300.html