h5笔记

标签

更语义化标签

header标签
nav标签
section标签
article标签
aside标签
widget标签
footer标签

为什么要有语义化标签

能够便于开发者阅读和写出更优雅的代码，代码如诗
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
更好地搜索引擎优化

切记：HTML的职责是描述一块内容是什么（或其意义）而不是它长的什么样子，它的外观应该由CSS来决定。

应用程序标签

【datalist（数据列表）】

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









【progress（进度条）】

要改变他的样式，需要先将-webkit-appearance设置为none


【meter（数值显示器）】

很少浏览器支持


显示器的最大最小值：max，min
显示器能够到达的最大最小值：hign，low
显示器的测量范围的最佳值：optimum
显示器显示的当前值：value

火狐兼容

【details（明细）】

点开一个内容可以展开面板，在火狐和谷歌兼容

属性

链接关系描述：用来描述指定链接与当前文档的关系，便于机器理解文档结构

常见的链接关系表

alternate 文档的可选版本（例如打印页、翻译页或镜像）
stylesheet 文档的外部样式表
start 集合中的第一个文档
next 集合中的下一个文档
prev 集合中的前一个文档
contents 文档目录
index 文档索引
glossary 文档中所用字词的术语表或解释
copyright 包含版权信息的文档
chapter 文档的章
section 文档的节
subsection 文档的子段
appendix 文档附录
help 帮助文档
bookmark 相关文档
nofollow 用于指定 Google 搜索引擎不要跟踪链接
licence 一般用于文献，表示许可证的含义
tag 标签集合
friend 友情链接

案例



上一页
下一页





old posts
tutorial
license
wannabe
games posts

结构数据标记

高级东西，暂时只有谷歌支持
是为了使得容易抓取网页上的数据


我叫
汪磊。


我养了一条叫
旺财的
金毛犬。


比如抓取出：
主人：汪磊
狗名：旺财
品种：金毛

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

举个伪元素例子，

单选tabindex="0"

这个div模拟了radio的功能，在平时读屏软件是分辨不出来的，
但是加上role及aria-checked状态，
在读屏软件（NVDA）中读出来就是：

单选2 单选按钮 选中 第1页 共1项

详细属性见：ARIA财付通设计中心.html

自定义属性 data

通过DOM存储与DOM对象强相关的数据

1.可以给html里的所有dom对象都可以添加一些data-xxx的属性
2.用来记录与当前DOM强相关的数据


  • 张三

  • 李四

  • 王二

案例一：



    案例二：




    • 张三

      


      • 


    • 
李四
      


      


      • 


    • 
王二
      


      


      • 


    

    

    

    案例三：
    


    


    


      

    • 新闻

      • 

    • 八卦

      • 

    • 体育

      • 


    


    


    


    


    

    

    

    智能表单
    

    新的表单类型
    


    
//repuired表示必须的，表示填写框不能为空，会有提示但是提示不能更改
    

    

    //只能判断中间是否有@
    


    

    

    //拖动条，可以获得拉到的地方的数字
    
 

    


    


    


    


    

    

    

    虚拟键盘适配
    

    手机键盘会根据不同的type类型弹出不同键盘类型
    
如打开数字键盘，密码键盘，邮件键盘
    

    

    

    

    

    

    网页多媒体
    

    音频
    

    多媒体的dom对象有一些新的方法可以去做播放暂停
    

    单个数据源的方式
    

    默认界面：
    

    

    自定义一个：
    

    

    

    

    

    多个数据源的方式
    

    

    视频
    

    单个数据源的方式
    

    

    多个数据源的方式
    

    

    视频播放器相关属性
    

    属性		值			描述
    
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放
    
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
    
height		pixels		设置视频播放器的高度
    
loop		loop		如果出现该属性，则当媒介文件完成播放后再次开始播放
    
muted		muted		规定视频的音频输出应该被静音。【即：静音】
    
poster		URL			规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
    
preload		preload		如果出现该属性，则视频在页面加载时进行加载，并预备播放
    
如果使用"autoplay"，则忽略该属性
    
src 		url			要播放的视频的URL
    
width		pixels		设置视频播放器的宽度
    

    字幕
    

    字幕案例：
    

    

    字幕文件内容示例：
    
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可以像标签那样子直接黏贴到页面上，但是我们更希望像图片那样载入进来
    

    可以借助三个标签载入：
    

    	//推荐
    

    

    

    学完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后面插入一个zuishuai，并且可以改变他的样式
    


    

    weigege

    
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
    

    段落直接写前面不用加东西
    

      

    • 无序列表
      • 

    • 前面有空格
      • 

    

      

    1. 有序列表
      2. 

    2. 前面有数字都是有序列表，记得加空格
      3. 

    

    

    特定的编辑器可以加javascript代表特定的语法，用于编写代码
    

    10.iframe
    
相当于挖了一个坑把其他页面载入进来
    



    

    

            
    
            
    posted @ 
2017-04-07 19:46 
伟丶那个哥 
阅读(1032) 
评论(0) 
 
收藏 
举报