我是一只蘑菇17
我是一只蘑菇17

第4版 网页设计与制作 HTML5+CSS3+JavaScript(赵丰年 编著）学习笔记

                         第1章   HTML5基础

1.万维网（World Wide Web,WWW)由大量的Web服务器构成。我们通过浏览器访问这些服务器上的网页。不同的网页通过超链接联系在一起，构成了WWW的网状结构。

2.HTML是表示网页的一种规范，它通过标记符定义了网页内容的显示，并使用属性进一步控制内容的显示。

3.Web标准包括结构.表现和行为3部分。

4.最基本的HTML标记符包括：HTML标记符和,首部标记l>和以及正文标记和

5.通俗地讲,internet就是许多不同功能的计算机通过线路连接起来组成的一个世界范围内的网络。从网络通信技术的角度看，internet是一个以TCP/IP网络协议连接各个国家，各个地区，各个机构的计算机网络的数据通信网。

6.网络是指多台计算机通过特定的连接方式构成的一个计算机的集合体；而协议(protocol)则可以理解为网络中的设备在“打交道”时共同遵循的一套规则，即以和种方法获得所需的信息。

7.internet能提供的服务包括WWW服务（即网页浏览服务）.电子邮件服务,即时消息传送（如微信），文件存储与传输（如各种云服务等），网络游戏等。

 由此可见，WWW并不就是internet，它只是Internet提供的服务之一。相当多的其他internet服务都是基于WWW服务的。

8.当用户连接到internet上后，如果在浏览器上输入一个internet地址。首先这个“请求”被浏览器通过电话线等传输介质传送到页面所在的服务器(server)上，然后浏览器做出“响应”，再通过传输介质把用户请求的网页传送到用户所在的计算机，并由浏览器进行显示。当用户在页面中操作时（例如单击超链接），如果需要请求其他页面，则这种“请求”又会通过传输介质传送到提供相应页面的服务器，由服务器做出响应。

   通过这个过程，浏览器和服务器之间建立了一种交互关系，使浏览者可以访问位于世界各地计算机（服务器）上的网页。

   目前使用最广泛的浏览器是Chrome,Safari,internet Explorer/Edge和Furefox等。

9.网页与网页之间的关系并不是完全相同的。通常我们把一系列逻辑上可以视为一个整体的页面叫做网站，或者说，网站就是一个链接的页面集合，它具有共享的属性。

10.主页包含指向其他页面的超链接，一般叫做index.html或index.htm

11.任何一个网站都是由若干个文件组成的，这些文件通过一定的方式以文件夹的形式组织起来，构成了网站的根文件夹。

12.网页的本质-HTML源代码。超文本标记语言(HyperText Markup Language,HTML)是表示网页的一种规范（或者说是一种标准），它通过标记符定义了网页内容的显示。

13.超文本最典型的特点就是文本中包含指向其他位置的链接，通过这些链接使文档组织成了网状结构。

14.Web标准由三大部分组成，以体现Web开发的整体性和结构化。这三大部分是结构(Structure)，表现(Presentation)和行为(Behavior)

15.网页的文件名最好只包括英文字母，数字和下划线字符（_)。文件的命名和其他需要命名的地方一样，一定要让名称具有清楚明确的含义。

16.常见的HTML编译器包括VSCode,Notepad++,Sublime Text,UltraEdit和XCode(使用于macOS）等。“所见即所得的网页编辑器”Dreamweaver

17.在HTML中，所有的标记符都用尖括号（大于号和小于号）括起来。绝大多数标记符都是成对出现的，包括开始标记符和结束标记符，开始标记符和相应的结束标记符定义了标记符所影响的范围。

18.HTML标记符是不区分大小写的，但在HTML5中通常约定使用小写标记符，这有利于HTML文档的维护。

19.HTML属性是用来描述对象特征的特性。

20.id用于唯一的标识页面中的元素。文档中所有的id都不能重复

      title指定元素标题，可以用于在浏览器中显示工具提示，网页标题可被浏览器用作书签和收藏清单。

21.表示网页所使用的语言是中文。

22.实际上，HTML文件相当于文本文件，不包含任何字符格式设置i。

23.在首部标记符中另一个比较常用的标记符是meta，它用于说明与网页有关的信息。例如，可以说明文件创作工具，文件作者信息等等。

     Meta标记符的常用属性包括：name,http-equiv以及content.其中，name属性给出特性名，而content属性给出特性值,http-equiv属性指定HTTP响应名称，通常用于替换name属性，HTTP服务器使用该属性值为HTTP响应消息头收集信息。

24.任何与视觉效果有关的设置都应该使用CSS技术

25.如果一个标记符包含于另一个标记符之中，那么被包含的标记符为子标签，包含的标记符为父标签，这种嵌套关系表明了网页内容之间的逻辑关系和结构层次。

     嵌套标记规定每一个标记符必须闭合，表示一个有语义的网页内容标识。相互嵌套标记必须能清楚地说明标记之间的关系，开始标记和结束标记必须学些正确。

26.由于网站经常需要更新，因此创建的网页必须易于维护，而添加注释是增强文档可读性的重要手段。

27.和HTML标记符不同，字符代码名称区分大小写

28.标题标记符，用以表示网页中的大小标题，从而建立文档的逻辑结构

29.img标记符用于在网页中插入图片src属性指定目标文件,align属性指定对齐方式

30.

标记符用于生成一条水平线，常常用于作为内容的分割符

31.
标记符用于在同一个段落内将行打断，形成断行的效果。

                    第2章   文本格式与超链接

1.文本是网站内容的集中体现，对文本进行格式修饰是确保网站内容逻辑结构的基本手段。文本格式主要分为段落格式（包括列表格式）和字符格式。段落就是指具有统一样式的一段文本，而字符是组成段落的基本元素，相当于段落的一个局部。

2.正文中的段落都应使用p标记符进行分段，也就是说，逻辑上是段落的内容都应用p标记符包含，而不是用br断开。这样做能确保HTML代码的逻辑含义正确，结构严谨，而这是编写规范网页的基本要求之一。

3.

  像noshade这样属性的取值与属性名称相同的标记符属性称为布尔属性。

4.物理逻辑字符样式，是指标记符本身就说明了所修饰文字的效果的标记符。例如，sub标记符表示下标。

   物理字符样式由于是用HTML的方式修饰网页内容，不符合"结构与形式"分离的原则，因此应尽量避免使用。

5.逻辑字符样式是指标记符本身表示了所修饰效果的逻辑含义。例如,address标记符本身的逻辑意义为“地址”，但并没有说明具体的物理效果。

  由于使用逻辑字符样式符合“结构与形式”分离的原则，因此是替换物理字符样式的最佳选择。例如，用标记符替换标记符。

6.列表是一种非常有效的展示信息的方式，能够增加文字内容的逻辑性。

7.有序列表也称数字式列表，它是一种在各项内容前显示有数字或字母的缩排列表，用来表示文本内容的前后顺序关系。

   无序列表也称强调式列表，它是一种在各项内容前显示有特殊项目符号的缩排列表，用于表示一种并列的关系。无序列表中type属性的取值有3种：disc表示实心圆,为默认值；circle表示空心圆;square表示实心或空心的方块（取决于浏览器）

8.什么是URL?

URL（Uniform Resource Locator，统一资源定位器)是表示Web上资源的一种方式，通常可以理解为资源的地址。一个URL通常包括3部分：一个协议代码，一个装有所需文件的计算机地址（或一个电子邮件地址等），以及具体的文件地址和文件名。

