Downton97

HTML、CSS、JavaScript基础知识

一、Web前端

1、Web前端包括：PC端页面、移动端页面

2、Web前端解决的问题：解决用户体验的问题

1）优美的界面展示；

2）良好的用户交互体验

二、认识网页

1、网页主要由文字、图片、按钮等元素组成，还可包含音频视频及Flash等。

三、Web标准

1、W3C 万维网联盟组织：用来制定web标准的机构

2、Web标准：制作网页要遵循的规范

3、Web标准规范分类：结构标准（相当于人的身体骨骼）、表现标准（相当于人的衣服）、行为标准（相当于行为）

4、结构：html

表现：css

行为：javascript

5、网页制作三剑客：HTML（制作网页）、CSS（美化网页）、JS（让网页动起来）

四、浏览器

1、浏览器是网页运行的平台，常用的有IE、火狐、谷歌、Safari、Opera等。

五、浏览器与服务器

1、请求与响应

浏览器通过http协议向服务器发出请求，服务器接收请求并作出响应，将结果返回给浏览器。

六、URL

1、http协议：超文本传输协议，浏览器和服务器端的网页传输数据的约束和规范。

2、url协议：平时写的网址就是url地址，规定url地址的格式。

3、scheme：//host.domain:port/path/filename

1）scheme：定义因特网服务类型，常见的是HTTP

2）host：定义域主机

3）domain：定义因特网域名

4）：port ：定义端口号，网页默认端口号为80

5）path：网页在服务器的路径

6）filename：文件名称

七、HTML语言

1、HTML简介

html（Hyper Text Markup Language）超文本标记语言，主要是通过html标记对网页中的文本、图片、声音等内容进行描述。

Html之所以称为超文本标记语言，不仅是因为它通过标记描述网页内容，同时也因为文本中包含了“超级链接”，通过超链接可以实现网页的跳转，从而构成了丰富多彩的Web页面。

2、HTML结构

3、HTML基本文档格式

1） – html根标签

称为根标记，告诉浏览器这是一个网页文件，标志着html文档的开始，标志着文档的结束，在他们之间的是文档的头部和主体内容。

“en”表示告诉搜索引擎语言为english ，“cn”为中文。

2）-head头标签：用于定义HTML文档的头部信息，标记网页的头部、声明信息，如编码格式、标题、搜索引擎搜索关键字、使用的链接文字等，紧跟在标记之后。一个html文件只能有一个head标签。

3）-title 网页的标题，定义在标签之中

基本格式：网页名称

4）-body 主体标签：具体显示在网页中的内容（文字、图片、按钮、音频视频等）一个html文档只能有一对标记，且必须位于之中，之后。

4、HTML基本文档标签之间的关系

嵌套关系（父级和子级）、并列关系（类似兄弟间的关系）

5、HTML标签分类

1）双标记

双标记也称体标记，是指由开始和结束两个标记组成的标记，基本语法格式：<标记名>

2）单标记

<标签名 />

6、HTML特殊标记

空格符：

小于号：<

大于号：>

和号：&

人民币：¥

版权：©

注册商标：®

摄氏度：°

正负号：±

乘号：×

除号：÷

平方二：²

立方三：³

7、具体的标签

1）字体标记（了解）

_下标

^上标

~~画线删除~~

由于开发HTML文档中标签语义化的规范，不通过html来设置字体的大小、粗细等，一般用CSS设置。

标签语义化：关于语义（Semantics）和默认样式的区别，默认样式是浏览器设定的一些常用tag的表现形式，语义化的主要目的就是让大家直观的认识标签（markup）和属性（attribute）的用途和作用。是HTML5的重要革新之一。

语义化网页的好处：有良好的结构和语义，容易被搜索引擎抓取。

2）特殊标记（转义字符）

空格：；

大于：>；

小于：<；

版权©：©；

商标®：®；

乘号：×；

除号：÷；

3）无序清单

list-style-type属性常用取值：square（实心方块）、circle（空心小圈）、disc（默认）、none。

4）有序清单

start属性，设置属性开始的位置（无论type是什么类型start都是第几个，用数字形式设置例：type=“A” start=“5”）；

type属性，设置排序的类型；

5）图片标签

