Day040--HTML&CSS

内容回顾：

      标签分类：

            （1）行内标签

               span 小跨度的标签

               i

               em

               a

               特点：

                  （1）在一行内显示

                  （2）不能设置宽高，如果不设置宽高，默认是内容的宽高

            （2）块级标签

               h1~h6

                  h1页面中尽量的只有一个，为了seo和爬虫

               div: division 分割 作用：划分网页的区域 如果一旦网页划分之后，这些div就会形成父子关系，同级的关系

                  文档中 各种标签嵌套会形成‘文档树’

               table 表格标签

                  table 主要是给用户展示的页面

               form  表单标签

                  ***********作用：主要是与服务器进行交互**********

                  input 输入框

                     type

                        :

               p:

                  学习的p的第一天，时刻记住 p里面只能放行内标签,img和表单控件，不能放块级标签

               ul  无序列表

                  li

               ol  有序列表

                  li

               dl

                  dt 定义的标题

                  dd 定义标题的内容

      标签嵌套规则：

            1.行内标签 尽量不要嵌套块级标签

            2.块可以嵌套行内标签

            3.p里面只能放行内标签,img和表单控件，不能放块级标签

昨日内容回顾

!+Tab 自动显示移动端定义文档


   今日内容：
      （1）表单控件
            input
               type:
                  radio 单选
                     name:
                        如果两个单选的name值一样，会产生互斥效果
                     value:
                     单选的值
                  checkbox 多选
                     name
                     value
                  file 上传文件使用
                    ****注意：如果有文件需要提交给服务器，method必须为POST，enctype必须为multipart/form-data****
                  button  闭合标签
                     普通的按钮
                  submit  提交按钮
                  reset  重置按钮
　　　　　　　　　　 select  下拉菜单 
　　　　　　　　　　　　　name 会被封装到请求体中的key
　　　　　　　　　　　　　value 　D是标签显示的内容,会被封装到请求体中的value
　　　　　　　　　　 selected 选中
            button 普通的标签

            textarea
                  rows 行数
                  cols 列数

         表单控件中所有的值 靠的是value属性
         img标签的值靠的是src
         其它标签的内容都是文本

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

<form action="服务端网址" method="post" enctype="multipart/form-data">

    <p class="user">

        <label for="user">用户名:</label>

        <input type="text" name="user" placeholder="请输入用户名" id="user">

    </p>

    <p class="pwd">

        <label for="pwd">密码</label>

        <input type="password" name="pwd" placeholder="请输入密码" id="pwd">

    </p>

    <p>

        <!--单选框-->

        男<input type="radio" name="gender" value="male" checked="checked">

        女<input type="radio" name="gender" value="female" >

    </p>

    <p>

        <!--多选框-->

        抽烟<input type="checkbox" name="favourites" value="smoke">

        喝酒<input type="checkbox" name="favourites" value="drink">

        烫头<input type="checkbox" name="favourites" value="hair_cut">

    </p>

    <p>

        <input type="file">

    </p>

    <p>

        <input type="submit" value="注册">

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

        <button type="submit"> 按钮</button>

        <button type="reset">重置</button>

    </p>

    <p>

        <select name="school" id="school">

            <option value="1">北京大学</option>

            <option value="2">清华大学</option>

            <option value="3">北京外国语大学</option>

            <option value="4">人民大学</option>

        </select>

    </p>

    <p>

        <textarea name="self_introduction" id="introduction" cols="30" rows="10" placeholder="请输入自我介绍"></textarea>

    </p>

    <p>

        <button type="submit" >提交</button>

    </p>

</form>

</body>

</html>

表单控件应用示例

      （2）css的三种引入方式
         层叠样式表 Cascading Style Sheet
         作用： 定义了文档的样式，给页面美化
            -  引入css的方式
               1.行内样式
               <div style='width:200px;'></div>
               2.内接样式(一种)
                在head标签中 用style标签声明
               3.外接式(两种: 
               在head标签中，用link连接另外的一个css文件（解耦）
　　　　　　　　　@import url("")    /*CSS3*/

               总结：行内样式的优先级大于内接样式和外接,内接和外接样式以后面设置的为主

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        /*内接式*/

        /*找标签 选择器:选中标签*/

        div{

            color: darkcyan;

        }

        p{

            color: darkred;

            font-size: 30px;

        }

        .content{

            color: blue;

        }

    </style>

    <!--外接式-->

    <!--<link rel="stylesheet" href="./css/index.css">-->

    <style type="text/css">

        @import url('./css/index.css');

    </style>

</head>

<body>

<!--标准文档流下

    总结: 行内样式的优先级1000 大于 内接和外接式-->

<!--行内样式-->

    <div class="content" style="color:salmon;">

        你好啊

    </div>

    <p>吃了吗</p>

    <span>大猪蹄子</span>

</body>

</html>

内接式1,外接式2

把css文件放在css文件夹中

span{

    color: greenyellow;

}

p{

    background: pink;

    font-size: 40px;

}

index.css

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        /*权重问题 数数 数选择器的数量: id, class, 标签*/

        /*1 0 0*/

        #cat{

            color: blue;

        }

        /*0 1 0*/

        .animal{

            color: green;

        }

        /*0 1 0*/

        .male{

            color: yellow;

        }

        /*0 0 1*/

        div{

            color: red;

        }

    </style>

