html与css

作者: L丶Y1122 | 来源:发表于2018-12-04 20:50 被阅读0次

1.表单标签和input标签

1.表单标签（form）

表单标签的作用是用来收集用户信息，实质是将表单标签作为容器，
来收集表单标签中其他标签的信息，本身没有任何显示效果

action属性：设置提交地址
method属性：设置提交方式（post/get）
点提交按钮提交的时候，将表单中所有相关标签的以name=value的形式，按照method属性提供的方式，提交给action属性对应的接口。

            form标签提供了两大功能：a.统一提交  b.重置
        -->
        <form action="" method="post">
            
        </form>

2.input标签 - 单标签

既可以放在form标签中，也可以不放在form标签里面单独使用

type属性 - type对应的值不一样，input标签体现的功能不一样
- a.text - 文本输入框
  - name属性 - 专门用来区分不同的信息，相当于字典key
  - value属性 - 标签内容 - 指向输入框中的内容，实质是给文本框设置默认值
  - placeholder属性 - 占位符 - 当输入框没有内容的时候显示的提示信息
  - maxlength属性 - 设置输入框最大的字符个数

        -->
        <form action="" method="get">
            
            <font>姓名:</font><input type="text" maxlength="4" placeholder="请输入姓名..." name="name" value=""/>
            <br />
            <br />
            <font>电话:</font><input type="text" maxlength="11"  placeholder="请输入电话..." name="tel" id="tel" value="" />
            <br />
            <br />

type - password 密码输入框-->

            <input type="submit" name="" id="" value="提交" />
            <font>密码:</font><input type="password"placeholder="请输入密码..." name="password" id="" value="" />
            <br />
            <br />

radio - 单选按钮
要求同一组数据的name值必须一致
value属性 -不可见，专门用于提交数据的提示；或者区分被选中的值
checked属性 - 让单选按钮处于默认选中状态

            -->
            <br />
            <input type="radio" checked="checked" name="sex" id="" value="男" /><font>男</font>
            <input type="radio"  name="sex" id="" value="女" /><font>女</font>
        <br />
            <!--checkbox - 多选按钮-->
            <input type="checkbox" name="habby" id="" value="爪梦脚" /><font>爪梦脚</font>
            <input type="checkbox" name="habby" id="" value="扯扑汗" /><font>扯扑汗</font>
            <input type="checkbox" name="habby" id="" value="睡觉" /><font>睡觉</font>
            <input type="checkbox" name="habby" id="" value="篮球" /><font>篮球</font>
            <input type="checkbox" name="habby" id="" value="足球" /><font>足球</font>

button - 普通按钮
value属性决定按钮显示的文字

<input type="button" name="" id="" value="登录" />
<!--submit - 提交标签
提交按钮会自动提交当前form中所有设置了name属性的相关标签的值。
以name=value的形式进行提交
-->
<input type="submit" name="" id="" value="提交按钮" />
<!--reset - 重置按钮
将当前form标签中所有的标签状态设置为初始状态
-->
<input type="reset" name="" id="" value="重置" />
</form>
<button><img src="../day1-html/img/0.jpg"/><br /><font>登陆</font></button>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

2.下拉菜单和多行文本框

1.下拉菜单 (select - option)

a.select标签 - 代表整个下拉菜单
- name属性 - 区分和提交
b.option标签 - 下拉菜单中的选项
双标签
<option value="">内容</option>
- selected属性 - 设置默认选中
- value属性 - 提交的内容
- 内容 - 显示部分
c.optgroup标签
- label属性 - 给分组设置名字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="" method="get">
            -->
            <select name="学科">
                <optgroup label="理科"></optgroup>
                <option value="">语文</option>
                <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>
            
            <select name="province">
                <option value="">四川省</option>
                <option value="">湖南省</option>
                <option value="">广西省</option>
                <option value="" selected="selected">云南省</option>
                <option value="">辽宁省</option>
            </select>
            
            <select name="city">
                <option value="">成都市</option>
                <option value="">南宁市</option>
                <option value="">长沙市</option>
                <option value="" selected="selected">云南市</option>
                <option value="">长春市</option>
            </select>
            
            <!--2.多行文本输入框（textarea）
                可以输入多行内容，内容超出范围可以上下滚动
                name属性 - 提交和区分
                rows -  一次性可以显示的行数  - 决定高度
                cols -  一次性可以显示的列数  - 决定宽度
                placeholder - 提示文字
                内容 - 提交、设置默认值显示
                maxlength - 设置最多能输入文字个数
            -->
            <textarea maxlength="" placeholder="请输入建议..." name="地址" rows="4" cols="30"></textarea>
            
        </form>
    </body>
