美文网首页
2018.10.15 LOG:semantic preload

2018.10.15 LOG:semantic preload

作者: 灰喵九命 | 来源:发表于2018-10-16 11:58 被阅读0次

    昨天晚上给老婆的笔记本装系统,正兴奋着呢(不知道为什么每次装系统都很兴奋),妹的断网停机了,不明所以,发现居然是欠费了,是老婆忘了缴费。。。。,手机也停了,网也断了,一时间不知道怎么办了。拨了10000号想问问,居然提示停机后可以按1暂时恢复24小时,得救了。


    昨天上午,看了一些html/css的内容,说一下心得体会呗。

    video.js是一个H5的播放器库,兼容所有浏览器,包括IE6-8,可以设置播放flash,实现视频的预加载,展示图片,自动播放,自定义屏幕播放按钮,控制播放/暂停/快进/后退,控制视频播放权限,控制视频播放时间,播放器语言等,可以通过CDN加入,也可以下载,还可以npm和bower安装,官网有docs参照。其实呢,很简单,定义了video标签的样式,自定义了很多标签和事件来控制video的播放,我是通过廖雪峰博客上的视频发现这个插件的。

    preload/prefetch,这两兄弟,昨天又看了一下,因为最近用过preload,感觉比prefetch提高了不止一个档次,但兼容性不好,IE几乎就完全抛弃了这个兄弟,firefox兼容也不太好。唉,慢慢等发展吧,需要提前加载后面页面的资源,还是先用着prefetch。

    semantic html,语义化,我这种不拘小节的人,以前很少触及到语义化的范围。前两天在知乎看到了顾轶灵的回答,又看了他的网站和一些介绍语义化的精华文章,感觉这确实是以后的趋势。记得06,7年,那时候搭建页面全是用table,玩转table是当时还没有被叫做‘前端’的程序员的标志,各种拆分,拼凑。th,thead,tbody,tfoot,caption..这些根本是不会去写的。后面就开始用'div+css',前端这个职业也开始诞生,再后面就是满篇的div,密密麻麻,看着渗人,但也不愿放弃,因为好用。H5出来以后,尽管有一些新的区域标签和语义标签,但一直没怎么用,因为div,p,span等还是能解决大部分问题。

    为了能被更多的设备和应用解析,优化seo,规范团队代码,推动语义化的发展,为了盲人也能顺畅的用你的网站,请语义化吧:

    • div,span永远都是最后的选择
    • lang,charset不能漏掉
    • link,a元素的rel
    • 即可以使用div或者P时,尽量使用p
    • table里的构造必须补齐caption,head,body,foot,表头要用th
    • header是html,articl的页眉,不影响文档提纲生成
    • section一般表示和上下文有关联的内容,希望这个内容出现在文档的提纲中
    • article一般表示和上下文无关联的内容,可独立的,比如文章,插件等
    • em表示强调,strong表示更强调
    • blockquote也可以用来表示引用段落
    • figure用来表示图片等
    • input必须搭配label
    • 合理使用p,hr,ol/ul/li,dl/dt/dd,main,time,mark,pre,code,q,cite,address,em,strong,wbr
    • 对于class和id,根据它是什么而不是它看上去是什么样子来命名
    • 了解microformats,microdata

    最后临吃饭了,看到一个好东西,awsm.css,无class/id样式化语义标签,适用快速搭建语义化标签的简单的页面。


    中午看了会书,《网络是怎样连接的》,说的是生动的讲述网络各种协议过程,看了100多页了,其实很烧脑,小日本的书就喜欢讲很多细节,绕晕你就OK。建议还是看图解系列。。。


    下午教育了熊孩子,看了一会git的GUI工具,看来看去还是觉得bash好用,就是对比和解决冲突的时候可能会用一下.如果有熟悉的IDE,还是尽量在IDE里使用GUI,其他什么sourcetree没实际使用价值.

    晚上给老电脑重装系统,04年的华硕笔记本电脑,4G内存,无SSD。装win7pro。系统用U盘很快装好,考虑了一下,还是不要装重量级的东西,于是选择了wps,ccleaner,avg,抛弃了电脑管家之类的玩意儿,开发类的就装了.net4.5/node/python,java都没敢装,设计类的装了墨刀,pxcook,ps也没敢装,然后就断网了,妹的。。。。

    相关文章

      网友评论

          本文标题:2018.10.15 LOG:semantic preload

          本文链接:https://www.haomeiwen.com/subject/mrthzftx.html