BOM——浏览器对象模型(Browser_Object_Model)

合集下载

javaee英语单词文档整理

1. web阶段：------------------------- javaweb_day01 ---------------------------------------------1.html 超文本标记语言(Hyper ['h a ipa]text Markup Language)2.color['k A H(r)]颜色、颜料3.size [saiz]大小、尺寸4.align ©lain]对齐、排列、对齐方式5.center「senta(r)]居中、中心、中央6.left [left]左边、居左、左对齐7.right [rait]右边、居右、右对齐、正确的8.paragraph ['p况ragr况f]段落、段<P></P>9.width [wide]宽度10.height [hait]高度、身高11.image ['imi*]图片、图像<img src=" ”/12.list[iist]列表、目录、集合13.order.da] list 有序列表14.unorder list 无序列表15.type[taip类型、品种、样式16.spacing ['spesin]间隙、字距17.rowspan 合并行18.colspan 和并列19.form[f〉m]表单、形式、形状20.input [骨十用输入、输入框21.readonly 只读的22.disable [dis'eib(a)l]禁用、无效23.action ['况kj(a)n]行动、动作24.method ['meead]方法、办法------------------------- javaweb_day02 ---------------------------------------------25.css层叠样式表26.style[stail]样式、风格27.border['b》da]边框、边界28.background ['b况kgraund]背景29.float[flot]漂浮、浮动30.display[di'splei]显示、显示方式、展示31.inline ['in,lain]内联的、行内32.block[blDk]块、阻塞、大块的33.margin ['ma:d§in]外边距、边缘34.padding ['p况din]内边距、填充35.bottom ['bntam]底部、末端36.link [link]连接、结合37.text [tekst]文本38.visited['vizitid]E访问、访问过39.hover['hnva]悬停、盘旋、徘徊40.active [,况ktiv]积极地、激活的、活跃的41.script[skript]脚本42.undefined [A ndi'faind]未定义的、不明确的43.variable ['veriabl]变量、可变的、多变的44.array@rei]数组45.length [|曲创长度46.join 口眄川加入、参加、连接47.reverse [ri'v^s]颠倒、倒转48.popup['pap,Ap]弹出、发射49.push [puj]推进、增加50.DOM (document object model)文档对象模型51.BOM (browser object model) 浏览器对象模型------------------------- javaweb_day03 ------------------------------52.window['windo]窗口、窗户53.eval[i'v况1]重新运算求出参数的内容54.encode [in'kod]编码55.decode['di'kod]解码56.parse[pars]解析、分析57.function['fAnkjan]函数、功能58.alert®],]警告、警戒、警惕59.confirm [kan'f^m]确认、确定60.interval ['int^vl]间隔、间距61.location [lo'kejan]位置、地点、定位62.document['dDkjum(a)nt]文档、文件63.element ['e1im(a)nt]元素、要素64.attribute [a'tribju:t]属性65.node [nod]节点、交点66.onclick鼠标单击67.onblur元素失去焦点68.onchange用户改变域的内容69.ondblclick鼠标双击某个对象70.onfocus元素获得焦点71.onkeydown某个键盘的键被按下72.onkeyup某个键盘的键被松开73.mouse [maus]鼠标74.onload某个页面或图像被完成加载75.onsubmit提交按钮被点击76.appendChild添加子节点77.removeChild删除子节点78.createElement创建元素节点79.createTextNode创建文本节点------------------------- javaweb_day0480.containeq kan'ten加容器81.row[ro]仃82.column [,kalam]歹U83.offset[Q f,szt]偏移84.hidden[,h1dn]隐藏、躲藏85.visible['viz9bl]可见的、看的见的------------------------- javaweb_day05 --------------------------------------------------86.sql 结构化查询语言(Structured Query Language)87.create[kri：'eit]创建、创造88.database ['detabes]数据库、资料库89.character [,k况rakta]字符集90.collate [ka,let]核对、校对91.show [j o]显示、说明92.drop[drap]终止、下降93.alte qb it加改变、更改94.primary[,praimeri] key主键;主关键字;主键约束;约束95.foreign[,f3ran] key外键;外键约束;约束;外健96.unique[ju,nik]唯一的、独一无二的97.auto increment 自动增长98.table[,tebl]表格99.desc降序、描述100.modify [,mndifai]修改、修饰101.change [tjein(d)3]改变、变化102.rename [rir'neim]重命名、改名103.insert into 插入104.update [A p'deit]更新、修改105.delete [di'li:t]删除106.truncate [trA^'ket]删除、截断107.select[si,lekt]查询、选择、挑选108.between...and…在... 之间109.order by 排序110.group [grurp] by 分组------------------------- javaweb_day06 -------------------------------------------------- 111.skip[skip]跳跃、跳过112.password即出s,wa:d]密码113.constraint[kan,strent]约束、限制114.reference [,refrans]参考、参照、引用115.cross join 交叉连接116.inner join 内连接117.left outer join 左外连接118.right outer join 右外连接119.transaction [tr况n'z况kjan]事务mit[ka,mit]提交、委托121.rollback[,rolb况k]回滚、回降122.serializable 可串行化的------------------------- javaweb_day07 和javaweb_day08 ----------------------------123.driver ['draiv加manager ['m况nid§加驱动管理器124.connection [ka'nekjan]连接、联系125.statement ['stetmant]申明、陈述126.ResultSet 结果集127.batch [b无5批量、批次128.execute[*ksikjut]实行；执行129.query['kwiri]询问、查询130.close[kioz]关闭、结束131.properties ['prnpatiz]属性、特性 ------------------ j avaweb_day09 132.localhost本地服务器、本地主机133.client['klaiant]客户端、客户机134.server [§-]服务器、服务端135.config[kan'fig]配置、配置文件、布局work['netw3：k]网络137.request[ri'kwest〕请求、要求138.response [ri'spnns]响应、回应、回答er agent用户客户端140.status [:s t e ta s] code 状态码141.refresh[ri'fr叮]刷新、更新142.servlet ['soviet]小服务程序143.url-pattern ['p况t^n]路径144.generiq d^i'nerik]一般的、通用的------------------------- javaweb_day10 --------------------------145.init [i'nit]初始化146.service[,s3：Vis]服务、服侍147.destroy [di'strii]销毁、消灭、148.load-on-startup 启动时加载149.context['kantzkst]环境、上下文150.resource['riS D rs]资源151.real path真实路径152.redirect [[,ri：da'rekt]]重定向、重新导向153.ContentType :内容类型154.parameter [pa'r况mIta]参数------------------------- javaweb_day11 --------------------------155.model['mDdl]模型、典型、模范156.controlleq kan'traula]控制器157.view[vju：]视图、视角、观察、风景158.dispatcher [dis'potja]调度员、转发器159.forward ['f^wad]前进、向前------------------------- javaweb_day12 --------------------------160.cookie['kuki]饼干；小甜点161.session ['sej(a)n]会话、会议 ------------------------- j avaweb_day13162.page[peid§]页、页面163.include [in'klu:d]包含、包括164.taglib标签库、标签nguage['l出ggwid§]语言、语种166.application [vpli'keij⑹n]应用、应用程序167.exception [建血加异常168.scope[skaup]范围、作用域169.items [l aItam]条目、项目170.step[step]步、脚步、步骤------------------------- javaweb_day14 ----------------------------- 171.listener「iis(a)na]监听器、听众172.filter「fiita]过滤器、过滤173.bind[baind]绑定、结合174.unbind^n'baind]解绑、解放175.passivate ['p,siveit]钝化176.activate [',ktiveit]活化、激活177.chain [tjein]链、枷锁178.filter-chain 过滤器链------------------------- javaweb_day15 ----------------------------- 179.upload [，/p'lod]上传180.file upload 文件上传181.disk[disk]磁盘182.factory ['f,kt(a)ri]工厂183.download[daun,6ud]下载------------------------- javaweb_day16 -----------------------------1.Jquery : 一款流行的js框架2.calllback :回调3.each [itj]每个4.length [1句8]长度5.selector [sskkt加选择器6.remove [ri'muv]移除，删除7.queue [kju] 入队列，使…成为队列8.dequeue。

