H5新增加的特性

新增标签

     <!-- 1:更简洁 -->

     <img />

     <!-- 2 标签语义化 -->

     <div></div>

     <span></span>

     <header>头部</header>

     <footer>底部</footer>

     <main>主体</main>

     <nav>导航连接</nav>

 

     <section>内容区块</section>

     <article>内容</article>

    <!-- 视频文件 -->

    <video width="200px" height="100px" controls>

        <source src="./music/周杰伦 - 错过的烟火_hires.mp4" type="video/mp4">

    </video>

    <!-- 音频文件 -->

    <audio controls>

        <source src="./music/周杰伦 - 粉色海洋_hires.mp3" type="audio/mp3">

    </audio>

    <!-- datalist   提供一个事先定义好的列表  通过id和input关联-->

    <p>浏览器版本 <input list="words"></p>

    <datalist id="words">

        <option value="Firefox">Firefox</option>

        <option value="Chrome">Chrome</option>

    </datalist>

 

新增input

  <!-- form 用来收集用户提交的数据，发送到服务器 -->

    <form action="">

        <label for="a">

            <!-- 邮箱 -->

         邮箱

         <input type="email" name="email" id="a">

        </label>

   

        <!-- 地址 -->

        <input type="url" name="url">

        <!-- 数字 -->

        <input type="number" name="number">

        <!-- 范围内数值 -->

        <input type="range" value="0" min="0" max="100" step="5">

        <!-- 日期 -->

        <input type="date">

        <input type="month">

        <input type="week">

        <input type="datetime">

        <!-- 提交按钮 -->

        <input type="submit">

    </form>

 

placeholder等

    <!--placeholder 文本框处于未输入状态时 文本框中显示的提示信息

      autofocus  自动获取焦点  一个页面只能有一个

      required  必填项

    -->

    <form action="">

        <input

        type="text"

        required

        name="user"

        autofocus

        placeholder="请输入用户名"

       >

         <input type="submit">

     </body>

    </form>

 

 阴影

文字阴影：

font: 700 48px "Microsoft YaHei" ;

            /* 水平（必选） 垂直（必选）  模糊距离 颜色 */

            text-shadow: 10px 10px 10px pink ;

盒子阴影：

     /* 阴影离开盒子的横向距离

           阴影离开盒子的纵向距离

           阴影的模糊半径

           阴影的延伸半径(可省略)

           颜色

           是否使用内阴影(可省略 默认是外阴影)

         注意：顺序不可以改变 */

            box-shadow: 10px 10px 10px  skyblue inset;

 

背景图片的起始点：

             /*

        border-box 背景图片相对于边框盒来定位

        padding-box背景图片相对于内边距框定位

        content-box背景图片相对于内容框定位

        */

            background-origin: border-box;

 

background-origin:padding-box;

 

 

background-origin:content-box;

 

 

背景图片的显示范围：

         /*

        border-box 背景被裁剪到边框盒

        padding-box背景被裁剪到内边距框

        content-box背景被裁剪到 内容框

        */

        background-clip: border-box;

 background-clip: padding-box;

 

  background-clip: content-box;

 

 

 

背景图片的尺寸

            /* background-size:宽度  高度

            只设置一个值，第二个值会被设置为auto

            */

            /* background-size: 100px; */

            /* 百分比

            以父元素的百分比来设置背景图的宽度和高度

            只设置一个值，第二个值会被设置为auto

            */

            /* background-size: 50%; */

            /* cover   背景图完全覆盖背景区域  会导致图片失真*/

            /* contain  保持背景图像本身的宽高比例 */  

            background-size: contain;50% 100%；