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）
网友评论