一、HTML5应用程序标签

1、datalist需要数据载体 input list属性指向数据源

2、progress进度条

-webkit-appearance: none;   /*如果要改默认样式 要先取消默认样式 */
 .my-progress::-moz-progress-bar {   /*选中背景元素*/ /*兼容火狐浏览器*/
    yellow;
}
 .my-progress::-webkit-progress-bar {  /*拿到progress的-webkit-progress-bar位置*/
    yellow;
}
.my-progress::-webkit-progress-value {
    blue;
}
<progress class="my-progress" value="40" max="100"></progress>

<meter max="100" low="40" high="90" optimum="100" value="90"></meter> <!--optimum 这是最大值 value是当前值-->

3、解决CSS3各个浏览器兼容问题需要添加私有前缀

<1Firefox: -moz-
<2Safari: -webkit-
<3Opera: -o-
<4IE: -ms-

4、网页 css、 js 存储在网络服务器上 http服务器

www.baidu.com 先去dns服务器查百度的IP地址, 找到ip之后直接去 访问这个ip ,这时候这些文件传到你电脑上, 就能显示网页。
sublimeserver 就是在本机中开启了一个http服务器, 局域网都能访问sublime打开的项目。
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>应用程序标签</title>
<style>
.my-progress{
-webkit-appearance: none;
}
.content::after{/*伪类 在div 后面继续添加内容*/
content:'bbbbb';
color:#f40;
}
.my-progress::-webkit-progress-bar{
background-color: #fff;
}
</style>
</head>
<!--Sublime Server 不要stop直接退出-->
<body>
<div class="content">aaaaaa</div>
<!--数据列表-->
<input type="text" list="input_list">
<datalist id="input_list"><!--数据列表呈现需要载体-->
<opion value="laoma"></opion>
<option value="list"></option>
</datalist> <!--状态指示器-->
<progress></progress>
<!--进度条默认最大值是1-->
<progress value="10" max="100" class="my-progress"></progress>
</body>
</html> 运行效果:

二、自定义属性

1、关键字:(‘data-id’key);

this是当前点击对象 ,他有一个dataset属性, dataset是去掉data-之后的值
当网页超链接多了之后 ,将分组标签写data属性 ,指向分组列表每一项的超链接数据源。
   var data = {
      小米note2:小米note2的超链接,
      小米note:小米note的超链接,
      小米5:小米5的超链接,
     小米5s:小米5s的超链接,
   }
    data-links
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>data属性</title>
</head>
<body>
<ul id="list">
<!--<li data-age="18">zhangsan</li>-->
<!--通过DOM存储与DOM对象强相关的数据-->
<li data-id="1" data-age="18" data-gender="true">zhangsan</li>
<li data-id="2" data-age="18" data-gender="false">zhangsan</li>
<li data-id="3" data-age="18" data-gender="true">zhangsan</li>
</ul>
<div id="info"></div>
</body>
</html>
<script>
var data={01:{name:"张安",age:18},
02:{name:"张安",age:18},
03:{name:"张安",age:19},
04:{name:"张安",age:20},
05:{name:"张安",age:21},
06:{name:"张安",age:22},
07:{name:"张安",age:23},
08:{name:"张安",age:24},
09:{name:"张安",age:25},
10:{name:"张安",age:26}};
//jQuery操作一定要做变量本地化
var list=document.getElementById('li');
for(var id in data){
var item=data[id];
var liElement=document.createElement("li");
//liElement.innerHTML=item.name;
liElement.appendChild(document.createTextNode(item.name));
liElement.setAttribute('data-age',item.age);
liElement.setAttribute('data-id',item.id);
list.appendChild(liElement);//变量本地化 liElement.addEventListener('click',function(){
//alert(this.name);
//alert(this.innerHTML);
alert(this.getAttribute('data-age'));
console.log(this.dataset['age']);
});
}
</script>

三、连接关系

<!--控制翻页 比如看小说的网站有上一页下一页翻页的按钮 如果是左箭头← 右箭头→ 网页阅读设备就可能识别不出来 在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';
});

六、before  after(伪元素)

 <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>

