zoukankan      html  css  js  c++  java
  • HTML标签-->HTML5新增

    HTML的Form新增属性

    <form method="post" name="myForm">
        <p>
            邮箱:<input type="email"/>
        </p>
        <p>
            搜索:<input type="search"/>
        </p>
        <p>
            范围(滑块):<input type="range" min="0" max="100" value="20" step="10"/>
        </p>
        <p>
            数字:<input type="number" min="5" max="100" step="10"/>
        </p>
        <p>
            网址:<input type="url"/>
        </p>
        <p>
            颜色:<input type="color"/>
        </p>
        <p>
            电话:<input type="tel"/>
        </p>
        <p>
            日期:<input type="date"/>
        </p>
        <p>
            月:<input type="month"/>
        </p>
        <p>
            周:<input type="week"/>
        </p>
        <p>
            <input type="submit"/>
        </p>
    </form>
    

    HTML新增标签

    <figure>
        <img src="" alt=""/>
        <figcaption>描述</figcaption>
    </figure>
    
    
    <!--细节-->
    <details>
        <summary>标题</summary>
    </details>
    
    
    <!--标记-->
    <mark>黄背景颜色</mark>
    
    <!--刻度-->
    <meter value="" min="" max="" low="" high="">您的浏览器不支持meter标签</meter>
    
    <!--进度条-->
    <progress max="" value="">您的浏览器不支持progress标签</progress>
    
    

    HTML5新增结构标签

    <header>头部</header>
    <nav>导航</nav>
    <footer>页脚</footer>
    <article>文章</article>
    <section>章节</section>
    <aside>侧边栏</aside>
    

    视频和音频

    <video src="路径" autoplay controls loop poster="" width="" height="" muted preload="auto">
        您的浏览器不支持video标签
    </video>
    
    <audio src="路径" autoplay controls loop>
        您的浏览器不支持audio标签
    </audio>
    
    <video autoplay>
        <source src=""/>
        <source src=""/>
        您的浏览器不支持video标签
    </video>
    
    
    <embed src="" width="" height=""/>
    

    CSS

    层叠样式表,级联样式表,简称样式表
    文件后缀  .css
    
    作用:
    实现了内容与表现的分离
    提高了代码的重用性和可维护性
    
    一个css文件可以被对个HTML文件引入
    一个HTML文件可以引入多个css文件
    

    引入css

    1)行内样式(内联样式)  只对当前元素起作用
    <div style="color: red;"></div>
    
    2)内部样式     只对当前页面起作用
    <head>
        <style>
            /*css样式*/
            选择器{
                属性:属性值;
                属性:属性值;
                属性:属性值;
            }
        </style>
    </head>
    
    3)外部样式   提高了代码的重用性和可维护性,实现了内容与结构完全分离
    <head>
        <link rel="stylesheet" href=".css"/>
    </head>
    
    
    4)导入式
    <head>
        <style>
            @import "";
        </style>
    </head>
    
    @import和link的区别:
    1.@import先加载HTML,再加载css样式,link一边加载HTML,一边加载css
    2.@import有兼容性,IE5以上支持,link没有兼容性
    3.@import只能引入css文件,link还可以引入其他内容
    4.@import会增多http请求
    

    基本选择器

    7.基本选择器
    1)全局选择器,通用选择器    *
    选中网页所有内容
    
    2)元素选择器   div   a   img   b   p  span  ul   li   table   input
    选中所有指定的元素
    
    3)类选择器
    <div class="className"></div>
    .className{}
    
    class名字可以重复,class名字可以起多个,用空格隔开
    
    4)ID选择器
    <div id="idName"></div>
    
    #idName{}
    
    id名字唯一
    
    选择器优先级:行内样式>ID选择器>类选择器>元素选择器>全局选择器
    权重:         1000      100      10          1
    优先级相同,后面的代码生效
    
    5)合并选择器
    选择器1,选择器2,...{}
    
    提取共同样式
    
  • 相关阅读:
    53. Maximum Subarray
    64. Minimum Path Sum
    28. Implement strStr()
    26. Remove Duplicates from Sorted Array
    21. Merge Two Sorted Lists
    14. Longest Common Prefix
    7. Reverse Integer
    412. Fizz Buzz
    linux_修改域名(centos)
    linux_redis常用数据类型操作
  • 原文地址:https://www.cnblogs.com/Testking/p/11990839.html
Copyright © 2011-2022 走看看