1. 表单标签（form）

专门用来进行用户信息收集的一个标签，一般要结合表单相关的标签来使用才有意义
表单相关标签：input、select、textarea等
主要提供form中子标签的内容的提交和重置功能
action属性：提交路径（接口）
method属性：提交方式（post/get）

<form action="" method="get">

</form>

2.input标签

input标签是表单相关标签，可以在form标签中使用，也可以单独使用
type属性：input标签会因为type的不同，功能完全不一样
name属性：用于区分或者提交（相当于字典的key）；要不要给这个属性赋值，主要看：a.需不需要区分不同的内容 b.需不需要提交这个input标签的值
value属性：value的意义会根据type值的不同而不一样；但是表单提交的时候提交的都是value的值

1）文本输入框：type="text"

value属性：给这个属性赋值是在设置输入框的默认值; 修改输入框中的内容，会改变这个属性的值
placeholder属性：输入框为空的时候的默认显示信息
maxlength属性：输入框最多能输入的内容的长度

<font>账号:</font>
<input type="text" name="tel"  value="" placeholder="请输入手机号码" maxlength="6"/>

2）密码输入框：type="password"

value属性：给这个属性赋值是在设置输入框的默认值; 修改输入框中的内容，会改变这个属性的值
placeholder属性：输入框为空的时候的默认显示信息
maxlength属性：输入框最多能输入的内容的长度

<font>密码:</font>
<input type="password" name="pw" id="" value="123456" maxlength="10"/>

3）单选按钮：type="radio"

name属性：如果多个选项是一组数据必须保证它们的name属性值一样才能做到多个选项单选
value属性：不能显示，只能用来提交的
checked属性：给这个属性赋值为checked让按钮处于默认选中状态
可以通过将label的for属性和input的id属性保持一致，让label和input进行关联

<font>性别:</font>
<input type="radio" name="sex" id="sex1" value="男" checked="checked" /><label for="sex1">男</label>
<input type="radio" name="sex" id="sex2" value="女" /><label for="sex2">女</label>

4）复选按钮：type="checkbox"

name属性：如果多个选项是一组数据必须保证它们的name属性值一样
value属性：不能显示，只能用来提交的
checked属性：给这个属性赋值为checked让按钮处于默认选中状态

<input type="checkbox" name="interest" id="in1" value="餐饮" /><label for="in1">餐饮</label>
<input type="checkbox" name="interest" id="in2" value="游戏" /><label for="in2">游戏</label>
<input type="checkbox" name="interest" id="in3" value="旅游" /><label for="in3">旅游</label>

5）普通按钮：type="button"

value属性：按钮上显示的内容

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

// 补充：button标签
<button>登录</button>
<button><img src="img/aaa.ico"/></button>

6）重置按钮：type="reset"

重置当前重置按钮所在的form标签中的所有的相关标签的值

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

7）提交按钮：type="submit"

以 “name=value” 的方式提交当前form标签的内容

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

8）其他类型

<input type="color" name="color" id="" value="" />
<input type="date" name="date" id="" value="" />
<input type="file" name="file" id="" value="" />
<input type="datetime-local" name="date-time" id="date-time" value="" />

3.下拉菜单（select）

select标签：整个下拉列表
option标签：列表中的选项
optgroup标签：一个列表选项分组，通过label属性值来设置分组名(只是在显示上对选项进行分区，不影响提交结果)

            <select name="city">
                <optgroup label="四川省"></optgroup>
                <option value="成都">成都</option>
                <option value="南充">南充</option>
                <option value="绵阳">绵阳</option>
                <option value="宜宾">宜宾</option>
                
                <optgroup label="广东省"></optgroup>
                <option value="广州">广州</option>
                <option value="中山">中山</option>
                <option value="珠海">珠海</option>
                <option value="佛山">佛山</option>
                <option value="惠州">惠州</option>
            </select>

4.多行文本域（textarea）

提供一个可以换行输入的输入框
rows属性：行数，影响输入框的默认高度
cols属性：列数, 影响输入框的宽度
maxlength属性：输入的内容的最大长度
autofocus属性：值设置为autofocus，页面刷新和加载的时候自动成为焦点

<textarea autofocus="autofocus" name="comment" rows="10" cols="200" maxlength="200" placeholder="输入你的意见">
</textarea>

