2018-09-18 HTML和CSS

今天主要学习了html和CSS的相关知识。

一、表单标签

form标签，用来收集用户信息的。是一个容器，用来获取这个标签中相应的其他标签(input标签)的数据，可以将收集到的数据，通过method对应的方式，去发送请求(发送给action对应的接口)。
input标签：
type属性：决定input标签的样式
text(默认)：文本输入框
password: 密码输入框
radio:单选按钮
注意：input标签放在form外边同样可以使用，只是不能直接使用重置和提交功能

<form method="get" action="">
      <input type="text" name="tel" value="" placeholder="手机号"/>
</form>

二、下拉、多行文本域

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

1.下拉菜单:select标签

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

<select name="city">
            <option value="成都">成都</option>
            <option value="北京" selected="selected">北京</option>
            <option value="重庆">重庆</option>
            <option value="沈阳">沈阳</option>
        </select>

2.对下拉菜单进行分组

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

        <select name="city">
            <optgroup label="四川省">
                <option value="成都">成都</option>
                <option value="德阳" selected="selected">德阳</option>
                <option value="乐山">乐山</option>
                <option value="眉山">眉山</option>
                <option value="自贡">自贡</option>
            </optgroup>

3.多行文本域：textarea标签

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

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

三、div和span

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

四、CSS基础

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

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

固定语法：选择器{属性1:属性值1;属性2:属性值2....}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--内部样式表-->
        <style type="text/css">
            h1{
                background-color: rgba(0,255,0,0.2);
                color: saddlebrown;
            }
            a{
                font-size: 20px;
            }
            p{
                background-color: red;
            }
            img{
                width: 200px;
            }
            
        </style>
        
        <!--外部样式-->
        <link rel="stylesheet" type="text/css" href="css/04-CSS基础.css"/>
        
    </head>
    <body>
        <!--内联样式表-->
        <p style="background-color: cornflowerblue; color: yellow;">样式表的内容</p>
        <p style="font-size: 30px;">样式表的语法</p>
        
        <h1>我是标题1</h1>
        <h1>我是标题2</h1>
        
        <a href="">百度一下</a>
        
        <img src="img/luffy4.jpg"/>
        
        
    </body>
</html>

五、选择器

常用的选择器
1.标签/元素选择器：将标签名作为选择器，同时选中网页中所有同类型的标签。
a{}-----选中所有的a标签
2.id选择器：通过在id属性值加#，就构成了id选择器。选中id等于对应的标签
id属性：所有的标签都有id属性，(并且设置的值必须唯一)?
#p1{}----选中id是p1的标签
3.class选择器：通过在class属性值前加.，就构成了类选择器。选中class等于对应的值的标签
.cl{}----选中所有class值是c1的标签
4.群组选择器：多个选择器中间使用逗号隔开。选中所有的单独的选择器
a，p,#p1,.c1{}---------选中所有的a标签，p标签和所有id值是p1以及所有class值是c1的标签。
5.包含选择器：多个选择器之间使用空格隔开。从前往后找，找到最后一个选择器
div .c1 p{} ------选中div中class
6.通配符：直接将作为选择器。选中当前页面中所有的标签
选择器的优先级
通过不同的选择器选中了同一个标签，并且设置了同一个属性，谁的优先级高就谁有效。看谁的优先级高就看谁的权重值大。
权重值是一样的情况下：谁后写，谁的优先级高

伪类选择器：0001
元素选择器：0001
class选择器：0010
id选择器：0100
劝阻选择器:直接看单独没一个的权重
包含选择器：多个选择器的权重和
通配符：0001

六、伪类选择器

前面的元素选择器、id选择器、class选择器选中的都是标签。
伪类选择器是选中标签的某个状态
伪类选择器：选中某个标签的不同状态（一般使用于超链接和按钮等）
1.语法：-----------标签：状态

标签：状态{}
说明：
a.状态：
link:初始状态(a标签对应的初始状态是没有访问)
visited:访问后的状态（使用a标签）
hover:鼠标悬停在标签上对应的状态
active:被激活对应的状态（一般用于超链接）
focus:成为焦点(在输入框中用的比较多)
b.标签：可以通过不同的选择器去选中

2.爱恨原则：LoVeHAte--先爱后恨

如果想要给一个标签同时给link,visited、hover\active中的两个或者两个以上的状态设置样式，必须遵守爱恨原则。
如果不按爱恨原则可能会出问题，如果按照爱恨原则，肯定不会出问题）