HTML表单
表单是一个HTML中的容器,不会直接显示到浏览器中,表单的作用是负责收集数据并且将数据发送到指定的位置(其他页面或者服务器)。
作用:数据传输
<form> 属性如下:
action(行动) : 指定数据发送的位置
method(方法) : 指定发送方式 两个值 : get | post
enctype(数据编译类型)
默认值:application/x-www-form-urlencoded uname=张三&pwd=123
上传时:multipart/form-data
placeholder属性
框内提示信息会在输入字段为空时显示,并会在字段获得焦点时消失。这种提示信息就用到了HTML5的属性:placeholder
<input placeholder="text"> text:规定用于验证输入字段的模式。placeholder 属性是 HTML5 中的新属性。
placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。
textarea中也支持placeholder属性,也就是说类似于文本框输入的地方都可以使用placeholder属性。
<input type="text" placeholder="请输入姓名" >
input标签
input 输入。 是表单收集数据时使用的最基本的一个标签。
基本属性:
id : 设置当前标签的唯一值。
name:设置标签的名称,(可重复)。表单传递数据必须的名称。
value:设定默认值。
type:类型(太多了)
text : 文本框
password : 密码框
number :数组框
date:日期类型
radio:单选按钮
button:普通按钮
checkbox:复选框
file:文件上传框
email : 邮件输入框
hidden:隐藏输入框
reset:重置按钮
submit :提交按钮
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="index.html" method="get" >
<!--文本类型-->
<input name="" type="text" value="123" /><br>
<!--密码类型-->
<input name="" type="password" /><br>
<!--数字类型-->
<input name="" type="number" /><br>
<!--日期类型-->
<input name="" type="date" /><br>
<!--单选按钮类型-->
男<input name="s" type="radio" />女<input name="s" type="radio" /><br>
<!--复选框-->
抽烟<input name="s1" type="checkbox" />
喝酒<input name="s1" type="checkbox" />
烫头<input name="s1" type="checkbox" />
<br>
<!--文件上传框-->
<input name="s1" type="file" /><br>
<!--邮件输入框-->
<input name="s1" type="email" />
<!--隐藏输入框--><br>
<input name="s1" type="hidden" /><br>
<!--普通点击按钮-->
<input name="s1" type="button" value="show" /><br>
<!--重置按钮-->
<input name="s1" type="reset" value="还原" /><br>
<!--表单提交按钮-->
<input type="submit" value="点我" /><br>
</form>
</body>
</html>
下拉列表框
一组数据,这组数据以下拉列表的形式显示用户可以直接选择!
<select> 子标签<option> 特殊的标签<optgroup>
<select>标签name属性是必须的
<option>标签要显示的内容写在标签之间
<optgroup>标签要显示的内容要在标签中写label属性显示
文本域
input text 是文本框, 只能输入一行,还不能换行。使用文本域弥补。
标签:<textarea>
有value值,但是这个value值不能直接显示到文本域中,如果想设置默认值,需要将设置的值直接写在两个标签中间。
案例:注册页面
名称,账号,密码,性别,爱好,学历,邮箱,头像,简介,注册时间
标签(通用)禁用和只读设置
禁用状态(disabled="disabled"):页面能显示,但是不可操作并且数据不能采集传输
只读(readonly="readonly"):页面能显示,不可操作但是数据能够采集传输(单选按钮不能使用)
单选按钮 | 多选按钮 的默认选中:checked = “checked”
下拉列表框的默认选中:selected = “selected ”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单注册</title>
</head>
<body>
<form action="index.html" method="get">
名称:<input type="text" name="name" /><br>
账号:<input type="text" name="username" /><br>
密码:<input type="password" name="pwd" /><br>
性别:
男<input disabled="disabled" type="radio" name="sex" />
女<input type="radio" checked="checked" name="sex" />
<br>
爱好:
抽烟<input name="hobbies" checked="checked" type="checkbox" />
撩妹<input name="hobbies" checked="checked" type="checkbox" />
吹牛<input name="hobbies" type="checkbox" />
三里屯<input name="hobbies" type="checkbox" />
蹦迪<input name="hobbies" type="checkbox" />
<br>
学历:<select name="xl">
<option value="">=== 请选择 ===</option>
<option value="春天花花幼稚园">春天花花幼稚园</option>
<option value="青青草原小学">青青草原小学</option>
<option value="小葵花妈妈课程">小葵花妈妈课程</option>
<option selected="selected" value="家里扶泥呀大学">家里扶泥呀大学</option>
<option value="哈尔滨佛学院">哈佛</option>
</select>
<br>
邮箱:<input type="email" name="email" /><br>
头像:<input type="file" name="photo" /><br>
简介:<textarea cols="50px" rows="10px" name="mark"></textarea><br>
注册时间:<input type="date" name="create_time" /><br>
<input type="submit" value="注册" />
<input type="reset" value="重置" />
</form>
</body>
</html>
纯HTML布局(老式布局)
- 表单居中
- 尝给表单一个背景颜色
- 冒号对齐
思想:使用table强制格式化
效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单注册</title>
</head>
<body>
<center>
<form action="index.html" method="get">
<table border="0px" cellpadding="8px" width="700px" cellspacing="0px" bgcolor="lightyellow">
<tr>
<td width="30%" align="right">名称:</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td width="30%" align="right">账号:</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td width="30%" align="right">密码:</td>
<td><input type="password" name="pwd" /></td>
</tr>
<tr>
<td width="30%" align="right">性别:</td>
<td>
男<input disabled="disabled" type="radio" name="sex" />
女<input type="radio" checked="checked" name="sex" />
</td>
</tr>
<tr>
<td width="30%" align="right">爱好:</td>
<td>
抽烟<input name="hobbies" checked="checked" type="checkbox" />
撩妹<input name="hobbies" checked="checked" type="checkbox" />
吹牛<input name="hobbies" type="checkbox" />
三里屯<input name="hobbies" type="checkbox" />
蹦迪<input name="hobbies" type="checkbox" />
</td>
</tr>
<tr>
<td width="30%" align="right">学历:</td>
<td>
<select name="xl">
<option value="">=== 请选择 ===</option>
<option value="春天花花幼稚园">春天花花幼稚园</option>
<option value="青青草原小学">青青草原小学</option>
<option value="小葵花妈妈课程">小葵花妈妈课程</option>
<option selected="selected" value="家里扶泥呀大学">家里扶泥呀大学</option>
<option value="哈尔滨佛学院">哈佛</option>
</select>
</td>
</tr>
<tr>
<td width="30%" align="right">邮箱:</td>
<td>
<input type="email" name="email" />
</td>
</tr>
<tr>
<td width="30%" align="right">美女头像:</td>
<td>
<input type="file" name="photo" />
</td>
</tr>
<tr>
<td width="30%" align="right">简介:</td>
<td>
<textarea cols="50px" rows="10px" name="mark"></textarea>
</td>
</tr>
<tr>
<td width="30%" align="right">注册时间:</td>
<td>
<input type="date" name="create_time" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册" />
<input type="reset" value="重置" />
</td>
</tr>
</table>
<br>
</form>
</center>
</body>
</html>
div&span布局标签
div (division) 是一个非常常见的布局标签。
特点:
1、如果没有填充内容,或者指定固定的宽高,那么网页是无法显示的。
2、div属于块级(默认占一行)布局标签
span 也是一个常见的行级布局标签。
1、如果没有填充内容,或者指定固定的宽高,那么网页是无法显示的。
2、属于行级布局标签多个标签或者文字默认在一行显示
3、一般应用场景都是包含文字
CSS
CSS (cascading style sheet) 层叠样式表,作用是用来修改HTML标签或者给标签定位。
相比标签自带的属性而言,CSS会更加强大。
基本CSS的语法及引用方式
给标签设定CSS样式一共有三种方式
第一种:行内样式(直接写在标签上的CSS)
语法:在标签中直接写style属性和对应的多个值。
好处:代码编写方便。
缺点:不能公共使用并且整个页面会变得非常臃肿。
第二种:内部样式(在本页面中)
语法:在HTML中使用<style></style>
好处:统一代码,能够书写公共的CSS给当前的标签使用。
缺点:依然占位代码空间。
第三种:外链样式 (不写在本页面中,并且任意网页使用)
语法:定义单独的CSS样式文件,并且将文件引入到指定的HTML中。
好处:页面简洁,公用方便。
缺点:无
如果:三种方式都引入了相同的css,到底谁生效。
就近原则:优先显示行内样式,然后内部样式和外链样式谁后加载显示哪个样式。
CSS选择器
除行内样式都需要使用选择器来定位标签,这种用来定位的方式就是选择器
语法:
选择器{
属性名:值;
属性名:值;
属性名:值;
....
}
第一种:标签选择器
第二种:类选择器(class选择器)
在所有的HTML标签中都是定义id、name、class(只为CSS和脚本服务。单独书写没有任何作用)
第三种:ID选择器
特点:唯一,这个样式在当前网页中只有一个标签能够使用。
在你无法选择的时候,记住class永远是你的好朋友!
同样三种方式执行的时候 ID选择器 > 类选择器 > 标签选择器,即谁的范围小就先执行谁
CSS常用的样式
<div></div>
设置宽度:width
设置高度:height
背景颜色:background-color
边框颜色:组合写法 border:线条宽度 线条样式 线条颜色。(例如:border:20px solid red)
线条样式:solid 实线、dashed 虚线 、dotted 点虚线、
标签内字体颜色:color
设置字体相关样式:font
设置鼠标指针样式:cursor
设置标签圆角:border-radius (圆形设定是当前正方形的半径)
设置标签中文本的位置:text-align (left、center、right...)
设置div引入背景图片
CSS盒子模型
盒模型(box model),用来表现当前标签的内边距和外边距。
padding 属性有一个特性,设置时会自动增长边距。
margin 属性不会增长
设置margin-top时外层div会跟随着内层div移动,这样产生了一个默认的浮动效果
在外层div中使用 css overflow: hidden; 清除浮动效果。
内边距与外边距的实际应用
总结
表单 form [ action / method ]
input
[ text、password、file、number、date、radio、checkbox、hidden、button、submit、reset、email ]
textarea 文本域
select > option | optgroup 选择
布局 table
div 块级元素,占一行
span 行级元素
css
width:宽
height:高
border :宽度 样式 颜色;
font : 字体大小 字体样式;
color : 字体颜色
background-color 背景颜色
background-image : url(“地址”) css引入图片
background-size:宽 高; 调整图片大小
border-radius 调整边角
cursor: 设置光标样式
text-align: center 设置文本左右居中
line-height : 设置行高
vertical-align : 设置上下居中
盒子模型