html5学习

首页 > 代码库 > html5学习

2024-08-12 03:11:19 212人阅读

一、html5 常用的交互元素

内容交互元素
details
1、details用于说明文档或某个细节的作用，经常与summary元素配合使用，单击summary以后显示details元素的内容

使用details

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
  </head>
  <body>
     <details >
         djskldajskd
     </details>
  </body>
<script>
</script>
</html>

实现了点击span的元素展开detail是的功能

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
  </head>
  <body>
  <span  onclick="sc()">显示脚本</span>
     <details id="detail">
         djskldajskd
     </details>
  </body>
<script>
    function sc() {
        var cc=document.getElementById("detail");
        cc.innerHTML="dsdsd";
        var att=cc.getAttribute("open");
        if(att!="open"){
            cc.setAttribute("open","open");
        }
        else{
            cc.removeAttribute("open")
        }
    }
</script>
</html>

但是怎样修改details的详细信息的字样
解决的方法：通过summery的标签
suumery元素
summery元素说明的的是文档的标题，details说明的元素的详细信息
前者是后者的子元素

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
  </head>
  <body>
  <span  onclick="sc()">显示脚本</span>
     <details id="detail">
         <summary>信息的标题</summary>
         djskldajskd
     </details>
  </body>
<script>
    function sc() {
        var cc=document.getElementById("detail");
        cc.innerHTML="dsdsd";
        var att=cc.getAttribute("open");
        if(att!="open"){
            cc.setAttribute("open","open");
        }
        else{
            cc.removeAttribute("open")
        }
    }
</script>
</html>

菜单交互元素
1、menu元素
常与li标签元素的结合，用来定于一个列表

一般来说都是menu和li元素的结合li中的放的是每个子菜单的内容
2、command元素
这是html5新增的标签，用于定义各种按钮，command+menu实现弹出式的下拉菜单，单机菜单中的某项时，执行相应的操作
但是chorm 10 中不支持这个属性需要使用火狐来展示