javascript复习资料

Javascript》复习题一、选择题1．JavaScript是（B） .A．一种Java 编程语言,不同的是它可以用于网页开发B．一种解释性的、用于客户端的、基于对象的程序开发语言C．一种用于Mozilla的Firefox浏览器和Microsoft的Internet Explorer浏览器的网页开发语言D．一种用于制作网页动画效果的程序开发语言2．JavaScript程序在不同的浏览器上运行时，将(A）得到相同的效果。

A．一定B．不一定3．在浏览器上运行JavaScript程序，可以（D）A．动态显示网页内容B．校验用户输入的内容C．进行网页的动画显示D．具有以上各种功能4．编写JavaScript时，（C）A．应使用专门的JavaScript编辑软件B．只能使用Microsoft FrontPage软件C．可以使用任何一种文本编辑软件D．只能使用Macromedia Dreamweaver软件5．在HTML文件中编写JavaScript程序时，应使用标记（C)A．<javascript〉B．<scripting〉C．〈script>D．<js>6．在HTML文件中编写JavaScript程序时,使用标记〈!-— //-—〉表示（C）A．注释语句B．重点突出语句C．对于不支持JavaScript程序的浏览器，隐藏程序内容D．没有任何意义7．使用外部JavaScript程序文件的正确格式是(B)A．<script href=”xxx。

js" type="text/javascript"〉B．<script src=”xxx。

js" type=”text/javascript”>C．<script name=”xxx。

js” type="text/javascript”>D．〈script file="xxx。

js 语法

js 语法
1.JS认识
js是解释性的语言，V8引擎JS全称JavaScript。

设计目的：在静态页面的基础添加动态效果由网景公司布兰登•艾奇设计开发，命名为JavaScript。

当时，Java很火，网景想借用java的名气来推广，实际上，javaScript 与java没有任何关系。

2. JS分成三部分
1）ES：ECMAScript，简称ES，称他为语法部分ECMA：欧洲计算机制造商协会，制定了一套JS规则，JavaScript是对这套规则的具体体现
2）DOM：JS高级编程，DocumentObjectModel, 文档对象模型，用来操作页面的
3）BOM：BrowserObjectModel, 浏览器对象模型，用来操作浏览器的
3.JS的运行环境
JS解释器
浏览器中集成了JS解释器
Node.js：集成了JS解释器
4.JS存在价值
1.在用户体验方面，功不可没
2.减轻服务器压力：相关的数据验证可以直接在客户端完成。

关于BOM知识的整理

关于BOM知识的整理概述： BOM：浏览器对象模型（Browser Object Model） BOM包含内容： window对象（核⼼） location对象 navigator对象 screen对象 history对象⼀、window对象双重⾝份：全局(Global)对象；浏览器的实例。

窗⼝关系及框架：window.frames，集合。

top.frames：最外层的框架。

窗⼝⼤⼩：window.innerWidth / window.innerHeight 。

导航和打开窗⼝：window.open()，打开窗⼝，接收4个参数：URL、窗⼝⽬标、窗⼝属性(字符串)、是否取代浏览器历史记录(布尔值)。

定时器：setTimeout() / setInterval()　；系统对话框：alert() / confirm() / prompt() 警告/确认/输⼊。

⼆、location对象 window.location与document.location引⼊同⼀个对象。

查询字符串参数：location.scarch 哈希值：location.hash三、navigator对象⽤户代理信息：eragent，可以获得⽤户的操作系统、浏览器版本、渲染的内核等信息。

注意：1. ⽤户的信息可以轻易伪装；2. 可以利⽤⽤户代理信息，来决定展⽰相应的页⾯（pc端/⼿持端）。

alert( erAgent ) ：查看⽤户代理信息；⽤法实例：if( erAgent.indexOf("MSIE") !== -1 ){ alert("IE浏览器" ) ； }四、screen对象　很少使⽤五、history对象跳转：history.go()，参数为数值，前进后退的页数。

前进：history.forward()。

后退：history.back()。

BOM和DOM

BOM和DOM前戏我们学的HTML是页⾯的结构，CSS是页⾯的样式，JS为了交互，让页⾯动起来~~那么我们如果想跟页⾯交互，想⼀下JS需要有哪些功能才能实现交互~我们有时候点击⼀个按钮，会在浏览器窗⼝打开⼀个新的页⾯，那JS就需要跟浏览器进⾏交互。

