2018-09-18 第二阶段 day2

1.html-表单标签

1.1 form标签

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
<form method="get" action="">
            <input type="text" name="username" value="aaa" placeholder="账号" maxlength="8"/>
            <input type="text" name="tel" value="" placeholder="手机号"/>
        </form> 
    </body>
</html>

111.png

1.2.input标签---单标签

type属性:决定input标签的样式
text(默认)：文本输入框
password: 密码输入框
radio:单选按钮
注意：input标签放在form外边同样可以使用，只是不能直接使用重置和提交功能

<input type="text" name="username" value="aaa" placeholder="账号" maxlength="8"/>

a.文本输入框：(text)

1.name属性：区分不同的input对应值,对标签的显示没有影响
2.value属性：input标签中的值，相当于内容(文本输入框中输入的内容就是value的值)提交input中的数据给服务器的时候，是以name值=value值来提交的
3.placeholder属性：占位符(输入框的提示信息)
4.maxlength属性：约束输入框能输入的字符的最大个数

            <input type="text" name="username" value="aaa" placeholder="账号" maxlength="8"/>
            <input type="text" name="tel" value="" placeholder="手机号"/>

111.png

b.密码输入框:(password)

注意：value值是输入框中输入的内容

<input type="password" name="password" value="" placeholder="密码" maxlength="8"/>

222.png

c.单选按钮：(radio)

1.value值：设置为这个按钮选中提交对应的值
2.name值：如果多个按钮只能选中一个，那么这些按钮对应name值必须一致
3.checked属性：设置默认选中
说明：单选按钮在提交的时候只提交被选中的按钮的name和value值

<input type="radio" name="sex"  value="boy" checked="checked"/> <span>男</span>
<input type="radio" name="sex"  value="girl" /> <span>女</span>
            <br />
<input type="radio" name="marry"  value="已婚" checked="" /><span>已婚</span>
<input type="radio" name="marry"  value="未婚" /><span>未婚</span>
            <br />

333.png

d.复选按钮:(checkbox)

1.name值：同一组的数据对应name值一样

<input type="checkbox" name="hobby" id="" value="basketball" checked="checked" /><span>篮球</span>
<input type="checkbox" name="hobby" id="" value="乒乓球" checked="checked"/><span>乒乓球</span>
<input type="checkbox" name="hobby" id="" value="羽毛球" /><span>羽毛球</span>
<input type="checkbox" name="hobby" id="" value="排球" /><span>排球</span>
<br />

444.png

e.普通按钮:(button)

value值：按钮上显示的内容

<input type="button" name="" id="" disabled="disabled" value="登录" />

555.png

f.提交按钮:(submit)

自动将当前form标签中设置了name属性的input标签对应的值通过method方式提交给action对应的接口

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

666.png

g.重置按钮

让当前form标签中的input标签的值回到初始状态

<input type="reset" name="" id="" value="重置" />

777.png

h.文件域:(file)

<input type="file" name="icon" id="" value="" />

8888.png

2.html-下拉、多行文本、按钮

下拉和多行文本域可以放在form标签中用于收集信息

2.1.下拉菜单:select标签

一个select标签对应一个下拉菜单，菜单中的选项要通过option来列举
a.selected属性：设置默认被选中的选项

<body>
    <select name="city">
        <option value="成都">成都</option>
        <option value="北京" selected="selected">北京</option>     <!--默认为北京-->
        <option value="重庆">重庆</option>
        <option value="沈阳">沈阳</option>
    </select>
<\body>

11.png

22.png

2.2 对下拉菜单进行分组

可以通过optgroup标签对下拉菜单进行分组, 通过label属性对分组进行命名

<body>
        <select name="city">
            <optgroup label="四川省">
                <option value="成都">成都</option>
                <option value="德阳" selected="selected">德阳</option>
                <option value="乐山">乐山</option>
                <option value="眉山">眉山</option>
                <option value="自贡">自贡</option>
            </optgroup>
            <optgroup label="广东省">
                <option value="广州">广州</option>
                <option value="深圳">深圳</option>
                <option value="中山">中山</option>
                <option value="佛山">佛山</option>
            </optgroup>
        </select>
