html页面设计基础知识说明

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

iframewidth=85%id=iframepageframeborder=0height=900scrolling=nomarginheight=0marginwidth=0name=indexonload=this.height=900/iframescriptfunctionreinitIframe(){variframe=document.getElementById(iframepage);try{varbHeight=iframe.contentWindow.document.body.scrollHeight;vardHeight=iframe.contentWindow.document.documentElement.scrollHeight;varheight=Math.max(bHeight,diframe.height=height;}catch(ex){}}window.setInterval(reinitIframe(),2000);/script1.Div的边框添加发光亮圈。.bxDiv{border:2pxsolid#ce6731;/*优雅降级*/border-color:rgba(206,103,49,.75);/*IE8-不识别*/box-shadow:0018pxrgba(206,103,49,1);/*统一标识识别码*/-ms-box-shadow:0018pxrgba(206,103,49,1);/*IE9+内核识别码*/-moz-box-shadow:0018pxrgba(206,103,49,1);/*火狐内核识别码*/-webkit-box-shadow:0018pxrgba(206,103,49,1);/*谷歌内核识别码*/}2.定义类的三种方法网址3.的讲解网址4.varie=!-[1,];//判断是不是IE浏览器5.htmlmanifest=”cache.manifest”//定义离线应用文件的文件6.linkrel=”icon”href=”demo_icon.gif”type=”image/gif”sizes=”16*16”/定义淘宝标题前那个小图标。linkhref=a.jpgrel=icon/这样就可以谷歌火狐适用,IE不行7.basehref=””target=”_blank”新窗口打开超链接且超链接路径是页面自己写的路径。base放在head中8.metahttp-equiv=Pragmacontent=no-cache禁止浏览器从本地计算机的缓存中访问页面内容。9.scriptdeferasync/script链接文件的时候defer是在加载本身之后等页面加载完毕后再执行,延迟执行async是异步执行,执行本身的同时加载页面10.a标签的属性media=”handheld”对手持设备进行优化media=”tv”对电视设备进行优化hreflang=”zh”网址使用语言为中文ref=”external”外部链接11.ol有序列表属性start=”50”reversed起始值50倒序12.全局属性:data-yourvalue:自定义数据属性例子:data-type=”comment”表示新增属性type=”comment”hidden隐藏代替display:hiddenSpellcheck对我输入的语法核对正误比如错误的单词下面会有红色波浪线tabindex可以使键盘点击TAB键按照我们规定的顺序切换contenteditable为true表示可编辑designMode全局可编辑window.document.designMode='on';13.Deferred对象解决回调问题,vardtd=$.Deferred//创建dtd.resolve()//成功dtd.then()//执行回调14.七夕言情项目涉及的知识点:1.animation-play-state:paused//利用css使得动画暂停2.@keyframesperson-slow{0%{},25%{},50%{},75%{},100%{}}3.background-position:15px20px;(指将图片向右移15px,向下移20px;)4.animation-name:person-slow;animation-duration:950ms;animation-iteration-count:infinite;animation-timing-function:step(1,start);15.页面滚动三句代码:element.css({'transition-timing-function':'linear','transition-duration':'5000ms','transform':'translate3d(-'+(width*2)+'px,0px,0px)'//设置页面X轴移动});16.//动画结束事件varanimationEnd=(function(){varexplorer=navigator.userAgent;if(~explorer.indexOf('WebKit')){return'webkitAnimationEnd';}return'animationend';})();使用:varlogo={elem:$('.logo'),run:function(){this.elem.addClass('logolightSpeedIn').on(animationEnd,function(){$(this).addClass('logoshake').off();});}};17.可以进行省略的标签:1.不允许写的结束符标签:area/basebr/col/command/embed/hr/img/input/keygen/link/meta/param/source/track/wbr2.可以省略结束符的标签:li/dt/dd/p/rt/optgroup/option/colgroup/thread/tbody/tr/td/th3.可以完全省略的标签:html/head/body/colgroup/tbody18.新增的结构标签:section表示页面的一个内容区块article表示文章区块aside表示辅助信息header表示头部hgroup表示标题信息footer表示底部nav表示导航figure表示独立单元video视频audio音频embed各种媒体emailurlnumberrangeDatePickers(datemonthweektimedatetime)searchcolormark强调progress进度条time时间ruby注释rtwbr软换行canvas画布command命令detailsdatalist模糊查询keygenoutput计算sourcemenu菜单19.去除IE浏览器下a标签套img的默认边框,是去掉img的border,即:border:none;!--[ifltIE9]script(function(){if(!/*@cc_on!@*/0)return;vare=abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video.split(',');vari=e.length;while(i--){document.createElement(e[i])}})()/script![endif]--用于兼容低于IE9不支持html5标签的元素。样式表:article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}初始化标签元素。或者采用插件html5.js!--[ifltIE9]scriptsrc=![endif]--20.IE浏览器下:a.style.styleFloat非IE浏览器:a.style.float21.想要系统时间newDate每秒改变一次且不用刷新页面则设置定时器初始化调用一次避免第一次刷新1秒后才执行。22.IE7*+width=225px;IE8width=225px\9;23.Onload加载完以后执行。。。Window.onload、img.onload、body.onload24.写js时,相对路径、颜色值、innerHTML不要拿来做判断,会出现兼容性问题,报错。Type不要改因为IE6,IE7,IE8不兼容,会报错。25.做前端效果,若遇到不兼容的问题,竟可能避开它,用隐藏显示代替本不可以实现的东西。26.A标签点击无效的方法2:ahref=javascript:;点击无效/a27.Js中.后面的值无法修改。但是oDiv.style[oAttr.Value]=oVal.value;[]中的值可以修改,因为为字符串。Js中允许“.”换成“[]”。a.onClick等价于a[“onClick”]。28.获取页面高度兼容IE,火狐,谷歌varhtmlHeight=(document.documentElement.scrollHeightdocument.documentElement.clientHeight)?document.documentElement.scrollHeight:document.documentElement.clientHeight;29.Height:不包括border,但是包括滚动条不可用高度。火狐IE一致clientHeight:不包括border,也不包括滚动条不可用高度。火狐IE一致scrollHeight:火狐:滚动条可滚动的部分还要加上boder的高度还要加上横向滚动条不可用的高度。IE:scrollHeight确是指这个对象它所包含的对象的高度加上boder的高度和marging,如果它里面没有包含对象或者这个对象的高度值未设置,那么它的值将为15。offsetHeight:包括border。火狐IE一致综上所述,clientHeight与height的区别是如果有滚动条时应减去滚动条的17px不可用部分,offsetHeight与Height的区别是增加了boder的高度,ScrollHeihgt与Height的区别是火狐下与offsetHeight一致,IE下如上所述。30.相对大小的文字如何设置:body{font-size:100%;font-size:16px;font-size:1em;}其他文字大小设置为em单位的。父亲:4.3125em//69/16儿子:.550724638em//38/69目标元素尺寸/上下文元素尺寸=百分比尺寸。31.阻止移动浏览器自动调整页面大小如苹果手机。Ios和android浏览器都基于WebKit核心。32.媒体查询:链接不同样式表。linkrel=stylesheettype=text/cssmedia=screenhref=screen-styles.css是显示屏的话采用该样式表。linkrel=

1 / 26
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功