HTML&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. 围堵标签:有开始标签和结束标签。如 <html> </html>
2. 自闭合标签:开始标签和结束标签在一起。如 <br/>
● 标签可以嵌套:
需要正确嵌套,不能你中有我,我中有你
错误:<a><b></a></b>
正确:<a><b></b></a>
● 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来
● 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:每一个div占满一整行。块级标签 -->
<div>自动换行1</div>
<div>自动换行2</div>
<div>自动换行3</div>
<!-- span:文本信息在一行展示,行内标签 内联标签 -->
<span>一行显示1</span>
<span>一行显示2</span>
<span>一行显示3</span>
9)语义化标签:html5中为了提高程序的可读性,提供的一些标签
1. <header>:页眉
2. <footer>:页脚
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>
<!-- lang:指定国家 -->
<html lang="ch">
<head>
<title>文本标签</title>
<!-- meta:定义文档关键词,用于搜索引擎 -->
<meta name="keywords" content="刘备,关羽,张飞">
<!-- meta:3秒后跳转到网页:url=01-hello.html -->
<meta http-equiv="refresh" content="3; url=01-hello.html"/>
<!-- HTML5 中,有一个新的 charset 属性,使字符集的定义更加容易 -->
<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 name="top"> 顶部 </a>,
回到该位置<a href="#top"> 回到顶部 </a> -->
<a href="#top">回到顶部</a>
</body>
</html>
2.6 列表标签
1.<dl></dl>表示列表的范围
2.<dt></dt>在dl里面,表示上层列表
3.<dd></dd>在dl里面,表示下层列表
2.6.1 有序列表标签
1.<ol></ol>表示有序列表范围;
可在ol设置属性type="1"(默认),"a","i";该属性表示前标序号
2.<li></li>在ol里的具体内容
2.6.2 无序列表标签
1.<ul></ul>表示无序列表范围
可在ul设置属性type=空心圆circle 、实心圆disc 、实心方块square ,默认disc
2.<li></li>在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.<table></table>表示表格范围,属性有:
border:表格线宽度
bordercolor:表格线颜色
cellpadding:定义内容和单元格的距离
cellspacing:单元格之间的距离。如果指定为0,则单元格的线会合为一条
width:表格的宽度
height:表格的高度
align:对齐方式
bgcolor:背景色
2.<caption></caption>表示表格标题;
3.<tr></tr>在talbe里面,表示多少行,属性有:
align:设置对齐方式,left center right
bgcolor:背景色
4.<td></td>在tr里面,表示单元格,属性有:
align:设置对齐方式,left center right
rowspan:合并行(向下为跨行)
colsapn:合并列(向左为跨列)
5.<th></th>:定义表头单元格。有居中加粗作用,属性也和tr一样
6.<thead>:表示表格的头部分
<tbody>:表示表格的体部分
<tfoot>:表示表格的脚部分
<!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">3</td>
</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)如果某一行只有一个单元格,则使用
<tr><td></td></tr>
3)如果某一行有多个单元格,则使用
<tr>
<td>
<table></table>
</td>
</tr>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旅游网</title>
</head>
<body>
<!--采用table来完成布局-->
<!--最外层的table,用于整个页面的布局-->
<table width="100%" align="center">
<!-- 第1行 -->
<tr>
<td>
<img src="image/top_banner.jpg" width="100%" alt="">
</td>
</tr>
<!-- 第2行 -->
<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>
<!-- 第3行 -->
<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>
<!-- 第4行 轮播图 -->
<tr>
<td>
<img src="image/banner_3.jpg" alt="" width="100%">
</td>
</tr>
<!-- 第5行 枭易精选-->
<tr>
<td>
<img src="image/icon_5.jpg" alt="">
枭易精选
<hr color="#ffd700" >
</td>
</tr>
<!-- 第6行 -->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第7行 国内游 -->
<tr>
<td>
<img src="image/icon_6.jpg" alt="">
国内游
<hr color="#ffd700" >
</td>
</tr>
<!-- 第8行 -->
<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">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第9行 境外游 -->
<tr>
<td>
<img src="image/icon_7.jpg" alt="">
境外游
<hr color="#ffd700" >
</td>
</tr>
<!-- 第10行 -->
<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">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第11行 -->
<tr>
<td>
<img src="image/footer_service.png" alt="" width="100%">
</td>
</tr>
<!-- 第12行 -->
<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/>
<!--这里若是加value="v",则相当于在密码先输入了“v”-->
密码输入项:<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">1991</option>
<!-- 默认选中1992 -->
<option value="1992" selected="selected">1992</option>
<option value="1993">1993</option>
</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-->
<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">Email</label></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:按照行进行划分,如
<frameset rows="80,*">:把页面划分成上下两部分 ,
80表示上面部分面积,*表示下面部分面积
● ②cols:按照列进行划分
2)frame:具体显示的页面
<frame name="lower_left" src="b.html"/> :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">超链接1</a>
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标签class命名为cls的改变属性 -->
div.cls {
background-color:blue;
color:red;
}
<!-- 给所有命名为cls的class标签改变属性 -->
.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的标签选择器1</b>
<pre>css的标签选择器2</pre>
<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">AAAAAAAAAAAAAAA</div>
<div id="div12">BBBBBBBBBBBBBBB</div>
<div id="div13">CCCCCCCCCCCCCCC</div>
</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">AAAAA</div>
<div class="div2">BBBBB</div>
<div class="div3">CCCCC</div>
</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布局之定位1</title>
<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">AAAAAAAAAAAAAAA</div>
<div id="div2">BBBBBBBBBBBBBBB</div>
<div id="div3">CCCCCCCCCCCCCCC</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>CSS布局之定位2</title>
<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">AAAAAAAAAAAAAAA</div>
<div id="div2">BBBBBBBBBBBBBBB</div>
<div id="div3">CCCCCCCCCCCCCCC</div>
</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 REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!--定义表单 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">Email</label></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>