第4版网页设计与制作 HTML5+CSS3+JavaScript(赵丰年编著）学习笔记_我是一只蘑菇17_网页设计与制作赵丰年

未知 02-07 2297

? ? ? ? ? ? ? ? ? ? ? ? ?第1章? ?HTML5基础

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

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

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

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

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.<html lang=”zh-cn”>表示网页所使用的语言是中文。

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.<hr>标记符用于生成一条水平线，常常用于作为内容的分割符

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

? ? ? ? ? ? ? ? ? ? 第2章? ?文本格式与超链接

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

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

3.<hr size=”5” width=”100” noshade=”noshade”>

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

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

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

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

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

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:somebody@263.net,而对于常用的http和ftp等：http://·，ftp://ftp/nease.net

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

? ?其中https://·就是一个绝对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标记符（它是自结束的标记符，写作<img>或<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标记符具有更广泛的适用性，因此可以使用以下形式的代码来确保更好的兼容性。? ?

<audio controls=”controls” src=”ice.mp3”> ? ? 您的浏览器不支持audio标记符 ? ? <embed src=”song.mp3” /> ?</audio>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?第5章? ?表格与表单

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

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

3.Caption表格标题，应该直接位于<table>之后，建议使用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.<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

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

<legend>标签为 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（即<a href=””>）和area(即<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代码 }); ：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应用程序，指出<div>元素是应用程序的”所有者“

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

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

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

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

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

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