标签：
7、表单标签
（1）什么是表单？把输入的数据提交到服务器上（存到服务器），这个过程称为表单
（2）使用表单标签实现数据提交到服务器上这个过程
（3）form 标签：如果写表单，首先定义表单的范围
* 属性
** action：提交的服务器的地址
** method：表单的提交方式（有很多种，常见的有两种 get和post）
*** 代码
<form action="hello.html" method="get"></form>
** get和post提交，在默认情况下，提交方式是get提交
*** get提交方式会在地址栏携带数据，安全性很差
*** post提交方式地址栏不会携带数据，安全性比较高，数据在请求体里面（讲到http协议时候详细说）
（4）输入项：可以输入内容或者选择内容的地方
** 要求1：输入项里面必须要有name属性
** 要求2：在单选输入项和复选输入项以及下拉选择输入项里面
都需要有属性value，设置的值
* 输入项需要写到form标签里面
* 大部分输入项是通过标签input进行封装操作的
** <input type="输入项的类型"/>
第一个：普通输入项 <input type="text"/>
第二个：密码输入项 <input type="password"/>
第三个：单选输入项 <input type="radio"/>
** 要求：单选输入项里面必须有name属性，同时name的属性值必须要相同
** 设置默认选中，使用属性 checked="checked"
第四个：复选输入项 <input type="checkbox"/>
** 要求：单选输入项里面必须有name属性，同时name的属性值必须要相同
** 设置默认选中，使用属性 checked="checked"
第五个：文件输入项，上传文件的。<input type="file"/>
第六个：隐藏项，这个值不会显示在页面上，但是提交表单也可以提交到服务器上
<input type="hidden"/>
第七个：普通按钮 <input type="button"/>
*** 可以写value属性，设置输入项的默认值
（5）下面的两个输入项不是使用input标签进行封装的
第八个：下拉选择输入项
* <select>
<option>AAAA</option>
<option>BBBB</option>
<option>CCCC</option>
</select>
* 使用属性 selected="selected" 默认选中
第九个：文本域
* <textarea cols="10" rows="5"></textarea>
（6）提交按钮和其他的按钮
* 提交按钮： <input type="submit"/>
** 属性 value：设置提交按钮显示的内容
** 点击提交按钮：地址发生了变化
file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html ?sex=on&love=on&love=on
** 在输入项上面写name属性之后，提交表单
file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html
?username=wangwu&password=123456&sex=on&love=on&love=on&love=on&hid=bbbb&xueli=AAAA&des=test
** 在单选框、复选框和下拉选择框里面设置了value之后，提交表单
file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html
?username=aaaa&password=123456&sex=nan&love=l&love=p&love=y&hid=bbbb&xueli=ccc&des=test
* 重置按钮：<input type="reset"/>
** 属性 value：设置重置按钮显示的内容
** 不是做清空表单输入项的操作，使表单输入项回到初始状态
* 使用图片进行提交：<input type="image" src="图片路径"/>
8、其他的标签的使用
（1）pre：原样输出
p：段落标签
s：删除线
u: 下划线
b：加粗
i：斜体
（2）div : 自动换行
span：在一行进行显示
9、案例：注册页面
（1）如果单元格里面没有内容，使用占位符替代（使用空格 ）
（2）想要一个超链接没有效果，在href属性值写成#
day01
CSS
1、css的简介
（1）什么是css？层叠样式表
* 样式表：有很多的属性和属性值，来设置内容样式
* 层叠：一层一层的，样式的优先级。
** 优先级: 最终以谁的样式为准
* 使用css目的是：把网页的内容和样式进行分离，利用代码的维护。
* 想要使用css，不能单独使用，要和html结合使用
* css和html的如何结合使用。
2、css和html的结合方式
（1）css和html有四种结合方式
第一种：使用html标签里面的属性 style="css的代码"
* 代码 <div style="color:blue;">
第二种：使用html的标签
* <style type="text/css">
css的代码;
</style>
* 代码
<style type="text/css">
div {
background-color:red;
color:black;
}
</style>
第三种：使用html标签实现 link，写在head里面
* 首先创建css文件，在css文件里面写css代码
* 在html中使用link标签引入css文件
* 代码 <link rel="stylesheet" type="text/css" href="1.css"/>
第四种：使用html的style标签，在标签里面使用语句样式操作
* 首先创建css文件，在css文件里面写css代码
* 写style标签，在标签里面 @import url(css路径);
3、css的选择器
（1）css优先级
* 在一般情况下，优先级是后加载的优先级高
（2）格式规范： 属性名称1:属性值1;属性名称2:属性值2;
（3）选择器：作用在哪个标签上（要对哪个标签里面的内容进行操作）
* css有三个基本选择
第一个：标签选择器
** 使用标签名称作为选择器
div {
background-color: red;
}
第二个：class选择器
** 每个html标签上面都有一个属性class，通过设置class属性的值
** 代码
.haha {
background-color:red;
}
第三个：id选择器
** 每个html标签都有一个属性id，通过设置id的属性值
** 代码
#hehe {
background-color:green;
}
（4）选择器的优先级
* style > id选择器 > class选择器 > 标签选择器
4、css的扩展选择器
（1）关联选择器
* 设置嵌套标签的样式
** 代码
div p {
background-color:red;
}
（2）组合选择器
* 设置不同的标签具有相同的样式
* 代码
div,p {
background-color:green;
}
（3）伪元素选择器
* 比如超链接为例，
* 状态：原始状态、鼠标放上去的状态、点击状态、点击之后的状态
:link :hover :active :visited
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网络首页</title>
<style type="text/css">
#father{
border: 0px solid black;
width: 1300px;
height: 2367px;
margin: auto;
}
.top{
border: 0px solid black;
width: 33.1%;
height: 50px;
float: left;
}
#menu{
border: 0px solid blue;
background: black;
width: 1300px;
height: 50px;
}
#clearn{
clear: both;
}
#product{
border: 0px solid blue;
width: 1300px;
height: 600px;
}
#product_top{
border: 0px solid blue;
width: 1300px;
height: 80px;
}
#product_bottom{
border: 0px solid blue;
width: 1300px;
height: 520px;
}
#product_left{
border: 0px solid red;
width: 185px;
height: 520px;
float: left;
}
#big{
border: 0px solid red;
width: 555px;
height: 260px;
float: left;
}
#small{
border: 0px solid red;
width:183px;
height: 260px;
float: left;
text-align: center;
}
#abc{
text-align: center;
}
</style>
</head>
<body>
<div id="father">
<!--1logo部分-->
<div id="" >
<div class="top">
<img src="../img/logo2.png" style="height: 48px;" />
</div>
<div class="top">
<img src="../img/header.png" style="height: 48px;" />
</div>
<div class="top" style="height: 49px;" >
<a href="#">登陆</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
<div id="clearn">
</div>
</div>
<!--2导航栏部分-->
<div id="menu">
<ul>
<a href="#"><li style="display: inline; font-size: 25px; color: white;">首页</li></a>
<a href="#"><li style="display: inline; color: white;">电脑办公</li></a>
<a href="#"><li style="display: inline;color: white;">手机数码</li></a>
<a href="#"><li style="display: inline;color: white;">鞋靴箱包</li></a>
<a href="#"><li style="display: inline;color: white;">育婴保健</li></a>
</ul>
</div>
<!--3滚动图片-->
<div id="">
<img src="../img/1.jpg" width="100%"/>
</div>
<!--4最新产品-->
<div id="product">
<div id="product_top">
<font style="font-size: 25px;">最新商品 </font><img src="../img/title2.jpg "/>
</div>
<div id="product_bottom">
<div id="product_left">
<img src="../img/big01.jpg" style="width: 100%;height: 100%;" />
</div>
<div id="product_right">
<div id="big">
<img src="../img/middle01.jpg" style="width: 100%; height: 100%;"/>
</div>
<div id="small">
<img src="../img/small04.jpg" /><br />
<font style="color: gray;">空调</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small01.jpg" /><br />
<font style="color: gray;">空调</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small03.jpg" /><br />
<font style="color: gray;">电饭锅</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small05.jpg" /><br />
<font style="color: gray;">空调</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small06.jpg" /><br />
<font style="color: gray;">空调</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small07.jpg" /><br />
<font style="color: gray;">空调</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small08.jpg" /><br />
<font style="color: gray;">空调</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small09.jpg" /><br />
<font style="color: gray;">空调</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small06.jpg" /><br />
<font style="color: gray;">空调</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
</div>
</div>
</div>
<!--5广告部分-->
<div id="">
<img src="../img/ad.jpg" style="width: 100%;height: 100%;"/>
</div>
<!--6热门产品-->
<div id="product">
<div id="product_top">
<font style="font-size: 25px;">热门商品 </font><img src="../img/title2.jpg "/>
</div>
<div id="product_bottom">
<div id="product_left">
<img src="../img/big01.jpg" style="width: 100%;height: 100%;" />
</div>
<div id="product_right">
<div id="big">
<img src="../img/middle01.jpg" style="width: 100%; height: 100%;"/>
</div>
<div id="small">
<img src="../img/small04.jpg" /><br />
<font style="color: gray;">空调</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small01.jpg" /><br />
<font style="color: gray;">空调</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small03.jpg" /><br />
<font style="color: gray;">电饭锅</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small05.jpg" /><br />
<font style="color: gray;">空调</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small06.jpg" /><br />
<font style="color: gray;">空调</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small07.jpg" /><br />
<font style="color: gray;">空调</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small08.jpg" /><br />
<font style="color: gray;">空调</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small09.jpg" /><br />
<font style="color: gray;">空调</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
<div id="small">
<img src="../img/small06.jpg" /><br />
<font style="color: gray;">空调</font>
<p>
<font style="color: red;">$399</font>
</p>
</div>
</div>
</div>
</div>
<!--广告图片-->
<div id="">
<img src="../img/footer.jpg" style="width: 100%;height: 100%;"/>
</div>
<!--友情链接和地址-->
<div id="abc">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
Copyright © 2005-2016 传智商城 版权所有
</p>
</div>
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/linjiarui/p/5628558.html
