標籤
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>
登入後複製
結構資料標記
進階東西，暫時只有Google支援
是為了讓容易抓取網頁上的資料
<p itemscope itemtype="http://example.com/hello">
<p>我叫
<span itemprop="主人">汪磊</span>。
</p>
<p>我养了一条叫
<span itemprop="狗名">旺财</span>的
<span itemprop="品种">金毛</span>犬。
</p>
</p>
比如抓取出：
主人：汪磊
狗名：旺财
品种：金毛
登入後複製
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
举个伪元素例子，
<p role="radio" aria-checked="true" aria-label="单选2" tabindex="0">单选tabindex="0"</p>
这个p模拟了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 class="brush:php;toolbar:false">
李四
王二
