一.html5应用程序标签
(1)datalist需要数据载体 input list属性指向数据源
<input type="text" list="input_list">
  $ datalist是数据源
<datalist id="input_list">
    <option value="老王"></option>
    <option value="老魏"></option>
</datalist>
(2)progress进度条
/*如果要改默认样式 要先取消默认样式 */
-webkit-appearance: none;
/*选中背景元素*/ /*兼容火狐浏览器*/ .my-progress::-moz-progress-bar {
    background-color: yellow;
}
/*拿到progress的-webkit-progress-bar位置*/ .my-progress::-webkit-progress-bar {
    background-color: yellow;
}
.my-progress::-webkit-progress-value {
    background-color: blue;
}
<progress class="my-progress" value="40" max="100"></progress> <!--optimum 这是最大值 value是当前值-->
<meter max="100" low="40" high="90" optimum="100" value="90"></meter>
(3)解决css3各个浏览器兼容问题需要添加私有前缀
<1>Firefox: -moz-
<2>Safari: -webkit-
<3>Opera: -o-
<4>IE: -ms-
(4)网页 css js 存储在网络服务器上 http服务器
www.baidu.com 先去dns服务器查百度的IP地址 找到ip之后直接去 访问这个ip 这时候这些文件传到你电脑上 就能显示网页
sublimeserver 就是在本机中开启了一个http服务器 局域网都能访问sublime打开的项目
二.连接关系
<!--控制翻页 比如看小说的网站有上一页下一页翻页的按钮 如果是左箭头← 右箭头→ 网页阅读设备就可能识别不出来 在rel里面加上prev属性说明 这个链接链接到的是上一页--> (1)<a href="" rel="prev">上一页</a> <a href="">下一页</a>
<a href="" rel="next">→</a>
 
(2)<link rel="stylesheet" href="style.css">
<!--stylesheet 文档的外部样式表-->
<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed">
<!--alternate  文档的可选版本(例如打印页、翻译页或镜像)-->
<link rel="shortcut icon" href="favicon.ico"> <link rel="pingback" href="http://myblog.com/xmlrpc.php"> <link rel="prefetch" href="http://myblog.com/main.php"> <a rel="archives" href="http://myblog.com/archives">old posts</a> <a rel="external" href="http://notmysite.com">tutorial</a>
<a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
<!--licence    一般用于文献,表示许可证的含义-->
<a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
<!--nofollow   用于指定 Google 搜索引擎不要跟踪链接-->
<a rel="tag" href="http://myblog.com/category/games">games posts</a>
<!--tag    标签集合-->
《----------------------------------------------------------------------------------------------------------------------》
<!--start  集合中的第一个文档--> <!--next   集合中的下一个文档--> <!--prev   集合中的前一个文档--> <!--contents   文档目录--> <!--index  文档索引--> <!--glossary   文档中所用字词的术语表或解释--> <!--copyright  包含版权信息的文档--> <!--chapter    文档的章--> <!--section    文档的节--> <!--subsection 文档的子段--> <!--appendix   文档附录--> <!--help   帮助文档-->
<!--bookmark   相关文档-->
<!--friend 友情链接-->
三.结构数据标记(方便网络爬虫解析)
<div itemscope itemtype="http://example.com/hello">
    <p>我叫<span itemprop="主人">老王</span>。</p>
    <p>
        我养了一条叫
        <span itemprop="狗名">旺财</span>的
        <span itemprop="品种">金毛</span>犬。
    </p> </div>
<label for="text">请输入:<input id="text" type="text" ></label>
<label>请输入: <input type="text" >
</label>
四.添加监听
关键字:addEventListener(防止方法之间的覆盖)
书写格式:
xiao.addEventListener('click',function () {
    da.style.backgroundColor = 'yellow';
});
五.自定义属性
(1)关键字:(‘data-id’,key);
this是当前点击对象 他有一个dataset属性 dataset是去掉data-之后的值
当网页超链接多了之后 将分组标签写data属性 指向分组列表每一项的超链接数据源
   var data = {
      小米note2:小米note2的超链接,
      小米note:小米note的超链接,
      小米5:小米5的超链接,
     小米5s:小米5s的超链接,
   }
    data-links