我们写评论的时候，提交后页⾯会把我们的评论显⽰上去，那么JS就需要能操作HTML，以及CSS。

JS跟浏览器交互的时候，浏览器给我们提供了⼀些对象可供JS操作，这些对象就是BOM。

JS操作HTML，来影响页⾯的展⽰，这些HTML⽂档的所有元素叫DOMBOM （Browser Object Model）是指浏览器对象模型。

DOM （Document Object Model）是指⽂档对象模型。

BOM对象window对象所有浏览器都⽀持window对象，表⽰浏览器窗⼝。

我们js的所有全局对象，变量以及函数都是⾃动成为window对象的成员。

我们上⾯提到的DOM，也就是document也是window对象的成员。

常⽤的⼀些window的⽅法// 浏览器窗⼝的⾼度let h = window.innerHeight;console.log(h);// 浏览器窗⼝的宽度let w = window.innerWidth;// 打开新的窗⼝window.open()// 关闭当前窗⼝⼀般只⽤于⾃⼰⽤js打开的窗⼝window.close()navigator对象（了解即可）浏览器对象，通过这个对象可以获得所使⽤的浏览器的信息navigator.appName // Web浏览器全称navigator.appVersion // Web浏览器⼚商和版本的详细字符串erAgent // 客户端绝⼤部分信息navigator.platform // 浏览器运⾏所在的操作系统screen对象（了解即可）屏幕对象，不常⽤// 可⽤屏幕的宽度screen.availWidth// 可⽤屏幕的⾼度screen.availHeighthistory对象history对象包含⽤户在浏览器中访问的URL。

bom 信息概念模型

BOM（Browser Object Model）是指浏览器对象模型，它提供了一个独立于内容的、可以与浏览器窗口进行互动的对象结构。

BOM由多个对象组成，其中代表浏览器窗口的Window 对象是BOM的顶层对象，其他对象都是该对象的子对象。

BOM的信息概念模型主要包括以下几个方面：
Window对象：代表浏览器窗口，是BOM的顶层对象。

它包含了浏览器窗口的各种属性和方法，如窗口大小、滚动位置、历史记录等。

Document对象：代表网页文档，是HTML文档在浏览器中的表示。

它包含了网页的各种属性和方法，如DOM树结构、样式信息等。

History对象：代表浏览器历史记录，提供了访问和操作浏览器历史的方法。

Location对象：代表当前窗口的URL信息，提供了获取和操作URL的方法。

Navigator对象：代表浏览器信息，提供了获取浏览器信息的方法。

Screen对象：代表客户端屏幕信息，提供了获取屏幕信息的方法。

这些对象通过相互之间的属性和方法，可以实现对浏览器窗口的各种操作和交互，从而实现对网页的展示和控制。

JavaScript中window对象的常用方法

JavaScript中window对象的常⽤⽅法BOM浏览器对象模型：是规范浏览器对js语⾔的⽀持(js调⽤浏览器本⾝的功能)。

BOM的具体实现是window对象window对象使⽤学习：1、window对象不⽤new，直接进⾏使⽤即可，类似Math的使⽤⽅式，window关键字可以省略不写。

2、框体⽅法 alert:警告框提⽰⼀个警告信息，没有返回 confirm:确认框提⽰⽤户选择⼀项操作（确定/取消）点击确定返回true　点击取消返回false prompt:提⽰框，提⽰⽤某个信息的录⼊或者说收集点击确定，返回当前⽤书录⼊的数据，默认返回空字符串点击取消,返回null3、定时和间隔执⾏⽅法 setTimeout:指定的时间后执⾏指定的函数参数1：函数对象参数2：时间，单位毫秒。

返回值：返回当前定时器的id setInterval:每间隔指定的时间执⾏指定的函数参数1：函数对象参数2：时间，单位毫秒。

返回值：返回当前间隔器的id clearTimeout:⽤来停⽌指定的定时器参数：定时器的id clearInterval:⽤来停⽌指定的间隔器参数：间隔器的id4、⼦窗⼝⽅法 window.open('⼦页⾯的资源(相对路径)','打卡⽅式','配置'); ⽰例：window.open('son.html','newwindow','height=400, width=600,top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=no, status=yes'); 注意: 关闭⼦页⾯的⽅法window.close(),但是此⽅法只能关闭open⽅法打开的⼦页⾯。

5、⼦页⾯调⽤⽗页⾯的函数 window.opener.⽗页⾯的函数6、地址栏属性:location window.location.href="新的资源路径（相对路径/URL）" window.location.reload()重新加载页⾯资源7、历史记录属性 window.history.forward() 页⾯资源前进，历史记录的前进。

BOM的基本介绍

BOM的基本介绍8-1浏览器引⼊JavaScript要想利⽤J avaScript和⽹页实现互动，那么⾸先第⼀步就是应该了解如何向⽹页中引⼊ JavaScript代码。

实际上，向⽹页引⼊JavaScript代码的⽅式也是多种多样，下⾯我们⼀起来看 —下。

8-1-1直接在HTML⽂件中引⼊⾸先第1种⽅式就是直接在HTML⽂档⾥⾯引⼊JavaScript代码。

在维护⼀些⽼项⽬的时候，经常可以看到J avaScript代码是写在<title>标签下⾯的，并且通过⼀对<sc ript>标签来引⼊代码。

⽰例如下：<head><meta charset="UTF-8"><title>Document</title><script>//JS代码</script></head>但是，如果是直接在HTML⽂件中引⼊JavaScript代码，我们⼀般不写在vtitle>标签下⾯，更加优化的⼀种⽅式是将<sc ript>标签写在<body>标签的最⼩⾯，这样可以更快的加载出页⾯效果。

如下：<body><! — HTML 代码—><script>//JS代码</script></body>8-1-2调⽤外部JS⽂件第2种⽅式是使⽤外部链接的⽅式来调⽤外部的JS⽂件。

这种⽅式适⽤于当我们的JavaScript代码是单独的⼀个js⽂件时，就可以采⽤这种⽅式来引⼊JavaScript代码。

