复习和总结H5 CSS3常见的知识点

常用标签
 
    块级元素
        div form table ul li ol dl dt dd h1-6 p header footer    nav figure    section    addres aside hgroup hr br            
    行内元素
        span a strong b i em time audio label  
    行内块级元素
        img input select textarea video
 
<table border="0" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
    </tfoot>
</table>
    合并单元格:colspan rowspan
 
<form action="后台程序(jsp php aspx)" method="get/post">
    <input type="#" name="" value="">
    
    #:
    text
    password
    radio
    checkbox
    file
    hidden
    button
    submit
    reset
    image
    email
    url
    search
    tel
    date(month week time datetime datetime-local)
    color
    range
    number
 
    <select>
        <option value="" selected></option>
    </select>
    <textarea cols="" rows=""></textarea>
</form>
 
表单元素属性
    
    checked:radio checkbox
    selected:option
    disabled:input
    enabled:
    readonly:
    maxlength:
    placeholder:
    multiple:select input="file"
    max
    min
    step
    autofocus
    autocomplete
    formaction
    formmethod
    list和datalist和option
    <input type="text" list="chengjinrui">
    <datalist id="chengjinrui">
        <option value="">文本</option>
    </datalist>
 
 
    <a href="" target="_blank/_self/_parent" title=""></a>
    <img src="路径" width height alt title>
 
    路径：
        相对路径  
        绝对路径
            本地：
            网络：
    所有标签的共同属性
        class:
        id:
        style:
        title:
        
 
 
css属性
    样式表
        1、行内样式表 <p style=""></p>
        2、内部样式表 <style></style>
        3、链接式
            <link href="css的路径" rel="stylesheet">
        4、导入式
            <style>
                @import url(路径)；
            </style>
    样式表的优先级
        就近原则
    
    选择器：
        基本选择器
            *
            id
            class
            element(标签选择器)
        层次选择器也叫关系选择器
            群组选择器：        ，
            后对选择器：         空格
            子元素选择器：         >
            紧邻的兄弟选择器：    +
            相邻的兄弟选择器：    ~
        伪类选择器：
            :first-child
            :last-child
            :nth-child
            :first-of-type
            :last-of-type
            :nth-of-type
            
            :link
            :visited
            :hover
            :active
            :focus(可以应用到input text上 input:focus{background:red;})
 
            :target
            :not
 
        属性选择器
            [attribute]([type]  img[width])
            [attribute=value]([type="text"])
            [attribute^=value]
            [attribute$=value]
            [attribute*=value]
        伪元素选择器
            ::first-line
            ::first-letter
            ::after
            ::before
                万能清除浮动
        
        选择器的优先级
            ！important>行内>id>class>element>*        
 
        选择器的权重
            行内>id>class>element>*
            1000 100 10      1    0
 
 
css属性
    文字属性
        font-family:
        font-size:
        font-weight:
        font-style:
        color
        font-face:服务器端字体
        
    段落属性
        text-align:center left right
        text-indent:2em
        text-decoration:underline/none
        text-transform:第一个字母大写uppercase lowercase capitalize
        white-space:nowrap
        line-height:
        text-shadow:
        text-overflow:
        letter-spacing:
        word-spacing:
        word-break:
    背景属性(background)
        background-color
        background-image:url
        background-image:linear-gradient()
        background-repeat:
        background-position:
        background-size:
        background-clip:
        background-origin:
        background:url(),url()
    列表属性
        list-style:none;
    边框属性
        border:
        border-top/left/bottom/right；
        border-radius:
    外边框
        margin:
        margin-top/left/bottom/right:
    内边距
        padding:
        padding-top/left/bottom/right:
    box-shadow
        
    尺寸属性
        width
        height
    布局属性
        float
        clear
    定位属性
        position:relative/absolute/fixed
        z-index
    变形属性
        transform:scale/rotate/translate/skew
    过渡属性
        transtion:all 3s linear 3s
    动画属性
        animation:name 3s linear 3s infinite alternate/reverse/revers-alternate
 
    box-sizing:border-box;
    resize:none;
    outline:none;
 
chrome  
    -webkit-text-fill-color
    -webkit-text-stroke