标签
更语义化标签
header标签
nav标签
section标签
article标签
aside标签
widget标签
footer标签
为什么要有语义化标签
能够便于开发者阅读和写出更优雅的代码，代码如诗
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
更好地搜索引擎优化
切记：HTML的职责是描述一块内容是什么（或其意义）而不是它长的什么样子，它的外观应该由CSS来决定。
应用程序标签
【datalist（数据列表）】
datalist数据列表的呈现需要载体
<input type="text" list="input_list">
<datalist id="datalist">
<option value="选项框1"></option>
<option value="选项框2"></option>
</datalist>
<input type="text" list="input_list">
<datalist id="datalist">
<option value="选项框1"></option>
<option value="选项框2"></option>
</datalist>
【progress（进度条）】
要改变他的样式，需要先将-webkit-appearance设置为none
<style>
.my_progress{
-webkit-appearance:none;
}
.my-progress::-webkit-progress-bar{
//样式
}
</style>
<progress class="my_progress" value="10" max="100"></progress>
【meter（数值显示器）】
很少浏览器支持
<meter min="0" max="100" low="40" hign="90" optimun="100" value="91"></meter>
显示器的最大最小值：max，min
显示器能够到达的最大最小值：hign，low
显示器的测量范围的最佳值：optimum
显示器显示的当前值：value
【menu（右键菜单）】
火狐兼容
【details（明细）】
点开一个内容可以展开面板，在火狐和谷歌兼容
属性
链接关系描述：用来描述指定链接与当前文档的关系，便于机器理解文档结构
常见的链接关系表
alternate 文档的可选版本（例如打印页、翻译页或镜像）
stylesheet 文档的外部样式表
start 集合中的第一个文档
next 集合中的下一个文档
prev 集合中的前一个文档
contents 文档目录
index 文档索引
glossary 文档中所用字词的术语表或解释
copyright 包含版权信息的文档
chapter 文档的章
section 文档的节
subsection 文档的子段
appendix 文档附录
help 帮助文档
bookmark 相关文档
nofollow 用于指定 Google 搜索引擎不要跟踪链接
licence 一般用于文献，表示许可证的含义
tag 标签集合
friend 友情链接
案例
<link rel="prev" href="#">
<link rel="next" href="#">
<a rel="prev" href="#">上一页</a>
<a rel="next" href="#">下一页</a>
<link rel="stylesheet" href="style.css">
<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed">
<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>
<a rel="nofollow" href="http://notmysite.com/sample">wannabe</a>
<a rel="tag" href="http://myblog.com/category/games">games posts</a>
结构数据标记
高级东西，暂时只有谷歌支持
是为了使得容易抓取网页上的数据
<div itemscope itemtype="http://example.com/hello">
<p>我叫
<span itemprop="主人">汪磊</span>。
</p>
<p>我养了一条叫
<span itemprop="狗名">旺财</span>的
<span itemprop="品种">金毛</span>犬。
</p>
</div>
比如抓取出：
主人：汪磊
狗名：旺财
品种：金毛
ARIA
####Accessible Rich Internet Application (无障碍富互联网应用程序)
主要针对于屏幕阅读设备(e.g. NVDA)，更快更好地理解网页
不仅仅是为了盲人用户，更多语义化
1.数据注解，类似lable，只不过label是针对表格
2.可以通过aria知道数据的强相关
aria由一套属性组成，属性分为role以及对应的states和properties，
aria将html元素分为六种role，每种有对应的states和properties，
但有一些是共用的，比如
aria-atomic
aria-busy(state)
aria-describedby
aria-disabled(state)
aria-dropeffect
aria-flowto
aria-haspopup
aria-hidden(state)
aria-invalid(state)
aria-label
aria-labelledby
aria-owns
aria-relevant
举个伪元素例子，
<div role="radio" aria-checked="true" aria-label="单选2" tabindex="0">单选tabindex="0"</div>
这个div模拟了radio的功能，在平时读屏软件是分辨不出来的，
但是加上role及aria-checked状态，
在读屏软件（NVDA）中读出来就是：
单选2 单选按钮 选中 第1页 共1项
详细属性见：ARIA财付通设计中心.html
自定义属性 data
通过DOM存储与DOM对象强相关的数据
1.可以给html里的所有dom对象都可以添加一些data-xxx的属性
2.用来记录与当前DOM强相关的数据
<ul id="users">
<li data-id="1" data-age="18" data-gender="true">张三</li>
<li data-id="2" data-age="18" data-gender="false">李四</li>
<li data-id="3" data-age="18" data-gender="true">王二</li>
</ul>
案例一：
<script>
//键是ID 值是信息
var data = {
01:{
name:"伟哥哥"，
age:"18"
},
02:{
name:"伟哥哥"，
age:"19"
},
03:{
name:"伟哥哥"，
age:"20"
}
//jQuery操作一定要做变量本地化
var list = document.getElementById("list");
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);
//this 是当前点击的元素
//alert(this.getAttribute("data-age"));
console.log(this.dataset["age"]);
})
}
};
</script>
案例二：
<body>
<ul id="users">
<li class="item" data-id="1" data-age="18" data-gender="true">
张三
<pre></pre>
</li>
<li class="item" data-id="2" data-age="18" data-gender="false">
李四
<pre></pre>
</li>
<li class="item" data-id="3" data-age="18" data-gender="true">
王二
<pre></pre>
</li>
</ul>
</body>
<script>
var ul = document.getElementById('users');
for (var i = 0; i < ul.children.length; i++) {
var li = ul.children[i];
// JS 添加data属性
i.setAttribute('data-name', li.innerText);
i.children[0].innerText = '';
or (var key in li.dataset) {
li.children[0].innerText += key + ':' + li.dataset[key] + '
';
}
}
</script>
案例三：
<body>
<div class="tabs">
<ul>
<li data-target=".panel-new">新闻</li>
<li data-target=".panel-bagua">八卦</li>
<li data-target=".panel-sport">体育</li>
</ul>
<div class="panel-new"></div>
<div class="panel-bagua"></div>
<div class="panel-sport"></div>
</div>
<script>
$(function(){
//写这个是为了有一个单独作用于，避免污染
//api是应用程序编程接口
var $lis = $('.tabs>ul>li');
$lis.on("click",function(){
//获取目标对象的选择器
var targetSelector = $(this).data('target');
var $target = $(targetSelector);
});
});
</script>
</body>
智能表单
新的表单类型
<form action="#">
//repuired表示必须的，表示填写框不能为空，会有提示但是提示不能更改
<label>text:<input type="text" required></label></br>
//只能判断中间是否有@
<label>email:<input type="email" value="ice@wedn.net"></label><br>
<label>date:<input type="date" min="2014-10-14" max="2020-10-14" value="2016-08-14"></label><br>
//拖动条，可以获得拉到的地方的数字
<label>range:<input type="range" min="0" max="50" value="10"></label> <br>
<label>search:<input type="search" results="10" placeholder="搜点啥？"></label><br>
<label>tel:<input type="tel" placeholder="(010) 888-888" pattern="^(?d{3})?[-s]d{3}[-s]d{4}.*?$"></label><br>
<label>color:<input type="color" placeholder="e.g. #bbbbbb"></label><br>
<label>number:<input type="number" step="1" min="-5" max="10" value="0"></label><br>
<input type="submit" value="提交">
</form>
虚拟键盘适配
手机键盘会根据不同的type类型弹出不同键盘类型
如打开数字键盘，密码键盘，邮件键盘
<input type="text" name="txt_text" id="txt_text">
<input type="number" name="txt_number" id="txt_number">
<input type="email" name="txt_email" id="txt_email">
<input type="tel" name="txt_tel" id="txt_tel">
<input type="url" name="txt_url" id="txt_url">
网页多媒体
音频
多媒体的dom对象有一些新的方法可以去做播放暂停
单个数据源的方式
默认界面：
<audio src="music.mp3" controls="controls"></audio>
自定义一个：
<audio id="audio" src="music.mp3"></audio>
<button id="btn">播放</button>
<button id="btn_pause">暂停</button>
<script>
var btn = document.getElementById("btn");
var btn_pause = document.getElementById("btn_pause");
var audio = document.getElementById("audio");
btn.addEventListener("click",function(){
//播放音频
audio.play();
});
btn_pause.addEventListener("click",function(){
// 暂停音频
audio.pause();
});
</script>
多个数据源的方式
<audio controls="controls">
<source src="img/music.mp3" type="audio/mpeg"/>
</audio>
视频
单个数据源的方式
<video src="fun.mp4" controls="controls"></video>
多个数据源的方式
<video controls="controls" poster="top.png" autoplay="autoplay">
不同浏览器支持格式不一样,因为版权问题
<source src="fun.ogg" type="video/ogg"></source>
<source src="fun.mp4" type="video/mp4"></source>
当浏览器不兼容video标签，就会将他以div方式解析
用第三方组件代替
<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%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&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>
视频播放器相关属性
属性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮
height pixels 设置视频播放器的高度
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放
muted muted 规定视频的音频输出应该被静音。【即：静音】
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放
如果使用"autoplay"，则忽略该属性
src url 要播放的视频的URL
width pixels 设置视频播放器的宽度
字幕
字幕案例：
<video id="clip" controls>
<source src="fun.mp4" type="video/mp4" />
<track label="English subtitles" kind="subtitles"
srclang="en" src="video-subtitles-en.vtt" default />
</video>
字幕文件内容示例：
WEBVIT FILE
1
00:00:00.000 --> 00:00:12.000 D:vertical A:start
2
00:00:12.000 --> 00:00:15.300
大家好，我是伟哥哥
Canvas
2D
3D (WebGL)
SVG
Scalable Vector Graphics 可缩放矢量图形
svg图片来源：通过AI，文件-->脚本-->将文档存储为SVG
svg可以像标签那样子直接黏贴到页面上，但是我们更希望像图片那样载入进来
可以借助三个标签载入：
<iframe src="demo.svg" frameborder="0"></iframe> //推荐
<object data="demo.svg" type=""></object>
<embed src="demo.svg" type="">
学完ajax之后推荐方式：
学习完异步请求之后，我们可以遍历所有SVG节点，把src引入进来，本身他是一个document对象，可以把它直接append到文档中。
window.addEventListener('load',function(){
var svgs = document.getElementByTagName('svg');
for (var i = 0;i < svgs.length; i++){
//console.log(svg[i].dataset);
var src = $(svgs[i].data('src'));
//向服务器发送请求 得到svg
$.get(src,function(data){
var el = data.documentElement;
$(document.body).append($(el));
});
}
});
同时将svg文件里面的style删除，以便我们进行更改样式
补充：
1、sublime server插件安装
安装完不要stop serber，不用的时候直接要退出sublime，不然sublime会崩溃
2、谷歌浏览器开发者工具右上角展开栏的settings，给show useragent shadow DOM选上钩后可以看到虚拟出来的DOM
3.伪类对象
相当于在weigege后面插入一个
<style>
.content::after{
content: 'zuishuai';
color: #465;
}
</style>
<div class="content">weigege</div>
4.h5新标签
h5新标签因为太新，可能在低级浏览器不能识别，不能识别的标签浏览器会自动识别为div进行加载，可以通过以下方式生成标签
方式一：自己定义
方式二：引入第三方组件html5shiv.js
里面是将所有h5新标签通过方式一的方式进行创建
5.在谷歌控制台输入一次输入下面代码
1.
document.body (回车)
document.body.contentEditable = true; (回车)
然后可以在页面上直接编辑文字
2.
直接在连接处输入
data:text/html, (回车)
可以直接在页面上编辑文字
6.第三方多媒体播放器库：jwplayer
7.专门为移动端使用的组件 zepto？
实现的api与jQuery基本相同
冗余处理兼容的代码都砍掉了
似乎可以代替jQuery
8.！important在老版本是顶不掉行内样式的
9.Markdown
开源项目说明文件都是用这种写的
语法链接：http://wowubuntu.com/markdown/
用普通文本描述富文本的语法
扩展名md，markdown
案例
h标签
HEADER1
HEADER2
HEADER3
段落直接写前面不用加东西
- 无序列表
- 前面有空格
- 有序列表
- 前面有数字都是有序列表，记得加空格
特定的编辑器可以加javascript代表特定的语法，用于编写代码
10.iframe
相当于挖了一个坑把其他页面载入进来