所有HTML标签中,表单标签是最重要的。在实际开发中,最经典的案例就是用户注册,几乎覆盖了表单标签的所有元素。效果如下:
描述:
属性:
1)action属性:请求路径,确定表单提交到服务器的地址(路径)。
2)method属性:请求方式。常用取值:GET、POST。
GET:默认值
特点:提交的数据追加在请求路径上。例如:/1.html?username=jack&password=1234,数据格式为key/value对,追加是使用?连接,之后每一对数据之间使用&连接。
因为请求路径长度有限,所以GET方式提交的请求数据有限定。
因为在地址栏中显示数据,所以数据安全性不高。
POST:
特点:提交的数据不在请求路径上追加(即不显示在地址栏中),安全性更好,提交的数据大小无限定。
标签一般用于获取用户输入信息,type属性值不同,则标签展现形式和搜集的信息也不同,是在页面中常用的标签。
1.type属性:
text:单行文本框。用户可在其中输入文本。默认宽度为20个字符;
password:密码框。在该控件中输入内容不明文显示,以黑圆显示。
radio:单选按钮。表示一组互斥选项按钮中的一个。当一个按钮被选中时,该组中之前选中的按钮变为非选中状态。
submit:提交按钮。提交按钮会把表单数据发送到服务器。一般不写name属性,否则将“提交”两个字提交到服务器。
因为不同项目注册需要的字段不同,需要完成的案例中没有覆盖所有的表单元素,以下标签的使用也需要掌握。
checkbox:复选框。用法与radio基本一致,在一组复选框中可以选任意多个选项。
file:文件上传组件,提供“浏览”按钮,可以选择所需要上传的文件。
hidden:隐藏域。数据会发送给服务器,页面不进行显示。
reset:重置按钮。将表单恢复到初始状态。
image:图形提交按钮,通过src给按钮设置图片。
button:普通按钮。通常结合Javascript实现动作效果。
2.name属性:元素名。如果需要将表单数据提交到服务器,则必须提供name属性值,服务器通过该属性值获取提交的数据。
3.value属性:设置input标签的默认值。submit和reset按钮的value为设置按钮显示文字。
4.size:元素的大小
5.checked:设置单选按钮或者复选框被选中
6.readonly:设置元素只读,不能输入
7.disabled:是否可用。加该属性后,元素不可用
8.maxlength:允许输入的最大长度
9. placeholder:输入框的提示
1.作用:展现下拉列表,可以进行单选或者多选。需要结合字标签指定每一项列表项。其中标签上的属性如下:
name:用于将数据发送给服务器时的参数名称
multiple:不写该属性,则默认是单选,若取值为”multiple”表示多选
size:多选时,可见选项的数目
子标签:下拉列表中的每一个选项,属性如下:
selected:勾选当前列表项
value:发送给服务器端的选项值
多行文本框,可以输入任意多的文本信息。属性如下:
cols:文本域的列数
rows:文本域的行数
按钮标签一般很少使用,提供“普通按钮|重置|提交”功能。不同浏览器默认值不同。
为了结构更好的显示表单。本案例需要使用table表格布局。需要提供2列来显示数据,其余行进行单元格合并即可。最终需要创建10行2列的表格。
整体页面也使用表格布局,需要五行一列表格。在第三行插入一个十行两列的表格。布局代码如下:
<table border="0" width="1300px" align="center">
<tr>
<td height="58">
td>
tr>
<tr height="50">
<td bgcolor="black">
<td height="600" background="../img/regist_bg.jpg">
<table width="900" height="500" border="1" align="center" bgcolor="white">
<td colspan="2">td>
<td width="150"> td>
<td>td>
<td> td>
<tr align="center">
table>
<td>
<img src="../img/footer.jpg">
<form action="#" method="get">
<td colspan="2">
<font color="blue" size="4">会员注册font> USER REGISTER
<td width="150">用户名:td>
<td><input type="text" name="username" size="40">td>
<td>密码:td>
<td><input type="password" name="userpass" size="40">td>
<td>确认密码:td>
<td><input type="password" name="repassword" size="40">td>
<td>Email:td>
<td><input type="text" name="email" size="40" >td>
<td>姓名:td>
<td><input type="text" name="realname" size="40">td>
<td>性别:td>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<td>出生日期:td>
<input type="text" name="birthday" size="40">
<td>验证码:td>
<input type="text" name="checkcode">
<img src="../img/yanzhengma.png">
<td colspan="2"><input type="submit" value="注册">td>
form>
页面实现效果如下:
上次课中我们使用了table表格对网站首页进行了布局。但是表格布局有自身的缺陷,不灵活。在此,我们采用UI工程师经常使用的DIV+CSS方式进行布局,这种布局方式更为灵活。
2.2.1什么是 DIV?
div就是html的一个普通标签,主要用于区域的划分。div特性:独占一行。独自使用该标签一般不能实现复杂效果,必须结合CSS样式进行渲染。
div是块级元素,我们所学的html基本标签中还有p,h1-h6,li等都是块级元素。块级元素的特点是:独占一行,可以通过CSS样式设置宽度和高度。
<style>
div{
border: 1px solid red;
width: 100%;
height: 300px;
}
style>
<body>
<div>
极客营
div>
菜单部分
极客营 <a href="#">百度a>
body>
页面效果:
span标签:一般结合DIV使用,对页面局部文字进行特殊设定。也必须使用CSS设定样式,否则单独使用无任何含义。
span{
font-size: 30px;
color: green;
font-weight: bold;
<span>
span>
2.2.2 CSS概述
1.CSS是什么
CSS通常称为CSS样式或层叠样式表,主要 用于设置HTML页面中文本内容(字体,大小,对齐方式等)、图片外观(高度、边框样式、边距等) 以及版面的布局等外观显示样式。
CSS可以使HTML页面更美观,CSS色系的搭配可以让用户更舒服,CSS+DIV布局更加灵活,更容易绘制出用户需要的结构。
2.CSS名词解释
CSS(Cascading Style Sheets):层叠样式表
样式:给html标签添加需要显示的效果。
层叠:使用不同的添加方式,给用一个html标签添加样式,最后所有样式叠加在一起,共同作用于该标签。
2.2.3 CSS样式规则
使用HTML时,需要遵从一定的规范。CSS亦是如此,若想熟练使用CSS对网页进行修饰,首先需要了解CSS样式规则。具体格式如下:
选择器{
属性1:属性值1;
属性2:属性值2….
在上面的样式规则中,”选择器”用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。属性和属性值以键值对的方式出现,使用英文“:”分割。多个属性之间使用用为“;”分隔。例如:
h2{
color:red;
font-size:18px;
初学者在书写CSS样式时,除了要遵循CSS规则,还需要注意CSS代码结构中的几个特点:
1)CSS样式”选择器严格区分大小写”,属性和属性值不区分大小写
2)多个属性之间必须用应为状态下的分号隔开,最后一个属性后的分号可以省略,但是,为了便于增加新样式最好保留。
3)如果属性的值是由多个单词组成且中间包含空格,则必须为这个属性加上英文状态下的引号。例如:
p{ font-family:”Time New Roman”;}
4)在编写CSS代码时,为了提高代码的可读性,通常会加上CSS注释,例如:
/*这是CSS注释文本,此文本不会显示 在浏览器窗口中*/
5)在CSS代码中空格是不被解析的,花括号以及分号前后的空格可有可无。因此,可以使用空格键、Tab键、回车键等对样式进行排版,即所谓的格式化CSS代码,这样可以提高代码的可读性。例如:
h1{font-size:20px;color:red}
h1{
font-size:20px; /*定义字体大小*/
color:red /*定义字体颜色*/
上述两端代码所呈现效果是一样的,但是,第二种写法的可读性更高。需要注意的是,属性值和单位之间是不允许出现空格的,否则浏览器解析会出错。例如下面这段代码是不正确的。
h1{font-size:20 px; } /*20和单位px之间有空格*/
2.2.4.CSS选择器
1)标签选择器
标签选择器作用于该页面中的所有相同标签元素。
/*样式表:
选择器:1.标签选择器
基本样式:1.文本样式
* */
p{
color: yellow;
color: red;
head>
<h1>春晓h1>
<p>春眠不觉晓p>
<p>处处闻啼鸟p>
<p>夜来风雨声p>
<p>花落知多少p>
效果如下:
2)类选择器
类选择器主要作用于同一类名的元素
类选择器使用分为两步:第一步:在页面元素上添加class属性,并取值。第二步:在样式表中通过.class名称编写样式表。
.mystyle{
font-size: 20px;
<h1 class="mystyle">春晓h1>
<p class="mystyle">春眠不觉晓p>
<p class="mystyle">夜来风雨声p>
3)ID选择器
ID选择器一般用于页面某个元素与其他元素样式都不相同时使用。使用步骤与类选择器类似。第一步:在元素上添加id属性,并取值。第二步:在样式表中使用#id名称编写样式表。
#onlyStyle{
font-size: 40px;
color: pink;
<p id="onlyStyle">花落知多少p>
效果图如下:
4)层级选择器
语法格式:选择器1 选择器2{样式表}
含义:过滤页面中选择器1下面的符合选择器2的任何层级子元素。
例子:
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器title>
div p{
color: orange;
<hr />
html>
效果:
通过例子可以说明,层级选择器可以对页面中某些元素进行过滤,实现单独设置的好处。
5)属性选择器
属性选择器通过过滤标签上的属性,实现过滤功能。
例子:过滤页面中所有input标签,并且type属性值为text的元素,为其设置样式
input[type='text']{
background-color: grey;
用户名:<input type="text"><br />
密码:<input type="password" />
效果:
6)组合选择器
组合选择器主要作用是当很多选择器拥有自己的样式,同时又都具有相同的样式时,可以将多个选择器组合在一起应用相同的样式表。
h1,p{
font-size: 24px;
color: deeppink;
2.2.5引入CSS样式
CSS使用非常灵活,既可以嵌入在HTML文档中,也可以是一个独立的文件。如果是单独的文件,则必须以.css为扩展名。CSS和HTML结合的3种常用方式:
1)行内样式
行内样式是通过标签的style属性来设置元素的样式的。
<style type="text/css">
<p style="font-size: 40px; color: red;">夜来风雨声p>
行内样式通过标签的属性来控制样式,这样并没有做到结构与表现(HTML展现结构,CSS显示效果)相分离,所以一般建议少使用。学习阶段有时候为了快速编程,偶尔使用。
2.内嵌样式
内嵌样式又称为内部样式,是将CSS代码集中写在HTML文档的