⽰例如下：<body><! — HTML 代码—><sc ript sr c="外部 JS ⽂件"</sc ript></body>8-1-3使⽤a标记的href属性我们还可以在<a>标签的href属性⾥⾯书写JavaScript代码，这样会改变<a>标签默认的超链接特性，⽽变为执⾏这段JavaScript代码，⽰例如下：<body><! — HTML 代码—><a hr ef="javasc ri pt:ale rt('Hello Worl d')"> 点击 </a> </body>8-1-4事件⾥⾯直接书写JS代码在后⾯学习的事件中，我们也可以直接将JavaScript代码写在事件⾥⾯，例如我们书写⼀个点击事件，当点击button按钮时，会执⾏相应的J avaScript代码，⽰例如下：<button onclick="javasc ri pt:ale rt('Hello Worl d!')"> 点击 </button〉 </body>8-2 BOM基本介绍8-2-1什么是BOM所谓BOM,英语全称为Browser Object Model，翻译成中⽂为浏览器对象模型。

[BOM]bom简单整理（1）

[BOM]bom简单整理（1）BOM:Browser Object ModelBOM主要包括对象: window对象 history对象 location对象 navigator对象 document对象 screen对象 event对象1.打开或关闭窗⼝ 1.在当前窗⼝打开可后退 window.open("url","_self") 2.在新窗⼝打开,不可后退 location.replace("URL") 3.在新窗⼝可重复打开 open("URL","_blank") 4.在新窗⼝打开且只能打开⼀个页⾯ open("URL","⾃定义name属性") 注:浏览器规定,同⼀个⾃定义name属性的窗⼝只能打开⼀个关闭窗⼝:window.close();2.窗⼝位置和⼤⼩获得浏览器窗⼝的完整⼤⼩ window.outerHeight/outerWidth 或者浏览器中⽂档显⽰区的⼤⼩(浏览器显⽰⽹页的部分) window.innerHeight/innerWidth 调整窗⼝的⼤⼩(只可修改弹窗的⼩窗⼝) 调整到 resizeTo(newWidth,newHeight) 增量 resizeBy(width增量,height增量) 调整浏览器位置(只能调整弹框) 获取浏览器的位置 x: window.screenLeft || window.screenX y: window.screenRight || window.screenY 移动窗⼝的位置 moveTo(x,y) --> 将窗⼝的左上⾓位置移到x,y位置 moveBy(x的增量,y的增量)定时器 1.周期性定时器 time=setInterval(function(){ dosometing... },intervalTime) 清除周期性定时器 clearInterval(time) 2.⼀次性定时器 time = setTimeout(function(){ dosomething },intervalTime) 停⽌定时器 clearTimeout(time)。

小程序实现计算器功能

