知识点一:表格
1、什么是表格 ? 跟excel表格类似
2、表格标签 table
3、表格的组成 行 tr 单元格 td
4、建立表格步骤
1、建立表格,
2、判断行数和列数
3、用行去包含单元格
4、在每个单元格中去添加内容
5、表格的各大属性
cellspacing:边框与边框之间的距离
Cellpadding:单元格内容与边框之间的距离
border:表格的边框
width:表格的宽
height:表格的高
6、表格的结构:
标题:caption标签
表头:thead标签 表格的第一行,一般用来描述每一列所显示的内容,用thead标签讲第一行包起来,然后用th替换td,单元格中的内容相对于单元格水平居中,且加粗
表格主体:tbody标签
7、表格的标题,caption只在表格中使用
8、将excel中的表格模拟到网页中
知识点二:合并单元格
1、在Excel中演示合并单元格,运用到网页中
2、分类:跨行合并、跨列合并
3、步骤
1、判断是跨行合并还是跨列合并
2、跨行合并用rowspan属性,跨列合并用colspan属性
3、将属性写在需要合并的单元格上
4、将合并的行数或者列数写在对应的属性值中
5、将多余的单元格注释掉
知识点三:表单
1、各个网站的注册页面就是表格实现的
2、作用:显示、存储、提交数据
3、组成:表单域、表单标签、提交按钮
表单标签:action:表单向后台提交的地址?
method:向后提交的方式?get??post
表单域:表单中的元素:包含了文本框、密码框、隐藏域、多行文本框、
复选框、单选框、下拉选择框和文件上传框
input控件
普通的文本框? type = text
获取焦点:光标放在输入框内,可以打出文字
单击指定名字获取焦点需要将label标签中的属性值与input输入框的属性值保持一级即可?
value:输入框的值?
placeholder:提示信息?
密码框?:type=post
单选框:type =radio
默认单选选中?1、checked="checked
2、checked
3、checked=true
多选框:默认多选选中?1、checked="checked”
2、checked
3、checked=true
选择框默认选中:1、selected=”selected”
2、selected
3、selected=true
4、按照淘宝注册分别讲解form表单
知识点四:CSS
为什么要用CSS:使用标签中的属性去改变元素的样式会使页面显得瘫痪臃肿?
CSS:(网页美颜相机)??层叠样式表
作用:用来美化网页的?
知识点五:样式表
样式表:行内样式表?内部样式表?外部样式表?
行内样式表(内联样式表):内嵌的标签中,通过style
style是标签的属性?、属性值是多个样式
px:像素单位?
在样式表中:width是样式的属性,200px是样式的属性值,属性与属性值之间用:隔开,多个属性之间用;隔开?
内部样式表: 在head标签中使用style标签?
外部样式表?: link:建立与外部CSS文件的链接
rel="stylesheets":定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件?
CSS规范: 1、?选择器与花括号之间加空格
2、冒号与属性值之间加空格
3、多个属性值之间用;
知识点六: 字体样式属性
1、利font-size:字号大小 用像素 属性值一般设置偶数 页面中默认字体大小是16像素
2、利font-family:字体的家族 汉字表示:黑体 英文表示 SimSun Unicode?编码:?"\5B8B\4F53"
3、区font-weight:字体粗细 bold
4、font-style:字体风格 oblique/italic 表示倾斜
5、font:综合设置字体样式
选择器{font:?font-style??font-weight??font-size??font-family;}
知识点七:外观属性
1、color:文本颜色
十六进制??0-9?A-F?用六位?
#000000黑色
#ffffff黑色?
2、RGB
red?红色??green??绿色??blue蓝色?
3、0-225?
1、通line-height:行间距
?行高属性?
文本垂直居中,属性值与盒子高度相同?
line-height:?100px;
数值小于高度,文本靠上
line-height:?60px;?
?数值大于高度,?文本靠下
2、text-align:水平对齐方式
3、text-indent:首行缩进
4、text-decoration
文本下划线?
text-decoration:?underline;?
文本删除线?
text-decoration:?line-through;?
文本上划线?
知识点八:选择器
选择器:通过一种方式去选择指定的元素,这种方式就是选择器?
选择器:基本选择器、复杂选择器、伪类选择器?
基本选择器:标签选择器、类名选择器(.)、多类名选择器、id选择器(*)、通配符选择器?
复杂选择器:交集、并集、子代、后代
伪类选择器::link、:visited、:hover、:active