2018-09-18-day22HTML&CSS总结

一、HTML部分

1.表单标签 form标签

表单标签是用来收集用户信息的,是一个容器,用来获取这个标签中相应的其他标签(input标签)的数据
可以将收集到的数据,通过method对应的方式去发送请求(发送给action对应的接口)

<form action='' method=''>

    <input type='submit' name='' id='' value='提交'>
</form>

2.input标签

单标签
a.type属性:决定input标签的样式
-text(默认值):对应的是文本框
-password:密码输入框
-file:文件域,文件选择器
-radio:单选按钮,1、单选按钮中的value值设置为这个按钮选择后提交对应的值
2、多个单选按钮只能选中一个,那么这些按钮对应的
name值必须一致
3、一组(name值一样)单选按钮提交的时候只提交被选中的按钮的name值和value值
4、按钮要默认选择的时候设置checked='checked'
checked属性设置默认选中
-checkbox:复选按钮
1.同一组对应的name值一样
2.value值是选中后对应的值
-button:普通按钮,value值是按钮上显示的内容
-submit:提交按钮,自动将当前form标签中设置了name属性的input标签对应的值
通过method对应的方式提交给action对应的接口,放在form标签里面有效
-reset:重置按钮,将当前form标签里面input标签的值设置为初始状态,放在form标签里面有效
b.name属性:区分不同的input对应的值
c.value属性:input标签中的值,相当于内容
d.placeholder属性:(占位符)input作为文本输入框的属性,输入框中的提示信息
e.maxlength属性:约束输入框能输入的字符的最大个数
提交input中的数据给服务器的时候,是以name值=value值来提交的

        <form>
            <span>账号:</span>
            <input type='text' name='num' />
            <span>手机号:</span>
            <input type='text' name='phonenum' />
            <input type="submit" value='提交' />
        </form>

注意:input标签放在form外边同样可以使用,只是不能直接使用重置和提交功能

3.下拉菜单和多行文本域

a.select标签,option标签
一个select标签对应一个下拉菜单,菜单中的选项要通过option来列举

            <select name='address'>
                <optgroup label="四川省">
                    <option value='cd'>成都市</option>
                    <option value='nj'>内江市</option>
                    <option value='zy'>资阳市</option>
                    <option value='zg'>自贡市</option>
                </optgroup>
                <optgroup label="山西省">
                    <option value="ty">太原市</option>
                    <option value='yc'>运城市</option>
                    <option value='dt'>大同市</option>
                </optgroup>
            </select>

select分组,optgroup实现分组,通过selected属性设置默认被选中状态,默认情况下是第一个被选中

4.按钮,button标签

<button>注册</button>

5.div标签和span标签

div标签和span标签是空白标签,没有语义。一般用来做分组(将网页分块)
div默认会换行,span是在一行显示多个
div:块级标签(一行只能放一个标签)

6.块级标签和行内标签

块级标签:一个标签占一行
h1~h6,p,ul,ol,li,dl,dd,table,tr,hr等
行内标签:一行可以放多个行内标签
a,img,input,select,button,textarea等

二、CSS部分

CSS是web标准中的表现标准,用来规定网页上内容的样式(CSS又叫样式表)
目前广泛使用的是CSS3

1.怎么来写样式表(CSS),写在哪儿?

a.内联样式表:整个网页只有这个标签有这个样式用内联样式
将样式写在标签的style属性中(每个标签都有style属性),内部中不需要使用选择器

<p style="background-color:red;">样式表</p>
<p style=""></p>
b.内部样式表:将样式表写在head标签中的style标签中
<style type='text/css'>
    选择器{
        属性1:属性值1;
        属性2:属性值2;
    }
</style>

c.外部样式表
将样式表写在css文件中,然后再head中通过link标签导入

<link rel="stylesheet" type="text/css" href='./css/css_basic.css' />

注意三种样式的优先级:
不管是什么情况下,内联的样式表的优先级更高,内部和外联样式的优先级没有确切的,谁后写谁更高

2.固定语法

选择器{
    属性:属性值;
    属性2:属性值2
}

说明:
a.选择器:选择器的作用是用来确定后面的样式到底是给哪个/哪几个标签写的
b.属性:属性是css中本来就支持和拥有的属性,属性的顺序可以随便写
属性和属性值之间使用冒号连接,
属性后面必须写分号,不管是不是最后一个
c.属性值:
(1)数值:如果数值是用来表示大小,后面必须跟单位px(像素)或者%(占比,父标签宽高是确定的才能使用)
px --像素
%---百分比(前提是父标签对应的宽度或者高度是确定的)
(2)颜色:颜色对应的英语单词
#加rgb对应的16进制值(一个颜色值对应两个十六进制) #FF0000 红
直接用rgb值:rgb(0,255,0),rgb(R,G,B), R,G,B的取值范围是0~255
rgba(R,G,B,A) -a代表透明度,范围是0~100

