JavaWeb学习笔记③之HTML&CSS
HTML&CSS
- 1. JavaWeb概述
-
- 1.1 软件架构
- 1.2 B/S架构详解
- 2. HTML
-
- 2.1 文件标签：构成html最基本的标签
- 2.2 文本标签：和文本有关的标签
- 2.3 文本标签属性定义
- 2.4 图像标签
- 2.5 超链接标签
- 2.6 列表标签
-
- 2.6.1 有序列表标签
- 2.6.2 无序列表标签
- 2.7 表格标签（重要）
- 2.8 案例：旅游网站首页
- 2.9 表单标签（非常重要）
-
- 2.9.1 输入项
- 2.9.2 下拉选择框
- 2.9.3 文本域
- 2.9.4 表单提交按钮
- 2.9.5 HTML注册案例
- 2.10 框架标签的使用（会用就行）
- 2.11 a标签的扩展（了解）
- 3. CSS：页面美化和布局控制
-
- 3.1 CSS与HTML的四种结合方式
- 3.2 CSS的三种基本选择器
- 3.3 CSS的扩展选择器
- 3.4 CSS常用属性
- 3.5 CSS的盒子模型（了解）
- 3.6 CSS布局之漂浮(了解)
- 3.7 CSS布局之定位（了解）
- 3.7 CSS注册案例
1. JavaWeb概述
1）JavaWeb：使用Java语言开发基于互联网的项目
1.1 软件架构
1）C/S：Client/Server 客户端/服务器端
● 在用户本地有一个客户端程序，在远程有一个服务器端程序。如：QQ，迅雷…
● 优点：用户体验好
● 缺点：开发、安装，部署，维护 麻烦
2）B/S：Browser/Server 浏览器/服务器端
● 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
● 优点：开发、安装，部署，维护 简单
● 缺点：如果应用过大，用户的体验可能会受到影响。对硬件要求过高
1.2 B/S架构详解
1）资源分类：分为静态资源和动态资源
2）静态资源：使用静态网页开发技术发布的资源。
● 特点：
所有用户访问，得到的结果是一样的。
如：文本，图片，音频，视频，HTML，CSS，JavaScript
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。
浏览器中内置了静态资源的解析引擎，可以展示静态资源
3）动态资源：使用动态网页及时发布的资源。
● 特点：
所有用户访问，得到的结果可能不一样。
如：jsp/servlet,php,asp...
如果用户请求的是动态资源，那么服务器会执行动态资源，
转换为静态资源，再发送给浏览器
4）注意：要学习动态资源，必须先学习静态资源！
5）静态资源：
● HTML：用于搭建基础网页，展示页面的内容
● CSS：用于美化页面，布局页面
● JavaScript：控制页面的元素，让页面有一些动态的效果
2. HTML
1）HTML（HyperText Markup Language）：超文本标记语言
● 文本：相当于记事本里写的文件，仅用于展示信息
● 超文本：用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。即超越了文本仅仅展示信息的功能范畴，泛指：图片、有样式的文章、超链接等
● 标记：标签
● 语言：工具
2）HTML操作思想：通过改变标签的属性值来实现标签内数据样式的变化，且不区分大小写
3）html语法：
● html文档后缀名 .html 或者 .htm
● 标签分为：
1. 围堵标签：有开始标签和结束标签。如
2. 自闭合标签：开始标签和结束标签在一起。如
● 标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：
正确：
● 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
● html的标签不区分大小写，但是建议使用小写
2.1 文件标签：构成html最基本的标签
1）html：html文档的根标签
2）head：头标签。用于指定html文档的一些属性。引入外部的资源
3）title：标题标签
4）body：体标签
5）base标签：设置超链接的基本设置
● 可以统一设置超链接的打开方式
6）link标签：引入外部文件
● 可以使用link标签引入css文件
7）< !DOCTYPE html >：html5中定义该文档是html文档
2.2 文本标签：和文本有关的标签
1）注释：
2）标题标签：从h1到h6标题逐渐变小且自动换行，只有1-6，超过6就没有了;不能设置文字大小和颜色
<h1>h1> <h2>h2> <h3>h3> ... <h6>h6>
3）段落标签：
<p> 段落标签 p>
4）换行标签：
<br/>
5）文字标签属性（HTML 4.01已废弃）：
● ①size：文字大小
● ②color：文字颜色
<font> 文字标签 font>
6）水平线标签属性：
● ①color：颜色
● ②width：宽度
● ③size：大小
● ④align：对其方式
center：居中
left：左对齐
right：右对齐
<hr/>
7）文本居中标签属性：
● ①color：颜色
● ②size：大小
● ③face：字体
<center> 文本居中标签 center>
8）其他的常用标签的使用：
<b>加粗b>
<s>删除线s>
<u>下划线u>
<i>斜体i>
<pre>
原样
输出
pre>
3 <sub>下标sub>
4 <sup>上标sup>
<div>自动换行1div>
<div>自动换行2div>
<div>自动换行3div>
<span>一行显示1span>
<span>一行显示2span>
<span>一行显示3span>
9）语义化标签：html5中为了提高程序的可读性，提供的一些标签
1. ：页眉
2. 10）特殊字符：想要在页面显示如标签类似的内容，需要对特殊字符进行转义.如：
● ①<：<；
● ②>：>；
● ③空格： ；
● ④&：&等
2.3 文本标签属性定义
1）size
● ①范围：1-7，超过7的，默认也为7
2）color：
● ①英文单词：red,green,blue
● ②RGB(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
● ③#值1值2值3：值的范围：00~FF之间。如： #FF00FF
3）width：
● ①数值：width=‘20’ ，数值的单位，默认是 px(像素)
● ②数值%：占比相对于父元素的比例
DOCTYPE html>
<html lang="ch">
<head>
<title>文本标签title>
<meta name="keywords" content="刘备，关羽，张飞">
<meta http-equiv="refresh" content="3; url=01-hello.html"/>
<meta charset="UTF-8">
head>
<body>
<font size="5" color="red">这是第一个html程序!font><br/>
<FONT size="8" color="00ffff">
<center>
这是第一个html程序!
center>
FONT>
<hr size="4" color="66ccff" width="2000" align="left"/>
<h1 size="4" color="66ccff"> 标题一 h1>
<h2>标题二h2>
<h3>标题三h3>
<h4>标题四h4>
<h5>标题五h5>
<h6>标题六h6>
<hr size="4" color="66ccff" width="2000" align="left"/>
<html>: &显示特殊内容
<br/>
< html > : & 显示特殊内容
body>
html>
2.4 图像标签
1）图像标签属性：
①width：图片宽度
②height：图片高度
③alt：图片上显示的文字，把鼠标移到图片停留片刻就会显示，有些浏览器不兼容，没效果
④align：设置位置
<img src="图片的路径"/>
2）路径：分为绝对路径和相对路径
3）绝对路径就是整个索引路径
4）相对路径是一个文件相对于另一个文件的路径，分为三种：
①当图片路径与html文件在同一个目录下，则
<img src="a.jpg">
②当图片路径在html所在文件的下层目录，则
<img src="同层文件/a.jpg">
③当图片路径在html所在文件的上层目录，则
<img src="../a.jpg">
● 注意：上层的上层则为（一般上层就够了）
<img src="../../a.jpg">
2.5 超链接标签
1）超链接标签属性：
<a href="链接到资源的路径">a>
● ①href：链接到资源的路径
● ②target：设置链接打开方式，_blank为在新窗口打开；_self为在当前页面打开（默认打开方式）
2）当超链接不需要链接到其他地方，在herf中加"#"即可
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>图像和超链接标签title>
head>
<body>
<a name="top">顶部a>
<img src="image/a.jpg" width="490" height="280" alt="漂亮动漫图" align="right"/> <br/>
<img src="b.jpg" width="490" height="280" alt="鬼灭之刃"/> <br/>
<img src="../b.jpg" width="490" height="280" alt="鬼灭之刃"/> <br/>
<img src="动漫图/a.jpg" width="490" height="280" alt="漂亮动漫图"/> <br/>
<hr size="4" color="66ccff" width="2000" align="left"/>
<a href="https://www.bilibili.com/video/BV1uJ411k7wy?p=578">JavaWeb2020视频教程默认在当前页面打开a> <br/>
<a href="https://www.bilibili.com/video/BV1uJ411k7wy?p=578" target="_blank">JavaWeb2020视频教程在新窗口打开a> <br/>
图片作为超链接
<a href="https://www.bilibili.com/video/BV1uJ411k7wy?p=578">
<img src="动漫图/a.jpg" width="490" height="280" alt="漂亮动漫图"/>a> <br/>
<a href="#" >无用链接a> <br/>
<a href="#top">回到顶部a>
body>
html>
2.6 列表标签
1.
表示列表的范围
2.在dl里面，表示上层列表
3.在dl里面，表示下层列表
2.6.1 有序列表标签
1.
表示有序列表范围；
可在ol设置属性type="1"（默认）,"a","i"；该属性表示前标序号
2.在ol里的具体内容
2.6.2 无序列表标签
1.
表示无序列表范围
可在ul设置属性type=空心圆circle 、实心圆disc 、实心方块square ，默认disc
2.在ul里的具体内容
3.注意：序指的是序号，而非顺序
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>列表标签title>
head>
<body>
<dl>
<dt>动物dt>
<dd>狗dd>
<dd>马dd>
<dd>猫dd>
dl>
<hr/>
<ol>
<li>狗li>
<li>马li>
<li>猫li>
ol>
<ol type="i">
<li>狗li>
<li>马li>
<li>猫li>
ol>
<hr/>
<ul>
<li>狗li>
<li>马li>
<li>猫li>
ul>
<ul type="circle">
<li>狗li>
<li>马li>
<li>猫li>
ul>
body>
html>
2.7 表格标签（重要）
1.
表示表格范围，属性有：
border：表格线宽度
bordercolor：表格线颜色
cellpadding：定义内容和单元格的距离
cellspacing：单元格之间的距离。如果指定为0，则单元格的线会合为一条
width：表格的宽度
height：表格的高度
align：对齐方式
bgcolor：背景色
2.DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>表格标签title>
head>
<body>
<table border="1" bordercolor="red" cellspacing="0"
cellpadding="10" width="400" height="100" bgcolor="aqua">
<caption>动物信息表格caption>
<tr>
<td colspan="3" align="center">动物信息td>
tr>
<tr align="center">
<th>动物信息th>
<th>性别th>
<th>年龄th>
tr>
<tr align="center">
<td>狗td>
<td>雄td>
<td rowspan="3">3td>
tr>
<tr>
<td align="right">猫td>
<td align="right">雌td>
tr>
<tr>
<td>马td>
<td>雄td>
tr>
table>
body>
html>
2.8 案例：旅游网站首页
1）确定使用table来完成布局
2）如果某一行只有一个单元格，则使用
3）如果某一行有多个单元格，则使用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旅游网title>
head>
<body>
<table width="100%" align="center">
<tr>
<td>
<img src="image/top_banner.jpg" width="100%" alt="">
td>
tr>
<tr>
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="image/a.jpg" alt="" height="56" width="207">
td>
<td>
<img src="image/search.png" alt="" >
td>
<td>
<img src="image/hotel_tel.png" alt="">
td>
tr>
table>
td>
tr>
<tr>
<td>
<table width="100%" align="center" cellspacing="0">
<tr bgcolor="#ffd700" align="center" height="45" >
<td>
<a href="">首页a>
td>
<td>
<a href="">门票a>
td>
<td>
<a href="">酒店a>
td>
<td>
<a href="">香港车票a>
td>
<td>
<a href="">出境游a>
td>
<td>
<a href="">国内游a>
td>
<td>
<a href="">港澳游a>
td>
<td>
<a href="">抱团定制a>
td>
<td>
<a href="">全球自由行a>
td>
<td>
<a href="">收藏排行榜a>
td>
tr>
table>
td>
tr>
<tr>
<td>
<img src="image/banner_3.jpg" alt="" width="100%">
td>
tr>
<tr>
<td>
<img src="image/icon_5.jpg" alt="">
枭易精选
<hr color="#ffd700" >
td>
tr>
<tr>
<td>
<table align="center" width="95%">
<tr>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 899font>
td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 899font>
td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 899font>
td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 899font>
td>
tr>
table>
td>
tr>
<tr>
<td>
<img src="image/icon_6.jpg" alt="">
国内游
<hr color="#ffd700" >
td>
tr>
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="image/guonei_1.jpg" alt="" height="529">
td>
<td>
<img src="image/jiangxuan_2.jpg" alt="" height="100%">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
tr>
<tr>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
tr>
table>
td>
tr>
<tr>
<td>
<img src="image/icon_7.jpg" alt="">
境外游
<hr color="#ffd700" >
td>
tr>
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="image/jiangwai_1.jpg" alt="" height="505">
td>
<td>
<img src="image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
tr>
<tr>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
<font color="red">¥ 699font>
td>
tr>
table>
td>
tr>
<tr>
<td>
<img src="image/footer_service.png" alt="" width="100%">
td>
tr>
<tr>
<td align="center" bgcolor="#ffd700" height="40">
<font color="gray" size="2">
广东股份有限公司
版权所有Copyright 2019-2020©, All Rights Reserved 苏ICP备10000000
font>
td>
tr>
table>
body>
html>
2.9 表单标签（非常重要）
1）表单标签概念：用于采集用户输入的数据。用于和服务器进行交互，把数据提交到服务器
2）form：表示表单范围，范围代表采集用户数据的范围，其属性有：
● ①action：提交到的地址，默认提交到当前页面。
● ②method：表单提交方式，常用有get和post，默认为get请求，两者的区别是：
get：
1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
2. 请求参数大小是有限制的。
3. 不太安全
post：
2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
2. 请求参数的大小没有限制。
3. 较为安全
● ③enctype：一般请求下不需要这个属性，做文件上传时候需要设置这个属性
3）表单项中的数据要想被提交：必须指定其name属性
2.9.1 输入项
1）输入项：在form里面，可以输入内容或者选择内容的部分。大部分的输入项都可以通过type属性值，改变元素展示的样式
<input type="输入项的类型"/>.
2）普通输入项type属性：
● text：文本输入框，默认值
● placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
3）密码输入项type属性：password
4）单选框type属性：radio
● 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
● 必须有一个value属性，用于数据提交时区分选了哪个选项
● checked属性：实现默认选中
5）复选框type属性：checkbox
● 选项里面的name属性必须一样
● 必须有一个value属性，用于数据提交时区分选了哪个选项
● 实现默认选中的属性 checked=“checked”
● 判断复选框是否被选中，属性selected == true表示选中，反之为非选中
6）文件输入项type属性：file。后面上传用到
7）隐藏项（不会显示在页面上，但是存在于html代码里面，通过value设置的值，会被自动提交到服务器）type属性：hidden。可通过按键盘上F12，在网页下方出现一个条，选择控制台观看隐藏的数据
8）重置按钮type属性：回到原始输入状态：reset
9）普通按钮type属性：button
10）label：指定输入项的文字描述信息
注意：label的for属性一般会和 input 的 id属性值 对应。如果对应了，
则点击label区域，会让input输入框获取焦点
2.9.2 下拉选择框
1）下拉选择框（不是在input标签里面的）
● ①select: 下拉列表。子元素：option，指定列表项
● ②实现默认选中的属性 selected=“selected”
● ③判断option是否被选中，属性selected == true表示选中，反之为选中
● ④属性 multiple=“multiple”，可展示全部选择
● ⑤下拉框改变事件onchange（事件）
2.9.3 文本域
1）textarea：文本域。属性：cols为列，rows为行
2.9.4 表单提交按钮
1）submit：提交按钮。可以提交表单
表单项中的数据要想被提交：必须指定其name属性
① 普通输入项没有name属性(可以看出少了普通输入项数据)的地址栏：
html?pwd=123&rd=v1&ck=v2&ck=v3&birth=1991&hid=
在普通输入项里面写了name属性的地址栏：
html?tx=123&pwd=123&rd=v1&ck=v2&ck=v3&birth=1991&hid=
③上面提交在地址栏参数的组成：?输入项name的值=输入的值&。参数类似于key-value形式
2）图片提交：
● image：图片提交按钮
● src属性：指定图片的路径
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>表单标签title>
head>
<body>
<form action="表单标签.html" method="get">
<label for="idtx">普通输入项label>：<input type="text" placeholder="我是提示信息" name="tx" id="idtx"/><br/>
<hr/>
密码输入项：<input type="password" name="pwd"/><br/>
<hr/>
单选输入项：
<input type="radio" name="rd" value="v" checked="checked"/>1
<input type="radio" name="rd" value="v1"/>2<br/>
<hr/>
复选输入项：
<input type="checkbox" name="ck" value="v2" checked="checked"/>3
<input type="checkbox" name="ck" value="v3"/>4
<input type="checkbox" name="ck" value="v4"/>5<br/>
<hr/>
文件输入项:<input type="file" name="file">
<hr/>
下拉选择项：
<select name="birth">
<option value="1991">1991option>
<option value="1992" selected="selected">1992option>
<option value="1993">1993option>
select><br/>
<hr/>
隐藏项：<input type="hidden" name="hid" value="虽然页面看不到我，但是我会被提交"/><br/>
<hr/>
文本域：<textarea cols="10" rows="10">textarea><br/>
<hr/>
提交按钮：<input type="submit" value="注册"/><br/>
<hr/>
普通按钮：<input type="button" value="普通"/><br/>
<hr/>
重置按钮：<input type="reset"/><br/>
<hr/>
图片提交按钮：<input type="image" src="image/a.jpg">
<hr/>
取色器：<input type="color" name="color"><br>
生日：<input type="date" name="birthday"> <br>
生日：<input type="datetime-local" name="birthday"> <br>
邮箱：<input type="email" name="email"> <br>
年龄：<input type="number" name="age"> <br>
form>
body>
html>
2.9.5 HTML注册案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面title>
head>
<body>
<form action="#" method="post">
<table border="1" align="center" width="500">
<tr>
<td><label for="username">用户名label>td>
<td><input type="text" name="username" id="username">td>
tr>
<tr>
<td><label for="password">密码label>td>
<td><input type="password" name="password" id="password">td>
tr>
<tr>
<td><label for="email">Emaillabel>td>
<td><input type="email" name="email" id="email">td>
tr>
<tr>
<td><label for="name">姓名label>td>
<td><input type="text" name="name" id="name">td>
tr>
<tr>
<td><label for="tel">手机号label>td>
<td><input type="text" name="tel" id="tel">td>
tr>
<tr>
<td><label>性别label>td>
<td><input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
td>
tr>
<tr>
<td><label for="birthday">出生日期label>td>
<td><input type="date" name="birthday" id="birthday">td>
tr>
<tr>
<td><label for="checkcode">验证码label>td>
<td><input type="text" name="checkcode" id="checkcode">
<img src="img/verify_code.jpg">
td>
tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册">td>
tr>
table>
form>
body>
html>
2.10 框架标签的使用（会用就行）
1）frameset：框架标签的范围，其属性有：
● ①rows:按照行进行划分，如
● ②cols:按照列进行划分
2）frame：具体显示的页面
：name表示页面名称，src表示文件路径
3）缺点：使用框架标签时候，不能写在body里面，使用了框架标签，需要把body去掉
4）含义解释
<frameset rows="80,*"> //把页面划分成上下两部分
<frame name="top" src="a.html"> //上面页面
<frameset cols="150,*"> //把下面部分划分成左右两部分
<frame name="lower_left" src="b.html"> //左边的页面
<frame name="right" src="c.html"> //右边的页面
frameset>
5）如果在左边的页面设置超链接，想让其内容显示在右边的页面中
● 设置超链接里面属性 target值设置成右边页面的name即可，比如
<a href="01-hello.html" target="right">超链接1a>
2.11 a标签的扩展（了解）
1）百度是网络资源
2）当a标签里面访问网络资源时候，必须要加一个协议http：表示一个网络的公共协议，如果加上http协议之后，自动识别访问资源是一个网络资源
3）当浏览器里面找到相关协议，首先看这个协议是不是公共协议http。如果不是公共协议，会去本地电脑找支持这个协议的应用程序
3. CSS：页面美化和布局控制
1）css：全称Cascading Style Sheets，即层叠样式表
● 层叠：多个样式可以作用在同一个html的元素（标签）上，同时生效
● 样式表：表示有很多属性和属性值
2）好处：
● 功能强大，使页面显示效果更好
● 将内容展示和样式控制分离，提高了显示功能
● 降低耦合度。解耦
● 让分工协作更容易
● 提高开发效率
3.注意：常用的标签是div,笔记用其他标签只是为了展示效果
3.1 CSS与HTML的四种结合方式
1）内联样式：在每一个html标签上面都有一个属性 style，把css和html结合起来。常用的几个属性值及style的使用方法：
● ①background-color：背景板样式
● ②color：字体颜色
● ③使用方法：
<div style="css代码">div>
2）内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码：
<style type="text/css">
div {
css代码;
}
style>
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>HTML和CSS的结合方式title>
<style type="text/css">
div {
background-color:red;
color:yellow;
}
style>
head>
<body>
<div style="background-color:yellow;color:blue;">第一种结合方式div>
<div>第二种结合方式div>
body>
html>
3）外部样式：使用头标签link，引入外部css文件
● ①创建一个css文件
● ②在head标签内，定义link标签，引入外部的资源文件
<link rel="stylesheet" type="text/css" href="css文件的路径" />
4）外部样式另一种导入方式：通过@import url(css文件的路径)。步骤：
● ①创建一个css文件
<style type="text/css">
@import url(css文件的路径);
style>
注意：
● ①1，2，3种方式 css作用范围越来越大。1方式不常用，后期常用2，3
● ②第4种方式有些浏览器不起作用，一般使用第3种
● ③优先级（一般情况）由上到下，由外到内，由低到高，即慢加载的优先级高
● ④css语法格式：选择器名称 { 属性名：属性值；属性名：属性值；…….}
● ⑤选择器：筛选具有相似特征的元素。每一对属性需要使用用分号隔开，最后一对属性可以不加分号
3.2 CSS的三种基本选择器
1）标签选择器：使用标签名做为选择器的名称，如：
<style type="text/css">
div {
background-color:red;
color:yellow;
}
style>
2）class选择器：每个html标签都有一个class属性，可通过给该属性命名调用标签，如：
div.cls {
background-color:blue;
color:red;
}
.cls {
background-color:blue;
color:red;
}
<div class="cls">css的class选择器div>
3）id选择器：每个html标签都有一个id属性，可通过给该属性命名调用标签，建议在一个html页面中id值唯一。如：
div#id {
background-color:orange;
color:red;
}
#id {
background-color:orange;
color:red;
}
<div id="id">css的id选择器div>
4）优先级：style > id选择器 > class选择器 > 标签选择器
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>CSS的基本选择器title>
<style type="text/css">
b {
background-color:blue;
}
pre {
background-color:orange;
}
.cls {
background-color:red;
color:black;
}
#id {
background-color:green;
}
i {
background-color:blue;
}
.cls1 {
background-color:red;
color:black;
}
#id1 {
background-color:green;
}
style>
head>
<body>
<b>css的标签选择器1b>
<pre>css的标签选择器2pre>
<div class="cls">css的class选择器div>
<div id="id">css的id选择器div>
<i class="cls1" id="id1" style="background:yellow;">各选择器与style的优先级比较i>
body>
html>
3.3 CSS的扩展选择器
1）选择所有元素：语法： *{}
2）关联（子）选择器：可以设置嵌套标签内的标签的样式。
● 语法： 选择器1 选择器2{}。筛选选择器1元素下的选择器2元素
如：
div p {
background-color:orange;
color:white;
}
<div><p>css的关联（子）选择器p>div>
● 注意：单独的 < p >css的关联选择器< /p >，无效果
3）父选择器：语法： 选择器1 > 选择器2{}。筛选选择器2的父元素选择器1
4）属性选择器：语法： 元素名称[属性名=“属性值”]{}。选择元素名称，属性名=属性值的元素
5）组合（并集）选择器：把不同标签设置成同样的样式，如
s,u {
background-color:white;
color:orange;
}
<s>css的组合（并集）选择器s>
<u>css的组合（并集）选择器u>
6）伪元素（类）选择器：选择一些元素具有的状态
● ①css里面提供了一些定义好的样式，可以拿过来使用
● ②状态：
link：初始化的状态
hover：鼠标悬浮状态
active：正在访问状态
visited：被访问过的状态
● 比如超链接：
超链接的状态
原始状态 鼠标放上去状态 点击 点击之后
link hover active visited
记忆：lv ha
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>CSS的扩展选择器title>
<style type="text/css">
div p {
color:red;
}
div > p {
border: 1px solid;
}
input[type='text']{
border: 5px solid;
}
s,u {
background-color:aquamarine;
color:red;
}
a:link {
background-color: red;
}
a:hover {
background-color: green;
}
a:active {
background-color: blue;
}
a:visited {
background-color: gray;
}
style>
head>
<body>
<div><p>css的关联（子）选择器p>div>
<s>css的组合（并集）选择器s><br/>
<u>css的组合（并集）选择器u><br/>
css的属性选择器：<input type="text" ><br/>
<a href="http://css.com" target="_blank">css的伪元素（类）选择器a>
body>
html>
3.4 CSS常用属性
1）字体、文本
● font-size：字体大小
● color：文本颜色
● text-align：对其方式
● line-height：行高
2）背景
● background：
3）边框
● border：设置边框，符合属性
4）尺寸
● width：宽度
● height：高度
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>CSS属性title>
<style>
p{
color: #FF0000;
font-size: 30px;
text-align: center;
line-height: 200px;
/*
border 边框
*/
border: 1px solid red;
}
div{
border: 1px solid red;
/*
尺寸
*/
height: 200px;
width: 200px;
/*
背景：no-repeat center：不重复出现且居中显示
*/
background: url("../JavaWeb-4-HTML/image/a.jpg") no-repeat center;
}
style>
head>
<body>
<p>CSS属性p>
<div>
CSS属性
div>
body>
html>
3.5 CSS的盒子模型（了解）
1）CSS的盒子模型：在进行布局前需要把数据封装到一块一块的区域内（div）
2）边框：单独一个border为统一设置，也可以单独为边框的一条边设置，属性也是一样，如：
● 上 border-top
● 下 border-bottom
● 左 border-left
● 右 border-right
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>盒子模型之边框title>
<style type="text/css">
div {
/*
得先为div里的文本定义一个边框，才能用border调整边框
*/
width: 200px;
height: 100px;
/*
px：边框宽度
solid：边框线条样式
blue：边框线条颜色
*/
border: 2px solid blue;
}
#div12 {
border-right: 2px dashed yellow;
}
style>
head>
<body>
<div id="div11">AAAAAAAAAAAAAAAdiv>
<div id="div12">BBBBBBBBBBBBBBBdiv>
<div id="div13">CCCCCCCCCCCCCCCdiv>
body>
html>
3）内边距（padding）：文本相对于边框的距离
● 单独一个padding为统一设置，也可以分别设置，如上的上下左右四个内边距
● 默认情况下内边距会影响整个盒子的大小
● box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>CSS盒子模型之内边距title>
<style type="text/css">
div{
border: 1px solid red;
width: 100px;
}
.div1{
width: 100px;
height: 100px;
}
.div2{
width: 200px;
height: 200px;
padding: 50px;
/*
设置盒子的属性，让width和height就是最终盒子的大小
*/
box-sizing: border-box;
}
style>
head>
<body>
<div class="div2">
<div class="div1">div>
div>
body>
html>
4）外边距（margin）：文本相对于网页边框的距离
● 单独一个margin为统一设置，也可以分别设置，如上的上下左右四个内边距
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>CSS盒子模型之外边距title>
<style type="text/css">
div{
border: 1px solid red;
width: 100px;
}
.div1{
width: 100px;
height: 100px;
/*外边距*/
margin: 50px;
}
.div2{
width: 200px;
height: 200px;
}
style>
head>
<body>
<div class="div2">
<div class="div1">div>
div>
body>
html>
3.6 CSS布局之漂浮(了解)
1）float：属性值有
①left：元素向左浮动
②right：元素向右浮动
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>CSS布局之漂浮title>
<style type="text/css">
div {
width: 200px;
border: 2px solid blue;
}
.div1 {
float:left;
}
.div2 {
float:left;
}
.div3{
float: right;
}
style>
head>
<body>
<div class="div1">AAAAAdiv>
<div class="div2">BBBBBdiv>
<div class="div3">CCCCCdiv>
body>
html>
3.7 CSS布局之定位（了解）
1）position：属性值有
①absolute：将对象从文档流中拖出。即悬停在其他文档上面，如网站的广告，原先的位置会被顶替。可以使用top、bottom等属性进行定位
②relative：不会把对象从文档流中拖出。即不悬停在其他文档上面，原先的位置不会被顶替。可以使用top、bottom等属性进行定位
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>CSS布局之定位1title>
<style type="text/css">
div {
width: 200px;
height:150px;
border: 2px solid blue;
}
#div1 {
background-color: red;
position:absolute;
top: 80px;
left: 120px;
}
#div2 {
background-color: green;
width: 250px;
height:150px;
}
#div3 {
background-color: orange;
}
style>
head>
<body>
<div id="div1">AAAAAAAAAAAAAAAdiv>
<div id="div2">BBBBBBBBBBBBBBBdiv>
<div id="div3">CCCCCCCCCCCCCCCdiv>
body>
html>
DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>CSS布局之定位2title>
<style type="text/css">
div {
width: 200px;
height:150px;
border: 2px solid blue;
}
#div1 {
background-color: red;
position: relative;
top: 80px;
left:120px;
}
#div2 {
background-color: green;
}
#div3 {
background-color: orange;
}
style>
head>
<body>
<div id="div1">AAAAAAAAAAAAAAAdiv>
<div id="div2">BBBBBBBBBBBBBBBdiv>
<div id="div3">CCCCCCCCCCCCCCCdiv>
body>
html>
3.7 CSS注册案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("img/register_bg.png") no-repeat center;
padding-top: 25px;
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
}
.rg_left{
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child{
color:#FFD026;
font-size: 20px;
}
.rg_left > p:last-child{
color:#A6A6A6;
font-size: 20px;
}
.rg_center{
float: left;
/* border: 1px solid red;*/
}
.rg_right{
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p:first-child{
font-size: 15px;
}
.rg_right p a {
color:pink;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px ;
}
#username,#password,#email,#name,#tel,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6 ;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode{
width: 110px;
}
#img_check{
height: 32px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026 ;
}
style>
head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册p>
<p>USER REGISTERp>
div>
<div class="rg_center">
<div class="rg_form">
<form action="#" method="post">
<table>
<tr>
<td class="td_left"><label for="username">用户名label>td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名">td>
tr>
<tr>
<td class="td_left"><label for="password">密码label>td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">td>
tr>
<tr>
<td class="td_left"><label for="email">Emaillabel>td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱">td>
tr>
<tr>
<td class="td_left"><label for="name">姓名label>td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名">td>
tr>
<tr>
<td class="td_left"><label for="tel">手机号label>td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号">td>
tr>
<tr>
<td class="td_left"><label>性别label>td>
<td class="td_right">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
td>
tr>
<tr>
<td class="td_left"><label for="birthday">出生日期label>td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">td>
tr>
<tr>
<td class="td_left"><label for="checkcode" >验证码label>td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img id="img_check" src="img/verify_code.jpg">
td>
tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册">td>
tr>
table>
form>
div>
div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登录a>p>
div>
div>
body>
html>
你可能感兴趣的:(JavaWeb学习笔记,html,java,css)