前端开发学习重点.docx

1、前端开发学习重点Web前端开发知识重点第一章 HTML重点知识1.1 HTML基本格式（括号里面的是注释） （头部部分）(可写可不写)显示在浏览器标题栏中的标题（主体部分）（页面内容）1.2 标签中的属性bgcolor=颜色 （背景颜色） background=图片的绝对路径或相对路径（背景图片）1.3 标题标签标题标签 n取16（设置文字标题）：1) 一级标题2) 二级标题3) 三级标题4) 四级标题5) 五级标题6) 六级标题1.4 文本标签 要设置的文字1.显示小字体 small./small 2.显示大字体 big./big 3.粗体字 b./b 4.斜体字 i./i 5.打字机字体

2、tt./tt 6.底线 u./u 7.删除线 strike./strike 8.下标字 sub./sub 9.上标字 sup./sup 1.5 特殊符号特殊符号代码空格 大于号()>小于号（）<引号"版权号（）©1.6 行相关标签 段落标签 (段落的对其方式) 换行标签 1.7 图片标签 (align是用于调整图片相对于周围文本的对其方式)1.8 列表 有序列表（序号类型有：1、a、A、I）填写信息（必须用将内容包括起来）填写信息填写信息 无序列表语法（序号类型有：disc(默认值,实心圆点)、circle(空心圆环)、square(空心正方形)）所写

3、内容（必须用将内容包括起来）1.9 链接标签 链接到其他页面连接标志 链接到本页面首先创建一个锚链接的锚记点：主题名称然后在具体要链接到的地方设置name:（锚记点前面要加上#号） 电子邮件链接站长邮箱 (注意不能忘了mailto)1.10 滚动标签滚动的文字和图像1.11 表格 基本格式(行)(单元格) 填充、间距属性cellpadding:内容与单元格内边框线的距离（内填充） cellspacing：单元格之间的距离（外间距）1.12 表单标签 基本格式具体的内容 表单中的元素 1).元素 (单行文本框)(单行文本框设置密码)(单选按钮男)(设置单选按钮的时候名字一定要一样)(单选按钮女)

4、(按钮提交)(按钮重置)玩游戏(复选框)2).下拉列表元素语法：内容内容内容内容 3).多行文本框元素语法：具体的内容1.13 框架1).框架的基本结构(注意：此时不能要) 2).框架页面之间的链接 第一步：在设计好的框架页面中给每个部分定义一个名字； 第二步：设置导航栏中的超链接的target目标窗口属性；链接标志1.14 分区元素 和我们经常可能需要对页面的元素进行分区或者分组。比如，如果把页面分隔为多个区域，就可以对这些区域单独的进行样式设置，这非常有利于页面的布局。或者，我们可以将一些文本分在一个组里，然后对这个组进行样式的定义。分组元素有两种： 和 。 元素可以把文档分割为独立的、不

5、同的部分。比如，查看如下代码： Some text here. This is a header This is a paragraph. Some text here.上述代码在浏览器中的显示效果如图10所示（ 元素前后的内容会换行，且其中的文本会显示为绿色）。图10另一方面，我们也可以使用 元素来分组元素。 元素自身对文档在浏览器中的显示外观没有任何影响，只有对它应用样式时，它才会产生视觉上的变化。因此，如果句子或者段落的某个部分组要分组，则可以使用 元素。比如，查看如下代码： This is a paragraph.The following words would be green.上

6、述代码在浏览器中的显示效果如图11所示（元素中的文本会显示为绿色）。图11注意：如果不对 元素应用样式，那么 元素中的文本与其他文本不会任何视觉上的差异。由图10和图11可以看出， 元素用于为块元素分组，常用于实现页面布局，而 元素用于为行内元素分组，以实现一行内不同的样式设置。1.14 行内元素与块级元素html 元素分为两种：块级元素（比如 ）和行内元素（比如 ）。在屏幕上显示时，块级元素的前面和后面都会自动换行，如同存在换行符一样，也就是说，默认情况下，块级元素会独占一行。例如，、 和 都是块级元素。在显示这些元素中间的文本时，都将从新行中开始显示，其后的内容也将在新行中显示。而内联元素

7、往往出现在句子里，在浏览器中显示时不会换行。例如，、 等。因此，如果元素是块级的，则总是在新行上显示，好比是书中的一个新段落；而元素如果是内联的，那么只能在当前行中显示，就像是段落中的一个单词。块级元素是网页上比较大的结构，因此常包含其他块级元素、内联元素和文本；而内联元素一般只能包含其他内联元素和文本。1.14 HTML注释在HTML文件里，你可以写代码注释，解释说明你的代码，这样有助于你和他人日后能够更好地理解你的代码。注释可以写在之间。浏览器是忽略注释的，你不会在HTML正文中看到你的注释。 1.15 相对路径(Relative Path)和绝对路径(Absolute Path)HTML

8、初学者会经常遇到这样一个问题，如何正确引用一个文件。比如，怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)？怎样在一个网页中插入一张图片？HTML有2种路径的写法：相对路径和绝对路径。一般相对路径比较常见，主要介绍之； HTML相对路径(Relative Path)1. 同一个目录的文件引用如果源文件和引用文件在同一个目录里，直接写引用文件名即可。我们现在建一个源文件info.html，在info.html里要引用index.html文件作为超链接。假设info.html路径是：c:Inetpubwwwrootsitesblablainfo.html假设inde