5.无语义标签

div标签和span标签都是无语义标签，使用div一般用于对网页中的内容分块和分组

        <div id="">
            <a href="https://www.baidu.com">百度一下</a>
        </div>

        <div id="">
            <a href="https://www.baidu.com">百度一下</a>
        </div>


        <span id="">
            <a href="https://www.baidu.com">百度一下</a>
        </span>
        
        <span id="">
            <a href="https://www.baidu.com">百度一下</a>
        </span>

二、CSS基础

1.什么是CSS

CSS又叫样式表（层叠样式表），是web标准中的表现标准，专门用来针对网页中内容的布局和样式
现在绝大部分使用的是CSS3

2.怎么写CSS

1）语法

选择器{属性1：属性值1；属性2：属性值2；...}

2）说明

选择器：选中需要设置样式的标签；在内联样式表中“选择器{}”需要省略
{} ：固定写法
属性：属性是以“属性：属性值”的形式成对儿出现，多个属性之间要用分号隔开；顺序不影响
属性值：如果是数字表示大小，数字后边必须加单位：px（像素）、em（1em=16px）、颜色值
补充-颜色值：
颜色的英文单词、#十六进制颜色值、rgb（r,g,b）、rgba（r,g,b,透明度）
rgb颜色：r - red(0~255)，g - green(0~255)，b - blue(0~255)
rgb(255,0,0) == #ff0000 == red
rgb(0,255,0) == #00ff00 == green
rgb(0,0,255) == #0000ff == blue
rgb(0,0,0) == #000000 == black
rgb(255,255,255) == #ffffff == white
透明度：0（完全透明）~1（完全不透明）

3. 写在哪儿

1）内联样式表

将样式写在标签的style属性中
只作用于一个固定的标签

2）内部样式表

将样式写在style标签中
作用于当前html中的所有标签

3）外部样式表

将样式写在CSS文件中，然后在html中通过link标签导入
可以作用于所有的html中的所有标签

4）复用性：

外部>内部>内联

5）优先级：

内联样式表的优先级不管什么情况都是最高的
内部和外部的优先级看顺序，谁后写谁优先级高（类似于赋值，后赋值的为最后的值）

4. 常见属性

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <!--3.外部样式-->
        <link rel="stylesheet" type="text/css" href="css/01-test1.css"/>
        
        <!--2.内部样式-->
        <style type="text/css">
            /*这个里面写css代码*/
            div{
                color: orange;
                background-color: darkolivegreen;
            }
            h1{
                color: purple;
                background-color: yellow;
            }
        </style>
        
        
        
    </head>
    <body>
        <!--1.内联样式-->
        <p style="color: red; font-size: 30px;">hello CSS1</p>
        <p>hello CSS2</p>
        <div id="">
            我是div1
        </div>
        
        <h1>我是标题</h1>
        
        <div id="">
            我是div2
        </div>
    </body>
</html>

5. 什么是选择器

通过选择器选中标签

6. 选择器的写法

1）元素选择器（标签选择器）

直接将标签名作为选择器，选中当前html中对应的所有标签
例如：a{}：选中当前html中所有的a标签

2）id选择器

所有标签都有一个id属性，值自己设置，但是要保证一个html中id值唯一
将标签的id属性的值前面加 # 作为选择器，选中id属性值是指定值的标签
例如：#a{}：选中当前html中id值是a的标签

3）类选择器（class选择器）

class属性：一个html中相同的class值可以有多个；同一个标签的class属性值可以多个(多个之间用空格隔开)
将标签的class属性的值前面加 . 作为选择器，选中class属性值是指定值的标签
例如：.a{}：选中当前html中class值是a的所有标签

4）通配符选择器

将 * 作为选择器，选中当前html中所有的标签
*{}：选中当前html中所有的标签

5）群组选择器

将多个选择器用逗号隔开来作为一个选择器，选中每个独立选择器对应的标签
p,a{}：选中所有的p标签和a标签
div,#a{}：选中所有的div标签和id值是a的标签
#p1,.c1,.c2{}：选中id值是p1，class值是c1和c2的所有标签

6）后代选择器

