html/css day03

表单元素

        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

  1. 介绍
    用于修饰HTML结构的,层叠样式表

    层叠

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

    样式表

    相关样式在一起定义(封装)
    
  2. 语法
    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. 伪元素选择器
    原文作者:芝士
    原文地址: https://segmentfault.com/a/1190000019918969
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