2.1 细线表格

细线表格

1.不设置boder，设置cellspacing为1
2.设置整个表格背景色为表格线颜色，然后再设置每个单元格背景色和整个表格不一样。

或者：(css)
style="border-collapse: collapse;"
在table属性中添加以上属性

2.2 表单标签和input标签

1.表单标签（form）

表单标签的作用：用于收集用户信息，实质是将表单标签作为容器来收集表单标签中其它标签的信息。它自身无任何显示效果。

action属性：设置提交地址
method属性：设置提交方式（post/get）

点提交按钮提交的时候，将表单中所有相关标签以name-value的形式，按method属性提供的方式，提交给action属性对应的接口。

form标签提供两大功能：

a.统一提交
b.重置（清除输入信息）

a.type="text"
普通文本输入框
name属性：专门用来区分不同的信息，相当于字典的key

            账号

            邮箱

2.input标签 -单标签
属于表单标签，既可以放在form标签中，也可以放form标签外面单独使用。
type属性：type对应的值不一样，input标签体现的功能不一样
name属性：专门用来区分不同的信息，相当于字典的key
value属性：标签内容；指向输入框中的内容;设置其实是设输入框中默认值。（记录账号密码）
placeholders属性：当输入框中无内容时显示的提示信息
maxlength属性：设置输入框最大能输入的字符个数

b.type="password"：密码输入框
普通文本输入框

            密码

c.type="radio"：单选按钮
name属性：同一组选择，需要设置它们name属性值一样，才能单选
value属性：不可见；专门用于对提交数据的区分，因为在单选按钮模式中两者属性是一样的
checked="checked":让单选按钮处于选择状态。

d.type="checkbox"：复选按钮
name属性：同一组选择，需要设置它们name属性值一样，才能复选

e.type="button"：普通按钮
value属性：决定按钮上显示的信息

f.type="submit"：提交按钮
点击提交按钮后，会自动提交当前form中所有设置了name属性的相关标签的值，放在form标签外无意义，以name=value的方式提交。

g：type="reset"：重置按钮
将当前form标签中所有的标签状态设置为初始状态

3.按钮标签（button）
双标签，通过input->type="button"生成的按钮是单标签，按钮不能为图片。
中间内容部分更灵活

2.3 下拉菜单和多行文本标签

1.下拉菜单
a.select标签：代表整个下拉菜单
name属性：区分和提交

b.option标签：下拉菜单中的选项
value属性：提交的内容
selected="selected"属性：设置为默认选中。

c.optgroup标签：
label属性：给分组取名字

2.多行文本输入框
可以输入多行内容，内容超出范围可以上下滚动
name属性：提交和区分
rows属性：一次性可以显示的行数，决定高度
cols属性：列数；一行最多可以显示多少个文字，决定宽度
placeholder
内容:相当于单标签中的value功能，提交的也是这个。
maxlength属性：最多多少字

                            默认值

2.4 div和span标签

div和span都是无语义标签：一般用来将网页中的标签进行分组和分模块使用。

2.5 css基础

1.什么是css

css是web标准中的表现标准，专门负责网页中内容的布局和样式。
目前使用的是css3
css代码又叫样式表

2.css语法（怎么写？）

a.基本结构
选择器{属性名1：属性值1；属性名2：属性值2。。。}

b.说明
选择器{}：通过选择器来决定样式是针对哪个标签写的（在内联样式表中没有这个结构）。
属性：属性名不是随便写的，必须是css提供的两百多个属性中的一个；属性名和属性值之间用冒号连接；
多个属性之间用分号隔开（如果没有分号，会导致后边所有的属性无效。）。

3.css代码写在哪

a.内联样式表
将样式表作为HTML标签的style属性值
只针对一个标签有效

b.内部样式表
将样式表作为style标签的内容,head或body中。（注意是标签）
可以针对当前html中所有的标签

c.外部样式表
将样式表写在一个css文件中，再通过link导入
css文件：后缀是css的文件
可以针对所有的html中的所有标签，前提是要导入。

常用属性补充：
color：文字颜色
font-size:字体大小
background-color：背景颜色
width：宽度
height：高度