将多个选择器用空格隔开来作为一个选择器
div p{}：选中所有div标签中的p标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                /*width: 200px;*/
            }
            /*1.元素选择器*/
            p{
                color: red;
                background: yellow;
            }
            
            /*2.id选择器*/
            #a{
                font-size: 30px;
            }
            /*3.class选择器*/
            .c1{
                background-color: yellowgreen;
            }
            .c2{
                font-size: 40px;
            }
            
            /*4.群组选择器*/
            a,font{
                color: fuchsia;
            }
            font,.c3{
                background-color: lightblue;
            }
            
            /*5.后代选择器*/
            div label{
                color: darkblue;
            }
            div div label{
                background-color: burlywood;
            }
            
            #div1 label{
                color: red;
            }
            
        </style>
        
    </head>
    <body>
        <!--class属性:
            1.一个html中相同的class值可以有多个
            2.同一个标签的class属性值可以多个(多个之间用空格隔开)
        -->
        <p class="c1">我是段落1</p>
        <div id="">
            <div id="">
                <p id="a">我是段落2</p>
                
                <!--这儿的h1标签有两个class值，分别是c1和c2-->
                <h1 class="c1 c2">我是标题1</h1>
            </div>
        </div>
        <p class="c2">我是段落3</p>

7）伪类选择器

普通选择器选中的是html中不同的标签，伪类选择器选中的是标签的不同状态
语法：普通选择器：状态{属性1：属性值1；属性2：属性值2；...}
link：初始状态，对于a标签来说，link对应的状态是a标签中的链接从来没有成功访问过时的状态（一般只在a标签进行设置）
visited：超链接成功访问过的状态（一般只用于a标签）
hover：鼠标悬停在标签上对应的状态（不只针对超链接，其他标签也常用）
active：鼠标安住标签不放对应的状态（主要作用在超链接和按钮）
遵守“爱恨原则”：LoVeHAte，按LVHA顺序写

7. 选择器的权重值

权重越大优先级越高，但是内联样式表的优先级永远最高
元素选择器的权重：0001 == 1
class选择器的权重：0010 == 2
id选择器的权重：0100 == 4
伪类选择器的权重：0001 == 1
群组选择器的权重：看单独每个选择器的权重
后代选择器的权重：所有选择器的权重之和

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            /*1)link*/
            a:link{
                color: rgb(150,150,150);
            }
            /*#a1:link{}*/
            a:visited{
                color: green;
            }
            
            a:hover{
                color: red;
                font-size: 30px;
            }
            p:hover{
                background-color: lightgoldenrodyellow;
                
            }
            a:active{
                color: blueviolet;
            }
            button:active{
                background-color: lightseagreen;
            }
            
            .h1{
                color: blue;
            }   
            h1{
                color: red;
            }
            
            #h1{
                color: green;
            }
            div #h1{
                color: yellow;
            }
            
            #div2 #div1 #h1{
                background-color: hotpink;
            }
                
        </style>
        
    </head>
    <body>
        <div id="div2">
            <div id="div1">
                <h1 style="background-color: yellowgreen;" id="h1" class="h1">我是标题</h1>
            </div>
        </div>
        
        <a id="a1" href="https://www.baidu.com">百度一下</a>
        <p>段落</p>
        <button>按钮</button>
        <a href="04-CSS基础.html">打开选择器</a>
    </body>
</html>

day20总结：表单标签和css基础（2019-05-14）

day20总结：表单标签和css基础（2019-05-14）

1. 表单标签（form）

2.input标签

1）文本输入框：type="text"

2）密码输入框：type="password"

3）单选按钮：type="radio"

4）复选按钮：type="checkbox"

5）普通按钮：type="button"

6）重置按钮：type="reset"

7）提交按钮：type="submit"

8）其他类型

3.下拉菜单（select）

4.多行文本域（textarea）

5.无语义标签

二、CSS基础

1.什么是CSS

2.怎么写CSS

1）语法

2）说明

3. 写在哪儿

1）内联样式表

2）内部样式表

3）外部样式表

4）复用性：

5）优先级：

4. 常见属性

5. 什么是选择器

6. 选择器的写法

1）元素选择器（标签选择器）

2）id选择器

3）类选择器（class选择器）

4）通配符选择器

5）群组选择器

6）后代选择器

7）伪类选择器

7. 选择器的权重值