html&css

作者: FlyingPeter | 来源:发表于2018-06-04 19:46 被阅读0次

    网元的四大部分:header,nav,main,footer
    article-> section
    em 斜体
    strong 粗体
    span 文本串
    q 引用
    blockquote 多行引用
    br 换行
      空格
    hr 水平线
    address 地址
    code 代码引用
    pre 多行代码引用
    ul 无序列表 默认前面有点
    li
    li
    /ul
    有序列表,默认前面有1,2,3
    ol
    li
    li
    /ol
    div 用id区分块

    <table summary="简介,不会显示出来">
    <caption>标题</caption>
    <tbody>
    <tr>
    <th>1的标头</th>
    <th>2的标头</th>
    <th>2的标头</th>
    </tr>
    <tr>
    <td>1的值</td>
    <td>2的值</td>
    <td>2的值</td>
    </tr>
    </tbody>
    </table>
    <a href="www.baidu.com" title="百度" target="_blank" //新标签页打开>
    <a href="mailto:taoxutao@huawei.com?subject=主题&cc=peter.tao@ebistrategy.com">
    <img alt="图片不显示时显示的文字" src="路径" title="鼠标划过时显示的文字">

    与服务器交互,提交接受信息,form表单,里面的元素一般都用name来沟通,action=“向该网址提交”
    input可以用来当输入框type=text,button,submit,reset,checkbox,radio(实现单选要name相同)
    name,value,checked
    select下拉框 multiple="multiple" 可以多选,安装ctrl(windows),or command(mac)
    <select>
    <option vaule="love" selected="selected">love</option>
    <option value="make">make</option>
    </select>

    <label for="id(关联控件的id)"></label> //比如ratio前的label,点击后选择


    CSS

    p{
    color:red;
    }
    .class{
    color:red;
    }
    #id{
    color:red;
    }

    <p class="cls1 cls2"></p>同时用两个class,如果有相同的属性,会覆盖

    .first>li 子选择器 作用于下第一代li标签
    .first li 包含(后代)选择器 作用于所有的li标签

    *{color:red;} 作用于全部的html元素

    a:hover{ /超链接,鼠标滑过时的效果/
    color:red;
    font-size:200px;
    }

    span p{ /同时对span,p标签起作用/
    color:red;
    }
    p{color:red;} /权值为1/
    p span{color:green;} /权值为1+1=2/
    .warning{color:white;} /权值为10/
    p span.warning{color:purple;} /权值为1+1+10=12/
    #footer .note p{color:yellow;} /权值为100+10+1=111/


    .class .class 父子,非严格父子
    例如:
    .father .c3{backcolor:green;}
    <div class="father">
    <p class="c3">this is the text</p> //显示绿色
    </div>

    .class.class 链接选择器,且,只有元素同时包含两个class,才会生效
    .important{color:red;}
    .warning{font-size:20px;}
    .important.warning{border:30px;}
    <p class="important warning"></p>

    相关文章

      网友评论

          本文标题:html&css

          本文链接:https://www.haomeiwen.com/subject/vlkijftx.html