• 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,...{}
    
    提取共同样式
    
  • 相关阅读:
    HADOOP docker(六):hive简易使用指南
    HADOOP docker(四):安装hive
    HADOOP docker(二):HDFS 高可用原理
    Python 自用代码(调整日期格式)
    Python 自用代码(某方标准类网页源代码清洗)
    python合并多个csv文件并去重
    Python连接MySQL乱码(中文变问号)
    Shell实现循环执行curl向Solr导入json文件
    Python 自用代码(拆分txt文件)
    shell报错:未预期的符号***附近有语法错误
  • 原文地址:https://www.cnblogs.com/Testking/p/11990839.html
Copyright © 2020-2023  润新知