第86天:HTML5应用程序标签和智能表单的更多相关文章

  1. html5应用程序标签

    一.html5应用程序标签 (1)datalist需要数据载体 input list属性指向数据源 <input type="text" list="input_l ...

  2. HTML5 智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  3. HTML5智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  4. H5 基本标签使用 浅析 (含video标签、input表单等)

    1. 音频标签<audio> <audio src = “./music/Alone.mp3” controls autoplay loop = “3” ></audio ...

  5. HTML5 Web Form 新增属性和表单验证

    <form>标签的基本属性 method属性:指定浏览器向服务器传送数据的方式,可选: action属性:设置服务器接受和处理表单数据的URL: enctype属性:制定表单数据在发送到服 ...

  6. 基于Struts2框架实现登录案例 之 使用Struts2标签库简化表单+继承ActionSupport完成输入交验

    一,使用Struts2标签库简化表单 在文章[基于Struts2框架实现登录案例]的基础上,通过使用Struts标签库可以简化登录页面login2.jsp <%@ page language=& ...

  7. 微信小程序 PHP后端form表单提交实例详解

    微信小程序php后端form表单 https://www.cnblogs.com/tdalcn/p/7092716.html 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了 ...

  8. HTML5 01. 布局、语义化标签、智能化表单、表单元素/标签/属性/事件、多媒体、类操作、自定义属性

    1.知识点 lang = “en”   所用语言是英文 文档结构更简洁 IE8一下不支持h5c3 书写更宽松 div没有语义 标签语义化:在合适的地方使用合适的标签 对seo优化友谊 网页经典布局 页 ...

  9. 玩转html5(三)---智能表单(form),使排版更加方便

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

随机推荐

  1. hibernate一对一主键双向关联

    关联是类(类的实例)之间的关系,表示有意义和值得关注的连接. 本系列将介绍Hibernate中主要的几种关联映射 Hibernate一对一主键单向关联Hibernate一对一主键双向关联Hiberna ...

  2. DNS解析过程和域名收敛、域名发散、SPDY应用

    前段时间项目要做域名收敛,糊里糊涂的完成了,好多原理不清晰,现在整理搜集下知识点. 域名收敛的目的是什么?简单来说就是域名解析慢.那为什么解析慢?且听下文慢慢道来. 什么是DNS? DNS( Doma ...

  3. Linux 查杀病毒的常见命令

    1. 查看异常连接的网络端口及其对应的相应的进程 netstat -anlp | grep EST 2.看下相关的进程ID对应的可执行文件的位置 ps 2393 可以看到进程的可执行文件在哪? 3.临 ...

  4. Cocos2d-x 3.2 项目源代码从Mac打包到安卓教程【转自:http://www.2cto.com/kf/201410/342649.html】

    当我们用Xcode写好一个项目的源码之后,如何将它导入到安卓手机中呢?下面我来给大家一步一步讲解: 首先,我们打开终端,cd到Cocos2d-x 3.2文件夹中(注意不是你写的项目文件夹,而是官方项目 ...

  5. 思考探索,如何才能高效访问我的这个DataTable?

    需求 一切都是空的,除了Money,只有需求才是最真的,你懂的. 最近接到个略显棘手的需求,思索再三,想出两种方法,可觉得都不太好,这里与大家讨论一下. 需求如下: 用户需要在现有的某个grid中添加 ...

  6. web app

    *********Modernizr作为开发HTML5必要的js工具************ Modernizr作为开发HTML5必要的js工具 *********字体大小设 rem********* ...

  7. EF Code Frist

    EF:学习资料 http://www.cnblogs.com/libingql/category/366833.html

  8. C++实现四叉树

    什么是四叉树? 四叉树可以有效解决这个问题. 四叉树每一层都把地图划分四块,根据地图尺寸来决定树的层数,层数越大划分越细. 但需要对某一范围的单位筛选时,只需要定位到与范围相交的树区域,再对其区域内的 ...

  9. 看懂类图——UML类图基础

    类图 要学懂设计模式,就需要先看得懂类图,类与类之间的关系是学习设计模式的基础,而在软件工程中,类与类之间的关系是通过UML中的类图来体现. 这篇笔记包含的不会是类图的所有东西,包含的只是各个类之间的 ...

  10. proc文件系统探索 之 根目录下的文件[三]

    包括对proc根目录下meminfo文件的解析. > cat /proc/meminfo   读出的内核信息进行解释,下篇文章会简单对读出该信息的代码进行简单的分析. MemTotal: 507 ...