html/css day03

aSuncat

2019-07-30

表单元素

1. input
            单行文本框        <input type="text">
            密码框           <input type="password">
            单选按钮         <input type="radio">
            复选按钮         <input type="checkbox">
            附件             <input type="file">
            提交按钮         <input type="submit">
            h5拓展：搜索框，日期框，数字框，email框...
                <input type="search">
                <input type="date">
                <input type="number">
                <input type="email">
            input的属性
                type
                name         参数的key(不能缺省)
                value     参数的value(按钮的时候不能缺省)
                placeholder     提示语
                checked     用在单选按钮和复选按钮中表示默认选中
                selected    用在下拉菜单中表示默认选中
                【注意】：checked和selected可以为单值属性
        2. select
            下拉菜单
            <select name="shenfen">
                <option value="shanxi">山西</option>
                <option value="jiangxi">江西</option>
                <option value="甘肃">甘肃</option>
            </select>

            select中的子元素一定为option,option中一般要添加value表示当选中该元素的时候，select的参数值为该value值,option中的value值可以不设置，那么value默认为文本值

        3. textarea
            多行文本域
            <textarea name="" placeholder="" cols="30" rows="10"></textarea>

        4. 插件（日期选择，地址选择，富文本）

    实体
        空格     &nbsp;            
        大于号 &gt;
        小于号 &lt;

css

介绍
用于修饰HTML结构的，层叠样式表

层叠

多个样式修饰一个结构
子元素从父元素那里继承样式
优先级

样式表

相关样式在一起定义（封装）

语法
1) 如何在html中应用css

1. 定义style属性中
    缺点：样式与结构冗余
    优点：优先级较高
    <div style="color:#fff;background:#333"></div>

2. 定义在head标签中的style标签中
    缺点：样式的复用率较低
    优点：样式与结构分离

    <head>
        <meta>
        <title></title>
        <link rel="stylesheet" href="">
        <script></script>
        <style>
            //css样式
            div {
                color:#fff;
                background:#333
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>

3. 将样式定义在css文件中
    优点：样式的复用率高（框架:例如bs），样式与结构分离
    style.css

    div {
        color:#fff;
        background:#333
    }

    b.html
        <head>
            <link rel="stylesheet" href="./style.css">
        </head>

2) 规则
    style属性：
        属性名:属性值;属性名:属性值;

    style标签/.css
        选择器 {
            属性值:属性值;
            属性名:属性值;
        }
3) 注释
    /*注释内容*/
4) 选择器
    1. 核心选择器
        标签选择器
            h2 { }
            div {规则 }
        id选择器
            #two {}
            <div id="one"></div>
            <div id="two"></div>
        类选择器
            .second{}
            <div class="second"></div>
            <div class="second"></div>
        逗号选择器
            h1,h2,h3 {}
        组合选择器
            div#two {}
            选择id为div的元素
            div,#two {}
            选择div元素和id为two的元素
        普遍选择器
            *
    2. 层次选择器
        子元素选择器     
            .header > a

            选中class为header的元素的直接孩子元素a标签

            <div class="header">
                <a href=""></a>
                <ul>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                </ul>
            </div>
            <div class="content">
                <a href=""></a>
                <a href=""></a>
            </div>
        后代元素选择器
            .header a
            选中class为header的元素的后代元素a标签

    3. 属性选择器
    4. 伪类选择器
    5. 伪元素选择器

input css css样式