状态交互元素
页面在与用户进行数据交互时，为了增强用户的UI体验，显示在页面中的各种进度状态
progress标签
1、实现点击下载一秒钟1%
https://github.com/wenjuanzhao/first1/tree/master/progress%E5%AE%9E%E7%8E%B0%E4%B8%8B%E8%BD%BD%E8%BF%9B%E5%BA%A6
2、使用progress+jquery元素来实现进度条
jquery的.extend和<script type="math/tex" id="MathJax-Element-1">.extend和</script>.fn.extend作用及区别
http://blog.sina.com.cn/s/blog_7c5d61f30101da1k.html
简单的来说就是，.extend相当于向jquery添加静态的方法，可以直接使用类来访问，但是后者添加的方法必须由对象来访问<script type="math/tex" id="MathJax-Element-2">.extend相当于向jquery添加静态的方法，可以直接使用类来访问，但是后者添加的方法必须由对象来访问 </script>(“#id”)来访问
代码
https://github.com/wenjuanzhao/first1/tree/master/css3-shine-progressbar

meter标签
h5中新增的标记表示在一定数量的范围中的值

二、html中的节点

新增的节点
section元素用于标记文档中的区段或段落
nav 页面的导航元素
hgroup元素是html5中新增的元素用于对页面的标题进行分组、
原有的节点新增的属性
h5对ol dl元素都新增加了一部分属性
ol新增的属性 start reversed
属性的使用

     <ol id="ol">
         <li>sjaksa</li>
         <li>sjaksa</li>
         <li>sjaksa</li>
     </ol>
    输入开始的数字
     <input type="text" id="zhi" width="60">
     <input type="button" id="btn" value="设置"  onclick="cc()">
  </body>
<script>
    var ol=document.getElementById("ol");
    var zhi=document.getElementById("zhi");
  function cc() {
       ol.setAttribute("start",zhi.value);
  }
</script>

新增的语义化的节点
time 定义时间或者日期
mark元素网页中高亮的元素‘
cite 引用标记
html中的废除的部分标签和部分属性
img的标签的border align hspace vspace属性不再支持
不再支持 iframe原来的功能是创建包含另一个文档的框架
html5中的公共属性
draggable属性用于设置用户是否可以拖动元素
hidden属性是否显示在页面中
spellcheck属性用于检测文本框中的语法是否发生错误
contenteditable属性是否对元素进行编辑

  <body>
     <article id="tt1" contenteditable="true">可以编辑的文字</article>
     <article id="tt2"></article>
  <input type="button" onclick="cc()" value="保存">
  </body>
<script>
     function cc(){
         var ss=document.getElementById("tt1").innerHTML;
         var oo=document.getElementById("tt2");
         oo.innerHTML=ss;
     }
</script>

html5中的新增的表单

input的新增的类型 type的值
email 邮箱地址
在提交的时候检测是否是邮箱的格式
url 输入网址的输入框
number 输入数字的文本框
只能输入数字，而且后边有上下箭头，用来增加或者减少
range 通过滑动条来改变数字的大小
date 可以输入日期
下拉可以弹出日期菜单
search 可以搜索操作的文本
input的新增的公用的属性
autofocus 页面加载成功之后，元素会自动的获得焦点
pattern=”正则表达式” 正则表达式验证输入框的内容

placeholder 输入框中默认显示内容
novalidate 是否验证输入框中的内容
required 文本是不是能为空
新增的表单元素
datalist元素
辅助表单中文本框的数据输入，本身是隐藏的，表单与表单文本框的list属性绑定

  <input type="text" id="cc" list="ll" >
        <datalist id="ll">
            <option value="程序开发员"></option>
            <option value="加速加速"></option>
            <option value="多少是多少"></option>
        </datalist>

实现的是表单输入的时候的提示
output元素
这个元素必须从属于某个表单，通过属性指定某个表单。功能是页面中显示不同类型表单元素的内容

  <form oninput="x.value=http://www.mamicode.com/parseInt(a.value)+parseInt(b.value)">
      <input type="text" id="a">
      <input type="text" id="b">
      <output name="x" for="a b"></output>
  </form>

html5中的文件

选择单个文件
创建一个file类型的input元素

      <input type="file" >

没有上传的时候会出现未选择文件，上传完毕后会出现文件的名字
选择多个文件
为 type为file的input添加属性multiple=”true”
使用Blob接口获取文件的类型与大小
通过type 和name 和size属性

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
  </head>
  <body>
  <form >
        <input id="ff" type="file" name="fleUpload" id="fleUpload" onchange="aa(this.files)" multiple="true">
  </form>
   <ul id="ff1"></ul>
  </body>
<script>
     function $$(id) {
         return document.getElementById(id)
     }
    function aa(files) {
        var str;
        for(var i=0;i<files.length;i++){
            var cc=files[i];
            str+=cc.name;
            str+=cc.type;
            str+=cc.size;
        }
        $$("ff1").innerHTML=str;
    }
</script>
</html>

通过accept属性过滤选择文件的类型

 <input type="file" accept="image/gif">

使用FileReader接口的方法
技术分享
FileReader接口使用这个方法实现的是上传图片

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
  </head>
  <body>
  <form >
        <input id="ff" type="file" name="fleUpload" id="fleUpload" onchange="filePrevImg(this.files)" multiple="true">
  </form>
   <ul id="prevUpload"></ul>
  </body>
<script>
    function $$(id){
        return document.getElementById(id);
    }
    function filePrevImg(files){
        //检测浏览器是否支持FileReader对象
        if(typeof FileReader == "undefined"){
            alert("您的浏览器不支持FileReader对象！");
        }
        var strHtml = "";
        for(var intI=0;intI<files.length;intI++){
            var tmpFile = files[intI];
            var reader = new FileReader();//每循环一次都要重新new一个FileReader实例
            reader.readAsDataURL(tmpFile);
            reader.onload=function(e){
                strHtml += "<span>";
                strHtml += "<img src=http://www.mamicode.com/‘"+e.target.result+"‘ alt=‘‘/>";
                strHtml += "</span>";
                $$("prevUpload").innerHTML = "<li>"+strHtml+"</li>";
            };
        }
    }
</script>
</html>

实现的是多个图片上传到服务器端的，并及时显示在页面上
readAsText实现读取文件

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
  </head>
  <body>
  <form >
        <input id="ff" type="file" name="fleUpload" id="fleUpload" onchange="filePrevImg(this.files)" multiple="true">
  </form>
   <ul id="prevUpload"></ul>
  </body>
<script>
    function $$(id){
        return document.getElementById(id);
    }
    function filePrevImg(files){
        //检测浏览器是否支持FileReader对象
        if(typeof FileReader == "undefined"){
            alert("您的浏览器不支持FileReader对象！");
        }
        var strHtml = "";
        for(var intI=0;intI<files.length;intI++){
            var tmpFile = files[intI];
            var reader = new FileReader();//每循环一次都要重新new一个FileReader实例
            reader.readAsDataURL(tmpFile);
            reader.onload=function(e){
                strHtml += "<span>";
                strHtml += e.target.result;
                strHtml += "</span>";
                $$("prevUpload").innerHTML = "<li>"+strHtml+"</li>";
            };
        }
    }
</script>
</html>

实现了读取文本文件的内容
侦听FileReader接口中的事件
技术分享

真个读取文件的过程中onprogress的过程时间是最长的
展示文件读取的事件的先后顺序

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
  </head>
  <body>
  <form >
        <input id="ff" type="file" name="fleUpload" id="fleUpload" onchange="filePrevImg(this.files)" multiple="true">
  </form>
   <ul id="prevUpload"></ul>
  </body>
<script>
    function $$(id){
        return document.getElementById(id);
    }
    function filePrevImg(files){
        //检测浏览器是否支持FileReader对象
        if(typeof FileReader == "undefined"){
            alert("您的浏览器不支持FileReader对象！");
        }
        var cc=$$("prevUpload");
        var reader = new FileReader();//每循环一次都要重新new一个FileReader实例
        reader.readAsText(files[0]);
        reader.onload=function(e){
            cc.innerHTML="数据读取成功";
        }
        reader.onloadstart=function(e){
            cc.innerHTML="开始读取数据";
        }
        reader.onloadend=function(e){
            cc.innerHTML="文件读取成功"
        }
        reader.onprogress=function(e){
            cc.innerHTML="正在读取数据"
        }

    }
</script>
</html>

html5中的音频和视频

‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>
html5学习

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们