</html>

3.div和span

div和span两个标签都是无语义标签；一般用来将网页中的标签分组或者分模块使用；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            div1
        </div>
        <div id="">
            div2
        </div>
        <span>
            span1
        </span>
        <span>
            span2
        </span>
    </body>
</html>

4.css基础

1.什么是CSS

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

2.CSS的语法

a.基本结构
选择器{属性名1：属性值1；属性名2：属性值2；...}
b.说明
选择器{}- 通过选择器决定样式是针对哪个标签来写的(在内联样式表中没有这个结构)
属性 - 属性名不是随便写的，必须是css支持提供的两百多个属性中的一个

3.CSS代码写在哪？

a.内联样式表(只能针对一个标签有效)
将样式表作为html标签的style属性值
b.内部样式表(可以针对当前html所有标签)
将样式表作为head标签中style标签的内容
style标签中的内容必须是css代码
style可以放在head标签也可以放在body里面
c.外部样式表
将样式表写在CSS文件中，在通过link导入；

优先级：内联样式表最高；内部和外部样式，谁后写，谁的样式就高
常用属性补充：

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

CSS中的颜色值：

a.颜色的英语单词
b.rgb的十六进制值，例如：#ff0000
c.直接使用rgb值：rgb（R,G,B，alpha）alpha：0（完全透明）~1（不透明）

CSS中的数字：如果数字表示大小必须加单位

px(像素)
em(空格)

-->

1.内联样式表
body中每个有显示效果的标签都有style属性，用来设置当前标签的样式
style属性值的引号中，写的是CSS代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS基础</title>
        <!--link标签 - 导入外部文件 
            rel属性：确定导入文件功能 :stylesheet -设置样式表 icon - 设置图标
            type属性：用来确定文件类型；文件类型/文件后缀
            href属性：文件路径
        -->
        <link rel="icon" type="img/ico" href="img/1.ico"/>
        <link rel="stylesheet" type="text/css" href="css/1.css"/>
    </head>
    <body>
        <style type="text/css">
            a{
                    color: greenyellow;
                background: royalblue;
            }
            p{
                color: pink;
                background: green;
                
            }
        </style>
        
        -->
        <p style="color:rgba(255,0,0,0.5); font-size: 12px; background: greenyellow;">家会计师的考虑聚隆科技索拉卡尽快了解到历史记录</p>
        <a href="http://www.baidu.com">百度</a>
        <p>撒大声地速度 速度速度 速度 速度 是IE我我i</p>
        <div id="">
            滴滴滴滴
        </div>
    </body>
</html>

5.选择器

选择器{属性名1：属性值1；属性名2：属性值2；....}
css提供的选择器的写法大概有十几种

常见的写法：
-1.标签选择器 : 直接将标签名作为选择器，选中当前html中所有指定的标签
例如：a{}， p{}等

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值是tex
6.通配符： 将号作为选择器，选中当前页面中所有的标签
例如：{}
注意：style标签可以写在文件的任何位置

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .test{
                background: blueviolet;
            }
        </style>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="">
            <div id="">
                第二层，没有id
            </div>
            <div class="test" id="text">
                第二层，有id
            </div>
            <p>第一层，没有id</p>
        </div>
    </body>
</html>

6.伪类选择器

伪类选择器是用来选中标签的不同状态（为了给标签的不同状态设置不同样式）

1.基本格式

普通选择器：伪类选择器

2.伪类选择器

link - 标签的初始状态（一般作用于a标签，表示a标签中的链接没有成功访问过对应的状态）
标签：link{} - 标签是通过各种选择器来选中的标签
visited - 超链接被访问后的状态
标签：visited{}
hover - 鼠标悬停在标签上的时候对应的状态
active - 激活状态，鼠标按下，但是还没有弹起的时候对应的状态

3.爱恨原则：当一个标签需要同时给多个状态添加样式的时候，要遵守爱恨原则：LoVeHAte

link-visited-hover-active

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            a{
                text-decoration: none;
            }
            a:link{
                color: red;
            }
            a:visited{
                color: pink;
            }
            a:hover{
                color: rgba(0,255,0,0.5);
                text-decoration: underline;
            }
            a:active{
                color: #008000;
            }
        </style>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <a href="http://ww.hao123.com">hao123</a>
        
    </body>
</html>