六.-beforeafter(伪元素)
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hezi::before {
            content: '我是p标签之前的内容';
        }
        .hezi::after {
            content: '我是p标签之后的内容';
        }
    </style>
</head>
<body>
<div class="hezi">
 
    <p>我是p1标签</p>
    <p>我是p2标签</p>
 
</div>
 
七.-数组字典
 
//    数组
    var array = ["张三","李四","王五"];
//    数组通过下标取元素
    var first = array[0];
//    取数组中所有元素用for循环
    for (var i = 0;i < array.length;i++){
//        i是从 0 到 array.length
        console.log(array[i]);
    }
    for (var id in array){
//        在数组中id是数组的下标
        console.log(array[id]);
    }
  for (var id in array){
//        在数组中id是数组的下标
        console.log(array[id]);
    }
//    字典 key:value
//    var dict = {101:"张1",102:"张2",103:"张3"};
    var dict = {101:array,102:"张2",103:"张3"};
//取值用字典[key值]
//    console.log(dict[101]);
//这个key就是dict的每一个key值
    for (var key in dict){
        console.log(key);
//        item就是key对应的值
        var item = dict[key];
        console.log(item);
    }
 
八.-智能表单
 
<!--text password radio checkbox select -->
<form action="">
    <!--required 必填项 不填的话提示需要填写-->
<input type="text" required>
    <!--邮箱-->
<input type="email" value="some@email.com">
    <!--日期选择器 -->
<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14">
<!--范围选择 step是移动一下value变化的数值-->
<input type="range" min="0" max="50" value="10" step="10">
<input type="search" results="10" placeholder="Search...">
    <!--正则表达式-->
<input type="tel" placeholder="(555) 555-5555"
      pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$">
<input type="color" placeholder="e.g. #bbbbbb">
<input type="number" step="1" min="-5" max="10" value="0">
    <input type="submit">
</form>
 
九.-音乐
(1)<!--controls显示因音乐播放器的控制台 autoplay自动播放-->
 
<audio id="player" src="olddriver.mp3" controls autoplay></audio>
<button id="play">播放</button>
<button id="pause">暂停</button>
<script>
 
十.-视频
(1)
<!--<video src="movie.mp4" autoplay controls></video>--> <!--source标签播放数据源 当浏览器不识别格式的时候自动找下一个source--> <!--poster视频播放器海报--> <!--       属性介绍:       autoplay:自动播放;       controls:显示播放控件;       loop:循环播放;       preload:预加载;
  -->
 
<!--以下仅作了解!!!!-->
<object type="application/x-shockwave-flash" data="http://static.youku.com/v1.0.0557/v/swf/loader.swf" width="100%" height="100%" id="movie_player">
    <param name="allowFullScreen" value="true">
    <param name="allowscriptaccess" value="always">
    <param name="allowFullScreenInteractive" value="true">
    <param name="flashvars" value="VideoIDS=XMTMwNDAzNzM4NA==&amp;ShowId=0&amp;category=85&amp;Cp=0&amp;ev=1&amp;Light=on&amp;THX=off&amp;unCookie=0&amp;frame=0&amp;pvid=1439005764768c9QpaT&amp;uepflag=1&amp;Tid=0&amp;isAutoPlay=true&amp;Version=/v1.0.1080&amp;show_ce=0&amp;winType=interior&amp;Type=Folder&amp;Fid=25977506&amp;Pt=0&amp;Ob=1&amp;plchid=z&amp;openScanCode=1&amp;scanCodeText=&quot;限时&quot; 扫码免广告&amp;embedid=AjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8=&amp;vext=bc%3D%26pid%3D1439005764768c9QpaT%26unCookie%3D0%26frame%3D0%26type%3D1%26fob%3D1%26fpo%3D0%26svt%3D0%26emb%3DAjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8%3D%26dn%3D%E7%BD%91%E9%A1%B5%26hwc%3D1%26mtype%3Doth&amp;pageStartTime=1439005764766">
    <param name="movie" value="http://static.youku.com/v1.0.0557/v/swf/loader.swf">
    <div class="player_html5">
        <div class="picture" style="height:100%">
            <div style="line-height:460px;"><span style="font-size:18px">您还没有安装flash播放器,请点击<a href="http://www.adobe.com/go/getflash" target="_blank">这里</a>安装</span></div>
        </div>
    </div>
