02 2020 档案
摘要：浏览器兼容性：IE9以上以及其它现代浏览器均支持 <h2>音频播放</h2> <audio src="music.mp3" controls> 您的浏览器不支持audio元素 </audio> <h2>视频播放</h2> <video src="movie.mp4" controls> 您的浏览器不
阅读全文
摘要：延迟脚本： 诸如以下的html文档： <!Doctype html> <html> <head> <title>延迟脚本</title> <script src="defer.js"></script> </head> <body> <div id="target"></div> </body> <
阅读全文
摘要：html5头部七元素：script、noscript、style、title、link、base、meta。 base指定如下三个属性： id：唯一标识符。 href：基准路径。 target：超链接窗口打开方式。该属性四个值分别是：_blank、_top、_parent、_self。 <!Doct
阅读全文
摘要：html5头部七元素： script、noscript、style、title、link、meta、base link元素用于链接css文件或者图标等外部文件 link元素有如下六个属性： rel：设置文档与链接资源的关系。 hreflang：链接资源的语言。 href：链接资源的URL。 medi
阅读全文
摘要：<meta.../>用于定义页面元信息，它是由name和content这样的名值对组成。 meta内部可以指定五个属性：id、http-equiv、name、content、charset。 主要认识后面四个： http-equiv（超文本协议标题信息）：指定元信息的名称，与name不同的是该名称是
阅读全文
摘要：@media可以正对不同的屏幕尺寸设置不同的样式 @media mediatype and|not|only (media feature) { CSS-Code; } 针对不同的媒体使用不同的stylesheet： <link rel="stylesheet" media="mediatype a
阅读全文
摘要：click：点击鼠标左键或者按下回车键触发。onclick事件处理程序也同样可以通过这两个方式执行。 dblclick：DOM3级事件。双击鼠标左键。 mousedown：单击鼠标左键。 mouseup：松开单击着的鼠标左键。 （click包括按下与松开鼠标左键两个步骤，mousedown仅仅是按下
阅读全文
摘要：1.mousewheel事件 当鼠标滚轮滚动时在页面上触发mousewheel事件，该事件会一直冒泡到window对象上。当鼠标向前滚动时，event.wheelDelta的值为正数，向后滚动时为负数。（谷歌是正负150，Edge、opera是正负120） 2.DOMMouseScroll事件 这是
阅读全文
摘要：ul元素右浮动，li元素右浮动会反向排列。 li元素会按从上到下依次浮动。如果需要li元素的内容从左向右阅读，那么li元素的浮动只能是float:left； <ul id="nav"> <li>a</li> <li>b</li> <li>c</li> </ul> #nav{ float: left;
阅读全文
摘要：对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天，抗锯齿渲染使用也越来越多。 font-smoothing是非标准的CSS定义。它被列入标准规范的草案中，后由于某些原因从web标准中被移除了。 但是，我们可以用以下两种定义进行抗锯齿渲染 -webkit-font-smo
阅读全文
摘要：因为欧洲人对于英文字母的gqp等带有小尾巴的字母的写入需求，会有一条baseline用于字母主体写入，比如abcdefghijk等字母，仔细观察会发现它们之中有一条隐藏的线将字母的主体水平对齐，gh这类字母对比a虽然一个向上超出，一个向下超出，但它们的字母主体是水平对齐的，在a字母的下方就是这条水平
阅读全文
摘要：blur：元素失去焦点时触发。这个时间不冒泡，所有浏览器均支持。 focus：元素获得焦点时触发，这个事件不会冒泡，所有浏览器均支持。 focusin：元素获得焦点时触发，这个事件与HTML事件的focus等价。 focusout：元素失去焦点时触发，与HTML事件的blur等价。
阅读全文
摘要：浏览器支持情况：IE9在内的所有主流浏览器都支持DOM2事件，IE9同样支持DOM3级事件。 load：1.页面完全加载在window上触发。2.图片完全加载后在<img>上触发。3.嵌入内容加载完毕后在<object>上触发。4.框架加载完毕后在框架集上触发 window.onload=()=>{
阅读全文
摘要：var eventUntil={ addHandler:(element,type,handler)=>{ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.att
阅读全文
摘要：总结： 1.IE浏览器中有三种事件处理程序：HTML事件处理程序，DOM0级事件处理程序，IE事件处理程序。 2.IE浏览器中的HTML事件处理程序调用事件对象：直接调用event变量： onclick=“alert(event.type);” 3.IE浏览器中的DOM0级事件处理程序通过调用win
阅读全文
摘要：触发DOM上的交互事件会生成一个event对象，用以保存事件的信息。比如鼠标交互的事件会保存鼠标的位置，键盘交互的事件会保存键的值。 1.DOM0级和DOM2级事件处理程序在进行事件处理时都会有一个event对象传入。例如event.type会保存事件类型名称。 2.HTML事件处理程序中的变量ev
阅读全文
摘要：总结： 1.HTML事件处理程序不允许使用未转义字符，event变量访问事件对象，this指向目标元素本身，建议使用try/catch语句避免浏览器报错，但并不推荐使用HTML事件处理程序。 2.DOM0级事件处理程序中this指向目标元素本身，赋值null删除事件处理程序。 3.DOM2级事件处理
阅读全文