3.常见的属性:

color:设置字体的颜色
background-color:背景颜色
width:宽度
height:高度
font-size:字体大小

4.常用的选择器

注意,在标签中写的代码注释是/注释内容/
1.标签选择器(元素选择器):将标签名作为选择器,同时选中界面中或者网页中所有同类型的标签
a{} --选中所有的a标签
2.id选择器,通过#+id属性值,就构成了id选择器。选中id等于对应的值的标签
id属性:所有的标签都有id属性

p1{} --选中id值是p1的标签

3.class选择器:通过在class属性值前加.,就构成了类选择器。选中class等于对应值的标签
.c1{} --选择所有class值是c1的标签

4.群组选择器:多个选择器职期间使用逗号隔开,选中所有的单独的选择器
a,p,#p1,.c1{} --选中所有的a标签,p标签和所有id值是p1以及所有class值是c1的标签

5.包含选择器:多个选择器之间使用空格隔开。从前往后找,找到最后一个选择器
div .c1 p{} --选择div中的class值是c1的标签中的p标签

        <div>
            <div>
                <p>hello</p>
            </div>
            <div class='c1'>
                <p>world</p>
                <div>
                    <p>python</p>
                </div>
            </div>
        </div>

6.通配符:直接将作为选择器:选中当前页面中所有的标签
*{}

7.选择器的优先级
通过不同的选择器选中了同一个标签,并且设置了同一个属性,谁的优先级高谁有效。
看谁的优先级高,就看谁的权重值大
权重值是一样的情况下,谁后写,谁的优先级高
伪类选择器:0001
元素选择器:0001
class选择器:0010
id选择器:0100
群组选择器:直接看单独的每一个的权重
包含选择器:多个选择器的权重和
通配符:0001
内联选择器1000、
注意:不管选择器的权重有多高,内联演示的优先级都是最高的

8.伪类选择器
前面的元素选择器,id选择器,class选择器选中的都是标签
伪类选择器是选中标签的某个状态
伪类选择器:选中某个标签的不同状态(一般适用于超链接和按钮等)
1.语法:----标签:状态
标签选择器:状态{}
a.状态:
-link:初始状态
-visited:访问后的状态(适用a标签后的状态)
-hover:鼠标悬停在标签上的时候对应的状态
-active:被激活对应的状态(一般用于超链接)--鼠标按下的时候对应的状态
-focus:成为焦点(适用于输入框)

        input:focus{
            outline:none;/*关闭输入框输入的时候的框*/
        }
注意:
1.标签是通过不同的选择器去选中的都可以
2.爱恨原则:如果想要给一个标签同时给link\visited\hover\active中的两个或者
两个以上的状态设置样式,必须遵守爱恨原则(LoVeHate)如果不按爱恨原则可能回去问题
如果按照爱恨原则肯定不会出问题

a:link{属性:属性值}超链接的初始状态

b.多行文本域:textarea标签

<textarea name='' rows='20' cols='20'></textarea>

rows初始行
cols初始列
有placeholder可以设置提示符
disabled:禁用文本框

    <textarea name='message' rows="5" cols="20" placeholder="200字以内" disabled="disabled">
                
    </textarea><br>

span:行内标签(一行可以放多个标签)

推荐阅读更多精彩内容

  • 记得十几年前的第一次跟着朋友去福州省体的泳池玩,因为她的孩子因培训而请了一位专业的教练,那一次通过她的介绍,有着专...
    阮美美Mary阅读 123评论 0 0
  • 杏飞梨落樱满天 桃花酿酒醉逸仙 九方歌舞宴归去 春困锦帐惹人怜
    刀笔伐心阅读 53评论 0 3
  • 我们不要过于得意我们对自然界的胜利, 对于我们每一次的胜利, 自然界都会报复了我们。 第一步我们确实达到了预期的效...
    林建沓阅读 233评论 0 0
  • 2017.11.28, 感谢主, 今天的EPA终身难忘。荣耀归主! 感谢主,让我有机会荣耀你盛名! 今天与老板过年...
    艳新阅读 174评论 0 1
  • 心灵自由第八期-6 我可以为你指路 但不得不说能把你带到那里 你必须独自前往 神的世界是真实 它是当下 它隐藏在你...
    何偀阅读 130评论 0 0