html5

    xiaoxiao2021-03-25  199

    HTML5新增元素和废除元素 取代的:           取代HTML4的div的有:                          表示页面中一个内容模块:section                          表示页面中的一块与上下文不相关的块,例如博客中的一篇文章:article                          表示页面中一个内容块或整个页面的标题:header                          对整个页面或页面中一个内容块的标题进行整和:hgroup                          表示整个页面或页面中的一个内容块的脚注:footer                          页面中导航链接的部分:nav 新增的:            新增的元素有:                                                    表示字符解释或发音:rt                             定义视频,如电影片段:video                             定义声音:audio                             在视觉上呈现哪些需要突出显示的文字,例如高亮显示搜索关键字:mark                             表示运行中的进程,可用来显示JS中耗费时间的函数过程:progress                             表示度量衡,必须定义度量的范围:meter                             有一个或多个资源和一个提供该信息的rt元素组成,浏览器不支持ruby时显示其中的rp内容:ruby                             表示日期或时间:time                             软换行:wbr                          表示图形:canvas                          表示可选数据的列表。与input配合使用,可以制作出输入值的下拉列表:datalist                          生成密钥:keygen                          表示可选数据的列表:datagrid                          作为媒介元素:source                                菜单列表:menu                                    定义不同类型的输出:output                          命令按钮,例如单选按钮或复选按钮等:command                  被废除的元素:                                                basefont、big、center、font、s、strike、tt、u这些元素 。被废除原因:他们的功能都是纯粹为画面展示服务,HTML5提倡把画面展示型功能放到CSS统一编辑                             frameset、frame与noframes元素。被废除的原因:frame框架对网页可用性存在负面影响。只支持iframe框架                             applet、bgsound、blink、marquee元素。被废除原因:只有部分浏览器支持这些元素                                  applet可由embed或object元素代替,bgsound元素可由audio元素进行替代,marquee可由JS编程的方式替代                           小结:闲暇时可以了解一下,这对以后开发挺有用的 基本HTML标签                 meta标签                      设置页面关键字,该字可以协助搜索引擎找到该网页                <meta name="keywords"  content="具体关键字"/>                具体描述,便于搜索引擎的查找                <meta name="Description" content="具体描述"/>                定义所使用的编辑工具                 <meta name="Generator"  content="Dreamweaver"/>                定义作者信息,用来说明作者的信息                <meta name="Author"  content="Jack"/>                设置网页编码格式                <meta http_equiv="Content-Type"  content="text/html;charset="编码格式"/>                常用的编码格式有:ASCII字符集、GB2312字符集、Unicode等                设置网页跳转效果                <meta http-equiv="Refresh"  content="n; url=http://www.baidu.com"/>                n的单位是秒                链接效果                           <body  link="#FFFFFF"  alink="#0066FF"  vlink="#336600"/>                     alink为正在访问时链接字的颜色,vlink为访问后链接字的颜色                页面边距:margin                一般默认情况下页面是具有10px的边距效果的,页面的顶部都会有一小部分空白。解决方法:在body添加topmargin=“0”或margin=“0”                复制具有样式的文字并贴入Dreamweaver中样式不会消失,而且会自动的为这些字体自动加上标签和属性                对齐属性:align                    基本格式:<align="对齐方式">                左对齐:left                 居中对齐:center                右对齐:right                <h1>标题大约是标准文字高度的2-3倍,而<h6>则比标准字还要略小                font标签                               字体样式属性:face               格式:<font face="字体样式">......</font>               //在浏览器中尽量少用。原因:若浏览器中不存在该字体,则自动转化为普通字体                               粗体标签:b、strong                               斜体标签:i、em、cite                                     粗体,斜体标签必须 放置在<body>......</body>标签对的内部                              上标:sup  相当于输入平方或立方时候数字上方的小数字(允许嵌套使用,故可以写“上标的上标”)                              下标:sub  相当于输入化学式时候Al2O2,英文下面的那些小数字(允许嵌套使用,故可以写“下标的下标”)                               大字号标签:big     比普通文字大一级  (可以嵌套使用)                               小字号标签:small     比普通文字小一级     (可以嵌套使用)                               下划线标签:u                    图像                                                    源文件:src                                            提示文字:title                               宽度和高度:width,height                    边框:border                               垂直间距:vspace                                   水平间距:hspace                               排列,对齐方式:align                            设定文件的播放:dynsrc                               设定文件循环播放的次数:loop               设定文件循环播放延迟:loopdelay                               设定文件播放的方式:start                      设定低分辨率图片:lowsrc                               映像地图:usemap                              src:图像的地址可以是本地的,比如html/image/001.jpg,也可以是网络中的图像,比如http://html.com.cn/1/001.jpg                               width,height:无论用户如何设置图片的宽度和高度,都无法更改图像的体积                               border:边框的颜色不可设置,没有链接时为黑色;有链接时和链接文字一致,默认为深蓝色。单位是像素,越大则边框越宽                                      align:                                         绝对对齐:middle(居中)、left(居左 )、right(居右)                                        相对对齐:图片底部和当前行文字底部对齐 bottom、图片顶端和文字顶端对齐(top)、中线对齐(center)                            图片加超链接后,会自动出现外边框。解决方法:为图片标签添加border属性并为其制定属性值为0                                                图像热区链接:usemap                                                                                  作用:将图片分为多个部分,每个部分都有相对应的链接。比如有些地图点不同地方会有不同的效果                                                   基本格式:     <img  src="图像地址"  usemap="映射图像名称">                                                                                定义热区图像以及热区的链接:                                                                                                     <map  name="映射图像名称">                                                                                                     <area  shape1="热区图形"  coords="热区坐标"  href=“链接地址”                                                                                                                           <area  shape2="热区图片"  coords="热区坐标"  href=“链接地址”                                                                                                     </map>                          列表:                                               有序列表:ol和li    可根据属性type设置属性值(1、a、A、i、I)来设置序列样式(1,2,3.....a,b,c......i,ii,iii....I,II,III)                                                                  type属性仅适合有序列表和无序列表                                                                  可通过定义start属性定义起始数,也可定义列表宽度属性,可通过value属性对某列编号重新进行定义                                                                  反转序号值:reversed      降序显示序号                                                                                        无序列表:ul和li     永和可以使用小图案代替无序列表前的小黑点,通过CSS定义li属性,在CSS中定义bg-image                                    dl定义列表:dl和dt(建议不要分开使用)                                               列表可以嵌套,用来反映层次较多的内容                        表格:4和基本元素,table标签,tr标签,th标签,td标签                                    表格的边框使用border属性进行定义(不会影响表格内单元格之间的尺寸。建议不要设置边框宽度超过5px,会影响表格的整体美观)                               表格标题:caption                               figure和figcaption也可以为表格添加标题声明                                         当table是除了figcaption之外唯一的内容,那最好使用figcaption元素                                 th创建头信息单元格,td创建数据单元格                                                                        th可以定义scope和headers属性帮助非可视化的浏览器和搜索引擎处理表头信息                                    表格中可以添加背景图像                                    合并单元格:通过rowspan和colspan进行设置                                    小结:多了解html5的标签,以后开发会更加的得心应手 超链接                 html用来定义链接:link和a  link定义当前文档和另一个资源之间的联系(定义在head里)                                                                  a定义了当前文档中某个区域和另一个资源的联系(定义在body)                     链接的类型:                               新建一个收件人地址已经填好的空白电子邮件:电子邮件链接                                                    使用户能够在对象上附加行为,或者创建执行JS代码的链接:空链接和脚本链接                               链接到其他文档或文件的链接                               锚点链接,跳转至文档内特定位置                     定义链接打开方式:target属性                                                         以新窗口打开一个文档:_blank                               以该链接的框架的父框架打开一个文档,若没有父框架,则文档载入整个浏览器窗口:_parent                               以该链接所处的框架打开一个文档,该目标是默认的:_self                               整个浏览器窗口打开一个文档,且删除所有框架:_top                    链接路径:                     绝对路径:带域名的文件的完整路径                     相对路径:对同一站点的链接来说,使用相对路径是一个很好的方法,可以避免绝对路径的缺点                     同级目录下互相链接     <a href="3.html"></a>                     链接到上级目录中的文件<a href="../1.html"></a>                     链接到下级目录的文件<a href="first/2.html"></a>                     插入图像时,使用图像的绝对路径,图像在远程服务器而不再本地硬盘中,无法再文档窗口中查看该图像。此时,只能在浏览器中预览该文档                     所以对图像尽量使用相对路径            内部链接                                           可以将浏览者快速带到指定位置。当页面过长时,可以使用锚点链接,通过点击锚点,不仅能指向文档,还能指向段落                      建立锚点:可以在网页任一地方新增且可以增无数个,但不能同名                             语法:<a name = "锚点名称"></a>                     使用<a href="#锚点名称">.....</a>链接到锚点                     链接到其他页面中的锚点:                               语法:<a href = "链接的文件地址#锚点名称">....</a>                      锚点链接一般用于庞大且烦琐的网站页面                      外部链接:链接到其他网站                             语法:<a href="http://....">.....</a>                     链接到FTP:                              语法:<a href="ftp://ftp地址">....</a>                     链接到Telnet:远程登录服务的标准协议,常用来登录一些BBS网站和Telnet站点                               语法:<a href="telnet://地址">....</a>                     下载链接:     <a href="文件地址">....</a>                               语法:<a href ="ftp://ftp地址">....</a>                     并不是每个文件都可以下载,如果是txt或jpg这种计算器自带软件的文件格式,点击链接不会弹出下载框而是直接打开                     若想下载这些文件,可以将其进行压缩或其他操作                                                        小结: 不常用,了解就行 canvas                                               html5之前,想在网页中绘制图形就必须使用Flash等插件                     html5新增的canvas可以在不需要任何插件的前提下绘制图形                                           使用方法:                               var canvas = document.getElementById('myCanvas') ;                            为了在JS能使用canvas,所以必须在canvas标签中追加id                       绘制矩形:                                                                                         绘制矩形的三个函数分别是fillRect、strokeRect和clearRect                               绘制矩形填充:fillRect                                      基本语法:                                                        var ctx = canvas.getContext("2d");                                                              ctx.fillStyle = "rgba(0,0,200,0.5)";                                                              ctx.fillRect = (30,30,55,50);                               绘制矩形轮廓:strokeRect                                      基本语法:                                                          var ctx = canvas.getContext("2d");                                                              ctx.fillStyle = "rgba(0,0,200,0.5)";                                                              ctx.strokeRect = (30,30,55,50);                               清楚矩形中的图形:clearRect                                      基本语法:                                                          var ctx = canvas.getContext("2d");                                                              ctx.fillStyle = "rgba(0,0,200,0.5)";                                                              ctx.claearRect = (30,30,55,50);                                                                                         x和y指定矩形左上角(相对于原点)的位置,width和height是矩形的宽和高                               必须将上下文种类制定为2d(二维图片),现阶段只能绘制二维图片                                                   使用路径:  路径是canvas绘制图形的基础,通过多次重复路径可以绘制出各种不同的复杂图形                                               开始路径的创建:beginPath()                                    cxt.beginPath();                                    将路径关闭: closePath(                                    cxt.closePath();                                                                   beginPath方法不使用参数,通过调用即可开始创建路径。每次开始创建都需要调用beginPath函数                               绘制直线:moveTo和lineTo                               moveTo:  使用moveTo方法可以将光标移动到指定的坐标点,然后从这个坐标为起点绘制直线                                     语法:  cxt.moveTo(10,10);                                          lineTo:在move方法制定的起点与参数中指定的直线终点之间绘制一条直线                                     语法:  cxt.lineTo(150,250);                                     JS中条件语句有:if语句、if....else语句、if.....else if.....else语句和switch语句共4种                               绘制圆弧:arc()                                                   从指定的开始角度直至结束角度为止,按指定的方向进行圆弧的绘制                                                    基本语法:                                                                  cxt.arc(x,y,radius,startAngle,endAngle,anticlockwise);                                                                  anticlockwise为布尔值参数,为true时,按逆时针旋转,为false时,按顺时针旋转。角度的单位为弧度                               绘制心形:bezierCurveTo()                                                             使用该方法可以绘制三元抛物线,可将当前坐标到指定坐标中间的贝塞尔曲线加到路径中                                                             语法:                                                                       context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)                               渐变图形:                                              渐变指从一种颜色过渡到另一种颜色,渐变分为线性渐变和径向渐变两种                                    使用线性渐变,需要使用LinearGradient对象,然后使用createLinearGradient()方法创建                                    方法定义如下:                                                             CanvasGradient=context.createLinearGradient(xStart,yStart,xEnd,yEnd)                                                             CanvasGradient.addColorstop(offset,color)                                                             x,yStart为渐变起点的坐标,x,yEnd为结束点的坐标                                    径向渐变:使用createLinearGradient()方法进行创建,使用addColorStop()方法追加渐变色                                     方法定义如下:                                                             CanvasGradient=context.createLinearGradient(xStart,yStart,radiusStar,xEnd,yEnd,radiuseEnd)                                                             CanvasGradien.addColorstop(offset,color)                                                               offset为所设定的颜色离开渐变起始点的偏移量,参数范围为0-1之间的值                                                             x,yStart为渐变起始圆的坐标,radiusStar为开始圆的半径                                                             x,yEnd为渐变结束圆的坐标,radiusEnd为结束圆的半径                                     在canvas绘制图像                                              语法:                                                   var  image = new Image();                                                   image.src = "图像文件路径"                                                   image.οnlοad=function()                                    绘制图像需要使用drawImage()方法,一共有三种方式。分别是直接绘制、尺寸修改和图像截取                                                                   直接绘制:三个参数,image可以是img、video或JS对象,x和y为绘制图像在画布中的起始坐标                                              语法:context.drawImage(image,x,y)                                              尺寸修改:w和h为绘制时图像的宽度和高度                                              语法:context.drawImage(image,x,y,w,h)                                              图像截取:将画布中已经绘制好的图像的全部或者局部区域复制到画布的另一个位置                                              语法:context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)                                              s是slice的意思,即切割的意思,d是draw的意思,即绘制                                    图像平铺:drawImage和createPattern都可以实现平铺效果                                    context.createPattern(image,type)                                         type有四种字符串可选:                                                   不平铺:no-repeat                                                   横方向:repeat-x                                                   纵方向:repeat-y                                                   全方位:repeat                                         drawImage方法和createPattern方法的区别:                                              drawImage需要使用几个变量以及循环处理,较复杂                                              createPattern只需要使用几个参数即可达到平铺效果,较简单                                                                        图像裁剪(不详细说明)                          像素处理(不详细说明)                          图形的变形(不详细说明)                          文本对齐方式                                    context.textAlign="center"                          图形的组合(不详细说明)                          绘制阴影(不详细说明)                          绘制动画效果(不详细说明)                          保持绘图状态(不详细说明)                                          SVG:SVG是采用HTML标签形式创建一种可缩放的矢量图形技术,用来描述2D图形和图形应用程序                               且与CSS和Javascript具有非常好的兼容性                     SVG使用XML来描述二维图形的语言(遵从XML语法)                     SVG比较灵活,避免了jpeg、gif和png等位图图像的缺点。                     当浏览器以不同大小打开时候可以灵活变化(告诉浏览器创建多大的图像,而不是自己去创建多大的图像)                     SVG是由XML语言记录的,因此SVG文件可以通过文本编辑器进行编辑 音频和视频               <audio>专门用来播放网络上的音频数据                          <video>用来播放网络上的视频和电影                                                    audio基本格式                           <body>                            <audio  src="sample.mp3"></audio>                            </body>                          video基本格式                               <body>                               <embed  src="move.flv"  width="32"  height="32">                               </embed>                               </body>                               用户还可以通过<source>元素为同一个多媒体数据指定多个播放格式和编码方式,以确保浏览器可以选择一种可支持的播放                               格式进行播放                               <video  src="move.flv"  width="32"  height="32">                                         <source  src="move.move"    type="video/quicktime">                                          <source  src="move.ogv"      type="video/ogg">                               </video>                               audio和video具有的属性基本相同                                          文件路径:src                                         是否在页面加载后自动播放:autoplay                               指定数据媒体是否预加载:preload                                         该属性有三个属性值:                                                   不进行加载:none                                                   只预加载媒体的元数据(媒体字节数、第一帧、播放列表和持续时间等):metadata                                                   预加载全部视频或音频:auto(其为默认值)                                表示是否循环播放:loop                               指定是否添加浏览器自带播放用的控制条:controls                                    基本语法如下:<video src="move.flv" loop controls></video>                               当视频不可用时,可以向用户展示一幅替代图片,以免展示区一片空白                                    <video  src="move.flv"  poster="pic.jpg"></video>                                     play方法:可以播放媒体,自动将元素的paused属性的值变为false,基本语法如下:                               var audio = document.createElement("audio")                               audio.src="audio/source.mp3" //路径                               audio.play()                     pause方法可以暂停播放,自动将元素的paused属性的值变为true                     load方法可以重新载入媒体进行播放                     canPlayType方法可以测试浏览器是否支持指定的媒体类型                                                                                      链入内联框架、对象和其他多媒体元素                        iframe可以将另一个网页链入当前网页中,object元素和embed元素将更多类型的多媒体对象链入当前网页                          内联框架(iframe元素)                          iframe是浏览器窗口中的一个区域或者一个容器                          元素属性:                                    URL地址:src                                    width和height:<iframe  src="URL"    width="420"   height="330"></iframe>                                    使用内联框架的优势:使用内联框架可以将一个页面的“标志和标题”、“导航条”和“主要信息”等分开为独立的HTML页面                                    使得浏览器无须重复加载                  设置页面区域边框的宽度:frameborder                                         frameborder取值范围为0-1,0表示不显示边框,1表示在每个页面之间均显示边框,基本格式如下:                                              <iframe  frameborder="x"></iframe>                                         一般情况下,为了使得内联框架与邻近的内容相融合,经常将rameborder属性值设置为0                                    设置显示内容与窗口边界之间的空白距离大小:marginwidth和marginheight                                    marginwidth确定显示内容与左右边界之间的距离                                    marginheight确定显示内容与上下边界之间的距离                                                                        格式:<iframe  marginwidth="2"  marginheight="0"></iframe>                                         marginwidth属性和marginwidheight属性的参数值都是数字,分别表示上下左右边距所占的像素点数                                                                        HTML5中可以为每个框架定义一个name属性指定一个名称为框架的标识                                    用于其他框架文档通过name属性和target属性将其作为目标指向                     设置框架垂直方向和水平方向的对齐方式,格式如下:                                         <iframe  align="top"></iframe>                                    设置HTML文件在指定的区域中不能完全显示的时候,可以使用iframe袁术的scrolling属性定义是否显示滚动条,一共三个属性值                                         yes:显示滚动条                                         no:不显示滚动条                                      auto:当需要时才显示滚动条                                                      沙盒安全限制:                                             由于iframe元素的安全问题备受争议,HTML5为iframe元素新增了sandbox属性                                              sandbox属性可以实现沙盒安全限制,即通过限制被签入内容所允许的操作而提升iframe的安全性                               sandbox属性有一下几个属性值:                                              allow-same-origin:表示允许将iframe中的内容当做是与父页面同源,可以访问父页面的内容                                              allow-top-navigation:表示允许iframe中的内容导航父页面中的内容                                              allow-forms:表示允许iframe中的表单被提交                                              allow-scripts:表示允许iframe中的内容运行其中的脚本                          使用object链入对象                                   语法:<object data="image.png"></object>                                               object元素与embed元素的区别:                                                        object元素用于IE浏览器,embed元素用于非IE浏览器,为了保证兼容性,通常保证兼容性,通常同时使用两个                                                        元素,浏览器会自动忽略它不支持的标签。同时使用两个元素时,应该吧<embed>标签放在<object>标签的内部                               object属性:                                      指定对象数据的位置:data                                      指定data属性内容类型,该属性是可选的,但是建议和data属性一起使用:type                                      为对象定义一个唯一的名称:name                                      定义对象的宽高:width、height                                      规定与对象一同使用的客户端图像映射的URL:usemap                                     围绕该对象的对齐方式:align                                             对象周围的边框:border                        对象初始化(param)                                      为包含它的<object>标签提供参数。object可以包含任何数量的param元素,并且没有先后顺序要求。                                         语法:<object  classid="clsid:F08DF954-11D1-B16A-00C0F0283628"  id="Slider1" width="100" height="50">                                                             <param name="Max" value="10"/>                                                             <param name="Enabled"  value="1" />                                                   </object>                                    在XHTML中,该标签必须关闭                     使用embed元素链入多媒体对象                          语法如下:<embed  src="audio.mid"  autostart="true"  loop="2"  width="80" height="30">                                               设置自动播放:aotustart=true                               设置循环播放:loop=true                               控制面板的显示:hidden=true                               设置开始时间:starttime=“00:10”                               设置音量大小:volume=“10”                               设置容器属性:width和height                               外观设置:                                    正常面板:console                                    较小面板:smallconsole                                    只显示播放按钮:playbutton                                    只显示暂停按钮:pausebutton                                    只显示停止按钮:stopbutton                                    显示音量调节按钮:volumelever                                          设置背景:palette属性可以设置嵌入的音频或视频文件的前景色和背景色,第一个值为前景,后一个值为后景,中间用|隔开                                    语法如下:<embed  src="audio.mid"  palette="red|black">           使用表单                   提交表单action:指定表单数据提交到哪个地址进行处理。它可以设置为一个URL地址或一个电子邮件地址                                         格式:<form  action="表单的处理程序">                                                            .....                                                   </form>                                    表单中可以包含:文本域、复选框、单选按钮和复选按钮等,用于向指定的URL传递用户数据                                    表单名称中不能包含特殊字符和空格,因为特殊字符和空格不能被程序识别                                    表单的作用:表单是一个特定区域,有限定表单范围和携带表单的相关信息两个作用                                    传送方法:method                                                  指定在数据提交服务器的时候,可以取值get和post                                                   取值get时,表单数据附加到action属性指定的URL上,被送到处理程序上                                                   取值post时,表单数据被包含在表单主体中,被送到处理程序上                                                                                        编码方式:enctype                                                   用于设置表单信息提交的编码方式。enctype是EncodeType的简写                                     目标打开方式:target                                                   用来指定窗口的打开方式                                                   _blank:新窗口打开                                                   _parent:在父窗口打开                                                   _self:在链接的同一窗口打开                                                   _top:在最顶层的窗口打开                                                   new:永远使用一个窗口打开                                         target属性用来指定输入数据结果显示在哪个窗口,某些情况下需要与frame元素配合使用                                                              文字字段Text                              格式如下:<input  name="" type="text"  value=""  size="控件的长度" maxlength="最长字符数"/>                               大多数浏览器中,文本域的默认宽度是20个字符。为了美观可以任意设置文本域的宽度                          密码域password                          单选按钮 radio          <input  name=""  type="radio"  value=""  checked />                          复选框 checkbox       <input  name=""  type="checkbox" value=""  checked />                          普通按钮button         <input  name=""  type="button"  value=""  οnclick=""  />                          提交按钮submit                          图像域image                          隐藏域hidden:隐藏域包含一些要提交服务器的数据,但这些数据对于用户是不可见的,不显示在浏览器中                               格式:<input name="" type="hidden"  value=""  />                               缺点:如果存储了较多的较大的值,则会导致性能问题,具有较高的安全隐患                                    一般情况下,隐藏控件用来存储用户输入的姓名、电子邮件地址或偏好的浏览方式等信息                          文件域:上传文件时候常常用到,它用于查找硬盘中的文件路径,然后通过表单将选中的文件上传,上传图像时也常常用到                               格式:<input name=""  type="file"  size="控件长度" maxlength="最长字符数" />                               创建文件选择框有什么要求:                                                   必须使用post方法将文件从浏览器传到服务器,因此需要设置form元素的method属性值为post                          菜单和列表                                    下拉菜单:                                         格式: <select  name="">                                                        <option  value=""  selected>选项显示内容                                                             .....                                                    </select>                                     列表:可以显示出几条信息,超出信息量,右侧会出现滚动条                                         格式:<select  name=""  size="显示的列表数"  multiple>                                                        <option  value="选项值"  selected>选项显示内容                                                             .....                                                   </select>                               文本域标签:textarea   文本域标签可以输入多行文本,和其他表单对象不一样,文本域使用的是textarea标签而不是input标签                                         格式:<textarea  name=""  cols="列数"  rows="行数" ></textarea>                                         文本域显示内容在开始和结束标签中间,不用value属性                                    如何为textarea设置自动换行:                                                        使用textarea的warp属性即可定义是否自动换行,其有两个属性值,分别是hard和soft                                                        hard表示自动硬回车换行,soft表示自动软回车换行               离线网络应用            离线浏览:用户可以在应用离线时使用它们                     速度:已缓存资源加载得更快                     减少服务器负载:浏览器将只从服务器下载更新过或更改过得资源                     程序缓存的三个步骤:                                              配置服务器manifest文件的MIME类型                                              编写manifest文件                                              在页面的html元素的manifest属性中引用写好的manifeset文件                                                        格式:<html  manifest="test.manifest">                                                                       ......                                                                  </html>                                              manifest属性值得作用:定义值的文件路径,可以使用相对和绝对路径,也可以引用其他服务器上的manifest文件                     清单文件:                               格式:                                                   CACHE MANIFEST                                                   #上一行是必须书写的                                                        CACHE:                                                           123456.html                                                              browser.CSS                                                              browser.js                                                            image/123.jpg                     更新离线储存:想更新离线存储的的文件,就必须更新manifest文件                     定义缓存文件:CACHE                     备抵机制:当无法访问一个文件时,它就重定向到另一个文件。每一行都包含两个URI:FALLBACK                               格式:                                    FALLBACK:                                         /123.php   /789.html                                         /456.php   /789.html                               如下面代码表示如果用户离线时,所有文件都重定向到789.html                                         FALLBACK:                                              /      /offline.html                               白名单:NETWORK                                    在它之后的文件都是必须访问网络的,例如验证用户登录                                         NETWORK:                                                   /123.php                                     以下表示所有资源都必须通过网络连接才能访问,所有资源都不会被缓存                                         NETWORK:                                                   *                     浏览器内部对象:  navigator、document、windows、location和history                                    存取浏览器相关信息:navigator                                                        浏览器名称:appName                                                        浏览器的代码名称:appCodeName                                                        浏览器的版本:appVersion                                                        使用的插件信息:plugins                                                        浏览器的操作系统平台:plateform                                                        浏览器中是否启用cookie的布尔值:cookieEnabled                                                        浏览器的语言:browserLanguage                                                    document对象用于JS输出,该对象有form、links和anchor 3 个重要对象                                                   form窗体对象:含有多种格式的对象存储信息,可动态改变文档的行为                                                   links链接对象:用<a  href=....>....</a>标记链接一个特定URL                                                   anchor锚对象:用<aname = ....>....</a>标记的命名锚                                    JS区分大小写                                    Windows对象:是DOM对象模型的最顶层对象,代表了浏览器中用于显示文档内容的窗口,通过该对象可以访问DOM对象模型                                                             中所有的对象。该对象可以实现JS的输入                                                    弹出一个对话框:alert(text)                                              关闭一个窗口:close(text)                                              弹出确认对话框,显示text:confirm(text)                                              弹出提示框,显示text,defaulttext为默认情况下显示的文字:Promt(text,defaulttext)                                              按给定的像素移动指定的窗口:MoveBy(水平位移,垂直位移)                                              将窗口移至指定的位移:moveTo(x,y)                                              按给定的位移量重新设置窗口大小:resizeBy(x,y)                                              将窗口设定为指定的大小:resizeTo(x,y)                                              页面后退:Back(                                              页面前进:Forward()                                              返回主页:Home()                                              停止加载网页:Stop()                                              打印网页:Print()                                                状态栏信息:status                                              当前窗口URL信息:location                                                                      location对象:                                         描述窗口打开的地址                                                         返回地址的协议,取值为http:、file:等   : protocol                                              返回地址的端口号,一般http端口号是80    :port                                              返回主机名和端口号,如www.baidu.com:8080  :host                                              返回地址的主机名:hostname                                              返回路径名,不包含域名:pathname                                              返回整个地址:href                                         location对象常用的方法:                                                   读取新的URL:assign(sURL)                                                   重新加载URL,相当于刷新功能:reload([bReloadSource])                                                   读取新的URL:replace(sURL)                                                        assign和replace的区别:assign打开一个URL,可以后退到之前的页面;replace不行                                          history对象:是浏览器的浏览历史,history对象常用的方法主要包括:                                                   back():后退                                                   forward():前进                                                   go():用来进入指定的页面                    HTML制作文字特效                   如何实现文字的移动:                                                        marquee是滚动代码,这是比较基础的网页效果代码,用户只需要输入<marquee>....<marquee>标签                                                        scrollamount属性和direction属性可以控制文字的滚动速度以及文字滚动的方向                                         文字从中间分离是如何形成的:                                                   使用两个相同的字,上方的文字只显示上面一半,下方的文字只显示下面一半。这样就能形成文字从中间分开的效果
    转载请注明原文地址: https://ju.6miu.com/read-3584.html

    最新回复(0)