h5新增常用属性

最新推荐文章于 2024-08-31 17:25:57 发布

王辣辣

最新推荐文章于 2024-08-31 17:25:57 发布

阅读量419

点赞数 1

文章标签： h5

本文链接：https://blog.csdn.net/qq_44870324/article/details/99470208

版权

一、新增的语义化标签

<header></header>   //头部
<nav></nav> //导航栏
<aside></aside> // 侧边栏
<article></artivle> // 文字、图片、内容等
<footer></footer> //底部


   

     <style>
          header{
              width:100%;
              height:40px;
              background-color:blanchedalmond;
          }
          nav{
              width: 100%;
              height:40px;
              background-color:blue;
          }
          article{
              float:left;
              width: 70%;
              height:150px;
              background-color:cadetblue;
          }
          
          aside{
              float:right;
              width:25%;
              height:150px;
              background-color:chartreuse;
          }
          footer{
              width: 100%;
              height:40px;
              background-color:crimson;
          }   
     </style>
</head>
<body>
    <header>头部</header>
    <nav>导航</nav>
    <article>文章
    <section></section>
</article>
    <aside>侧边导航</aside>
    <div style="clear:both"></div>
    <footer>底部</footer>

</body>
</html>

在这里插入图片描述
缺点：兼容性比较差，ie9以上才可识别。

ie8及以下如何识别？
1.手动用js创建标签

<script>
       document.createElement('header');
    </script>

注意：一定要先创建在使用。js创建的标签都是行内元素，要将其转换成块元素，或者加浮动。
2.引入库

<script src="  路径"

二。新增表单type类型

 <!-- fun:收集用户数据  
        action: 后台处理表单数据的那个程序地址
        method:  提交方式

                  get :
                      明显显示在地址栏上 （不是那么安全）
                      数据量有限制 大约4kb
                      适应：提交一些不敏感数据  搜索框

                   
                  post:
                      显示在请求头部的form data 
                      一般来说数据量没有限制
                      提交一些敏感信息 登录 注册

        name=""

        form1 {
            数据
            useremail: a@a.com;

        }

<form action="l" name="form1">

        <!-- 表单控件 input  -->
        <!-- 老 text(数字，邮箱 ， url)   password select   -->
        <!-- 新type 提供验证或者是键盘功能 -->
        <!-- 邮箱 : 提供了完整的邮箱验证-->
       邮箱: <input type="email" name="useremail"><br>
       <!-- 完整的网址验证 提示的不健全 -->
       网址: <input type="url" name="url"><br>
       <!-- number数字输入 
         min:最小值
         max: 最大值
         min<value<max
         step 步长
       -->
       薪资: <input type="number" name="salary" value="5000" 
       
       min="5000" max="5500" step="100"><br>
       <!-- 电话号 tel 不做手机号验证 fun: 打开移动端的数字键盘
        验证： 此文件发到qq上 手机上 通过手机浏览器打开 点一下 看看弹出数字键盘与否
    
      -->
       手机号：<input type="tel" name="userphone"><br>
       <!-- 颜色 色盘  color -->
       你最喜欢的颜色:
       <input type="color" name="color"><br>
       <!--搜索框 样式 search   只提供删除按钮  提高用户体验  -->
       偶像的名字:
       <input type="search"><br>
       <!-- range 标尺
      min:
      max :
      value:
      step:
    -->
       体重: <input type="range" min="70" max="100" value="90" step="1"><br>
       <!-- time 小时+分钟 -->
       约会时间: 
       <input type="time">
       <!-- 年月  month -->
       <input type="month">
       <!-- week 月星期 -->
       <input type="week">
       <!-- date 时间  年月日  UTC 标准时间 -->
       <input type="date">
       <!-- datetime 和date 一样 年月日  datetime 使用在苹果浏览器 -->
       <input type="datetime">
       <!-- 本地时间  当地时间 -->
       <input type="datetime-local">
       <br>

    
       h5的下拉列表:<input type="text" list="list1">
            <datalist id="list1">
                <!-- 选项标 option 单标签  显示的内容 value="内容" -->
                <option value="北京">
                <option value="中国香港">
                <option value="日本东京">
                <option value="纽约">

            </datalist><br><br>

            <!-- 类似进度条的元素  meter 
            描述占有率的意思  投票率 磁盘使用率
            三色: 绿色  黄色  红色
            min:
            max:
            low:
            high:
            optimum: 最佳值
            value：实际值
        
        -->
            磁盘占用: <meter min="0" max="100" optimum="15" low="20" high="80" value="90"></meter>
        </fieldset>
   <input type="submit">

表单属性

 <!-- 表单属性:
        逻辑属性  true  真  false 假
    selected 被勾选
    checked  被勾选
    1：placeholder 设置默认文本内容 
    2：autofocus  自动聚焦  true false
    一张界面只能有一个autofocus元素
    3：autocomplete ="on/off" 自动提示历史输入记录功能  
    on 开启提示功能
    off代表没开启提示功能 默认值
    提前：  该表单元素必须有name属性
           该表单有完整的提交过一次

    4：disabled  逻辑属性  禁用属性
       enabled 可以使用 
    5: pattern  验证  字符串 ---》 模式匹配 ---》表达式 
    pattern="表达式" 
    正则表达式 :字符串 fun: 匹配字符串的表达式  
    [0-9]{11} 11位数字输入 
    ^1[3,8,5,7,4][0-9]{9}$  电话号的完整验证
    用户输入的字符串 和  pattern""里面表达式进行匹配 
    成功 验证通过
    失败  阻断提交  提示

    6:multiple 多文件上传属性
    ctrl +鼠标点击

    7:required 必填项  
    8: accesskey =" 键码 " 快捷聚焦键
    键盘聚焦方式  s 键码
    使用的时候  alt + 键码 实现聚焦


    
    -->
    <form action="./01-h5新增的语义化标签.html">
        昵称: <input type="search" name="name" placeholder="请输入昵称" autocomplete="on"
        
        maxlength="4" minlength="2"><br>
        密码: <input type="password"  accesskey="s" ><br>
        手机号:
        <input type="tel" pattern="^1[3,8,5,7,4][0-9]{9}$"   required><br>
        请上传自拍照（不要美颜）:
        <input type="file" multiple>
        <input type="submit" >
    </form>

新增音频

<!-- 
        1.src 路径
        2.controls 播放控件 包含进度条、音量 、暂停、开始，不加的时候不显示
        3.autoplay 自动播放 只有在低版本的浏览器才能自动播放
        高版本不自动播放目的是节省带宽。
        4.muted  静音属性
        5.width 、height
        6.preload  音频在加载时 预播放
        7.poster 设置第一帧动画 poster="路径"

         支持格式
         ogg
         MP3
         Wav
         若浏览器不兼容 可用<source>添加多个不同的文件格式音频。

                视频<video></video> 属性同上
     -->
    <audio src=""  ></audio>

框架标签 iframe 引入另外一个html界面
frameborder = “0” 取消框架边框
scrolling = “yes / no /auto” 一般设置为no 不让滚动条出现
src: 链接的界面地址
iframe 不被爬虫爬取信息