协议表明应使用何种方式获得所需的信息，最常用的协议包括HTTP(HyperText Transfer Protocol,超文本传输协议),FTP(File Transfer Protocol,文件传输协议)，mailto（电子邮件协议）,news(Usenet 新闻组协议)，telnet(远程登录协议)等。

对于常用的mailto协议，mailto:[email protected],而对于常用的http和ftp等：http://www.ptpreee.com.cn，ftp://ftp/nease.net

9.绝对URL:是指internet上资源的完整地址，包括完整的协议种类，计算机域名和包含路径的文档名，其形式为：协议：//计算机域名/文档名。例如,https://www.ptpress.com.cn.shopping/index.htm。如果在网页中需要指定外部的innernet资源，应使用URL。

   其中https://www.ptpress.com.cn就是一个绝对URL，省略了最后部分文件名的URL通常也认为觉对URL，因为它能够完全定位资源的位置。

10.相对URL是指innernet上资源相对于当前页面的地址，它包含从当前页面指向目的页面位置的路径。如public/example.htm，表示当前页面所在目录下public子目录中的example.htm文档

     句点（.）和双重句点（..），分别表示当前目录和上一级目录（父目录）../public/index.htm表示当前目录上一级目录下的public目录中的index.htm文件

    使用相对URL的好处在于：当用户需要移植站点时（例如，将本地站点上传到internet上或者是移动到优盘上），只要保持站点中各资源的相对位置不变，就可以确保移植后各页面之间的超链接仍能正常工作。用户在编写网页时，通常使用的都是相对URL（除非需要引用外部网页）。

11.（锚点链接）除了可以对不同也米纳或文件进行链接以外，用户还可以对同一页面的不同部分进行链接。页面的底部放一个返回顶部的链接。

                            第3章   CSS3基础

