相关属性
action:请求路径,确定表单提交到服务器的地址(路径)
method:请求方式,常用的取值:get、post
get:默认值
1、提交到的数据追加在请求路径上,追加使用?连接,之后每一对数据用&连接(/html?username=aaa&password=123)
2、请求数据长度有限,所以get请求提交的数据有限
post:
1、提交的数据不在请求路径上追加(不显示在地址栏上)
2、提交的数据大小不显示
例如:
<body>
<!--表单-->
<form action="" method="">
</form>
<!--此处的内容在<form>标签外部,数据不能提交到表单-->
</body>
2、输入域标签 input
type属性
text:文本框,单行的输入字段,用户可以在里面输入文本,默认宽度为20个字符
password:密码框,密码字段,字段中的字符用黑圆圈表示
radio:单选框,表示一组互斥选项按钮中的一个,当一个按钮被选中时,其他按钮暂时不起作用
checkbox:复选框,可以多选,刚好和单选框radio效果相反
submit:提交按钮,会把表单上的数据发送到服务器,一般不写name属性,否则“提交”两个字提交到服务器
reset:重置按钮,将表单恢复到默认值
image:图形提交按钮,通过src给按钮设置图片
file:文件上传组件,提供“浏览”按下可以需要上传的文件
hidden:隐藏字段,数据会发送到服务器,但浏览器不会显示
name:元素名,如果需要表单数据提交到服务器,必须提供name属性,服务器通过属性值获得提交的数据
value:设置input标签的默认值,submit和reset为按钮显示数据
size:大小
checked:单选框或者复选框被选中
readonly:是否可读
disabled:是否可用
maxlength:允许输入的最大长度
3、下拉列表标签 select
下拉列表,可以进行单选或者多选,需要使用子标签option指定列表项
相关属性
name:发送给服务器的名称
multiple:不写默认单选,取值为“multiple”表示对选
size:多选时,可见选项的数目
option:子标签,下拉列表中的一个选项(一个条目)
selected:勾选当前列表项
value:发送给服务器的选项值
4、文本域标签 textarea
文本域,多行的文本输入控件
cols:文本域的列数
rows:文本域的行数
5、按钮标签 button
<button type="button|reset|submit">
按钮标签很少 使用,提供“普通、重置、提交”功能,不同浏览器默认值不同
div知识点
div是html的一个普通标签,区域划分,自己独占一行,垂直的,而span是一行内容,用id或者class标记div
CSS样式规则
选择器{属性1:属性值;属性2:属性值;...}
<style>
h1{
color:red;
font-size:50px;
}
</style>
1、行内样式
通过style属性来设置元素的样式
<a style="color:red; font-size:50px;">琥珀</a>
2、内部样式(内嵌样式)
是把css代码集中卸载html文档的head头部标签体中,并且使用style标签定义
<style type="text/css">
body{
background-color:red;
}
</style>
3、外部样式(链入式)
<link rel="stylesheet" type="text/css" href="css/chapter01.css"/>
rel="stylesheet" 表示样式表
type="text/css" 表示css类型
href 表示css文件位置
优点:同一个css样式表可以被不同的html页面链接使用,同时一个页面也可以通过多个
标记链接多个css样式表
选择器
1、元素选择器
所有的html标记名都可以作为标记选择器
优点:快速为页面标记统一样式
缺点:不能设计差异化样式
h1{
color:red;
font-size:50px;
}
<h1>琥珀</h1>
2、id选择器
#demo{
color:red;
font-size:50px;
}
<h1 id="chapter01">琥珀</h1>
3、类选择器
.lalala{
color:red;
font-size:50px;
}
<h1 class="lalala">琥珀</h1>
4、属性选择器
<style>
input[type="text"]{
background-color:red;
}
input[type="passwprd"]{
background-color:green;
}
</style>
5、包含选择器
两个标签之间使用空格,给指定父标签的后代标签设置样式,可以方便在区域内编写样式
父标签 后代标签{属性1:属性值1;属性2:属性值2;...}
<style>
#d1 div{
color:red;
}
</style>