src属性：设置显示的图片。取值：图片网址、图片的存储路径（HTML文档与图片的存储层级：上一级目录存储：../文件夹名/图片名；下一级目录存储：/文件夹名/图片名；同一级目录：图片名）、图片的绝对路径(E://………..)

alt属性：当图片无法显示时出现的代替文字；

title属性：当鼠标悬停在图片上时显示的文字；

图片的命名规范：（多设备兼容、跨平台使用）全小写字母，可以有数字但尽量不要用数字开头，多个单词使用下划线分开。

6）超链接标签

href属性：设置超链接跳转的位置或网页；还有一个锚点的功能

name属性：设置锚的名称，用href=“#name”跳转

target属性：在何处打开目标网页

 _blank：浏览器总在一个新打开、未命名的窗口中载入目标文档；

 _self：默认值，使得目标文档载入并显示在相同的框架或者窗口中作为源文档，这个目标是多余且不必要的，除非和文档标题标签（该标签为网页上的所有链接规定默认地址或默认目标）中的target属性一起使用；

 top:使得文档载入包含这个超链接的窗口，用_top目标会清除所有被包含的框架并将文档载入整个浏览器窗口；

 parent:使得文档载入父窗口或者包含该超链接引用的框架的框架集。如果这个引用是在窗口或在顶级框架中，那么他与_self等效；

 _search:在浏览器的搜索区装载文档（这个功能只能在IE5或者更高版本中适用）。

7）表格标签

标签定义HTML表格。简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。至少包含
标签、和标记之后，一般包含网页底部的企业信息等。
h、
用于定义表格的主体，位于

a、
b、
用于定义表格的页脚，位于
表头（在线外），必须紧跟在标签之后，且一个table只有一个
c、
元素定义表格行
d、



//行表头
或者：



//列表头
e、
用于定义表格的头部，必须位于

元素定义表头（在线内），加粗且居中。

使用方法：
… …

… …

标记之中，一般包含网页的logo和导航等头部信息。

f、
元素定义表格单元

g、
标记之中，

标记之中，标记之后，一般包含网页中除头部和底部之外的其他内容。

表格的属性：border：表格的宽度（默认为0，没有边框）

 cellpadding：单元格填充（文字与边框的间距）

 cellspacing：单元格间距

 bgcolor：背景颜色（适用于table与td）

 frame：框架属性，规定外侧边框的哪个部分是可见的（取值：void：不显示外侧边框、

below：显示下部的外侧边框、

hsides：显示上部和下部的外侧边框、

vsides：显示左边和右边的外侧边框、

lhs：显示左边的外侧边框、

rhs：显示右边的外侧边框、

box、border：在所有四个边上显示外侧边框）

align：文字对齐方式

8）表单
（用于向服务器提交信息）

name属性：定义表单的名称

method属性：定义表单结果从客户端传到服务器的方式，POST方法、GET方法；默认参数为get

action：用来指定表单处理程序的位置（服务器端脚本处理程序）

fieldset：把表单分组

legend：分组名称

标签：

type属性：text：文本框

 radio：单选按钮（name属性值相同为一组）

 file：文件域，上传文件

 password：密码

 checkbox：复选框

 button：普通按钮

 submit：提交按钮

 reset：重置按钮

 image：图像形式的提交按钮

 hidden：隐藏域

 name属性：控件的名称

 value属性：input控件中的默认文本值

 size属性：正整数，input控件在页面中的显示宽度

 readonly属性：取值为readonly时，控件内容为只读

 disabled属性：取值为disabled时，第一次加载页面时禁用该控件（显示为灰色）

 checked属性：取值为checked时，定义选择控件默认被选中的项

 maxlength属性：正整数，定义控件允许输入的最多字符数

9）文本域

 rows属性：限制行数 cols属性：设定每行字符数（相当于宽度） 10） 下拉选 <select> <option> </option> <option> </option> </select> select的属性： name属性：选择菜单的名字； disabled属性：可用或禁用； multiple属性：规定可选择多个选项； size属性：规定可见选项的数目； option的属性：selected：取值selected表示被选中 11） 下拉组选 <select> <optgroup label=”haha”> <group> </group> <group> </group> </ optgroup> <optgrouplabel=”hehe”> <group> </group> <group> </group> </ optgroup> </select> label属性：组名； 12）<meta>标签 属性有两种：name和http-equiv； name属性主要用于描述网页，对应于content（网页内容） a.<meta name=”Generator”content=””>用以说明生成工具 b.<meta name=”keywords”content=””>向搜索引擎说明网页的关键词 c.<meta name=”description”content=””>告诉搜索引擎本站点的主要内容 d. <meta name=”author” content=”你的名字”>告诉搜索引擎站点的制作者 e. <meta name=”robots”content=”all|none|index|noundex|follow|nofollow”>其中的属性设置如下： 设定为all：文件将被检索，且页面上的链接可以被查询； 设定为none：文件将不被检索，且页面上的链接不可以被查询； 设定为index：文件将被检索； 设定为follow：；页面上的链接可以被查询； 设定为nofollow：文件将被检索，页面上的链接不可以被查询； 设定为noindex：文件将不被检索，但页面上的链接可以被查询； http-equiv属性： <metahttp-equiv=”Content-Type” contect=”text/html” charset=”gb2312”> <metahttp-equiv=”Refresh” contect=”5” url=””>网页重定向 8、link标签 1）引用外部CSS 例：<linkrel=”stylesheet” type=”text/css” href=”” /> 2）引用title图片(icon) 例：<linkrel=”icon” href=”1.icon”> 9、script标签 引用外部JS代码。例：<script type=”text/javascript” src=””></script> 10、 字符集（charset） 1）utf-8：是目前最常用的字符集编码方式 2）gb2312：简单中文 3）GBK：包含全部中文字符繁体 4）BIG5：繁体中文 5）UTF-8：包含全世界所有国家需要用到的字符 11、 标签语义化 概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化） 意义：内容结构合理；有利于seo和搜索引擎建立良好沟通；方便其他设备解析；便与团队开发和维护 SEO（Searching Engine Optimization，搜索引擎优化）：指对网站进行站内优化和修复（网站Web结构调整、网站内容建设、网站代码优化和编码等）和站外优化，从而提高网站的网站关键词排名以及公司的产品曝光度 12、 如何做到标签语义化 1）尽可能少使用无语义标签<div>和； 2）在语义不明显时，即可以使用<div>或者时，尽量用，因为在默认情况下有上下间距，对兼容特殊终端有利； 3）不要使用纯样式标签，如b、font等，改用CSS设置； 4）需要强调的文本，可以包含在或标签中，默认样式是加粗（不要用）,是斜体（不要用） 八、CSS语言 1、CSS的起源：Web的衰落、一片混乱（HTML是一个结构化语言，但又开始描述外在表现）。在Web早期（1990-1993），html是一个很局限的语言，只能描述网页结构化元素，但随着万维网的出现（用户交互体验的加强），对html的要求越来越多，迫于压力，html开始出现等标签，但是html是一种结构化语言，也开始描述外在表现了，几年之后这种随便的做法暴露出严重的问题：由于html既写结构又写样式，导致页面缺乏结构性，降低了网页的可访问性；页面维护越来越困难。 CSS（Cascading Style Sheets 层叠样式表），与html相比，CSS支持更丰富的文档外观，CSS可以为任何元素的文本和背景设置颜色；允许在任何元素外围设置边框，允许改变文本的大小、装饰（如下划线），间隔，甚至可以确定是否显示文本。 2、什么是CSS 层叠样式表 Cascading Style Sheets，用来设置外观显示样式，控制页面布局和样式，以HTML为基础提供了丰富的功能，可以针对不同的浏览器设置不同的样式。CSS就是控制页面布局和样式。 3、HTML与CSS关系 HTML结构层：负责从语义的角度搭建页面结构 CSS表现层：负责从审美的角度美化网页 4、CSS语法结构 选择器{ 属性：值； 属性：值； } 5、选择器 1）选择器：实现CSS对HTML页面样式的控制，如果要让这些样式对HTML页面中的元素一一对应，实现一对一或一对多的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。 2）选择器的分类 基础选择器：标签选择器、ID选择器、类选择器； 复合选择器：后代选择器、子元素选择器、相邻兄弟选择器、属性和值选择器； 6、如何编写CSS文件 行内样式（内联式）、内嵌、外部式 7、标签选择器 就是html中的标签 CSS简单属性：width、height、color、background-color、font-size 8、类选择器 对HTML标签中的class属性进行选择，选择符是“ . ”。 一个标签中的class属性可以写多个类，不同的类用空格隔开,即多类选择器，例： 9、ID选择器 ID选择器和类选择器用法基本一样，区别是在同一个HTML页面中不能有相同的ID名称（使用相同的ID选择器浏览器不会报错，但是不符合W3C标准了，所以ID选择器必须要有唯一性）。ID选择器的选择符是“#” 10、 ID选择器与类选择器的区别 1）类选择器，可被多个标签使用； 2）ID选择器，具有唯一性，只能被单个标签使用； 3）类选择器可以结合使用，ID选择器不能； 4）一般多使用类选择器，但若是要结合JS使用，则用ID选择器 11、 通配符选择器 通配符选择器用“*”表示，是所有选择器中使用最广的，能匹配页面中所有的元素 例：*{ font-size：20px； } 12、 选择器的命名 常见结构命名：头header、内容content/container、尾footer、导航nav、侧栏sidebar、标志logo、广告banner、页面主体main。 规范：最好不用汉字、拼音及html标签去命名一个选择器；不能用数字开头；在名称内部可以出现特殊符号，如下划线和中横线 13、 CSS常用属性 <table border="1"> <tbody> <tr> <td valign="top">Width</td> <td valign="top">宽</td> </tr> <tr> <td valign="top">Height</td> <td valign="top">高</td> </tr> <tr> <td valign="top">Color</td> <td valign="top">前景色，一般用于设置文字颜色</td> </tr> <tr> <td valign="top">Background-color</td> <td valign="top">背景色</td> </tr> <tr> <td valign="top">Font-size</td> <td valign="top">字体大小，单位为px像素</td> </tr> <tr> <td valign="top">Text-align</td> <td valign="top">设置位置，取值：center、left、right等</td> </tr> <tr> <td valign="top">Font-family</td> <td valign="top">设置字体样式</td> </tr> <tr> <td valign="top">Font-weight</td> <td valign="top">设置字体加粗，normal默认，bold加粗</td> </tr> <tr> <td valign="top">Font-style</td> <td valign="top">设置字体风格，normal默认，italic斜体</td> </tr> </tbody> </table> 14、 元素标签分类 HTML中根据显示模式不同，将标签分为几类：块级标签、行内标签、行内块标签。 15、 块级标签 在HTML中div、p、h1-h6、form、ul、li等是块级标签。 特点：独占一个自然段。 1）一个块级元素独占一行； 2）元素的高度、宽度、行高及边距（外边距不计入宽度）都可设置； 3）在不设置宽度的情况下，为充满父容器（即父容器宽度的100%），除非设定一个宽度。 16、 行内元素 在html中a、span、br、i、em、strong、label等等属于行内元素。 行内元素三大特点： 1）和其他元素在同一行内； 2）元素的高度、宽度、行高及顶部和底部边距（外边距不计入宽度）都不可设置； 3）元素的宽度就是他包含的文字或图片的宽度，不可改变 17、 行内元素转换为块元素 行内元素不可设置上下边距，但可以转换为块级元素： display：block； 转换之后就可以设置元素的高度、宽度、行高及边距等。 18、 行内块元素（inline-block） html中<img>、<input>标签就是这种内敛块标签。 特点：同时具有内联元素、块状元素的特点。 19、 行内元素转行内块元素 display：line-block；行内元素转行内块元素； display：inline；转换为行内元素 20、 div与span 无语义标签，没有具体的含义和样式。 div：可以理解为一个容器，如果想对网页中某一些元素组成一个区域整体去设置CSS样式，可以将这些元素放入一个容器div中。 span：文字，如果有一些文字没有任何标签包裹进行说明描述，想要对其设置CSS样式，通过span包裹文字，设置类或ID选择器进行设置。 21、 CSS语法合写 1）文字属性合写 语法： 选择器{ font：font-style font-weightfont-size/line-height font-family } 必须按照顺序去写，必须设置字体大小和字体 22、 复合选择器 复合选择器室友是由两个或多个基础选择器通过不同的方式组合而成。具体有标签指定式选择器、后代选择器（包含选择器）、并集选择器 23、 标签指定式选择器 标签制定式选择器（既…又…），又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为类选择器或ID选择器，两个选择器之间必须有空格。例：h3 .class1 、h3 #id1。 24、 后代选择器（使用广泛） 后代选择器（也叫包含选择器），用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分开，当标记发生嵌套时，内层标记就成为外层标记的后代。例：.title input{} 25、 并集选择器 使用逗号“，”隔开多个选择器，对多个标签进行统一的设置，可以是具体的标签，也可以是ID和class。任何形式的选择器都可以作为并集选择器的一部分。 26、 专门用于input的选择器 通过type去区分每个input标签。 语法：input[type=button]{…} (没有空格！！！) 27、 样式分类 1）内联式（行内样式） 不可重用，作用于当前行，一般只用于个人学习和测试。 2）内嵌式 写在head标签中，定义style 3）外联式 单独定义CSS文件，通过link连接。 28、 CSS特性 1）层叠性：所谓层叠性是指多种CSS样式的叠加（不冲突就可叠加） 2）继承性： 29、 CSS优先级 内联样式 > ID选择器 >类选择器 > 标签选择器 内联样式的优先级最高，ID选择器的优先级仅次于内联样式，类选择器优先级低于ID选择器，标签选择器低于类选择器。 30、 CSS伪类 :link{属性：值} 链接默认状态； :visited{属性：值} 链接访问之后的状态； :hover{属性：值} 鼠标放到链接上显示的状态； :active{属性：值} 链接激活的状态； :focus{属性：值} 获取焦点 31、 背景background background-color 设置背景颜色； background-image 设置背景图片；例：background-image：url(url地址)； background-repeat 设置背景平铺，取值：no-repeat不平铺 repeat-x横向拉伸，repeat-y纵向拉伸； background-position 设置背景位置，取值：left、right、center、top、bottom； background-attachment 设置背景是否固定 背景连写格式：没有先后顺序，都是可选的。 background：red url(“1.jpg”) no-repeat 30px 40px scroll; 32、 CSS行高 CSS行高：浏览器默认字体行高 1）浏览器默认的字体大小：16px 2）浏览器默认的字体行高：18px 3）行高=上边距+字体大小+下边距 行高单位： 1）px（像素） 2）em（字符）=文字大小*行高值 3）% 4）无 33、 CSS盒子模型 所谓盒子模型就是把HTML页面中的元素看做一个矩形的盒子，也就是一个盛装内容的容器，每个矩形都有元素的内容、内边距（padding）、边框（border）和内边距（margin）组成。 行内元素上下margin和padding会被忽略，左右margin和padding会起作用。 1）边框 border 语法： border：border-width(宽度) border-style(边框的样式) border-color(边框的颜色) 常用边框样式：dotted 圆点 dashed 长方形点 solid 描边实线 double 双线 padding:10px; 上下左右距离都为10px padding:10px 40px; 上下10px，左右40px padding:10px 40px 20px; 上10px，左右40px，下20px padding:10px 20px 30px 40px; 上、右、下、左 margin同 margin:0 auto auto设置为相对边的值（常用于居中） 34、 CSS布局 1）float 浮动 float：left/right 浮动的特点： a、浮动找浮动，不浮动找不浮动； b、浮动只影响后面的元素； c、浮动以元素顶部为基准对齐； d、浮动可实现模式转换（span设置浮动可以设置宽高）； e、让块级元素在一行显示 2）clear属性 规定元素的哪一侧不允许其他浮动元素 取值：left：在左侧不允许浮动元素 right：在右侧不允许浮动元素 both：在左右两侧均不允许浮动元素 none：默认值，允许浮动元素出现在两侧 3）margin外边距的总结 a、 margin：设置四个方向的外边距 margin：top right bottom left； b、对上右下左四个方向分别设置 margin-top，margin-right，margin-bottom，margin-left c、 margin：20px 20px； 第一个20px代表上下，第二个20px代表左右 d、margin：20px auto； auto表示自适应，类似于在父容器居中 35、 新人快速工作方法总结（画网站） 1）不要拿来就做，要思考，规划； 2）根据原型图做出模块分布图； 要设计好结构（多思考会出现的冲突） 为每一个模块做好命名，规划等； 3）将每个模块以border或背景的形式展示出来 4）具体的填充每一个模块 36、 原型图 一般由设计/美工使用ps制作，根据产品需求设计界面，在原型图中要规定出颜色、大小、位置等信息，必要图标要单独切图。 开发人员根据项目原型图去设计完成代码。 37、 overflow的使用 overflow属性规定当内容溢出元素框时发生的事情。 1）overflow：visible 默认值，内容不会被修剪，会呈现在元素框之外； 2）overflow：hidden 内容会被修剪，并且其余内容是不可见的； 3）overflow：scroll 内容会被修剪，但浏览器会显示滚动条以查看其余的内容； 4）overflow：auto如果内容被修剪，浏览器会显示滚动条以查看其余的内容 38、 定位position 1）定位分类 static：静态定位，默认值，没有定位，元素出现在正常的流中（忽略top、bottom、right、left或者z-index声明）支持padding、margin、float等属性。 absolute：绝对定位 relative：相对定位，以自身位置为基准进行定位。 fixed：固定定位 2）绝对定位 absolute a、绝对定位以浏览器左上角为基准设置； b、当一个盒子包含在另一个盒子中，父盒子未设置定位，子盒子以浏览器左上角为基准设置位置；当父盒子设置定位，子盒子以父盒子左上角为基准设置位置 c、绝对定位绝对不占空间位置（与浮动一样） d、绝对定位可以实现模式转换 3）相对定位 a、相对定位以自身位置为基准设置位置 b、相对定位占位置 c、一般子元素设置相对定位 4）固定定位 固定定位不占位置，都是以浏览器为参考进行定位的。 九、JavaScript（JS）语言 由网景公司（NetScape）在1995年发布 1、特点： 1）借鉴C语言的基本语法； 2）借鉴Java语言的数据类型和内存管理； 3）借鉴Scheme语言将函数提升到“第一等公民”（first class）的地位； 4）借鉴Self语言，使用基于原型（prototype）的继承机制 借鉴了众多语言，为了让JS可以让更多人熟悉，可以很快地上手开发。 2、面试提升的知识点 1）面向过程与面向对象 面向对象：封装、继承、多态 封装和继承都是为多态服务的，几乎半数以上的设计模式都是针对多态操作的。 2）封装的实现 类（set/get方法）、内部类、抽象类、使用继承建立连接关系、接口、枚举、泛型、反射等，尽量减少类型的出现；类型数量减少，内部建立连接关系，高内聚，从而达到少而精的目的。 最终目的：修改和维护更加方便，内存的管理更加轻松。 架构设计 在Java中通过多态简化类型的概念，让某个类具有多种表现形态。 JavaScript弱化了Java的强类型概念，JS是弱类型的语言，var可以代表所有类型 3）内存管理 Java的弱引用、强引用、虚引用、软引用，都是针对垃圾回收机制，操作垃圾回收机制操作内存 采取某种引用机制，当对象不被使用时，会根据引用机制判断去采取垃圾回收，将该对象占据的内存空置出来。 3、认识JavaScript 1）JavaScript是一种网页编程技术； 2）JavaScript是一种基于对象和事件驱动，并具有安全性能的脚本语言； 3）JavaScript可以被嵌入到HTML文件中，不需要经过Web服务器就可以对用户操作作出响应 4、JavaScript的组成 ECMAScript：JavaScript的语法标准； DOM：JavaScript操作网页上的元素的API（JS操作HTML）文档对象模型； BOM：JavaScript操作浏览器的部分功能的API（JS操作浏览器：浏览历史、打开新窗口、书签等）浏览器对象模型 5、JavaScript的特点 1）简单易用 可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序 2）解释执行（解释语言） 事先不编译，逐行执行，无需进行严格的变量声明 3）基于对象 内置大量现成对象，编写少量程序可以完成目标 6、JavaScript的使用范围 客户端数据计算、客户端表单合法性验证、浏览器对象的调用、浏览器事件的触发、网页特殊显示效果制作。 7、JavaScript语法规范 1）与CSS类似，嵌入HTML的<head>标签； 2）单独文件，在<head>标签中引用； 8、通过JS代码向HTML文档中写入文字 1）document.write() document指的是当前HTML文档 2）有两个div，分别向里面写文字 步骤： a、为div设置ID； b、在JS代码（写在body标签中，用<script></script>标签括起来）中通过documen.getElementById的方式获取到div对象； c、innerHTML（覆盖、替换）：单独写入文字，也可写入HTML标签 innerText（覆盖、替换）：写入文本内容 3）外部链接JS文件 <script src=”地址”></script> 9、JS执行原理 html页面中出现<script>标签，就会让页面暂停等待脚本的解析和执行，无论当前脚本是内嵌式还是外联式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续，这在页面的生命周期中是必须的。 10、 通过JS与网页进行交互 1）警告框alert a、直接弹出 alert（“直接弹出”）； 会根据浏览器的不同显示出不同的样式 b、结合点击事件出现 步骤：定义标签，设置ID；在JS代码中提供点击函数；在标签描述中设置点击事件onclick为该点击函数。 2）confirm()函数 确认函数：点击确定返回true，点击取消，返回false。 3）prompt（）函数 输入函数 点击确定，返回值为输入内容；点击取消，返回null。 判断是否输入了用length属性,length为0则没输入。 11、 命名规范 1）变量名必须以字符或者下划线”_”开头，变量可以包含数字、从A至Z的大小字母； 2）JavaScript严格区分大小写； 3）禁止使用JS的保留关键字作为变量名 12、 JavaScript中的数据类型 （Java有八大基本数据类型：int、short、long…） 简单（基本、值）数据类型：Number、String、Boolean、Undefine、Null； 复杂（引用）数据类型（暂时了解）：Object、Array、Data等 13、 查看当前变量的数据类型 typeof name typeof（name） NaN：Not a Number不是一个数； isNaN(x)：判断是不是一个数时使用； 14、 数字类型转换 1）将数字类型转换为字符串类型： 隐式类型转换； 强制类型转换：String()，变量.tostring() 2）将字符串转换为数字类型 隐式类型转换； 强制类型转换：Number()，Number.parseInt()，Number.parseFloat() 转换过程中哪里出错哪里停止 例：Number.parseInt(“123123aa12”)，结果为123123 3）将其他数据类型转换为Boolean类型 数字0转换为false 15、 逻辑运算符 1）&&：逻辑与，一假即假； ||：逻辑真，一真即真； ！：逻辑非，当前结果取反 2）逻辑运算符的短路问题： A与B，A为false，B不执行； A或B，A为true，B不执行 3）&与&&、|与||的区别 &&与||具有短路的功能 4）与、或、非运算的优先级 非 > 与 >或 ！> & > ^ > | > && > || 16、 等号运算符，逗号运算符 == ：等于，比较的是内容； === ：全等，比较的是内容和数据类型； ！= ：不等于，判断的是内容； ！== ：不全等于，比较的是内容和数据类型 17、 函数 函数就是可重复执行的代码块。 JS中没有重载 1）函数的两种定义方式 2）匿名函数 18、 BOM（Browser Object Model浏览器对象模型） 1）window对象：是JavaScript中的顶级对象，所有定义在全局作用域中的对象都会变成window对象的属性和方法。window对象下的属性和方法调用的时候可以省略window。 2）系统对话框 警告框alert（）；不同浏览器的外观是不一样的 确认框confirm（）； 输入框prompt（）； 3）window的方法 a、打开窗口window.open(url,target,param) url 要打开的地址； target 新窗口的位置，取值：_blank、_self、_parent; param 新窗口的一些设置 返回值：新窗口的句柄 b、window.close（）关闭 c、window.onload() 在页面加载完成之后自动执行 19、 a标签的操作 1）打开新窗口 <a href = “#”onclick = “openNewWin()”></a> functionopenNewWin(){ window.open(“index.html”,”_blank”); } 2）图片切换 <a href = “#”onclick = “fun()”>切换图片</a> <img id =“image” src = “1.jpg” /> <script> var image = document.getElementById(“image”); function func(){ image.src = “2.jpg”; } </script> 20、 定时器 1）循环执行（等待时间过去之后执行） var timerId =setInterval(code, interval); clearInterval(timerId); 间隔时间执行，不是特别精确。 参数1：执行的代码，可以是function函数； 参数2：间隔的时间，毫秒为单位 2）定时执行（立刻执行） var timerId =setTimeOut(code, interval); clearTimeOut(timeId); 21、 JS获取html标签对象的方式 1）document.getElementById(“id”); 2）document.getElementsByTagName(“TagName”); 若同时有几个标签，则返回一个数组，通过索引访问。 例：document.getElementsByTagName(“button”)[0]; 3）document.getElementsByClassName(“ClassName”); 同TagName，返回的是数组 4）document.getElementByName(“Name”); 通过name属性获取 22、 动态灵活的onclik设置方式 1）匿名函数 xx.onclick =function(){//点击事件的代码…}; 23、 location对象 window.location 相当于浏览器的地址栏，可以将url解析成独立的片段。 属性：href hash：返回url中#后面的内容，包括# host：主机名，包括端口 hostname：主机名 pathname：url中的路径部分 protocol：协议，一般是http、https search：查询字符串 通俗：在JS代码中想要获取访问网址的主机，端口号，协议，搜索字段等，通过location获取 用户统计分析（产品统计数据） 例：window.location.host 24、 location对象的方法 1）location.assign()：改变浏览器地址栏的地址，并记录到历史中（设置location.href就会调用assign()，一般使用location.href进行页面的跳转） 2）location.replace()：替换浏览器地址栏的地址，但不记录到历史中 3）location.reload()：重新加载 25、 navigator对象 window.navigator 获取客户端的信息，如浏览器型号、操作系统型号 例：window.navigator.platform（浏览器支持的系统）; window..navigator.userAgent（系统，浏览器） 26、 history对象 历史记录、历史记录管理 1）后退 history.back() history.go(-1) 0是刷新 2）前进 history.forword() history.go(1) 27、 DOM（document Object Model文档对象模型） 又称文档树模型，是一套操作HTML与XML文档的API。DOM可以把HTML和XML描述为一个文档树，树上的每一个分支都可以视为一个对象，通过DOM可以添加、修改和移除文档上的一部分。 document对象：指HTML或XML文件 节点（Node）：HTML文档中的所有内容都可以称之为节点 元素（Element）：HTML中的标签可以称之为元素 文档元素（根元素）：文档中的第一个元素，HTML文档中的文档元素就是<html> 文本节点： 属性节点： 28、 DOM可以做什么 1）找对象（元素） 2）设置元素（标签）的属性和样式 a）设置样式：xx.style.position等 b）设置属性：img.src等 3）动态创建和删除元素 4）事件——触发响应 a、事件源（事件的触发者） b、事件名称 c、事件响应程序 29、 DOM对象的属性 DOM对象的属性和HTML的标签属性几乎是一致的，例：src、href、className、title innerHTML：会把内容解析到DOM树上 获取标签之间的内容、设置标签之间的内容 innerText（FF中textContent）：会对内容转义 获取标签之间的内容、设置标签之间的内容 30、 replace()方法 xx.xxx.replace(原属性，替换的属性) 31、 事件 JavaScript是事件驱动的。事件源、事件名称、事件处理程序 1）鼠标事件 onclick ondbclick onmusedown onmouseup onfocus onblur onchange（文本内容或下拉菜单中的选项发生变化） onmouseover（鼠标悬停） onmouseout（鼠标移出） 事件对象的属性: clientX/clientY：窗口位置，所有浏览器都支持 pageX/pageY：页面位置 screen/screenY：屏幕位置 shiftKey/ctrlKey/altKey：同时按下组合键 2）键盘事件 onkeyup onkeydown onkeypress 事件对象的属性： keyCode：键盘码，只有数字和字母对应ASCII charCode：对应ASCII码，只有keypress才有效 3）其他事件 onload（网页文档加载事件） onunload（网页关闭） onsubmit（表单提交） onreset（重置表单） 32、 动态创建元素的三种方式 1）document.write() 2）innerHTML() 3）createElement() appendChild() removeChild() insertBefort() replaceChild() </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1175201641079582720"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> igotyback <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> 加密社 <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> 苹果酱0567 <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> 2401_85194651 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835428317084348416.htm" title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a> 全能全知者 <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div> </li> <li><a href="/article/1835427057752961024.htm" title="补充元象二面" target="_blank">补充元象二面</a> Redstone Monstrosity <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> jun778895 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> Redstone Monstrosity <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835398064727224320.htm" title="前端代码上传文件" target="_blank">前端代码上传文件</a> 余生逆风飞翔 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div> </li> <li><a href="/article/1835385458356482048.htm" title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a> 2401_85123349 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> 马小蜗 <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835368019430305792.htm" title="Vue + Express实现一个表单提交" target="_blank">Vue + Express实现一个表单提交</a> 九旬大爷的梦 <div>最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo</div> </li> <li><a href="/article/1835354447627251712.htm" title="前端知识点" target="_blank">前端知识点</a> ZhangTao_zata <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div> </li> <li><a href="/article/1835352325032603648.htm" title="第三十一节:Vue路由:前端路由vs后端路由的了解" target="_blank">第三十一节:Vue路由:前端路由vs后端路由的了解</a> 曹老师 <div>1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访</div> </li> <li><a href="/article/1835350917352878080.htm" title="华雁智科前端面试题" target="_blank">华雁智科前端面试题</a> 因为奋斗超太帅啦 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AF%95%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98%E6%95%B4%E7%90%86/1.htm">前端笔试面试问题整理</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l</div> </li> <li><a href="/article/1835350535818014720.htm" title="如何建设数据中台（五）——数据汇集—打破企业数据孤岛" target="_blank">如何建设数据中台（五）——数据汇集—打破企业数据孤岛</a> weixin_47088026 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95%E5%92%8C%E6%80%BB%E7%BB%93/1.htm">学习记录和总结</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E5%8F%B0/1.htm">中台</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%8F%B0/1.htm">数据中台</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi</div> </li> <li><a href="/article/1835343473629294592.htm" title="分布式锁和spring事务管理" target="_blank">分布式锁和spring事务管理</a> 暴躁的鱼 <a class="tag" taget="_blank" href="/search/%E9%94%81%E5%8F%8A%E4%BA%8B%E5%8A%A1/1.htm">锁及事务</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据</div> </li> <li><a href="/article/1835340577596600320.htm" title="前端CSS面试常见题" target="_blank">前端CSS面试常见题</a> 剑亦未配妥 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子</div> </li> <li><a href="/article/1835331376895848448.htm" title="【JS】前端文件读取FileReader操作总结" target="_blank">【JS】前端文件读取FileReader操作总结</a> 程序员-张师傅 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi</div> </li> <li><a href="/article/1835331375377510400.htm" title="【前端】vue 报错:The template root requires exactly one element" target="_blank">【前端】vue 报错:The template root requires exactly one element</a> 程序员-张师傅 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行</div> </li> <li><a href="/article/1835302949362954240.htm" title="从单体到微服务：FastAPI ‘挂载’子应用程序的转变" target="_blank">从单体到微服务：FastAPI ‘挂载’子应用程序的转变</a> 黑金IT <a class="tag" taget="_blank" href="/search/fastapi/1.htm">fastapi</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/fastapi/1.htm">fastapi</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方</div> </li> <li><a href="/article/1835296397365178368.htm" title="创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几</a> uthRaman <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</div> </li> <li><a href="/article/1835293121953492992.htm" title="了解 UNPKG：前端开发者的包管理利器" target="_blank">了解 UNPKG：前端开发者的包管理利器</a> 小于负无穷 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n</div> </li> <li><a href="/article/1835291483406692352.htm" title="前端three.js的Sprite模拟下雪动画效果" target="_blank">前端three.js的Sprite模拟下雪动画效果</a> qq_35430208 <a class="tag" taget="_blank" href="/search/three.js/1.htm">three.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E4%B8%89%E7%BB%B4%E5%9C%BA%E6%99%AF%E4%B8%AD%E4%B8%8B%E9%9B%AA%E6%95%88%E6%9E%9C/1.htm">三维场景中下雪效果</a><a class="tag" taget="_blank" href="/search/threejs%E5%AE%9E%E7%8E%B0%E4%B8%8B%E9%9B%AA%E6%95%88%E6%9E%9C/1.htm">threejs实现下雪效果</a> <div>一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add</div> </li> <li><a href="/article/1835243206963458048.htm" title="系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机" target="_blank">系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机</a> rabbit_it <a class="tag" taget="_blank" href="/search/qiankun%E5%AD%A6%E4%B9%A0/1.htm">qiankun学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E4%BA%91/1.htm">阿里云</a> <div>一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性</div> </li> <li><a href="/article/1835239047803531264.htm" title="ODOO不同版本与平台选择" target="_blank">ODOO不同版本与平台选择</a> chouchengyin2080 <a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架</div> </li> <li><a href="/article/1835221149026447360.htm" title="Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数" target="_blank">Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数</a> qcidyu <a class="tag" taget="_blank" href="/search/%E5%A5%BD%E7%94%A8%E7%9A%84%E5%B7%A5%E5%85%B7%E9%9B%86%E5%90%88/1.htm">好用的工具集合</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E6%95%88%E7%8E%87/1.htm">代码效率</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%8A%80%E5%B7%A7/1.htm">前端技巧</a><a class="tag" taget="_blank" href="/search/Vue%E5%BC%80%E5%8F%91/1.htm">Vue开发</a><a class="tag" taget="_blank" href="/search/%E7%BB%84%E5%90%88%E5%BC%8F%E5%87%BD%E6%95%B0/1.htm">组合式函数</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E5%9D%97%E7%AE%A1%E7%90%86/1.htm">模块管理</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%AF%BC%E5%85%A5/1.htm">自动导入</a><a class="tag" taget="_blank" href="/search/Nuxt/1.htm">Nuxt</a><a class="tag" taget="_blank" href="/search/Kit/1.htm">Kit</a> <div>title:NuxtKit自动导入功能：高效管理你的模块和组合式函数date:2024/9/14updated:2024/9/14author:cmdragonexcerpt:通过使用NuxtKit的自动导入功能，您可以更高效地管理和使用公共函数、组合式函数和VueAPI。无论是单个导入、目录导入还是从第三方模块导入，您都可以通过简单的API调用轻松实现。categories:前端开发tags:N</div> </li> <li><a href="/article/36.htm" title="ASM系列四利用Method 组件动态注入方法逻辑" target="_blank">ASM系列四利用Method 组件动态注入方法逻辑</a> lijingyao8206 <a class="tag" taget="_blank" href="/search/%E5%AD%97%E8%8A%82%E7%A0%81%E6%8A%80%E6%9C%AF/1.htm">字节码技术</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E4%BB%A3%E7%90%86/1.htm">动态代理</a><a class="tag" taget="_blank" href="/search/ASM/1.htm">ASM</a> <div> 这篇继续结合例子来深入了解下Method组件动态变更方法字节码的实现。通过前面一篇，知道ClassVisitor 的visitMethod()方法可以返回一个MethodVisitor的实例。那么我们也基本可以知道，同ClassVisitor改变类成员一样，MethodVIsistor如果需要改变方法成员，注入逻辑，也可以</div> </li> <li><a href="/article/163.htm" title="java编程思想 --内部类" target="_blank">java编程思想 --内部类</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E9%83%A8%E7%B1%BB/1.htm">内部类</a><a class="tag" taget="_blank" href="/search/%E5%8C%BF%E5%90%8D%E5%86%85%E9%83%A8%E7%B1%BB/1.htm">匿名内部类</a> <div>内部类;了解外部类并能与之通信内部类写出来的代码更加整洁与优雅 1,内部类的创建 内部类是创建在类中的 package com.wj.InsideClass; /* * 内部类的创建 */ public class CreateInsideClass { public CreateInsideClass(</div> </li> <li><a href="/article/290.htm" title="web.xml报错" target="_blank">web.xml报错</a> crabdave <a class="tag" taget="_blank" href="/search/web.xml/1.htm">web.xml</a> <div>web.xml报错 The content of element type "web-app" must match "(icon?,display- name?,description?,distributable?,context-param*,filter*,filter-mapping*,listener*,servlet*,s</div> </li> <li><a href="/article/417.htm" title="泛型类的自定义" target="_blank">泛型类的自定义</a> 麦田的设计者 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E6%B3%9B%E5%9E%8B/1.htm">泛型</a> <div> 为什么要定义泛型类，当类中要操作的引用数据类型不确定的时候。采用泛型类，完成扩展。例如有一个学生类 Student{ Student(){ System.out.println("I'm a student....."); } } 有一个老师类 </div> </li> <li><a href="/article/544.htm" title="CSS清除浮动的4中方法" target="_blank">CSS清除浮动的4中方法</a> IT独行者 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>清除浮动这个问题，做前端的应该再熟悉不过了，咱是个新人，所以还是记个笔记，做个积累，努力学习向大神靠近。CSS清除浮动的方法网上一搜，大概有N多种，用过几种，说下个人感受。 1、结尾处加空div标签 clear:both 1 2 3 4 .div 1 { background : #000080 ; border : 1px s</div> </li> <li><a href="/article/671.htm" title="Cygwin使用windows的jdk 配置方法" target="_blank">Cygwin使用windows的jdk 配置方法</a> _wy_ <a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/cygwin/1.htm">cygwin</a> <div>1.[vim /etc/profile] JAVA_HOME="/cgydrive/d/Java/jdk1.6.0_43" (windows下jdk路径为D:\Java\jdk1.6.0_43) PATH="$JAVA_HOME/bin:${PATH}" CLAS</div> </li> <li><a href="/article/798.htm" title="linux下安装maven" target="_blank">linux下安装maven</a> 无量 <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E8%A3%85/1.htm">安装</a> <div>Linux下安装maven(转) 1.首先到Maven官网下载安装文件，目前最新版本为3.0.3，下载文件为 apache-maven-3.0.3-bin.tar.gz，下载可以使用wget命令； 2.进入下载文件夹，找到下载的文件，运行如下命令解压 tar -xvf apache-maven-2.2.1-bin.tar.gz 解压后的文件夹</div> </li> <li><a href="/article/925.htm" title="tomcat的https 配置,syslog-ng配置" target="_blank">tomcat的https 配置,syslog-ng配置</a> aichenglong <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/http%E8%B7%B3%E8%BD%AC%E5%88%B0https/1.htm">http跳转到https</a><a class="tag" taget="_blank" href="/search/syslong-ng%E9%85%8D%E7%BD%AE/1.htm">syslong-ng配置</a><a class="tag" taget="_blank" href="/search/syslog%E9%85%8D%E7%BD%AE/1.htm">syslog配置</a> <div>1) tomcat配置https,以及http自动跳转到https的配置 1)TOMCAT_HOME目录下生成密钥(keytool是jdk中的命令) keytool -genkey -alias tomcat -keyalg RSA -keypass changeit -storepass changeit</div> </li> <li><a href="/article/1052.htm" title="关于领号活动总结" target="_blank">关于领号活动总结</a> alafqq <a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a> <div>关于某彩票活动的总结具体需求，每个用户进活动页面，领取一个号码，1000中的一个；活动要求 1，随机性，一定要有随机性； 2，最少中奖概率，如果注数为3200注，则最多中4注 3，效率问题，（不能每个人来都产生一个随机数，这样效率不高）； 4，支持断电（仍然从下一个开始），重启服务；（存数据库有点大材小用，因此不能存放在数据库）解决方案 1，事先产生随机数1000个，并打</div> </li> <li><a href="/article/1179.htm" title="java数据结构冒泡排序的遍历与排序" target="_blank">java数据结构冒泡排序的遍历与排序</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>java的冒泡排序是一种简单的排序规则冒泡排序的原理：比较两个相邻的数，首先将最大的排在第一个，第二次比较第二个，此后一样；针对所有的元素重复以上的步骤，除了最后一个例题；将int array[] </div> </li> <li><a href="/article/1306.htm" title="JS检查输入框输入的是否是数字的一种校验方法" target="_blank">JS检查输入框输入的是否是数字的一种校验方法</a> bijian1013 <a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>如下是JS检查输入框输入的是否是数字的一种校验方法： <form method=post target="_blank"> 数字：<input type="text" name=num onkeypress="checkNum(this.form)"> </form> </div> </li> <li><a href="/article/1433.htm" title="Test注解的两个属性：expected和timeout" target="_blank">Test注解的两个属性：expected和timeout</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a><a class="tag" taget="_blank" href="/search/expected/1.htm">expected</a><a class="tag" taget="_blank" href="/search/timeout/1.htm">timeout</a> <div>JUnit4：Test文档中的解释：　　The Test annotation supports two optional parameters. 　　The first, expected, declares that a test method should throw an exception. 　　If it doesn't throw an exception or if it </div> </li> <li><a href="/article/1560.htm" title="[Gson二]继承关系的POJO的反序列化" target="_blank">[Gson二]继承关系的POJO的反序列化</a> bit1129 <a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a> <div>父类 package inheritance.test2; import java.util.Map; public class Model { private String field1; private String field2; private Map<String, String> infoMap</div> </li> <li><a href="/article/1687.htm" title="【Spark八十四】Spark零碎知识点记录" target="_blank">【Spark八十四】Spark零碎知识点记录</a> bit1129 <a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a> <div>1. ShuffleMapTask的shuffle数据在什么地方记录到MapOutputTracker中的 ShuffleMapTask的runTask方法负责写数据到shuffle map文件中。当任务执行完成成功，DAGScheduler会收到通知，在DAGScheduler的handleTaskCompletion方法中完成记录到MapOutputTracker中 </div> </li> <li><a href="/article/1814.htm" title="WAS各种脚本作用大全" target="_blank">WAS各种脚本作用大全</a> ronin47 <a class="tag" taget="_blank" href="/search/WAS+%E8%84%9A%E6%9C%AC/1.htm">WAS 脚本</a> <div>　　　http://www.ibm.com/developerworks/cn/websphere/library/samples/SampleScripts.html 　　　无意中，在WAS官网上发现的各种脚本作用，感觉很有作用，先与各位分享一下　　　获取下载这些示例 jacl 和 Jython 脚本可用于在 WebSphere Application Server 的不同版本中自</div> </li> <li><a href="/article/1941.htm" title="java-12.求 1+2+3+..n不能使用乘除法、 for 、 while 、 if 、 else 、 switch 、 case 等关键字以及条件判断语句" target="_blank">java-12.求 1+2+3+..n不能使用乘除法、 for 、 while 、 if 、 else 、 switch 、 case 等关键字以及条件判断语句</a> bylijinnan <a class="tag" taget="_blank" href="/search/switch/1.htm">switch</a> <div>借鉴网上的思路，用java实现： public class NoIfWhile { /** * @param args * * find x=1+2+3+....n */ public static void main(String[] args) { int n=10; int re=find(n); System.o</div> </li> <li><a href="/article/2068.htm" title="Netty源码学习-ObjectEncoder和ObjectDecoder" target="_blank">Netty源码学习-ObjectEncoder和ObjectDecoder</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>Netty中传递对象的思路很直观： Netty中数据的传递是基于ChannelBuffer（也就是byte[]）；那把对象序列化为字节流，就可以在Netty中传递对象了相应的从ChannelBuffer恢复对象，就是反序列化的过程 Netty已经封装好ObjectEncoder和ObjectDecoder 先看ObjectEncoder ObjectEncoder是往外发送</div> </li> <li><a href="/article/2195.htm" title="spring 定时任务中cronExpression表达式含义" target="_blank">spring 定时任务中cronExpression表达式含义</a> chicony <a class="tag" taget="_blank" href="/search/cronExpression/1.htm">cronExpression</a> <div>一个cron表达式有6个必选的元素和一个可选的元素，各个元素之间是以空格分隔的，从左至右，这些元素的含义如下表所示：代表含义 是否必须允许的取值范围 &nb</div> </li> <li><a href="/article/2322.htm" title="Nutz配置Jndi" target="_blank">Nutz配置Jndi</a> ctrain <a class="tag" taget="_blank" href="/search/JNDI/1.htm">JNDI</a> <div>1、使用JNDI获取指定资源： var ioc = { dao : { type :"org.nutz.dao.impl.NutDao", args : [ {jndi :"jdbc/dataSource"} ] } } 以上方法,仅需要在容器中配置好数据源,注入到NutDao即可. </div> </li> <li><a href="/article/2449.htm" title="解决 /bin/sh^M: bad interpreter: No such file or directory" target="_blank">解决 /bin/sh^M: bad interpreter: No such file or directory</a> daizj <a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a> <div>在Linux中执行.sh脚本，异常/bin/sh^M: bad interpreter: No such file or directory。分析：这是不同系统编码格式引起的：在windows系统中编辑的.sh文件可能有不可见字符，所以在Linux系统下执行会报以上异常信息。解决： 1）在windows下转换：利用一些编辑器如UltraEdit或EditPlus等工具</div> </li> <li><a href="/article/2576.htm" title="[转]for 循环为何可恨？" target="_blank">[转]for 循环为何可恨？</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6/1.htm">读书</a> <div> Java的闭包(Closure)特征最近成为了一个热门话题。一些精英正在起草一份议案，要在Java将来的版本中加入闭包特征。然而，提议中的闭包语法以及语言上的这种扩充受到了众多Java程序员的猛烈抨击。不久前，出版过数十本编程书籍的大作家Elliotte Rusty Harold发表了对Java中闭包的价值的质疑。尤其是他问道“for 循环为何可恨？”[http://ju</div> </li> <li><a href="/article/2703.htm" title="Android实用小技巧" target="_blank">Android实用小技巧</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>1、去掉所有Activity界面的标题栏　　修改AndroidManifest.xml 　　在application 标签中添加android:theme="@android:style/Theme.NoTitleBar" 2、去掉所有Activity界面的TitleBar 和StatusBar 　　修改AndroidManifes</div> </li> <li><a href="/article/2830.htm" title="Oracle 复习笔记之序列" target="_blank">Oracle 复习笔记之序列</a> eksliang <a class="tag" taget="_blank" href="/search/Oracle+%E5%BA%8F%E5%88%97/1.htm">Oracle 序列</a><a class="tag" taget="_blank" href="/search/sequence/1.htm">sequence</a><a class="tag" taget="_blank" href="/search/Oracle+sequence/1.htm">Oracle sequence</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2098859 1.序列的作用序列是用于生成唯一、连续序号的对象一般用序列来充当数据库表的主键值 2.创建序列语法如下： create sequence s_emp start with 1 --开始值 increment by 1 --増长值 maxval</div> </li> <li><a href="/article/2957.htm" title="有“品”的程序员" target="_blank">有“品”的程序员</a> gongmeitao <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div>完美程序员的10种品质　　完美程序员的每种品质都有一个范围，这个范围取决于具体的问题和背景。没有能解决所有问题的完美程序员（至少在我们这个星球上），并且对于特定问题，完美程序员应该具有以下品质：　　1. 才智非凡- 能够理解问题、能够用清晰可读的代码翻译并表达想法、善于分析并且逻辑思维能力强（范围：用简单方式解决复杂问题）　　 </div> </li> <li><a href="/article/3084.htm" title="使用KeleyiSQLHelper类进行分页查询" target="_blank">使用KeleyiSQLHelper类进行分页查询</a> hvt <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a> <div>本文适用于sql server单主键表或者视图进行分页查询，支持多字段排序。KeleyiSQLHelper类的最新代码请到http://hovertree.codeplex.com/SourceControl/latest下载整个解决方案源代码查看。或者直接在线查看类的代码：http://hovertree.codeplex.com/SourceControl/latest#HoverTree.D</div> </li> <li><a href="/article/3211.htm" title="SVG 教程（三）圆形，椭圆，直线" target="_blank">SVG 教程（三）圆形，椭圆，直线</a> 天梯梦 <a class="tag" taget="_blank" href="/search/svg/1.htm">svg</a> <div>SVG <circle> SVG 圆形 - <circle> <circle> 标签可用来创建一个圆：下面是SVG代码： <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" c</div> </li> <li><a href="/article/3338.htm" title="链表栈" target="_blank">链表栈</a> luyulong <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div> public class Node { private Object object; private Node next; public Node() { this.next = null; this.object = null; } public Object getObject() { return object; } public</div> </li> <li><a href="/article/3465.htm" title="基础数据结构和算法十：2-3 search tree" target="_blank">基础数据结构和算法十：2-3 search tree</a> sunwinner <a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a><a class="tag" taget="_blank" href="/search/2-3+search+tree/1.htm">2-3 search tree</a> <div> Binary search tree works well for a wide variety of applications, but they have poor worst-case performance. Now we introduce a type of binary search tree where costs are guaranteed to be loga</div> </li> <li><a href="/article/3592.htm" title="spring配置定时任务" target="_blank">spring配置定时任务</a> stunizhengjia <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a> <div>最近因工作的需要，用到了spring的定时任务的功能,觉得spring还是很智能化的,只需要配置一下配置文件就可以了,在此记录一下，以便以后用到： //------------------------定时任务调用的方法------------------------------ /** * 存储过程定时器 */ publi</div> </li> <li><a href="/article/3719.htm" title="ITeye 8月技术图书有奖试读获奖名单公布" target="_blank">ITeye 8月技术图书有奖试读获奖名单公布</a> ITeye管理员 <a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a> <div>ITeye携手博文视点举办的8月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 8月试读活动回顾： http://webmaster.iteye.com/blog/2102830 本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）：《跨终端Web》 gleams：http</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>