1.CSS(Cascading Style Sheets,层叠样式表）技术是一种格式化网页的标准方式，它拓展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。

   只要一个样式定义，就解决了HTML方式所固有的两种缺陷--格式定义的重复和格式维护的困难。大大降低了网站的开发和维护工作量。

2.在网页中使用CSS包括3种常见方式：将样式定义包含在外部CSS样式文件中，将样式定义嵌入网页中以及将样式定义直接嵌入标记符中。

3.常见的CSS属性包括：颜色与背景属性，字体属性，文本属性

4.Px，像素（计算机屏幕上的一个点），1em,等于当前字体尺寸的两倍。

5.使用CSS的最大优势是实现了内容与表现的分离，可以达到“一处定义，多处使用”的效果。

6.CSS的基本选择器：标记符选择器，类选择器，ID选择器，伪类选择器，群组选择器

7.最基本的原则是ID表示独一无二（整个网页上就出现一处），而类表示某个类别（网页中很可能多次出现）。

8.伪类选择器：

   a:link当超链接没被访问时，所设置的洋式应用于超链接

   a:visited 当超链接已被访问过时，所设置的样式应用于超链接

   a:hover 当鼠标指针移动到超链接之上时，所设置的样式应用于超链接

   a:active 当超链接当前为被选中状态时，所设置的样式应用于超链接

9.在CSS中，颜色属性可以设置元素内文本的颜色，而各种背景属性则可以控制元素的背景颜色以及背景图案。

10.Background-attachment属性，默认值为scroll，表示背景图案随着内容一起滚动；fixed表示背景图案静止，而内容可以滚动，这种效果也叫作水印效果。

11.font-family属性用于确定要使用的字体列表

     h1{font-family:楷体，黑体}表示将h1设置为楷体，如果楷体不能显示，那么显示黑体（如果黑体不能显示，则显示默认的字体，通常是宋体）

12.font-weight属性定义了字体的粗细值，normal相当于400，bold相当于700.

13.Font属性可一次性设置各种字体属性（属性之间以空格分隔），font-size和font-family这两个属性必须有。

                          第4章   图像与多媒体

1.虽然有多种计算机图像格式，但由于受网络带宽和浏览器的限制，在Web上常用的图像格式只包括以下3种：GIF,JPEG和PNG。它们都是标准的位图格式。

2.GIF格式（Graphic Interchange Format,图形交换格式），可以高度压缩图像，但它只能包含最多256种颜色，因此只适用于线条图以及使用大块纯色的图片，而不适于表现真彩色照片或具有渐变色的图片。

3.在网页制作中，GIF格式的图片往往用于制作标题文字，按钮，小图标等

4.JPEG格式（Joint Photographic Experts Group,联合图像专家组图片格式），支持的颜色数几乎没有限制，因此适用于使用真彩色或平滑过渡色的照片和图片。

   和GIF格式采用无损压缩不同，JPEG格式使用有损压缩来减少图片文件的大小，因此用户将看到随着文件的减少，图片的质量也降低了。

  JPEG格式不支持透明色，也没有动画的概念。

5.PGN格式(Portable Networks Graphics,可移植的网络图形格式)适于任何类型，任何颜色深度的图片，该格式是仅有的几种支持透明度概念的图片格式之一（透明GIF的透明度只能是100%，但PNG格式可以是0%~100%）

6.在网页上显示图片之前，通常需要考虑下列3个问题：1.确保文件较小2.控制图像的数量和质           量； 3.合理使用动画

   其中，确保文件较小通常应从两个方面来处理：使图像具有所需的像素大小以及采用正确的格式     进行优化处理。

7.在HTML中，使用img标记符（它是自结束的标记符，写作或）可以在网页中加入图像。它具有两个必要的基本属性：src和alt，分别用于设置图像文件的位置和替换文本。

   如果在应该显示图像的位置显示出一个断掉的图片图标和替换文本。则表示src属性值所对应的图像文件不能显示。最常见的原因是该文件的路径或文件名指定错误（例如使用了错误的文件后缀）

8.在HTML中，使用img标记符的width和height属性可以指定图像的宽度和高度，以告诉浏览器网页应分配给图像多少空间（以像素为单位）。当浏览器解释网页时，在实际下载图像之前会给图像预留出空间，以避免在每个图像下载时重新绘制网页，从而加快网页的下载速度。

    一般情况下不建议使用指定width和height的方式缩小图像，因为用这种方式无法实际更改图像文件的尺寸，而只是更改了显示大小。

   在网页设计过程中，常常出现一个图片被当做一个块来对待的情况，这时候应该讲其置于“块元素”中，然后对其应用CSS属性text-align。

9.使用css的vertical-align属性，可以控制图像与周围内容的垂直对齐。Top与文本顶部对其，middle与文本中央对齐，bottom与文本底部对齐。

10.使用audio标记符插入音频，对于多数用户而言，未经允许而直接播放音乐或视频会被视为一种冒犯，因此建议不要使用autoplay（如果出现该属性，则音频在就绪后马上播放）；也尽量不要使用背景音乐这种做法，而应把是否播放音乐或视频的权力（controls,如果出现该属性，则向用户显示控件，比如播放按钮）交给用户（即显示播放控件并默认不播放，让用户选择是否播放，另外，可以设置静音，让用户选择是否关闭静音）

11.使用video标记符插入视频

12.使用embed标记符嵌入插件，可以使用embed标记符在网页中嵌入任何使用插件播放的内容，包括音频，视频,flash动画等。

   ！由于embed标记符比audio和video标记符具有更广泛的适用性，因此可以使用以下形式的代码来确保更好的兼容性。   

                             第5章   表格与表单

1.表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，它由表单控件和一般内容组成。在WWW被广泛用于各种信息的搜集和反馈，除此之外还有一个作用就是创建各种动态网页效果。

2.创建表单需要使用from标记符，在该标记符中可以指定处理表单的方式。

3.Caption表格标题，应该直接位于

之后，建议使用css属性text-align完成该功能，

   tr表格行

   td和th的功能和用法几乎完全相同（可以任意混合使用，但效果略有不同），唯一不同之处在于td表示普通表格数据，而th表示表格的行列标题数据（也就是通常所说的表头）

4.表格的边框是指最外层的4条框线，可以用frame属性进行控制，该属性的取值可以是：void(表示无边框，默认值)，above(表示仅有顶框)，below(表示仅有底框)，hsides(表示仅有顶框和底框)，vsides(表示仅有左，右侧框)，his(表示仅有左侧框)，rhs(表示仅有右侧框)，box(表示包含全部4个边框)，border(表示包含全部4个边框)

5.rules属性用于控制是否显示以及如何显示单元格之间的分隔线，取值可以是none(表示无分隔线，是默认值)，groups(表示仅在行组和列组间有分隔线),rows(表示仅有行分隔线)，cols(表示仅有列分隔线)，all(表示包括所有分隔线)

   border属性用于设置边框的粗细，其值为像素数

6.在table标记符中使用cellspacing属性可以控制单元格之间的空白，使用cellspadding属性可以控制表格分隔线和数据之间的距离

   border-collapse属性设置表格的边框是否被合并为一个单一的边框

   对td或th标记符应用填充属性padding，取值为一个或多个长度值

7.居中对齐table{margin:0 auto}

   如果是在tr标记符中使用valign属性，则可以控制整行内容的垂直对齐：默认垂直居中对齐，bottom（垂直底部对齐）,baseline(基线对齐)

8.无论是什么类型的表单，它的基本工作原理都是一样的，即浏览器访问到表单页面后，在表单中填写或选择必要的信息，最后单机“提交”按钮（有可能是其他名称的按钮，比如“注册”“同意”“登陆”等），于是填写或选择的信息就按照指定的方式发送出去，通过网络传递到服务器端，由服务器端的特定程序进行处理，处理的结果通常是向浏览器返回一个页面（例如通知注册成功的页面），同时在服务器端完成特定功能（例如在数据库中记录下新用户的信息）

总而言之，表单不同于页面元素（如表格，图像等），它不但需要在网页中用HTML进行显示，而且还需要服务器端特定程序的支持。

9.表单不能嵌套

10.From标记符作为包含控件的容器，它指定了以下内容

11.表单的布局（由包含在from标记符内的具体内容决定）

12.用于处理已提交表单数据的程序（由action属性指定），该程序必须能够处理表单数据

13.用户数据提交给服务器的方法（由method属性指定），其中get方法是在URL的末尾附加要向服务器发送的信息，而用post方法发送给服务器的表单数据是作为一个数据体发送的。

14.表单发送时所使用的内容类型（由enctype属性指定）

15.Input中name属性指定了控件的名称，value属性指定了控件的初始值，这两个属性的取值都是服务器端程序处理表单数据时需要使用的。Size属性指定了文本框的宽度，maxlength属性指定了在文本框中可以输入的最长文本数；placeholder属性指定了帮助用户填写输入字段的提示。

16.单选框radio,复选框checkbox，checked属性是可选的，它告诉浏览器是否在第一次显示表单时将这个复选框或单选框显示为“被选中状态”

     如果要使一组若干个单选框具有单选的效果，则应该使多个单选框框件具有相同的name属性。具有相同name属性的单选框组成了一个组，在一个组中只能选中一个选项。

17.Input的type:submit提交，reset重置

18.Textarea多行文本框

19.要创建选项菜单，应使用select标记符，并将每个可独立选取的项用一个option标记符标出来。

 20.Multiple属性用于设置允许用户选择多个选项（如果不设置此属性，则仅允许选择一个选项），selected属性用于设置当前选项是否为预先选中状态。

21.

标签将表单内容的一部分打包，生成一组相关表单的字段。

当一组表单元素放到

标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

标签为 fieldset 元素定义标题。

                        第6章   CSS3进阶

1.CSS3样式优先级的基本规则是“就近优先”，一般规则是“越特殊越优先”（遵循一定的算法）

2.CSS3选择器的作用是确定CSS规则作用的对象。除了之前学过的标记符选择器，类选择器，ID选择器，伪类选择器和群组选择器之外，还可以使用上下文选择器或派生选择器（包括后代选择器，子元素选择器和相邻兄弟选择器），以根据文档内容的上下文关系来确定某个内容的样式，或者使用属性选择器，进一步增强设计者选择网页元素的能力。

3.后代选择器：h1 em选择器可以解释为“作为h1元素后代的任何em元素”或“包含在h1元素中的任何em元素”

4.子元素选择器：h1>strong，选择作为h1元素子元素的所有strong元素

5.相邻兄弟选择器：h1 + p，如果需要选择紧接在另一个元素后的元素，而且两者有相同的父元素，可以使用相邻兄弟选择器

6.元素框的最内部分是实际的内容，直接包围内容的是填充，接着是边框，边框以外是边距。

7.增加填充，边框和边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

8.边距合并：当两个垂直边距相遇时，它们将合并成一个边距，合并后的边距的高度等于两个边距中的较大者。

9.！只有普通文档流中块框的垂直边距才会发生合并。行内框，浮动框或绝对定位框之间的边距不会合并。

10.CSS有3种基本的定位机制：普通流，浮动和绝对定位。

11.overflow，设置当元素的内容溢出其区域时如何处理，取值为visible/hidden/auto/scroll/inherit

12.clip,规定一个元素的可见尺寸，这样的一个绝对定位元素就会被修剪并显示为这个形状，取值为rect(top,right,bottom,left)

13.vertical-align,设置元素的垂直对齐方式，取值为top/middle/bottom/baseline等

14.z-index，设置元素的堆叠顺序，取值为：整数（可以是负数，数字越小越在底层，即有可能被其他元素覆盖）

15.如果要建立一个自定义的行内元素，可以使用span元素。

16.浮动定位的基本机制是：设置为浮动的元素从正常的文本流中移出，但它仍然对原来存在于文本流中的元素产生影响，这些元素的内容（注意不是框，而是框中的内容）会围绕在浮动元素周围，就好像“河流”围绕“小鸟”一样；浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

17.clear取消掉某些元素周围的浮动元素，left(在左侧不允许有浮动元素)，both(在两侧都不允许有浮动元素，这是最常用的取值)

18.在使用相对定位时，无论是否进行移动，元素都占据原来的空间。因此，移动元素可能会导致它覆盖其他框。

19.绝对定位中，z-index属性控制这些框的堆放次序

20.使用绝对定位时，浏览器窗口左上角是指body元素的起始处，如果浏览器出现滚动条，那么相应的原点可能会移出视线。而使用固定定位时，定位的参照点就是可见的浏览器窗口，与窗口的滚动无关。

21.cursor(光标)属性用于设置在对象上面移动的鼠标指针显示的形状：hand（手形），move（指示某物被移动的交叉箭头），help(提示用户可以得到帮助的问号图标。

22.display属性确定一个元素应如何绘制在页面上，它的取值有多个：none,block(块级元素)，inline(行内元素),inline-block(行内块元素)：这种元素结合了行内元素和块元素的优点，既可以设置宽高，可以让padding和magin生效，又可以和其他行内元素并排

23.visibility属性控制定位的元素是否可见，常见取值包括：visible（可见），hidden(隐藏)和inherit(继承)，默认值为继承。与display属性的不同之处在于：当隐藏元素时，仍然为元素保留原有的显示空间。

24.列表属性：如果同时设置了list-style-type和list-style-image属性，则只有当浏览器不能显示图片作为项目符号时，list-style-type才有效。

25.border-radius:60px/40px;表示4个角都是水平方向半径60px,垂直方向半径为40px

26.边框阴影效果

     box-shadow:[h-shadow v-shadow blur spread color inset]

     (水平垂直偏移量，阴影的模糊距离，阴影的扩展半径，阴影颜色，默认为外阴影)

27.transition:property duration timing-function delay;

     property，规定设置过渡效果的css属性的名称，不能省略

     duration ,,规定完成过渡效果需要多少秒或毫秒

     timing-function,规定过渡效果的速度曲线

     delay，规定过渡效果何时开始（即延时多少之后开始），取值是秒或毫秒

28.transform属性用于向元素应用2D或3D转移，实现旋转，缩放，移动或倾斜等效果

29.如果有多个样式同时修饰一个对象，样式如果冲突，则采用高优先级样式；如果不冲突，则采用叠加的样式效果。

30.考虑到从逻辑上讲，页面样式的优先级应该高于站点样式，所以通常应采用link在前（如果有多个外部样式表，越通用的越靠前）style在后的方式。

31.！样式优先级计算方法：对于一个任意选择器，它的优先级可以由一个(a,b,c),三元组确定，其中a的权值最高,c的最低

      计算规则如下：

      a = 选择器中id 选择器的个数

      b = 选择器中class选择器，伪类选择器，属性选择器的个数

      c = 选择器中元素选择器的个数

     最后具体优先级可以用a*100+b*10+c来确定，值越大表明优先级越高

                  第7章   JavaScript与前端开发技术

1.在网页中插入脚本语言通常有3种方式：使用script标记符，在标记符中直接嵌入脚本以及链接外部脚本文件。

2.JavaScript脚本语言的基本要素包括：变量，运算符，表达式，语句以及函数

3.JavaScript是一种基于对象的脚本语言，它可以使用JavaScript对象，浏览器对象和HTML DOM对象。

4.Jquery是一种轻量级的JavaScript库，使开发者能用更少的编码实现更多，更强大的效果

5.前端开发框架是指集成了各种预置代码的Web开发工具，常见的有Bootatrap,Vue.js,React和AngularJS等。

6.脚本（Script）实际上就是一段程序，用来完成某些程序的功能。脚本程序既可以在服务器运行（称为服务器端脚本，例如PHP脚本，ASP脚本等），也可以直接在浏览器端运行（称为客户端脚本）。

7.客户端脚本经常用来检测浏览器，响应用户动作，验证表单数据以及显示各种自定义内容，如特殊动画，对话框等。

8.所谓变量，就是程序中一个已命名的存储单元。变量的主要作用是存取数据和提供存放信息的容器。

9.JavaScript并不要求指定变量中包含的数据类型。由于这种特性，JavaScript通常被称为弱类型的语言。

10.JavaScript是区分大小写的

11.JavaScript支持的数据类型如下：

     Number(数字)：包括整数和浮点数以及NaN（非数）值，数字用64位IEEE754格式。

     Boolean(布尔):包括逻辑值true和false

     String(字符串):包括单引号或双引号中的字符串值

     Null(空)：包括一个null值，定义空的或不存在的引用

     Undefined(未定义)：包括一个undefined值，表示变量还没有赋值，也就是还没有被赋予任何类型

     Object（对象）：包括各种对象类型，例如数组类型Array,日期对象Date等。

15.8类运算符：算术运算符，逻辑运算符，比较运算符，字符串运算符，位操作运算符，

赋值运算符，条件运算符，其他运算符

16.单目，双目，三目（三个操作数的运算符，条件运算符）或多目运算符也称为一元，二元，三元或多元运算符

17.表达式是运算符和操作数的组合。表达式通过求值确定表达式的值，这个值是对操作数实施运算符所确定的运算后产生的结果。

18.在JavaScript中包含完整的一组编程语句，用于实现基本的程序控制和操作功能。

19.使用else关键字扩展if语句

20.for语句由两部分构成：条件和循环体。循环体部分由具体的语句构成，是需要循环执行的代码。条件部分由括号括起来，分为3个部分，每个部分用分号分开。第1部分是计数器变量初始化部分，第2部分是循环判断条件，决定了循环的次数；第3部分给出了每循环一次，计数器变量应如何变化。

21.do while语句与while语句的区别是循环体语句至少执行一次。

22.对象包含以下两个要素：

·    用来描述对象特性的一组数据，也就是若干变量，通常称为属性

·    用来操作对象特性的若干动作，也就是若干函数，通常称为方法

23.在JavaScript中可以操作的对象通常包括3种类型：JavaScript内部对象，浏览器对象和HTML DOM对象。JavaScript内部对象包括一些常用的通用对象，例如数组对象Array,日期对象Date,数学对象Math,字符串对象String等。

24.Array对象也就是数组对象，用于实现编程语言中最常见的一种数据结构--------数组。

25.Date对象也就是日期对象，它可以表示从年到毫秒的所有时间和日期

     getDate();返回一个整数，表示一月中的某一天（1~31）

     getDay();返回一个整数，表示星期中的某一天（0~6,0表示星期日，6表示星期六）

26.Math对象包含用来进行数学计算的属性和方法，其属性也就是标准数学常量。

    pow(num1,num2)（返回num1的num2次方），random()（返回一个0到1之间的随机数），            round(num)(四舍五入返回最接近参数num的整数)，sqrt(num)(返回参数num的平方根)

27.浏览器对象(Browser Object Model,BOM)使JavaScript可以与浏览器进行“对话”

28.所有浏览器都支持window对象，它表示浏览器窗口。所有JavaScript全局对象，函数以及变量均自动成为window对象的成员（全局变量是window对象的属性，全局函数是window对象的方法）。window对象包含了document,navigator,location,history等子对象，是浏览器对象层次中的最顶级对象。当遇到body,frameset或frame标记符时创建该对象的示例，另外，该对象的示例也可由window.open()方法创建.

29.所谓示例是面向对象技术中的一个术语，表示抽象对象的一次具体实现。

30.location.href(返回完整的URL),location.assign(载入一个新的文档，可以用后退按钮)

     以上两种方法可等价

     而location.replace(用新的文档替换当前文档，不能用后退按钮)

31.window.history对象（简写为history）包括用户在浏览器窗口中访问过的URL,也就是历史记录列表。其属性包括：length(返回历史列表中的网址数)，方法包括:back()(加载history列表中的前一个URL，效果相当于单击浏览器窗口的“后退”按钮)，forword()(加载history列表中的下一个URL，效果相当于单击浏览器窗口中的“前进“按钮)，go()(加载history列表中的某个具体页面，history.go(1)相当于history.forword(),history.go(-1)相当于history.back()

32.文档对象模型(Document Object Model,DOM)是W3C（万维网联盟）的标准，它是独立于平台和语言的借口，允许程序和脚本动态地访问和更新文档的内容，结构和样式。

     HTML DOM是关于如何获取，修改，添加或删除HTML元素（包括其内容和属性等）的标准

33.在HTML DOM中，每个东西都是节点：文档本身就是一个document对象，HTML元素是元素节点，HTML属性是属性节点，插入HTML元素中的文本是文本节点，HTML注释是注释节点，等等。

34.节点树中的节点彼此关联，我们常用父(parent),子(child)和同胞（sibling）等术语来描述它们之间的关系。在节点树中，顶端节点被称为根（root）;除了根节点外，其他节点都有父节点；一个节点可拥有任意数量的子节点；同级的子节点被称为同胞（拥有相同父节点的节点）。

35.document对象的常用属性

     froms,返回对文档中所有from对象的引用（以html collection的形式，类似数组）

     images,返回对文档中所有images对象的引用（以html collection的形式，类似数组）

     links,返回对文档中所有link（即）和area(即)对象的引用（以html collection的形式，类似数组）

36.document对象的常见方法：

     addEventListener()向文档添加事件监听器

    getElementsByClassName(),返回文档中所有指定类名的元素的集合（以html collection的形式，类似数组）

     getElementById(),返回对拥有指定id的第一个对象的引用

     getElementsByTagName(),返回带有指定标记符名的对象集合（以html collection的形式，类似数组）

     querySelector(),返回文档中匹配指定的css选择器的第1个元素

     querySelectorAll(),返回文档中匹配的css选择器的所有元素的节点列表(nodelist对象)

37.HTML元素对象的常用属性和方法

     addpendChild(),为元素添加一个新的子元素

     blur(),设置元素失去焦点

     childNodes(),返回元素的第一个子节点的数组，包括元素节点，文本节点，注释节点

     firstChild(),返回元素的第一个节点

     getElementsByTagName(),返回具有指定标记符名的所有子元素集合

     getElementsByClassName(),返回具有指定类名的子元素集合

     innerHTML(),设置或者返回元素开始和结束标记符之间的内容

     lastChild,返回元素的最后一个子节点

     querySelector(),返回元素中匹配指定css选择器第一个子元素

     querySelectorALL(),返回元素中匹配指定css选择器的所有子元素节点列表

     setAttribute(),设置指定属性的值

    style,设置或返回元素的样式属性

38.！使用parentNode,firstChild,lastChild,nextSibling,previousSibling,children和childNodes等属性，可以遍历HTML DOM树，以对相应节点进行操作。

39.！使用innerHTML,textContent和style等属性，可以访问或设置HTML元素的内容和样式。

40.！使用appendChild(),removeChild(),replaceChild()和insertBefore()等方法，可以修改HTML DOM树。

41.鼠标事件：onclick,当用户单击某个对象时触发

                       onmousedown,鼠标按钮被按下时触发

                       onmousemove,鼠标被移动时触发

                       onmouseover，鼠标移动到某元素之上时触发

   键盘事件：onkeydown,某个键盘按键被按下时触发

                     onkeypress某个键盘按键被按下并松开时触发

                     onkeyup,某个键盘按键被松开时触发

42.前端开发是创建Web页面或App等前端页面呈现给用户的过程，通过HTML,CSS及JavaScript。以及衍生出来的各种技术，框架，解决方案，以实现互联网产品的用户界面交互。

     前端开发技术：JQuery,Bootstrap,Vue.js,AngularJS和React等前端开发技术

43.JQuery是一个轻量级的JavaScript函数库，能够让开发者在尽量少写代码的情况下实现复杂的功能。

44.JQuery的基本语法如下：

$(selector).action()

其中，$表示JQuery，selector是选择器,action是是jQuery执行的特定操作（例如在以上实例中是hide()。

所有的jQuery函数都位于一个document ready函数中，如下：

$(document).ready(function(){

    //此处写jQuery代码

});

这是为了防止文档在完全加载（就绪）之前运行jQuery代码，避免出现问题

也可以使用更加简洁的以下代码，执行完全一样的功能：

$(function(){

   //此处写jQuery代码

});
  1. ：first修改第一个div的第一个元素

     2. ： first-child修改所有div的第一个元素

45.jQuery的最基本方法包括两类：HTML/CSS方法和事件方法。

    HTML/CSS方法用于处理HTML,CSS.常见的有：append()（在被选元素的结尾插入内容），attr()(设置或返回被选元素的属性/值)，css()(为被选元素设置或返回一个或多个样式属性)，html()(设置或返回被选元素的内容)，remove()(移除被选元素，包括数据和事件)，text()(设置或返回被选元素的文本内容)等。

46.在jQuery中，大多数DOM事件都有一个等效的jQuery方法，常见的jQury事件方法包括：click(),dbclick(),mouseenter(),mouseleave(),hover(),keypress(),keydown(),keyup(),blur(),change(),submit(),focus(),resize(),scroll()等

47.在jQuery中使用某些特定的方法，可以创建动画效果。常见的动画效果方法包括：animate(),delay(),fadeln()fadeOut(),等。

48.如果想要实现tab导航或折叠面板这些复杂的界面元素特效，可以使用jQuery UI,它是建立在jQuery JavaScript库上的一些用户界面交互，特效，小部件及主题元素。

49.前端开发框架是指集成了各种预置代码的Web开发工具

50.响应式(responsive)设计是指设计出来的Web页或App等能够自适应各种尺寸的显示屏。

51.使用Bootstrap的过程，实际就是使用预定义的CSS代码和JS代码的过程，因此学习Booustrap就是掌握怎么在HTML文档中编写代码来引用Bootstrap的CSS和JS

52..col-:任意屏幕或小屏幕—针对任意尺寸屏幕或屏幕宽度校友576px（容器最大宽度none(auto)）

    . col-sm-:平板--针对任意尺寸屏幕或屏幕宽度校友576px（容器最大宽度540px）

    .col-md-:桌面显示器--针对任意尺寸屏幕或屏幕宽度校友768px（容器最大宽度720px）

    .col-lg-:大桌面显示器--针对任意尺寸屏幕或屏幕宽度校友992px（容器最大宽度960px)）

    .col-xl-:超大桌面显示器--针对任意尺寸屏幕或屏幕宽度校友1200px（容器最大宽度1140px）

53.vue.js包含了完整的警告和调试模式，适用于开发环境；而vue.min.js是生产版本，适用于调试完毕后投入正式使用

54.每个vue应用都是通过用Vue函数创建一个新的Vue实例开始的

    el是指elment,代表Vue实例要绑定的元素对象；data表示数据，其中的内容一般用于控制视图部分内容的显示。在视图中，双大括号方式也称为Mustache语法，显示时会用对应数据对象上message变量的值替换。

55.Vue指令是指形式为v-*的特性，它们会在渲染的DOM上应用特殊的响应式行为。例如，v-bind（可直接简写为”:”）用于将数据与HTML元素的属性绑定，v-on用于监听DOM事件（可直接简写为”@“），v-model用于实现表单输入和应用状态之间的双向绑定，v-html用于将数据解释为HTML代码。

56.Angular.js是一个JavaScript框架，它通过指令扩展了HTML，并且可以通过表达式绑定数据到HTML

57.AngularJS通过ng-directives（指令）扩展了HTML。

    ng-app指令定义了一个AngularJS应用程序，指出

元素是应用程序的”所有者“

    ng-model指令把元素值（比如输入域的值）绑定到应用程序变量

58.AngularJS指令是扩展的HTML属性，带有前缀ng-

59.一个AngularJS应用包括3部分：View(视图),即HTML；Model(模型)，即当前视图中可用的数据；Controller(控制器),即JavaScript函数，可以添加或修改属性

60.scope是一个JavaScript对象，其属性和方法可以在视图和控制器中使用。在创建控制器时，可以将$scope对象当做一个参数传递

61.模块是应用控制器的容器，可以通过AngularJS的angular.module函数来创建模块

62.React是一个用于构建用户界面的JS库，它采用声明式设计，能够方便地构建组件，从而实现高效，灵活的Web项目开发

63.用React开发应用时一般只会定义一个根节点。要将React元素渲染到根DOM节点中，应通过把它们都传递给ReactDOM.render()的方法来将其渲染到页面上。一般用JSX来声明React中的元素。

64.JSX是一种JavaScript的语法扩展，它看起来就像是HTML。如果有多个标记符，则需要一个div元素包含它们。

                           第8章   网页设计基础

1.人们在认知外部世界时，常常会采用以下组织原则：图形与背景，接近性，连续性，完整和闭合倾向，相似性，对称性和简化律。

2.最基本的4个设计原则是：紧凑，对齐，重复，对比

3.应通过建立清楚的视觉层次，使用习惯用法，划分明确的页面区域和减轻视觉污染来设计适合扫描的网页

4.一个网站的导航系统中一般包括：网站ID,栏目，实用工具，“你在这里”指示器，下一级栏目，页面名称，页面导航，小字体页脚导航等

5.设计页面板式时，应考虑：页面比例，网页的分栏，版面率，图版面积和跳跃率

6.格式塔（gestalt）理论，即整体大于其各个部分之和。

   这种认知理论表明，人类的意识能够组织，简化和综合自己看到的事物。我们正是这样感知和理     解身边的事物的。假设整体性是人们感知事物是所追寻的一种方式，那么设计人员的主要目标就     是建立统一性。可以通过遵循各种设计原则来达到这一目标、例如，通过将网页内容排列为几何     图形和视觉分块，并使用对齐原则，使得人们能够快速理解网页。

7.图形与背景：在一个特定的场景中，有些对象突现出来形成图形，有些对象退居到衬托地位而成为背景。

8.接近性：某些距离较短或互相接近的部分，容易组成整体

9.连续性：连续性指对线条的一种知觉倾向。尽管线条受其他线条阻断，却仍像未阻断或仍然连续着一样为人们所体验到。

10.完整和闭合倾向：知觉印象会随环境而呈现成最完美的形式。彼此相属的部分，容易组合成整体；反之，彼此不相属的部分，则容易被隔离开来。

11.相似性：在认知时，相似的元素会被分为一组。

12.对称性：是指具有对称边界的区域会被认知为完整的图形

13.简化律：是指人们倾向于用最简单的方式来认知模糊的刺激

14.！浏览者在访问网站时也会自然而然地使用认知策略，因此在设计时必须符合人们的这些认知规律

15.紧凑原则指出：应将相关项目成组地摆放在一起，让它们彼此靠近，以便相关的项目看起来更像是一个整体，而非一堆无关的东西。

16.紧凑，往往意味着关联

17.通过将相似的元素组织到一个块中，页面立刻就变得更加井井有条。阅读者不但能清晰地明白信息起始于何处，还可以知道何时能阅读完所有信息；留白（文字周围的空间）也会变得自然合理。

18.项目之间的紧凑或稀疏说明了它们之间相互的关系

19.对齐原则指出：页面上不能随意放置东西，每一个项目都应当与页面上的其他各项目建立视觉上的联系。在页面上对齐之后，各元素会形成一个更具有凝聚力的单位。

20.页面元素的不对齐是导致文档看起来不舒适的最大因素。人们喜欢观看有次序的东西，有次序的东西给人一种平静，安全的感觉。另外，这也有助于信息的沟通。

21.重复原则指出：请在整个作品中重复设计某些部分。例如，一本书的标题，页眉页脚等设计都是重复的实例。

22.重复可以理解为“保持一致性”，如果某一页与另一页没有相重复的元素，那么整本书就丧失了统一的外观和感觉。

     重复可以让信息更加条理化

     重复的基本用途是为了统一并增加视觉吸引力

23.如果两个元素只是稍有不同，那么就不存在对比和冲突。

对比原则指出：如果两个元素不是完全相似，那么请让它们变得不同，真正的不同。

24.设计中的对比就是视觉反差：对点，线，面或形，色，纹理，空间，质量，容量之类的设计要素，在一个构图中进行不同处理。

25.对比的基本目的是在构图中引入视觉变化，增加总体视觉效果，同时能在不同的元素中构建起一个有组织的层级关系。

26.为扫描而设计需要遵循以下原则：在每个页面上建立清楚的视觉层次，尽量利用习惯用法，把页面划分成明确定义的区域，最大限度减少视觉污染。

27.建立清楚的视觉层次：越重要的部分越突出，逻辑上相关的部分在视觉上也相关，逻辑上的包含关系在视觉上应进行嵌套

28.减轻视觉污染还有一个潜台词：突出需要重点关注的内容。比如说，能够点击的超链接就应该让它们有下划线（或者是鼠标指针悬停时有下划线，或者至少是鼠标指标悬停时显示“手形“图标，按钮就应该长得像按钮*如有三维阴影

29.全局导航一般包括5个元素：站点ID，栏目，回主页的方式，搜索的方式，实用工具

30.页面比例：“黄金分割“；1:0.618

31.对称比：对称，整齐稳重，不对称，灵动活泼

32.分栏，图板面积，跳跃率

33.版面率是指页面中文字的面积与版面总面积之比，它主要受文字，图片和留白之间关系的影响。版面率低的网页给人高雅感，版面率搞得网页则信息量大，通俗性强。

                 第9章   用Dreamweaver制作网页

  1. Dreameweaver具有强大的站点管理功能，能够很好地维护本地站点并能方便地管理远程站点
  2. 一个站点就是一系列文件的组合，而这些文件通常位于一个特定的文件夹中，称为站点文件夹。
  3. Emmet快捷输入：emmet是网站开发者常用的一种插件，提供了一种非常简练的语法规则，能够快速输入HTML和CSS代码，从而大幅提高前端开发的效率。
  4. 多光标操作

                           第10章   综合项目实践

  1. 网站建设的基本流程是：规划，设计，开发，发布和维护
  2. 网站规划时需考虑站点目标，站点风格，相关的技术因素和站点的信息架构
  3. 网站设计包括导航设计，板式设计和主页设计
  4. 网站开发团队的角色主要包括：项目经理，系统分析员，程序员，设计师，网站编辑，测试人员
  5. 网站策划书一般包括：前期调研报告，建站目的及功能定位，网站技术解决方案，网站内容规划，网页设计，网站维护，网站测试，网站发布与推广，网站建造日程表，费用明细10部分
  6. 站点目标越正确，发现的问题就越多，以后的工作就越具体。
  7. 从目标用户的角度出发，考虑他们对站点的需求，从而将制作的站点最大限度地与目标用户的愿望统一，这样就能接近或者达到建立站点的目标，从而获得最大的成功
  8. 设计页面应以网站目标位准绳，最大限度地体现网站的功能，形成独特的，统一的风格
  9. 网站设计主要包括：导航设计，板式设计和主页设计
  10. 白底黑字显然比黑底白字的可读性好
  11. 总之，设计页面布局时，简单即是美，和谐即是美
  12. 主页是网站的门户，是网站的脸面，是网站中的最重要的一个页面。主页最主要的作用是传达网站的关键蓝图信息(big picture),也就是回答以下几个基本问题：这是个什么网站？这个网站中有什么？我能在这个网站做什么？为什么我要在这个网站，而不是别的网站？
  13. 测试是个周期性的工作，是贯穿于整个网站开发过程的。
  14. 网站维护：只有不断更新网站中的信息，才能吸引新的访问者和留住现有的访问者。
  15. 设计师就是俗称的“美工”
  16. 主导航位于页面顶部，最左边是站点标志（LOGO），单击它可以回到首页。
  17. 电子版的效果图容易留存和修改
  18. 面包屑：“首页>栏目名”
  19. 前期调研分析：

         一．了解目前网上相关行业的市场状况，对本企业和组织的市场特点进行分析，看是否适合在互联网上开展业务，可以利用网站提升哪些竞争力。

         二．市场主要竞争者分析，了解竞争对手上网情况及其网站规划，功能，作用等

         三．对网站可能的客户群进行分析，从可能的访问者中分析出潜在的顾客，并利用网站的各种功能模块对他们提供特殊服务

          四．对网站制作者自身条件，建设网站的能力（包括费用，技术，人力等）的分析。

你可能感兴趣的:(前端,html5,css,javascript)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件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
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
    1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • h5小游戏定制开发 红匣子实力推荐
    随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • css2中的透明 琪33
    .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • windows下源码安装golang 616050468 golang安装golang环境windows
             系统： 64位win7， 开发环境：sublime text 2，  go版本： 1.4.1    1.  安装前准备(gcc, gdb, git)        golang在64位系
  • redis批量删除带空格的key bylijinnan redis
    redis批量删除的通常做法： redis-cli keys "blacklist*" | xargs redis-cli del 上面的命令在key的前后没有空格时是可以的，但有空格就不行了： $redis-cli keys "blacklist*" 1) "blacklist:12: [email protected]
  • oracle正则表达式的用法 0624chenhong oracle正则表达式
      方括号表达示 方括号表达式 描述 [[:alnum:]] 字母和数字混合的字符 [[:alpha:]] 字母字符 [[:cntrl:]] 控制字符 [[:digit:]] 数字字符 [[:graph:]] 图像字符 [[:lower:]] 小写字母字符 [[:print:]] 打印字符 [[:punct：]] 标点符号字符 [[:space:]]
  • 2048源码(核心算法有，缺少几个anctionbar，以后补上) 不懂事的小屁孩 2048
    2048游戏基本上有四部分组成， 1：主activity，包含游戏块的16个方格，上面统计分数的模块 2：底下的gridview，监听上下左右的滑动，进行事件处理， 3：每一个卡片，里面的内容很简单，只有一个text，记录显示的数字 4：Actionbar，是游戏用重新开始，设置等功能(这个在底下可以下载的代码里面还没有实现) 写代码的流程 1：设计游戏的布局，基本是两块，上面是分
  • jquery内部链式调用机理 换个号韩国红果果 JavaScriptjquery
    只需要在调用该对象合适(比如下列的setStyles)的方法后让该方法返回该对象（通过this  因为一旦一个函数称为一个对象方法的话那么在这个方法内部this（结合下面的setStyles）指向这个对象） function create(type){ var element=document.createElement(type); //this=element;
  • 你订酒店时的每一次点击 背后都是NoSQL和云计算 蓝儿唯美 NoSQL
    全球最大的在线旅游公司Expedia旗下的酒店预订公司，它运营着89个网站，跨越68个国家，三年前开始实验公有云，以求让客户在预订网站上查询假期酒店时得到更快的信息获取体验。 云端本身是用于驱动网站的部分小功能的，如搜索框的自动推荐功能，还能保证处理Hotels.com服务的季节性需求高峰整体储能。 Hotels.com的首席技术官Thierry Bedos上个月在伦敦参加“2015 Clou
  • java笔记1 a-john java
    1，面向对象程序设计（Object-oriented Propramming，OOP）：java就是一种面向对象程序设计。 2，对象：我们将问题空间中的元素及其在解空间中的表示称为“对象”。简单来说，对象是某个类型的实例。比如狗是一个类型，哈士奇可以是狗的一个实例，也就是对象。 3，面向对象程序设计方式的特性：     3.1 万物皆为对象。    
  • C语言 sizeof和strlen之间的那些事 C/C++软件开发求职面试题 必备考点（一） aijuans C/C++求职面试必备考点
            找工作在即，以后决定每天至少写一个知识点，主要是记录，逼迫自己动手、总结加深印象。当然如果能有一言半语让他人收益，后学幸运之至也。如有错误，还希望大家帮忙指出来。感激不尽。        后学保证每个写出来的结果都是自己在电脑上亲自跑过的，咱人笨，以前学的也半吊子。很多时候只能靠运行出来的结果再反过来
  • 程序员写代码时就不要管需求了吗？ asia007 程序员不能一味跟需求走
          编程也有2年了，刚开始不懂的什么都跟需求走，需求是怎样就用代码实现就行，也不管这个需求是否合理，是否为较好的用户体验。当然刚开始编程都会这样，但是如果有了2年以上的工作经验的程序员只知道一味写代码，而不在写的过程中思考一下这个需求是否合理，那么，我想这个程序员就只能一辈写敲敲代码了。       我的技术不是很好，但是就不代
  • Activity的四种启动模式 百合不是茶 android栈模式启动Activity的标准模式启动栈顶模式启动单例模式启动
    android界面的操作就是很多个activity之间的切换,启动模式决定启动的activity的生命周期 ;   启动模式xml中配置     <activity android:name=".MainActivity" android:launchMode="standard&quo
  • Spring中@Autowired标签与@Resource标签的区别 bijian1013 javaspring@Resource@Autowired@Qualifier
    Spring不但支持自己定义的@Autowired注解，还支持由JSR-250规范定义的几个注解，如：@Resource、 @PostConstruct及@PreDestroy。   1. @Autowired    @Autowired是Spring 提供的，需导入    Package:org.springframewo
  • Changes Between SOAP 1.1 and SOAP 1.2 sunjing ChangesEnableSOAP 1.1SOAP 1.2
    JAX-WS SOAP Version 1.2 Part 0: Primer (Second Edition) SOAP Version 1.2 Part 1: Messaging Framework (Second Edition) SOAP Version 1.2 Part 2: Adjuncts (Second Edition)   Which style of WSDL
  • 【Hadoop二】Hadoop常用命令 bit1129 hadoop
    以Hadoop运行Hadoop自带的wordcount为例，   hadoop脚本位于/home/hadoop/hadoop-2.5.2/bin/hadoop，需要说明的是，这些命令的使用必须在Hadoop已经运行的情况下才能执行   Hadoop HDFS相关命令  hadoop fs -ls  列出HDFS文件系统的第一级文件和第一级
  • java异常处理（初级） 白糖_ javaDAOspring虚拟机Ajax
    从学习到现在从事java开发一年多了，个人觉得对java只了解皮毛，很多东西都是用到再去慢慢学习，编程真的是一项艺术，要完成一段好的代码，需要懂得很多。 最近项目经理让我负责一个组件开发，框架都由自己搭建，最让我头疼的是异常处理，我看了一些网上的源码，发现他们对异常的处理不是很重视，研究了很久都没有找到很好的解决方案。后来有幸看到一个200W美元的项目部分源码，通过他们对异常处理的解决方案，我终
  • 记录整理-工作问题 braveCS 工作
    1）那位同学还是CSV文件默认Excel打开看不到全部结果。以为是没写进去。同学甲说文件应该不分大小。后来log一下原来是有写进去。只是Excel有行数限制。那位同学进步好快啊。 2）今天同学说写文件的时候提示jvm的内存溢出。我马上反应说那就改一下jvm的内存大小。同学说改用分批处理了。果然想问题还是有局限性。改jvm内存大小只能暂时地解决问题，以后要是写更大的文件还是得改内存。想问题要长远啊
  • org.apache.tools.zip实现文件的压缩和解压，支持中文 bylijinnan apache
    刚开始用java.util.Zip，发现不支持中文（网上有修改的方法，但比较麻烦） 后改用org.apache.tools.zip org.apache.tools.zip的使用网上有更简单的例子 下面的程序根据实际需求，实现了压缩指定目录下指定文件的方法 import java.io.BufferedReader; import java.io.BufferedWrit
  • 读书笔记-4 chengxuyuancsdn 读书笔记
    1、JSTL 核心标签库标签 2、避免SQL注入 3、字符串逆转方法 4、字符串比较compareTo 5、字符串替换replace 6、分拆字符串 1、JSTL 核心标签库标签共有13个， 学习资料：http://www.cnblogs.com/lihuiyy/archive/2012/02/24/2366806.html 功能上分为4类： (1)表达式控制标签：out
  • [物理与电子]半导体教材的一个小问题 comsci 问题
          各种模拟电子和数字电子教材中都有这个词汇-空穴       书中对这个词汇的解释是; 当电子脱离共价键的束缚成为自由电子之后,共价键中就留下一个空位,这个空位叫做空穴       我现在回过头翻大学时候的教材,觉得这个
  • Flashback Database --闪回数据库 daizj oracle闪回数据库
    Flashback 技术是以Undo segment中的内容为基础的， 因此受限于UNDO_RETENTON参数。要使用flashback 的特性，必须启用自动撤销管理表空间。 在Oracle 10g中， Flash back家族分为以下成员： Flashback Database， Flashback Drop，Flashback Query(分Flashback Query,Flashbac
  • 简单排序:插入排序 dieslrae 插入排序
    public void insertSort(int[] array){ int temp; for(int i=1;i<array.length;i++){ temp = array[i]; for(int k=i-1;k>=0;k--)
  • C语言学习六指针小示例、一维数组名含义，定义一个函数输出数组的内容 dcj3sjt126com c
    # include <stdio.h> int main(void) { int * p; //等价于 int *p 也等价于 int* p; int i = 5; char ch = 'A'; //p = 5; //error //p = &ch; //error //p = ch; //error p = &i; //
  • centos下php redis扩展的安装配置3种方法 dcj3sjt126com redis
    方法一 1.下载php redis扩展包  代码如下 复制代码 #wget http://redis.googlecode.com/files/redis-2.4.4.tar.gz 2 tar -zxvf 解压压缩包，cd /扩展包 （进入扩展包然后 运行phpize 一下是我环境中phpize的目录，/usr/local/php/bin/phpize (一定要
  • 线程池(Executors) shuizhaosi888 线程池
    在java类库中，任务执行的主要抽象不是Thread，而是Executor，将任务的提交过程和执行过程解耦 public interface Executor { void execute(Runnable command); }   public class RunMain implements Executor{ @Override pub
  • openstack 快速安装笔记 haoningabc openstack
    前提是要配置好yum源 版本icehouse，操作系统redhat6.5 最简化安装，不要cinder和swift 三个节点 172 control节点keystone glance horizon 173 compute节点nova 173 network节点neutron control /etc/sysctl.conf net.ipv4.ip_forward =
  • 从c面向对象的实现理解c++的对象（二） jimmee C++面向对象虚函数
    1. 类就可以看作一个struct，类的方法，可以理解为通过函数指针的方式实现的，类对象分配内存时，只分配成员变量的，函数指针并不需要分配额外的内存保存地址。 2. c++中类的构造函数，就是进行内存分配(malloc)，调用构造函数 3. c++中类的析构函数，就时回收内存(free) 4. c++是基于栈和全局数据分配内存的，如果是一个方法内创建的对象，就直接在栈上分配内存了。 专门在
  • 如何让那个一个div可以拖动 lingfeng520240 html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
  • 第10章 高级事件（中） onestopweb 事件
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • 计算两个经纬度之间的距离 roadrunners 计算纬度LBS经度距离
    要解决这个问题的时候，到网上查了很多方案，最后计算出来的都与百度计算出来的有出入。下面这个公式计算出来的距离和百度计算出来的距离是一致的。 /** * * @param longitudeA * 经度A点 * @param latitudeA * 纬度A点 * @param longitudeB *
  • 最具争议的10个Java话题 tomcat_oracle java
    1、Java8已经到来。什么！？ Java8 支持lambda。哇哦，RIP Scala！ 　　随着Java8 的发布，出现很多关于新发布的Java8是否有潜力干掉Scala的争论，最终的结论是远远没有那么简单。Java8可能已经在Scala的lambda的包围中突围，但Java并非是函数式编程王位的真正觊觎者。 　 　2、Java 9 即将到来 　　 Oracle早在8月份就发布
  • zoj 3826 Hierarchical Notation(模拟) 阿尔萨斯 rar
    题目链接：zoj 3826 Hierarchical Notation 题目大意：给定一些结构体，结构体有value值和key值，Q次询问，输出每个key值对应的value值。 解题思路：思路很简单，写个类词法的递归函数，每次将key值映射成一个hash值，用map映射每个key的value起始终止位置，预处理完了查询就很简单了。 这题是最后10分钟出的，因为没有考虑value为{}的情