h5笔记

标签 更语义化标签 header标签 nav标签 section标签 article标签 aside标签 widget标签 footer标签 为什么要有语义化标签 能够便于开发者阅读和写出更优雅的代码，代码如诗 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容 更好地搜索引擎优化 切记：HTML的职责是描述一块内容是什么（或其意义）而不是它长的什么样子，它的外观应该由CSS来决定。 应用程序标签 【datalist（数据列表）】

datalist数据列表的呈现需要载体

<input type="text" list="input_list"> <datalist> <option value="选项框1"></option> <option value="选项框2"></option> </datalist> <input type="text" list="input_list"> <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 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 href="#"> <link href="#"> <a href="#">上一页</a> <a href="#">下一页</a> <link href="style.css"> <link type="application/rss+xml" href="http://myblog.com/feed"> <link href="favicon.ico"> <link href="http://myblog.com/xmlrpc.php"> <link href="http://myblog.com/main.php"> <a href="http://myblog.com/archives">old posts</a> <a href="http://notmysite.com">tutorial</a> <a href="http://www.apache.org/licenses/LICENSE-2.0">license</a> <a href="http://notmysite.com/sample">wannabe</a> <a 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> <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>