</body>

33.png

44.png

2.3.多行文本域:textarea标签

name: 提交的数据对应的名字
rows：默认一屏的行数
cols：默认的列数
placeholder：设置占位符
disabled: 禁用
maxlength:约束能输入的最大的字符个数

<textarea maxlength="200" name="message" rows="10" cols="20" placeholder="200字以内" disabled="disabled"></textarea>

55.png

3.按钮：button标签

        <!--文字按钮-->
        <button>注册</button>
        <!--图片按钮-->
        <button><img src="img/luffy2.png" alt="" /></button>

66.png

3 div和span

3.1.div和span

div和span标签是空白标签，没有语义。
一般用来做分组(将网页分块)
div:块级标签(一行只能放一个标签)
span：行内标签（一行可以放多个标签）

3.2.块级标签和行内标签

块级标签: 一个标签占一行
h1-h6, p, 列表标签(ul\ol\dl),table,hr等
行内标签：一行可以放多个行内标签
img, a, input,select,textarea等

4 CSS

CSS是web标准中的表现标准，用来规定网页上内容的布局和样式（CSS又叫样式表）目前广泛使用的是CSS3.

4.1怎么来写样式表(CSS)，写在哪儿?

a.内联样式表
将样式写在标签的style属性中(每个可见标签都有style属性)
b.内部样式表
将样式表写在head标签中style标签里面
c.外部样式表
将样式表写在一个css文件中，然后再head标签中通过link标签来导入
注意：不管在什么情况下，内联样式表的优先级最高;内部和外部的优先级看谁后写，谁的优先级高

4.2固定语法

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

说明：

a.选择器: 选择器的作用是用来确定后面样式到底是给哪个/哪几个标签写的
b.属性：属性是CSS中本来就支持和拥有的属性，属性的顺序可以随意些。
(属性和属性值之间使用冒号连接)
(属性后面必须写分号)

c.属性值：

(1)数值：如果数值是用来表示大小，后面必须跟单位px或者%

px -----像素
% ----- 百分比

（前提是父标签对应的宽度或者高度确定的）
(2)颜色：（三种方法）

颜色对应的英语单词
“#”加R-G-B对应的16进制值(一个颜色值对应2位16进制)
直接使用RGB值: rgb(R,G,B), rgba(R,G,B,Alpha) R,G,B的取值范围是0-255，Alpha：0~1

4.3常见的属性

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

5.选择器

常用的选择器

5.1选择器

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标签

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

5.2 选择器的优先级

通过不同的选择器选中了同一个标签，并且设置了同一个属性，谁的优先级高就谁有效。看谁的优先级高就看谁的权重值大
权重值是一样的情况下，谁后写，谁的优先级高

伪类选择器：0001
元素选择器：0001 = 1
class选择器：0010 = 2
id选择器：0100 = 4
群组选择器：直接看单独每一个的权重
包含选择器：多个选择器的权重和
通配符：0001

注意：不管选择器的权重有多高，内联样式的优先级都是最高的！

6.伪类选择器

说明：

前面的元素选择器、id选择器、class选择器选中的都是标签。
伪类选择器是选中标签的某个状态

6.1伪类选择器：选中某个标签的不同状态（一般使用于超链接和按钮等）

1.语法：--- 标签:状态

    标签:状态{}

说明:
a.状态：

link:初始状态(a标签对应的初始状态是没有访问成功过对应状态)
visited:访问后的状态(使用a标签)
hover: 鼠标悬停在标签上对应的状态
active: 被激活对应的状态(一般用于超链接) --- 鼠标按下的时候对应的状态
focus: 成为焦点(在输入框中用的比较多)

b.标签：可以通过不同的选择器去选中

2.爱恨原则：LoVeHAte - 先爱后恨
说明：
如果想要给一个标签同时给link\visited\hover\active中的两个或者两个以上的状态设置样式，必须遵守爱恨原则(如果不按爱恨原则可能会问题，如果按照爱恨原则肯定不会出问题)