9、x.html路径是：c:Inetpubwwwrootsitesblablaindex.html在info.html加入index.html超链接的代码应该这样写：index.html2. 如何表示上级目录./表示源文件所在目录的上一级目录，././表示源文件所在目录的上上级目录，以此类推。假设info.html路径是：c:Inetpubwwwrootsitesblablainfo.html假设index.html路径是：c:Inetpubwwwrootsitesindex.html在info.html加入index.html超链接的代码应该这样写：index.html假设info.html路径

10、是：c:Inetpubwwwrootsitesblablainfo.html假设index.html路径是：c:Inetpubwwwrootindex.html在info.html加入index.html超链接的代码应该这样写：index.html 假设info.html路径是：c:Inetpubwwwrootsitesblablainfo.html假设index.html路径是：c:Inetpubwwwrootsiteswowstoryindex.html在info.html加入index.html超链接的代码应该这样写：index.html3.如何表示下级目录引用下级目录的文件，直接写下级

11、目录文件的路径即可。假设info.html路径是：c:Inetpubwwwrootsitesblablainfo.html假设index.html路径是：c:Inetpubwwwrootsitesblablahtmlindex.html在info.html加入index.html超链接的代码应该这样写：index.html假设info.html路径是：c:Inetpubwwwrootsitesblablainfo.html假设index.html路径是：c:Inetpubwwwrootsitesblablahtmltutorialsindex.html在info.html加入index.htm

12、l超链接的代码应该这样写：index.html第二章 CSS重点知识CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML元素，用于控制网页的外观。2.1 CSS样式表的调用方式 内部样式：把CSS样式表放到文档中： 格式如下： 内联式：把CSS样式表写在HTML对应的标记内。格式如下：蓝色14号文字 外部样式：把编辑好的CSS文档保存成“.CSS”文件，然后在中定义。格式如下： . 从高到低：内联样式-外部样式-内部样式-导入样式2.2 CSS选择器分类 类选择器定义：类选择器根据类名来选择，前面以”.”来命名，如.democolo

13、r:#FF0000;使用方法：在HTML中，标记可以定义一个class的属性来调用。如 . id选择器定义：根据元素ID来选择元素，具有唯一性。前面以”#”号来标志，如：#democolor:#FF0000; 使用方法：在HTML中，标记可以定义一个id的属性来调用。如 . 标签选择器定义：HTML页面是有很多不同的标签组成，标签选择器，则是决定对应标签采用相应的CSS样式。使用方法：p font-size:12px; background:#900; color:090; ，页面里对应的p标记全部应用此样式。 伪类选择器(针对超链接)一般伪类都只会被应用在链接的样式上，格式如下：a:link

14、color: #000099; -带有超链接的文字显示的样式。a:visitedcolor: #000099; -访问过的超链接显示的样式。a:hovercolor: #000099; -鼠标放在超链接上显示的样式。a:active color: #000099;-鼠标按下去是超链接显示样式。a color: #000099;-标签选择器,链接的颜色。 后代选择器（派生选择器）通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。#demo p color:#ff0000; size:14px; 通用选择器通用选择器用*来表示。例如：*font-size: 12px; 表示所有的元素

15、的字体大小都是12px。 并集选择器（群组选择器）当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。比如：p, td, li line-height:20px; color:#ff0000; 相邻选择器，上述代码中就会匹配在ul后面的第一个p，将段落内的文字颜色设置为红色。(只匹配第一个元素)ul + p color: red; 子选择器XYdiv#container ul border: 1px solid black; List Item Child List Item List Item List Item 子选择器。与后代选择器X Y不同的是，子选择器只对X下的直接子

16、级Y起作用。在上面的css和html例子中，div#containerul仅对container中最近一级的ul起作用。从理论上来讲X Y是值得提倡选择器，可惜IE6不支持。兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera 相邻选择器X Yul p color: red; 相邻选择器，与前面提到的X+Y不同的是，XY匹配与X相同级别的所有Y元素，而X+Y只匹配第一个。 否定伪类选择器 X:not(selector)div:not(#container) color: blue; 否定伪类选择器用来在匹配元素时排除某些元素。在上面的例子中，设定除了id为contain

17、er的div元素字体颜色为blue。2.3 CSS盒子模型通常有下面四种书写方法:property:value1; 表示所有边都是一个值value1； property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left 方便的记忆方法是顺

18、时针：上、右、下、左。具体应用在margin和padding的例子如下： margin:1px 0 2px 5px; 三、边框(border) 边框的属性如下：border-width:1px; -边框宽度border-style:solid; -边框样式（实线，虚线等）border-color:#000; -边框颜色可以缩写为一句：border:1px solid #000;（属性值没有顺序。 ）四、背景(Backgrounds) 背景的属性如下： background-color:#f00; -背景颜色background-image:url(background.gif); -背景图片b

19、ackground-repeat:no-repeat;-背景图片是否重复background-attachment:fixed;-背景图片是否固定background-position:0 0;-背景图片位置可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0; 语法是：background:color image repeat attachment position; 你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值默认值为：color: transparent，image: none，repeat: repeat，attachment: scroll，position: 0% 0% 五、字体(fonts) 字体的属性如下：font-style:italic;-字体风格（斜体，正常体等）