</head>

<body>

    <div class="animal male" id="cat">

            娃哈哈

        <div>

            <div>

                猜猜我的颜色

            </div>

        </div>

    </div>

</body>

</html>

权重问题

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*后代选择器*/

        /*.box1 p{*/

            /*color: red;*/

        /*}*/

        /*子代*/

        .box2 .box3 p{

            color: aqua;

        }

        .box3 p{

            color: purple;

        }

        .box2 p{

            color: green;

        }

        /*组合选择器*/

        p, span, a{

            font-size: 12px;

        }

        *{

            font-size: 16px;

            padding: 0;

            margin: 0;

        }

        /*交集选择器*/

        /*.box{*/

            /*color: red;*/

        /*}*/

        p{

            font-size: 30px;

        }

        p.active{

            background: yellow;

        }

    </style>

</head>

<body>

    <div class="box1" id="wrap1">

        <div class="box2" id="wrap2">

            呵呵

            <div class="box3 box33" id="wrap3">

                <p class="box active">猜测我的颜色</p>

            </div>

            <p>哈哈哈</p>

        </div>

    </div>

    <a href="#">百度一下</a>

    <span>你好啊</span>

</body>

</html>

后来者居上

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*1 2 1*/

        .box1 .box2 #wrap3 p{

            color: red;

        }

         /*1 2 1*/

        #wrap1 .box2 div .active{

        }

        /*2 0 2*/

        #wrap1 #wrap2 div p{

            color: aqua;

        }

    </style>

</head>

<body>

<div class="box1" id="wrap1">

    <div class="box2" id="wrap2">

        <div class="box3" id="wrap3">

            <p class="active">猜猜我的颜色</p>

        </div>

    </div>

</div>

</body>

</html>

权重, 后来者居上

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            font-size: 12px;

        }

        .box1 #wrap2 div p{

            color: red;

            font-size: 20px;

        }

        /*继承来的权重为0, 与选中的标签没有可比性*/

        .box1 #wrap2 #wrap3{

            color: green;

            height: 50px;

            background: yellow;

            text-align: center;

            line-height: 50px;

            /*font-size: 20px;*/

            /*background-color: red;*/

            /*!*让文本在盒子中心对齐*!*/

            /*text-align: right;*/

            /*!*行高=盒子的高度 让文本居中*!*/

            /*height: 50px;*/

            /*line-height: 50px;*/

            /*text-decoration: underline;*/

        }

    </style>

</head>

<body>

<div class="box1" id="wrap1">

    <div class="box2" id="wrap2">

        <div class="box3" id="wrap3">

            <p class="active">猜猜我的颜色</p>

        </div>

    </div>

</div>

</body>

</html>

权重深入,文本居中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #wrap1 #wrap2 .box3{

            color: yellow;

        }

        .box1 #wrap2 .box3{

            color: red;

        }

    </style>

</head>

<body>

<div class="box1" id="wrap1">

    <div class="box2" id="wrap2">

        <div class="box3" id="wrap3">

            <p class="active">猜猜我的颜色</p>

        </div>

    </div>

</div>

</body>

</html>

同时继承的标签属性权重问题

      （3）css选择器
            基础选择器
               - 标签选择器
                  选中所有 找的共性的内容，不管标签藏的多深 都可以选中
                  语法： p{}
               - 类选择器
                  选中所有，找的有共性  class可以多个重复的类名
                  <div class='box active' id='box'></div>
                  p  class box
                  语法：.box{}
               - id选择器
                  选择唯一的标签，因为id是唯一
                  语法： #box{}
               - 通配符选择器
                  选择所有
                  语法： *{}
            高级选择器
               - 后代选择器
                  选中这个div下面所有的后代（儿子,孙子）
                  语法：
                     div p{}
               - 子代选择器
                  选中亲儿子
                  语法：    
                     div>p{}
               - 组合选择器   组合选择器优先级>*
               - 交集选择器
            伪类选择器  a
            伪元素选择器
            css3的常用选择器

            先找定义到具体标签的样式,如果都定义到了具体标签,就比权重. 如果只有一个定义到定义到了父标签,没有定义到子标签,子标签跟随父标签的样式. 如果两个定义到了父标签,比权重.
　　　　　    结论：当权重一样的时候 是以后来设置的属性为准，前提必须权重一样 。‘后来者居上 ’。
            权重问题：
                /* 行内权重1000 > id 100 > 类 10 > 标签 1*/
                如果权重一样 以后面设置的为主

          继承性：
            有一些属性能够被继承  color ,font-*,line-height,text-align

           有请求必有响应
           请求：请求头和请求体
           响应：响应头和响应体

巴特西

Day040--HTML&CSS

最新文章

热门文章