HTML&CSS知识点总结(二)
1.表单标签<form></form>
常用属性:
action:表单提交的位置
method:表单提交的方法(get/post/put/delete……)默认值:get
2.表单常用值解析:
(1)用户名:<input type="text" name="username" value="abc" size="40px" maxlength="5" readonly="readonly" placeholder="请输入用户名"/>
value:文本框默认值
size:文本框长度
maxlengh:最多输入字符数
readonly:只读(用户修改用户信息时的身份证号等条目)
placeholder:提示信息
3.使用div+CSS布局完成首页重构
(1)div
html标签,一个块级元素,单独显示一行,单独使用没有任何意义,需要结合CSS来使用
用途:用于页面布局
(2)span
html标签,一个内联元素,显示一行,单独使用没有任何意义,需要结合CSS来使用
用途:他主要用于对括起来的内容进行样式的修改时
4.CSS简介:
指的是层叠样式表
用途:解决内容与表现的分离
5.CSS的使用
html:整个网站的骨架
CSS:对网站的整个骨架的内容进行美化
6.CSS的语法和规范
选择器{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
7.CSS选择器
(1)元素选择器:在style中直接选择器填写为元素名称即可
(2)类选择器:在style中填写选择器为“.<class属性值>”
(3)id选择器:在style中填写选择器为“.<id属性值>”
8.其他选择器
(1)层级选择器:在style中选择器按照层级顺序填写,中间以空格相连
示例:div p{}
常用用途:设置列表属性时使用
(2)属性选择器:
示例:标签名称[属性名称=‘属性值’]{}
9.CSS引入方式
选择器:用于快速查找需要被设置样式的元素
引入方式:CSS代码所写的位置
(1)内部引入:将<style><style/>标签直接写入<head>标签内部
优点:给多个相同内容设置样式比较方便
(2)行内引入:
style是任何标签都具有的属性
行内引入设置当前行的style属性,格式如下:style=“属性名1:属性值1;属性名2:属性值2;……”
(3)外部引入:
步骤一:创建一个CSS文件
步骤二:在CSS文件中写入设置的样式属性等
步骤三:在html的<head>标签中添加<link>标签,链接到相应的CSS文件
link标签属性:
rel:规定了当前文档与被连接文档之间的关系;“style” 表示为层叠样式表
href:外部引入的CSS文件的路径
type:引入CSS文件格式类型“text/CSS”
10.CSS的浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现的像浮动框不存在一样。
浮动属性名称:float
浮动属性值:left,right,none,inherit(从父元素集成float属性的值)
清除浮动:
步骤一:添加div标签,id设置为clear
步骤二:样式中添加id样式clear
#clear{clear:both;}
备注:clear属性值:
left:左侧不允许浮动
right:右侧不允许浮动
both:两边均不允许浮动
none:默认值,允许浮动出现在两侧
inherit:从父元素集成float属性的值
11.CSS盒子模型
(1)单个盒子
内容:content
内边距:padding
边框:boder
外边距:margin
(2)多个盒子
内容:content
内边距:padding
边框:boder
与其他盒子的外边距:margin
(3)盒子的取值计算
内容的高度计算:
(1)默认值:padding,margin,border默认值为0,此时设置width和hight就为内容content的高度和宽度
(2)padding,margin,border设置值时,content高度=hight-2*(padding+margin+border)