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>《----------------------------------------------------------------------------------------------------------------------》 <!--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-之后的值 var data = { 小米note2:小米note2的超链接, 小米note:小米note的超链接, 小米5:小米5的超链接, 小米5s:小米5s的超链接, } data-links六.-beforeafter(伪元素)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hezi::before {
}
.hezi::after {
}
</style>
</head>
<body>
<div class="hezi">
</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="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) 属性介绍: 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==&ShowId=0&category=85&Cp=0&ev=1&Light=on&THX=off&unCookie=0&frame=0&pvid=1439005764768c9QpaT&uepflag=1&Tid=0&isAutoPlay=true&Version=/v1.0.1080&show_ce=0&winType=interior&Type=Folder&Fid=25977506&Pt=0&Ob=1&plchid=z&openScanCode=1&scanCodeText="限时" 扫码免广告&embedid=AjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8=&vext=bc=&pid=1439005764768c9QpaT&unCookie=0&frame=0&type=1&fob=1&fpo=0&svt=0&emb=AjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8=&dn=网页&hwc=1&mtype=oth&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>
十一.-字幕
<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>
来源: http://www.bubuko.com/infodetail-1869327.html