⼩程序实现计算器功能本⽂实例为⼤家分享了⼩程序实现计算器功能的具体代码，供⼤家参考，具体内容如下实现模拟⼿机上的计算器，输⼊即可运算本页⾯是做⼀个计算收款的页⾯，如果不需要下⾯的内容可以删除掉wxml<view class="calculate-box"><view class="calculate-txt">{{express}}</view><view class="result-num">={{result}}</view></view><view class="fixation-box"><view class="calculator-box"><view class="calculator-line"><view data-con='c' class='boxtn btn1 clear' catchtap="clickKeyBoard">AC</view><view data-con='←' class='boxtn btn1' catchtap="clickKeyBoard"><image src="../../../images/clear-icon.png" class="clear-icon"></image></view><view data-con='÷100' class='boxtn btn1 percent' catchtap="clickKeyBoard">%</view><view data-con='÷' class='boxtn num' catchtap="clickKeyBoard">÷</view></view><view class="calculator-line"><view data-con='7' class='boxtn btn1 num' catchtap="clickKeyBoard">7</view><view data-con='8' class='boxtn btn1 num' catchtap="clickKeyBoard">8</view><view data-con='9' class='boxtn btn1 num' catchtap="clickKeyBoard">9</view><view data-con='×' class='boxtn num' catchtap="clickKeyBoard">×</view></view><view class="calculator-line"><view data-con='4' class='boxtn btn1 num' catchtap="clickKeyBoard">4</view><view data-con='5' class='boxtn btn1 num' catchtap="clickKeyBoard">5</view><view data-con='6' class='boxtn btn1 num' catchtap="clickKeyBoard">6</view><view data-con='-' class='boxtn num' catchtap="clickKeyBoard">-</view></view><view class="calculator-line"><view data-con='1' class='boxtn btn1 num' catchtap="clickKeyBoard">1</view><view data-con='2' class='boxtn btn1 num' catchtap="clickKeyBoard">2</view><view data-con='3' class='boxtn btn1 num' catchtap="clickKeyBoard">3</view><view data-con='+' class='boxtn num' catchtap="clickKeyBoard">+</view></view><view class="calculator-line"><view data-con='0' class='boxtn btn2 num' catchtap="clickKeyBoard">0</view><view data-con='.' class='boxtn btn1 num' catchtap="clickKeyBoard">.</view><view data-con='=' class='boxtn equal' catchtap="result">=</view></view></view><view class="bottom-handle"><view style="flex: 1;font-size: 34rpx;" class="artificial-collection" bindtap="artificial_collection"><text>⼈⼯收款</text></view><view class="payment-code" bindtap="qrcode_collection">收款码收款</view></view></view>jsdata: {express: '', //第⼀⾏的表达式result: '0', //第⼆⾏的结果calc2: {str: '', //临时字符串strList: [], //中缀表达式存储（队列先进先出）strListP: [], //后缀表达式（队列先进先出）list: [], //存放运算符的堆栈（先进后出）count: [], //计算表达式堆栈（先进后出）flag: 0 //表⽰字符串最后⼀位是否是运算符号位},isqr: false,},//给所有text或view绑定此事件，同时增加对应的⾃定义属性值clickKeyBoard(e) {let that = this;let input = e.currentTarget.dataset.con //获取每次输⼊的内容if (input == "c") {that.handleClear();} else if (input == "←") {that.handleDelete();} else {//调⽤处理字符串that.handleInfo(input);}},//处理本地⽤户的输⼊操作handleInfo(input) {if (this.data.calc2.str.length == 0) { //第⼀次点击if (input == "-" || this.checkShuZi(input)) { //为减号this.addStr(input);} else {return;}} else {if (this.data.calc2.flag == 1) { //说明最后⼀位是符号if (this.checkFuHao(input)) {this.data.calc2.str = this.data.calc2.str.substring(0, this.data.calc2.str.length - 1); //去掉最后⼀位符号，添加最新的符号进去 this.addStr(input);} else {this.addStr(input);}console.log();} else {this.addStr(input);this.result();}}this.result();},//客户点击等号了result() {//每次点击等号重新把列表给空this.data.calc2.strList.length = 0;this.data.calc2.strListP.length = 0;this.data.calc2.list.length = 0;this.data.calc2.count.length = 0;//将表达式变成中缀表达式队列this.expressToStrList(this.data.express);console.log(this.data.calc2.strList);//将中缀表达式集合赋值给临时变量let tempList = this.data.calc2.strList;this.expressToStrListP(tempList);console.log(this.data.calc2.strListP);//最终的计算let tempP = this.data.calc2.strListPfor (let m in tempP) {if (this.checkFuHao2(tempP[m])) { //不含点号的符号⽅法判断let m1 = this.data.calc2.count[0]; //取出第⼀个数据this.data.calc2.count.shift(); //取出后删除该数据let m2 = this.data.calc2.count[0];this.data.calc2.count.shift();// console.log('m1是' +m1);// console.log('m2是' + m2);// console.log('运算符是' + tempP[m]);// console.log('计算结果是：' + this.countDetail(m2, tempP[m], m1));this.data.calc2.count.unshift(this.countDetail(m2, tempP[m], m1)); //将计算结果放到count中 } else {this.data.calc2.count.unshift(tempP[m]) //将数字压进去}}console.log('最终的计算结果是' + parseFloat(this.data.calc2.count[0]).toFixed(2));this.setData({result: this.data.calc2.count[0]});},//实际具体计算countDetail(e1, e2, e3) {let result = 0.0;console.log(e1);console.log(e2);console.log(e3);try {if (e2 == "×") {if (typeof(e1) != "undefined") {result = parseFloat(e1) * parseFloat(e3);} else {result = parseFloat(e3);}} else if (e2 == "÷") {if (typeof(e1) != "undefined") {result = parseFloat(e1) / parseFloat(e3);} else {result = parseFloat(e3);}} else if (e2 == "%") {if (typeof(e1) != "undefined") {result = parseFloat(e1) / parseFloat(e3);} else {result = parseFloat(e3);}} else if (e2 == "+") {if (typeof(e1) != "undefined") {result = parseFloat(e1) + parseFloat(e3);} else {result = parseFloat(e3);}} else {if (typeof (e1) != "undefined") {result = parseFloat(e1) - parseFloat(e3);} else {result = parseFloat(e3);}}} catch (error) {}return result;},//将中缀表达式集合转变为后缀表达式集合expressToStrListP(tempList) {for (let item in tempList) {if (this.checkFuHao2(tempList[item])) { //不含点号的符号⽅法判断if (this.data.calc2.list.length == 0) {this.data.calc2.list.unshift(tempList[item]); //直接添加添加运算符} else {if (this.checkFuHaoDX(this.data.calc2.list[0], tempList[item])) {for (let x in this.data.calc2.list) {this.data.calc2.strListP.push(this.data.calc2.list[x]); //将运算符都放到listP中}this.data.calc2.list.length = 0; //循环完把list置空this.data.calc2.list.unshift(tempList[item]); //加新元素进去} else {this.data.calc2.list.unshift(tempList[item]); //直接添加添加运算符}}} else {this.data.calc2.strListP.push(tempList[item]); //数字直接加到后缀集合中}}//循环完有可能最后⼀个是数字了，取到的不是字符，那么运算符⾥剩余的还的加到listP中if (this.data.calc2.list.length > 0) {for (let x in this.data.calc2.list) {this.data.calc2.strListP.push(this.data.calc2.list[x]); //将运算符都放到listP中}this.data.calc2.list.length = 0; //循环完把list置空}},//判断两个运算符的优先级(m1是list集合中最后加进去的那个元素⽐较将要进来的元素，如果m1⽐m2⼤，弹出list集合到listp中，再把m2加到list中，否则直接将m2加⼊list) checkFuHaoDX(m1, m2) {if ((m1 == "%" || m1 == "×" || m1 == "÷") && (m2 == "-" || m2 == "+")) {return true;} else {return false;}},//将字符串表达式变成中缀队列expressToStrList(express) {let temp = ''; //定义临时变量//将表达式改为中缀队列for (let i = 0; i < express.length; i++) {if (i == 0 && express[i] == "-") {temp = temp + express[i];} else {if (this.checkShuZi2(express[i])) { //如果i是数字temp = temp + express[i];} else {if (temp.length > 0) {if (express[i] == ".") {temp = temp + express[i];} else {this.data.calc2.strList.push(parseFloat(temp));temp = '';this.data.calc2.strList.push(express[i]);}} else {temp = temp + express[i];}}}}//循环到最后再看temp中有没有数字了，如果有加进来if (temp.length > 0 && this.checkShuZi(temp.substring(temp.length - 1))) {this.data.calc2.strList.push(parseFloat(temp));temp = '';}},//处理客户输⼊清除键handleClear() {this.data.calc2.str = '';this.data.calc2.strList.length = 0;this.data.calc2.strListP.length = 0;this.data.calc2.list.length = 0;this.data.calc2.count.length = 0;this.data.calc2.minusFlag = 0;this.setData({express: '',result: ''});},//处理客户输⼊回退键handleDelete() {let that = this;let str = that.data.calc2.str;if (str.length > 0) {str = str.substring(0, str.length - 1);that.data.calc2.str = str;that.setData({express: str,});} else {return;}},//判断是否是运算符（含点号，⽤在组织表达式时 .不能重复输⼊）checkFuHao(input) {if (input == "-" || input == "+" || input == "÷" || input == "%" || input == "×" || input == ".") { return true;} else {return false;}},//判断是否是运算符（不含点号）checkFuHao2(input) {if (input == "-" || input == "+" || input == "÷" || input == "%" || input == "×") {return true;} else {return false;}},//判断是否是数字checkShuZi(input) {if (input == "0" || input == "1" || input == "2" ||input == "3" || input == "4" || input == "5" ||input == "6" || input == "7" || input == "8" || input == "9") {return true;} else {return false;}},//判断是否是数字(包含.号，⽤在表达式转中缀⽅法中)checkShuZi2(input) {if (input == "0" || input == "1" || input == "2" ||input == "3" || input == "4" || input == "5" ||input == "6" || input == "7" || input == "8" || input == "9" || input == ".") {return true;} else {return false;}},//给字符串添加新字符(直接追加在判断是否要改变变量flag)addStr(input) {this.data.calc2.str = this.data.calc2.str + input;if (this.checkFuHao(input)) {this.data.calc2.flag = 1; //设置标记位位1} else {this.data.calc2.flag = 0;}this.setData({express: this.data.calc2.str});},wxss/* pages/index/collect-money/collect-money.wxss */page {background-color: #f8f8f8;}.bottom-handle {height: 100rpx;width: 100%;display: flex;align-items: center;}.fixation-box {position: fixed;bottom: 0;width: 750rpx;}.sweep-code-verification {background: #fff;border-top: 1rpx solid #e3e3e3;width: 220rpx;color: #333;}.artificial-collection, .sweep-code-verification {height: 100%;display: flex;flex-direction: column;align-items: center;font-size: 24rpx;justify-content: center;}.artificial-collection {background: #f3b055;width: 248rpx;color: #fff;}.payment-code {background-image: linear-gradient(203deg, #6f6f6f 0%, #3c3c3c 96%); flex: 1;font-size: 34rpx;color: #fff;text-align: center;line-height: 100rpx;}.sweep-code-verification image {width: 40rpx;height: 40rpx;}.artificial-collection image {width: 40rpx;height: 40rpx;}.calculator-box {background-color: #fff;}.calculator-line {display: flex;align-items: center;}.boxtn {width: 25%;height: 154rpx;border-left: none;display: flex;align-items: center;justify-content: center;}.calculator-box .calculator-line:last-child {border-bottom: none;}.calculator-line {border-bottom: 1rpx solid #dedede;}.btn1, .btn2 {border-right: 1rpx solid #dedede;}.btn2 {width: 50%;}.equal {background: #f3b055;font-size: 61rpx;color: #fff;}.num {font-size: 60rpx;color: #000;}.clear {font-size: 48rpx;color: #f3b055;}.percent {font-size: 60rpx;color: #000;}.charge-content {background: #fff;border-radius: 24rpx;width: 540rpx;display: flex;flex-direction: column;align-items: center;}.charge-title {background: #f3b055;border-radius: 12px 12px 0 0; width: 100%;height: 92rpx;font-size: 34rpx;line-height: 92rpx;text-align: center;color: #fff;}.charge-money {font-size: 60rpx;color: #333;line-height: 84rpx;margin-top: 35rpx;}.charge-propmt {font-size: 28rpx;color: #999;line-height: 42rpx;padding-bottom: 40rpx;}.charge-btn {display: flex;align-items: center;height: 100rpx;border-top: 1rpx solid #ddd;width: 100%;}.charge-cancel, .charge-confirm { flex: 1;text-align: center;line-height: 100rpx;font-size: 34rpx;}.charge-cancel {color: #999;border-right: 1rpx solid #ddd;}.charge-confirm {color: #f3b055;}.successful-content {background: #fff;border-radius: 24rpx;width: 540rpx;display: flex;flex-direction: column;align-items: center;}.success-icon {width: 120rpx;margin-top: 45rpx;height: 120rpx;}.successful-title {font-size: 34rpx;color: #333;line-height: 42rpx;padding: 30rpx 0;font-weight: 600;}.clear-icon {width: 80rpx;height: 80rpx;}.calculate-box {position: fixed;top: 0;bottom: 875rpx;width: 100%;display: flex;flex-direction: column;align-items: flex-end;padding: 0 50rpx;}.result-num {font-size: 88rpx;color: #333;line-height: 124rpx;}.calculate-txt {font-size: 60rpx;color: #333;line-height: 84rpx;margin-top: auto;word-wrap: break-word;text-align: right;word-break: break-all;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}.suspend-box{height: 64rpx;background-color: rgba(0, 0, 0, .5);position: fixed;top: 70rpx;left: 0;color: #fff;display: flex;align-items: center;font-size: 24rpx;padding: 0 20rpx;border-radius: 0 100rpx 100rpx 0;z-index: 9;}.close-suspend{width: 30rpx;height: 30rpx;}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

B O M 入门基本常识

JavaScript BOM即浏览器对象模型(Browser Object Model) 快速入门1.Window(窗口)获取文档显示区域的高度和宽度获取外部窗体的宽度和高度打开一个新的窗口2.Navigator即浏览器对象，提供浏览器相关的信息打印浏览器相关信息3.Screen对象表示用户的屏幕相关信息返回用户的屏幕大小，以及可用屏幕大小4.History用于记录访问历史（1）返回上一次的访问（2）返回上上次的访问5.Location表示浏览器中的地址栏刷新当前页面跳转到另一个页面6.弹出框7.JavaScript计时器只执行一次不停地重复执行终止重复执行BOM即浏览器对象模型(Browser Object Model)1.Window(窗口)获取文档显示区域的高度和宽度一旦页面加载，就会自动创建window对象，所以无需手动创建window对象。

通过window对象可以获取文档显示区域的高度和宽度document.write("文档内容");document.write("文档显示区域的宽度"+window.innerWidth);document.write("br");document.write("文档显示区域的高度"+window.innerHeight);获取外部窗体的宽度和高度所谓的外部窗体即浏览器，可能用的是360，火狐，IE, Chrome 等等。

document.write("浏览器的宽度:"+window.outerWidth);document.write("br");document.write("浏览器的高度:"+window.outerHeight);打开一个新的窗口有的时候，你碰到一些网站会自动打开另一个网站，那么是怎么做到的呢?就是通过window的open方法做到的function openNewWindow(){myWindow=window.open("-");button onclick="openNewWindow()"打开一个新的窗口-button window.open("-")打开就是根目录2.Navigator即浏览器对象，提供浏览器相关的信息打印浏览器相关信息script type="text-javascript"document.write("p浏览器产品名称：");document.write(navigator.appName + "-p");document.write("p浏览器版本号：");document.write(navigator.appVersion + "-p");document.write("p浏览器内部代码：");document.write(navigator.appCodeName + "-p");document.write("p操作系统：");document.write(navigator.platform + "-p");document.write("p是否启用Cookies：");document.write(navigator.cookieEnabled + "-p");document.write("p浏览器的用户代理报头：");document.write(erAgent + "-p");3.Screen对象表示用户的屏幕相关信息返回用户的屏幕大小，以及可用屏幕大小如果是在台式电脑上，通常看到的可用区域的高度会比屏幕高度小一点，因为有任务栏的存在。

HTMLBrowserBOM对象

方法
说明
assign()
载入一个新的文档
reload()
重新载入当前文档
replace()
用新的文档替换当前文档
appVersion
返回浏览器的平台和版本信息
cookieEnabled
返回指明浏览器中是否启用 cookie 的布尔值
platform
返回运行浏览器的操作系统平台
userAgent
返回由客户机发送服务器的user-agent 头部的值
Navigator 对象方法：
方法
描述
javaEnabled()
2. Navigator 对象：包含浏览器信息。如：获取浏览器名称、版本信息、操作系统平台信息等等。
3. Screen 对象：包含屏幕信息。如：获取屏幕高度、宽度等等。
4. History 对象：可对当前页的浏览历史进行操作，如：前进、后退等。
5. Location 对象：可对当前页面的URL进行操作，如：导航到新的页面、获取URL信息等。
返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
getComputedStyle()
获取指定元素的 CSS 样式。
matchMedia()
该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。
moveBy()
可相对窗口的当前坐标把它移动指定的像素。
已废弃。该方法已经使用了 scrollTo() 方法来替代。
scrollBy()
按照指定的像素值来滚动内容。
scrollTo()
把内容滚动到指定的坐标。
setInterval()
按照指定的周期（以毫秒计）来调用函数或计算表达式。

JavaScript+jQuery开发实战-JavaScript中的BOM操作

会使用定时函数和Date对象制作时钟特效
BOM模型2-1
BOM：浏览器对象模型（Browser Object Model）
整个BOM的核心

BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
BOM模型2-2
BOM可实现功能
弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口的大小页面的前进、后退
共性问题集中讲解
history对象
常用方法
名称
back() forward() go()
说
明
加载 history 对象列表中的前一个URL 加载 history 对象列表中的下一个URL 加载 history 对象列表中的某个具体URL
等价
history.back()
等价
history.go(-1) history.go(1)
演示示例2：window对象操作窗口
学员操作—制作当当购物车页面
练习

需求说明单击“半闭”按钮时，关闭当前页面购物车页面单击“移入收藏”弹出收藏提示单击“删除”弹出确认删除提示单击“结算”按钮，弹出结算信息页面窗口
完成时间：20分钟
共性问题集中讲解
常见问题及解决办法代码规范问题调试技巧
说
明
location和history对象的应用
主页面使用href实现跳转和刷新本页
示例
<a href="javascript:location.href='flower.html'">查看鲜花详情</a> <a href="javascript:location.reload()">刷新本页</a> <a href="javascript:history.back()">返回主页面</a>

javascript中的BOM与DOM、JS核心

JavaScript的核心是基于ECMAScript的，ECMAScript是与运行环境无关的语言，浏览器是ECMAScript的一个众所周知的运行环境，出了浏览器，js还可以运行在ps等等中。

javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document 属性就可以访问、检索、修改XHTML文档内容与结构。

因为document对象又是DOM （Document Object Model）模型的根节点。

可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。

其中DOM包含：windowWindow对象包含属性：document、location、navigator、screen、history、framesDocument根节点包含子节点：forms、location、anchors、images、links简记BOM:[wdlnshf]我到了你随后发简记DOM:[flail]服了爱了这些对象提供了一系列属性和方法，通过操作这些属性和使用这些方法，就可以实现操作浏览器窗体以及操作浏览器中载入的xhtml文档。

所以，使用javascript，主要就是使用js的基本语句以及BOM和DOM提供的对象的属性和方法，来操作各个BOM对象的属性以及各个DOM节点的属性甚至是结构，从而控制浏览器窗口行为和文档内容及其展示。

------------------------JavaScript这个东西，一开始上手觉得没什么，主要用来美化页面而已；但是随着对Web 开发的理解更加深入，尤其是对Web 2.0下开发的接触渐多，便会发现JavaScript其实是个十分有用的语言。

第6章 BOM 教学设计

1.开发背景
用户执行一个操作后，显示执行结果，在页面中停留5秒，然后自动跳转到其他页面。
2.开发思路
通过定时器和location来实现跳转功能。
3.代码编写
四、知识巩固
（1）回顾上课前的学习目标，对本节课知识点进行总结。
（2）使用博学谷系统下发课后作业。
第三学时
（navigator对象、screen对象、动手实践：红绿灯倒计时）
演示如何获取这些信息。
注意window.open()方法打开的窗口和选项卡（Tab），FireFox和Chrome浏览器才支持口位置和大小的调整。
10.框架操作
回顾HTML中的框架的使用。
利用JavaScript来对框架进行操作。
注意JavaScript对框架操作的限制，无法读写跨域内容。
11.定时器
一、回顾上节课内容
（1）对上节课布置的作业以及学生提出的问题进习方向。
掌握navigator对象的常用属性和方法。
掌握screen对象的常用属性和方法。
掌握红绿灯倒计时案例的开发。
二、知识讲解
1.navigator对象
该对象用于获取浏览器的相关信息。
4.BOM与DOM的关系
DOM是W3C标准，是所有浏览器公共遵守的规则。而BOM是各浏览器根据DOM在各自浏览器上的实现，主要处理浏览器的窗口和框架。
区别：DOM处理网页内容，BOM与浏览器进行交互。
5.常用BOM对象介绍
document对象：即DOM对象，用来处理网页内容。
history对象：记录浏览器的访问历史记录，常用于开发前进与后退功能。
《JavaScript前端开发案例教程》
教学设计
课程名称：JavaScript前端开发案例教程

js bom函数

JavaScript的BOM函数详解在JavaScript中，BOM（浏览器对象模型）提供了许多用于与浏览器交互的对象和函数。

这些对象和函数使得JavaScript可以获取浏览器信息，操作浏览器窗口和标签页，以及处理浏览器事件等。

下面是一些常用的BOM函数：1.window.open()：打开一个新的浏览器窗口或标签页。

这个函数可以接受多个参数，包括要打开的URL、窗口名称、窗口大小等。

2.window.close()：关闭当前窗口或标签页。

需要注意的是，这个函数只能关闭由window.open()打开的窗口或标签页。

3.window.location：用于获取或设置当前窗口的URL。

这个对象包含了许多属性，例如href（完整的URL）、pathname（URL中的路径名）等。

4.window.alert()、window.confirm()、window.prompt()：这些函数用于显示对话框，分别用于显示警告框、确认框和提示框。

这些对话框可以包含文本和输入字段，用户可以在其中输入文本或选择选项。

5.window.setTimeout()、window.setInterval()：这些函数用于在指定的时间间隔后执行函数或指定的代码块。

setTimeout()只执行一次，而setInterval()则会每隔指定的时间间隔重复执行。

6.window.scrollTo()、window.scrollBy()：这些函数用于滚动窗口到指定的位置或按指定的距离滚动。

这些函数可以接受坐标参数，例如x坐标和y坐标。

7.window.resizeTo()、window.resizeBy()：这些函数用于改变窗口的大小。

resizeTo()接受一个表示新大小的参数，而resizeBy()则接受一个表示相对于当前大小的增加量或减少量的参数。

以上是BOM中常用的一些函数，它们为JavaScript提供了丰富的浏览器交互功能，使得JavaScript在网页开发中更加灵活和强大。

BOM——浏览器对象模型(Browser Object Model)

BOM——浏览器对象模型(BrowserObject Model)什么是BOM？∙BOM是Browser Object Model的缩写，简称浏览器对象模型∙BOM提供了独立于内容而与浏览器窗口进行交互的对象∙由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window ∙BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性∙BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C（WHATWG,WebHypertextApplicationTechnologyWorkingGroup——网页超文本应用程序技术工作组目前正在努力促进BOM的标准化）∙BOM最初是Netscape浏览器标准的一部分基本的BOM体系结构图能利用BOM做什么？BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。

但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象，以使得我们可以通过这个入口来使用DOM的强大功能！！！window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。

由于window是顶层对象，因此调用它的子对象时可以不显示的指明window对象，例如下面两行代码是一样的：window -- window对象是BOM中所有对象的核心。

window对象表示整个浏览器窗口，但不必表示其中包含的内容。

此外，window还可用于移动或调整它表示的浏览器的大小，或者对它产生其他影响。

window子对象∙document 对象∙frames 对象∙history 对象∙location 对象∙navigator 对象∙screen 对象window对象关系属性∙parent：如果当前窗口为frame，指向包含该frame的窗口的frame （frame）∙self ：指向当前的window对象，与window同意。

前端三剑客了解

前端三剑客了解⼀、HTML1、标记语⾔标记语⾔为⾮编程语⾔，不具备编程语⾔具备的程序逻辑2、html为前端页⾯的主体，由标签、指令与转义字符（实体）等组成标签：被尖括号包裹，由字母开头包含合法字符的，可以被浏览器解析的标记。

eg:系统标签，⾃定义标签指令：被尖括号包裹，由!开头的标记。

eg:<!doctype html> 转义字符：被&与;包裹的特殊字母组合或#开头的⼗进制数。

eg:< >  v_hint：转义字符3、html发展史代表版本① html1：在1993年6⽉作为互联⽹⼯程⼯作⼩组（IETF）⼯作草案发布（并⾮标准）② html2：1995年11⽉作为RFC 1866发布，在RFC 2854于2000年6⽉发布之后被宣布已经过时③ html3.2：1997年1⽉14⽇，W3C推荐标准④ html4.0：1997年12⽉18⽇，W3C推荐标准⑤ html4.01(微⼩改进)：1999年12⽉24⽇，W3C推荐标准⑤ html5：2014年10⽉28⽇，W3C推荐标准(h5草案的前⾝名为Web Applications 1.0。

于2004年被WHATWG提出，于2007年被W3C接纳，并成⽴了新的HTML⼯作团队。

在2008年1⽉22⽇，第⼀份正式草案发布。

)4、⽂档类型<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/TR/html4/strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html>⼆、CSS1、标记语⾔标记语⾔为⾮编程语⾔，不具备编程语⾔具备的程序逻辑2、css为前端页⾯的样式，由选择器、作⽤域与样式块组成选择器：由标签、类、id单独或组合出现作⽤域：⼀组⼤括号包含的区域样式块：满⾜css连接语法的众多样式3、css发展史代表版本① 1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。

Javascript知识点汇总

HTML概要知识点梳理一、了解HTML的概念HTML是超文本标记语言，他是随着阅读器（IE 谷歌）的进展而诞生出来的一种标记语言，是一种用来制作超文本文档的语言。

（注意：他并非是一种编程语言列如：c c++ vb.........）.明白得：所谓标记语言咱们能够把它明白得为一中符号标记，不同的符号有着不同成效。

超文本：包括声音，图片，影视等等。

二、熟练把握HTML的文档结构。

那个地址需要注意的地址<head> <title></title> </head>假设题目标签书写错误解致使文档无法显示。

（尽管阅读器此刻能够自动补全代码）3、标签的分类块记标签：<p></p> <h1></h1>....<h6></h6><ol> <ul> （常常利用与带有列表的数据或菜单）<li></li> <li></li></ol> </ul><dl> （常常利用数据描述）<table> （常与大数据|表单布局场合）<dt></dt> （题目）<tr><dd></dd> （内容）<td colspan="2"|rowspan="4"></td> (跨行列归并)</tr></dl> </table<div></div> (常常利用与页面布局)<hr/> (绘制一条水平线一样用于网页脚部)<form></form>(用于表单数据)<a hrfe = “#”></a> (超链接| 锚链接)行级标签：<img src = “”alt = “提示文字”title = “提示文字”></img><span></span> (用于改变某个单一字体的样式)<br/>（换行）把握灵活运用实际开发中常常利用的4中布局结构：一、div-ul(ol)-li ：常常利用于分类导航或菜单等二、div-dl-dt-dd ：常常利用于图文混编的场合3、table-tr-td ：常常利用于图文布局或显示数据4、form-table-tr-td：常常利用于布局表单注意编写适应：一、标签名和属性名称尽可能小写（属性值具有语义化）二、HTML标签必需成对显现。