1.表单
表单的作用:
在网页上将用户输入的数据提交给服务器
表单的语法:
<form action="表单提交的服务器地址" method="提交方法">
在语法中:
form
:定义一个表单,action是规定处理表单数据的目标地址,method是规定表单的提交方式,取值为get(公开)和post(隐藏),默认使用get , 通常使用post。
表单元素的基本语法:
<input name="元素名称" type="类型" value=“初始值”size=“显示宽度”maxlength=“字符长度”checked=“是否选中”/>
在语法中:
type
:
指定表单元素的类型,可用的选项有text(文本框),password(密码框),radio(单选按钮),checkbox(复选框),submit(提交按钮),reset(重置按钮),button(普通按钮),hidden(隐藏域),image(图片按钮),file(文件选择框),默认为text。
下拉列表框的语法:
<select name=“指定列表名称”size=“行数”>
<option value="可选项的值" selected=“selected”>.........</option>
<option value="可选项的值">.........</option>
<option value="可选项的值">.........</option>
............................................
</select>
在语法中:
selected
:表示该选项默认被选中
size
:确定列表中同时可见的行数
多行文本域的语法:
<textarea name="news" cols="40" rows="6">初始文本框内容</textarea>
在语法中:
cols
:指定多行文本域每行可以输入多少个字符
rows
:指定多行文本域最少的行数(超过则自动添加行数)
<textarea>........</textarea>
:不能使用value属性来赋值
表单结构:
<
fieldset>
<legend align=“left”>表单结构标题</legend><br/>
姓名:<input name=”” type=”text”/><br/>
性别:<input name=”” type=”text”/><br/>
年龄:<input name=”” type=”text”/><br/>
</fieldset>
在语法中:
<fieldset>..........<fieldset>
:为表单添加一个表单结构,将表单元素容纳在一个方框中;
<legend>........</legend>
:为表单结构添加一个标题;
align
:是指定标题的对齐方式,取值为left(标题左对齐),right(标题又对齐) 。
关联表单元素:
<label for=“name”>姓名</label><input name=“”type=“text”/>
在语法中:
<label for=“name”>姓名</label>:
是将姓名跟表单关联起来;
for
:是建立某个表单控件与表单的关联。
注意事项
1. 表单元素提交给服务器的前提是
必须要设置name属性
2.表单元素提交数据给服务器,提交的是表单元素的value属性.但是radio单选框,
checkbox复选框默认没有value值,
2 . CSS基本语法
<div>标签:
可以用于定义
HTML文档中的分区或节,即可以把HTML文档分割为独立的,不同的部分。
选择器:
表示被修饰的对象,如页面中被修饰的段落标签
<p>,列表标签<li>等;
属性:
希望改变的样式,如颜色(),字体大小()等,属性和属性值用冒号
“:”隔开。
2.1.编写CSS的三种方式
1.内部方式
特点:
样式要放在style>标签里面的
格式:
<style type="text/css">
a{color:red;}
</style>
优点:
有一定的复用性,在当前html页面内
缺点:
只能在当前页复用
2.行内方式
特点:
直接将CSS代码写在html标签里面,以属性的形式存在
格式 :
<a href="#" style="color: red;">新闻标题1</a>
优点:
方便书写,可读性好
缺点:
不能复用
3.外部方式
特点
:
CSS代码写在外部文件中,以style属性的方式存在,由link独有的标签进行导入
格式 :
<link type="text/css" rel="stylesheet" href="css/1.css"/>
type : 引入资源的类型
rel : relation缩写,用于描述当前引入资源文件与html的关系---样式表
href : 引入文件的位置
优点:
极大的复用性,不同html都可以引用
缺点:
会造成多次访问服务器加载资源文件
2.2.CSS选择器
2.2.1基本选择器
1.标签选择器 :
根据标签名选择要操作的html元素
标签选择器的语法:
标签名
{
属性:属性值;
...............
}
2.ID选择器 :
html元素都有一个id属性,这个id属性用于标识html 元素唯一,所以id选择器就是操作唯一的html元素
ID选择器的语法:
#ID名称{
属性:属性值;
...............
}
在语法中:
ID选择器:
定义
ID选择器时有个“#”号,但设置HTML标签的ID属性时不需要
。
应用
ID选择器时,首先使用ID属性标记被修饰的页面元素。例如,设置某个<div>标签的id,<div id=“ID名称”>,然后定义相对的ID选择器样式就可以 了。
3.类选择器 :
是给html元素分类,分类之后再控制样式
类选择器的语法:
.类名{
属性:属性值;
...............
}
在语法中:
类选择器:
类选择器的类名可以任意选择,应用样式时使用标签的
class属性引用类样式,即:标签<名 class=“类名”>标签内容</标签名>
基本选择器的优先级 :
ID选择器 > 类选择器 > 标签选择器
2.2.2复合选择器
将基本选择进行组合之后就是符合选择器
1,并集选择器 (
符合其中一个选择器条件即可
)
格式 :
选择器名称1, 选择器名称2…{
样式属性1:样式属性值1;
样式属性2:样式属性值2;
……
}
在语法中:
多个选择器之间用英文半角输入法下的
“
,
”连接。
在并集选择器中,使用逗号连接的选择器,可以是基本选择器,也可以是复合选择器。
2.交集选择器(
符合所有选择器条件
)
格式 :
选择器名称 选择器名称{
样式属性1:样式属性值1;
样式属性2:样式属性值2;
……
}
在语法中:
<p>标签内嵌套<span>标签,<span>标签是<p>标签的后代,两者之间用空格隔开。
3.层级选择器(
操作指定层级结构的html元素样式
)
格式
选择器名称 选择器名称……{
样式属性1:样式属性值1;
样式属性2:样式属性值2;
……
}
4.属性选择器(
根据html元素属性设置样式
)
格式
选择器名称[属性名=“属性值”]{
样式属性1:样式属性值1;
样式属性2:样式属性值2;
……
}
优先级 :
就近原则,由于复合选择器是由基本选择器组合在一起,所以
优先级与基本选择器保持一致
2.3.3伪类选择器
操作html元素在不同状态下的样式
特点
任何html元素都有如下状态
未访问过状态
已访问过状态
鼠标悬浮状态
鼠标按下状态
格式
选择器名称:状态行为{
样式属性1:样式属性值1;
样式属性2:样式属性值2;
……
}
状态行为:
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
3 . CSS属性
3.1文本属性:
color:
设置文本颜色
line-height:
设置行高(间距)
text-align:
设置对齐方式,取值为
left,right,center
letter-spacing:
设置字符间距
text-decoration:
设置文本修饰,取值为
underline,none,overline,line-through,blink,inherit
white-space:
规定如何处理空白,如规定是否换行的常用等,常用取值为
nowrap(不换行)
3.2字体属性:
font:
在一个声明中设置字体所有的样式属性
font-family:
定义字体类型
font-size:
定义字体大小
font-weight:
定义字体的粗细
font-style:
设置字体风格(倾斜)
注意:
当同时需要设置英文字体和中文字体时,要将英文字体设置在中文字体之前,例如:
P{
font-family:Verdana,“宋体”;
}
3.3背景属性:
background:
简写属性,作用是将背景的多个分量属性设置在一个声明中
background-color:
设置元素的背景颜色
background-image:
把图像设置为背景
background-repeat:
设置背景的平铺方式
background-position:
设置背景出现的初始位置
3.4列表属性:
list-style:
简写属性,把所有用于列表的属性设置于一个声明中
list-style-image:
将图像设置为列表项标志
list-style-position:
设置列表中列表项标志的位置
list-style-type:
设置列表项标志的类型
4 . 盒子模型
CSS中盒子模型包括外边距(
margin
),边框(
border
)和内边距(
padding
)等属性。
4.1外边距
margin-top:
上外边距
margin-right:
右外边距
margin-bottom:
下外边距
margin-left:
左外边距
margin:
外边距缩写形式
4.2边框
border-top:
上边框
border-right:
右边框
border-bottom:
下边框
border-left:
左边框
border:
边框默认属性
border-color:
边框颜色
border-width:
边框宽度
border-style:
边框样式,取值为
none
(默认值,无边框),
solid
(实线),
dashed
(虚线)
4.3内边距
padding-top:
内容与上边框之间的距离
padding-right:
内容与右边框之间的距离
padding-bottom:
内容与下边框之间的距离
padding-left:
内容与左边框之间的距离
padding:
内边距默认属性
5 . 浮动(
float)
语法:
float:值;
在语法中:
left:
左浮动
right:
右浮动
none:
不浮动(默认值)
语法:
clear:值;
在语法中:
left:
左侧不允许有浮动
right:
右侧不允许有浮动
both:
两侧均不允许浮动
none:
允许浮动元素在两侧出现(默认值)
6 . 定位
CSS的
定位属性(
position)
主要包括
绝对定位(
absolute)
和
相对定位(
relative)
。绝对定位的元素与文档无关,不占据页面空间,他可以覆盖页面上的其他元素;相对定位与绝对定位不同,相对定位的元素无论是否进行移动,元素都会占据页面空间
绝对定位:
position:absolute;
设置绝对定位的堆叠次序:
z-index:2;
相对定位:
position:relative;
7 . 其他属性
7.1控制元素显示方式(
display)
控制元素显示方式的语法
display:值;
display的值:
block:
将元素显示为块级元素,该元素前后会带有换行符
inline:
元素被显示为内联元素,该元素前后没有换行符(默认值)
None:
该元素不会被显示
7.2处理盒子中内容的溢出(
overflow)
overflow的语法
Overflow:值;
overflow的值:
visible:
内容不会被修剪,呈现在盒子之外(默认值)
hidden:
内容会被修剪,并且其余内容是不可见的
scroll:
内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
auto:
如果内容会被修剪,则浏览器会显示滚动条以便查看其余内容
7.3设置光标的形状(
cousor)
cousor的语法
cousor:值;
cousor的值:
pointer:
光标显示为
“手形”