</object>
 
十一.-字幕
<!--track标签是字幕-->
<video src="movie.mp4" controls>
    <track src="zimu.vtt" srclang="cn" kind="subtitles" label="Chinese">
</video>
 
十二.-svg
 
<!--这三种显示方式缺点:不可控-->
    <!--第一种方式-->
    <embed src="famoustiger.svg" type="">
    <!--第二种方式-->
        <object data="famoustiger.svg" type=""></object>
    <!--第三种方式-->
        <iframe src="famoustiger.svg" frameborder="0"></iframe>
 

html5应用程序标签的更多相关文章

  1. 第86天:HTML5应用程序标签和智能表单

    一.HTML5应用程序标签 1.datalist需要数据载体 input list属性指向数据源 2.progress进度条 -webkit-appearance: none;   /*如果要改默认样 ...

  2. [转] 移动前端不得不了解的HTML5 head 头标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元 素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容 ...

  3. HTML5新增结构标签

    引言 在本节中,笔者将向大家讲述三部分内容,分别介绍HTML5时代的召唤,跟HTML4的区别,以及HTML5中带来的新的结构标签. HTML5时代的召唤 HTML4与HTML5的区别 HTML5新结构 ...

  4. 移动前端不得不了解的HTML5 head 头标签(2016最新版)

    小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握. ...

  5. 转html5语义化标签总结一

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  6. HTML5新结构标签和移动端页面布局

    --------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.ar ...

  7. HTML5: HTML5 应用程序缓存

    ylbtech-HTML5: HTML5 应用程序缓存 1.返回顶部 1. HTML5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线 ...

  8. 第二季第十一天 html5语义化标签 css透明度

    span不能设置宽高背景 HTML5语义化标签 <section>标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能. <s ...

  9. html5语义化标签使用规范

    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...

随机推荐

  1. springmvc 动态代理 JDK实现与模拟JDK纯手写实现。

    首先明白 动态代理和静态代理的区别: 静态代理:①持有被代理类的引用  ② 代理类一开始就被加载到内存中了(非常重要) 动态代理:JDK中的动态代理中的代理类是动态生成的.并且生成的动态代理类为$Pr ...

  2. Leetcode: Word Squares &amp;&amp; Summary: Another Important Implementation of Trie(Retrieve all the words with a given Prefix)

    Given a set of words (without duplicates), find all word squares you can build from them. A sequence ...

  3. HIS系统的处方录入控件

    前文<EFW框架Winform前端开发之强大的自定义控件库>中我们介绍了EFW框架中Winform系统中的自定义控件,本章使用自定义控件中的GridBoxCard控件开发了一个HIS系统的 ...

  4. hibernate 组件(Component)映射

    1.类Teacher public class Teacher { private int id; private String name; private String sex; private A ...

  5. Notepad++中常用的插件

    Notepad++中常用的插件 Notepad++实用插件分享 otepad++前端开发常用插件介绍

  6. 树莓派.安装Firefox浏览器

    sudo apt-get install firefox-esr 要做全屏效果的话, 可以加装插件FF Fullscreen 插件地址: https://addons.mozilla.org/en-U ...

  7. 版本号严格遵守semver语义化标准

    地址:http://semver.org/lang/zh-CN/?spm=a219a.7629140.0.0.GUJMXE 语义化版本 2.0.0 摘要 版本格式:主版本号.次版本号.修订号,版本号递 ...

  8. json文件转换成excel

    1.环境 python2.7 2.库 xlwt.demjson.json 3.code # -*- coding: utf-8 -*- import xlwt,demjson,json if __na ...

  9. Nerd的套现ATM机

    Nerd是一群似乎只在学生阶段才出尽风头的人.不善言辞,闷头学习,每遇考试便战功赫赫风光无限,赢得天下名.这样的描述,对那些成绩一般.喜欢天马行空.甚至有些多动症倾向的人来讲,无异于是噩梦.幸好有社会 ...

  10. XE7/X10.2 Datasnap使用 dbExpress 连接MySQL数据库

    本人使用:DELPHI X10.2.2 版本连接 MYSQL 5.1 (安装 mysql-5.1.72-win32.msi)的32位版本,开始连接不了: 将 MYSQL 5.1 安装目录下bin 中的 ...