css中颜色：
a.颜色英语单词
b.rgb的十六进制值：如#ff0000(红色)
c.直接使用rgb值，如rgb(255,0,0)红；
rgba(R,G,B,Alpha):Alpha(0完全透明-1不透明)
css中数字：如果数字表示大小，必须加单位：
px：像素
em：空格

3者优先级：
内联样式表优先级最高，内部和外部的样式表看执行顺序，写在后面的优先级高。

2.6 选择器

style标签实质可以写在html文件中的任意位置
选择器{属性名1：属性值1；。。。；}
css提供的选择器写法大概也就10几种，常见的：

1.标签选择器：直接将标签名作为选择器，选中当前html中所有指定的标签
如：a{}：选中当前html中所有的a标签

2.id选择器：将标签的id属性值前加#作选择器，选择所有id是指定值的标签。
如：#text：选中当前html中id属性值为text的所有标签。

3.class选择器(类型选择器):将标签的class属性值前加.作为选择器，选中所有class是指定值的标签。
如：.test：选中当前html中class属性值是test的所有标签。

4.群组选择器：将多个选择器之间用逗号隔开，然后作为一个选择器，同时选中每个单独选择器选中的所有标签。
如：p,a,.test,#text{}:选中所有的p标签，a标签，class只是test以及id值
是text的标签。

5.后代选择器：将多个选择器用空格隔开作为一个选择器，从前往后一层一层的找，找到最后一个选择器对应的标签。
如：div .test #text{}：选中div标签中class值是test的标签中id值是text
的标签。
div div p{}：选中div中的div中的p标签

6.通配符：将作为选择器，选中当前页面中所有的标签。
如：{}：选中所有标签



    
        
        
    
    
        我是段落1，我是body p
        
            
                div1
            
            
                div2
                我是段落2，也是div div p
            
        
        我是段落3
        我是标题1，我的class是test
        我是标题2
        我是font

2.7 伪类选择器

伪类选择器
用于给标签不同的状态设置不同的样式

1.基本格式
普通选择器：伪类选择器

2.伪类选择器

link：标签的初始状态;一般作用于a标签，表示a标签中的链接没有成功访问过对应的状态，即初始状态。(如：读过的小说章节与未读过的章节不一样)
标签:link{}:此处的标签可以是任何选择器选中的标签。

visited：超链接被访问后的状态(如：读过的小说章节的状态)一般作用于a标签.

hover：鼠标悬停在标签上时对应的状态。适用于所有标签。

active:激活状态；鼠标按下但是还没有弹起时对应的状态。不是仅作用于a标签。

爱恨原则：当同一个标签需要同时给多个状态添加状态时，需要遵循爱恨原则：
link,visited,hover,active
LoVeHAte

11	12	13	14		15
21	22	23	24
31	32	33	34
41	42	43	44
51	52	53	54
61	62	63	64
71	72	73		74
	81	82		83
91	92
101	102
111	112
121	122
131	132
141	142
151	152
161	162

(22)day2-表单和css基础

2.1 细线表格

2.2 表单标签和input标签

2.3 下拉菜单和多行文本标签

2.4 div和span标签

2.5 css基础

我是标题一

2.6 选择器

我是标题1，我的class是test

我是标题2

2.7 伪类选择器

你可能感兴趣的:((22)day2-表单和css基础)

11	12	13	14		15
21	22	23	24
31	32	33	34
41	42	43	44
51	52	53	54
61	62	63	64
71	72	73		74
	81	82		83
91	92
101	102
111	112
121	122
131	132
141	142
151	152
161	162

11	12	13	14		15
21	22	23	24
31	32	33	34
41	42	43	44
51	52	53	54
61	62	63	64
71	72	73		74
	81	82		83
91	92
101	102
111	112
121	122
131	132
141	142
151	152
161	162

11	12	13	14		15
21	22	23	24
31	32	33	34
41	42	43	44
51	52	53	54
61	62	63	64
71	72	73		74
	81	82		83
91	92
101	102
111	112
121	122
131	132
141	142
151	152
161	162