前端开发学习重点Word文档下载推荐.docx
《前端开发学习重点Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《前端开发学习重点Word文档下载推荐.docx（45页珍藏版）》请在冰豆网上搜索。
/H6>
1.4文本标签
fontsize="
字体大小"
color="
字体颜色"
face="
字体类型"
>
要设置的文字<
/font>
1.显示小字体
＜small＞..........＜/small＞
2.显示大字体
＜big＞............＜/big＞
3.粗体字
＜b＞..........＜/b＞
4.斜体字
＜i＞..........＜/i＞
5.打字机字体
＜tt＞..........＜/tt＞
6.底线
＜u＞..........＜/u＞
7.删除线
＜strike＞..........＜/strike＞
8.下标字
＜sub＞..........＜/sub＞
9.上标字
＜sup>
..........＜/sup＞
1.5特殊符号
特殊符号
代码
空格
&
nbsp;
大于号（>
）
gt;
小于号（<
lt;
引号
quot;
版权号（©
copy;
1.6行相关标签
段落标签<
p>
/p>
palign="
left"
（左对齐）/"
right"
（右对齐）/"
center"
（居中）>
（段落的对其方式）
换行标签<
br/>
1.7图片标签
imgsrc="
图片地址"
width="
图片宽度"
height="
图片高度"
alt="
图片的提示文字"
align="
top/bottom/middle/left/right"
border="
图片的边框宽度"
（align是用于调整图片相对于周围文本的对其方式）
1.8列表
有序列表
oltype=序号类型>
（序号类型有：
1、a、A、ⅰ、I）
li>
填写信息<
/li>
（必须用<
将内容包括起来）
……
/ol>
无序列表语法
ultype="
序号类型"
disc（默认值,实心圆点）、circle（空心圆环）、square（空心正方形））
所写内容<
/ul>
1.9链接标签
Ø
链接到其他页面
ahref=“链接地址”>
连接标志<
/a>
链接到本页面
首先创建一个锚链接的锚记点：
ahref=“#锚记点名称”>
主题名称<
然后在具体要链接到的地方设置name:
aname=“锚记点名称”>
（锚记点前面要加上#号）
电子邮件链接
ahref=“mailto：
邮件地址”>
站长邮箱<
（注意不能忘了mailto）
1.10滚动标签
marqueescrolldelay=滚动延迟时间direction=up/down/left/right（滚动方向）onmouseover=“this.stop（）”（当鼠标指在上面时停止滚动）onmouseout=“this.start（）”（当鼠标离开时继续滚动）>
滚动的文字和图像
/marquee>
1.11表格
基本格式
tableborder=表格的边框的宽度（一般不超过5）width=表格的宽度height=表格的高度bordercolor=表格边框线的颜色bgcolor=整个表格的背景颜色background=表格的背景图片地址（背景图片）align=表格对齐方式>
trbgcolor=行的背景颜色>
（行）
tdcolspan=跨的列数rowspan=跨的行数bgcolor=本单元格的背景颜色background=本单元格的背景图片地址（背景图片）align=单元格中的内容对齐方式（right/left/center/）>
/td>
（单元格）
/tr>
/table>
填充、间距属性
cellpadding:
内容与单元格内边框线的距离（内填充）cellspacing：
单元格之间的距离（外间距）
1.12表单标签
formaction="
URL"
name=表单名字method=提交数据的方式（post/get）>
具体的内容
/form>
表单中的元素
1）.<
input>
元素
inputname=“”type=textsize=文本框的大小maxlenght=限制输入的最大字符>
（单行文本框）
inputname=“”type=passwordsize=文本框的大小maxlenght=限制输入的最大字符>
（单行文本框——设置密码）
inputname=“name”type=radiovalue=“男”checked（默认选定）>
（单选按钮——男）（设置单选按钮的时候名字一定要一样）
inputname=“name”type=radiovalue=“女”>
（单选按钮——女）
inputname=“”type=submitvalue=提交>
（按钮——提交）
inputname=“”type=resetvalue=重置>
（按钮——重置）
inputname=“”type=checkboxvalue=play（必须有）checked>
玩游戏（复选框）
2）.<
select>
/select>
下拉列表元素
语法：
selectname=“”>
optionvalue=“”（必须有）>
内容<
/option>
……
3）.<
textarea>
/textarea>
多行文本框元素
textareaname=“”cols=“宽度”rows=“高度”（不要和合并单元格的rowspan和colspan相混淆）>
1.13框架
1）.框架的基本结构（注意：
此时不能要<
framsetcols=“25%，*”（分隔成左右两部分）rows=“25%，*”（分隔成上下两部分）border=框架边框的大小bordercolor=框架边框的颜色>
framename=“窗口的名字”src=“此窗口要显示的文件地址”scrolling=yes/no（有无滚动条）noresize（禁止改变框架窗口的大小）>
/framset>
2）.框架页面之间的链接
第一步：
在设计好的框架页面中给每个部分定义一个名字；
<
framename=”窗口的名字”src=“”>
第二步：
设置导航栏中的超链接的target目标窗口属性；
ahref=“lianjie.html”target=“要显示的窗口的名字”>
链接标志<
1.14分区元素<
span>
和<
div>
我们经常可能需要对页面的元素进行分区或者分组。
比如，如果把页面分隔为多个区域，就可以对这些区域单独的进行样式设置，这非常有利于页面的布局。
或者，我们可以将一些文本分在一个组里，然后对这个组进行样式的定义。
分组元素有两种：
和<
。
元素可以把文档分割为独立的、不同的部分。
比如，查看如下代码：
Sometexthere.
divstyle="
color:
#00FF00"
h3>
Thisisaheader<
/h3>
Thisisaparagraph.<
/div>
上述代码在浏览器中的显示效果如图－10所示（<
元素前后的内容会换行，且其中的文本会显示为绿色）。
图－10
另一方面，我们也可以使用<
元素来分组元素。
元素自身对文档在浏览器中的显示外观没有任何影响，只有对它应用样式时，它才会产生视觉上的变化。
因此，如果句子或者段落的某个部分组要分组，则可以使用<
元素。
Thisisaparagraph.Thefollowingwordswouldbe<
spanstyle="
green<
/span>
.<
上述代码在浏览器中的显示效果如图－11所示（<
元素中的文本会显示为绿色）。
图－11
注意：
如果不对<
元素应用样式，那么<
元素中的文本与其他文本不会任何视觉上的差异。
由图－10和图－11可以看出，<
元素用于为块元素分组，常用于实现页面布局，而<
元素用于为行内元素分组，以实现一行内不同的样式设置。
1.14行内元素与块级元素
html元素分为两种：
块级元素（比如<
）和行内元素（比如<
）。
在屏幕上显示时，块级元素的前面和后面都会自动换行，如同存在换行符一样，也就是说，默认情况下，块级元素会独占一行。
例如，<
、<
hn>
、和<
都是块级元素。
在显示这些元素中间的文本时，都将从新行中开始显示，其后的内容也将在新行中显示。
而内联元素往往出现在句子里，在浏览器中显示时不会换行。
a>
等。
因此，如果元素是块级的，则总是在新行上显示，好比是书中的一个新段落；
而元素如果是内联的，那么只能在当前行中显示，就像是段落中的一个单词。
块级元素是网页上比较大的结构，因此常包含其他块级元素、内联元素和文本；
而内联元素一般只能包含其他内联元素和文本。
1.14HTML注释
在HTML文件里，你可以写代码注释，解释说明你的代码，这样有助于你和他人日后能够更好地理解你的代码。
注释可以写在<
!
--和-->
之间。
浏览器是忽略注释的，你不会在HTML正文中看到你的注释。
--Thisisacomment-->
1.15相对路径（RelativePath）和绝对路径（AbsolutePath）
HTML初学者会经常遇到这样一个问题，如何正确引用一个文件。
比如，怎样在一个HTML网页中引用另外一个HTML网页作为超链接（hyperlink）？
怎样在一个网页中插入一张图片？
HTML有2种路径的写法：
相对路径和绝对路径。
一般相对路径比较常见，主要介绍之；
HTML相对路径（RelativePath）
1.同一个目录的文件引用
如果源文件和引用文件在同一个目录里，直接写引用文件名即可。
我们现在建一个源文件info.html，在info.html里要引用index.html文件作为超链接。
假设info.html路径是：
c:
\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：
\Inetpub\wwwroot\sites\blabla\index.html
在info.html加入index.html超链接的代码应该这样写：
ahref="
index.html"
index.html<
/a>
2.如何表示上级目录
../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。
\Inetpub\wwwroot\sites\index.html
../index.html"
\Inetpub\wwwroot\index.html
../../index.html"
index.html<
\Inetpub\wwwroot\sites\wowstory\index.html
../wowstory/index.html"
3.如何表示下级目录
引用下级目录的文件，直接写下级目录文件的路径即可。
\Inetpub\wwwroot\sites\blabla\html\index.html
html/index.html"
\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html
html/tutorials/index.html"
第二章CSS重点知识
CSS（CascadingStyleSheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示HTML元素，用于控制网页的外观。
2.1CSS样式表的调用方式
内部样式：
把CSS样式表放到<
文档中：
格式如下：
styletype=“text/css”>
……<
/style>
内联式：
把CSS样式表写在HTML对应的标记内。
pstyle="
font-size:
14pt;
blue"
蓝色14号文字<
外部样式：
把编辑好的CSS文档保存成“.CSS”文件，然后在<
中定义。
linkrel=stylesheethref="
css的文件地址"
.....<
从高到低：
内联样式--------外部样式---------内部样式-----------导入样式
2.2CSS选择器分类
类选择器
定义：
类选择器根据类名来选择，前面以”.”来命名，如.demo{color:
#FF0000;
}
使用方法：
在HTML中，标记可以定义一个class的属性来调用。
如<
pclass="
demo"
....<
id选择器
根据元素ID来选择元素，具有唯一性。
前面以”#”号来标志，如：
#demo{color:
}
在HTML中，标记可以定义一个id的属性来调用。
pid="
标签选择器
HTML页面是有很多不同的标签组成，标签选择器，则是决定对应标签采用相应的CSS样式。
p{font-size:
12px;
background:
#900;
color:
090;
}，页面里对应的p标记全部应用此样式。
伪类选择器（针对超链接）
一般伪类都只会被应用在链接的样式上，格式如下：
a:
link{color:
#000099;
}--------------------------带有超链接的文字显示的样式。
visited{color:
}---------------------访问过的超链接显示的样式。
hover{color:
}----------------------鼠标放在超链接上显示的样式。
active{color:
}-----------------------鼠标按下去是超链接显示样式。
a{color:
}-------------------------------标签选择器,链接的颜色。
后代选择器（派生选择器）
通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。
#demop{color:
#ff0000;
size:
14px;
通用选择器
通用选择器用*来表示。
例如：
*{font-size:
12px;
}表示所有的元素的字体大小都是12px。
并集选择器（群组选择器）
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。
比如：
p,td,li{line-height:
20px;
相邻选择器，上述代码中就会匹配在ul后面的第一个p，将段落内的文字颜色设置为红色。
（只匹配第一个元素）
ul+p{
red;
}
子选择器X>
Y
div#container>
ul{
border:
1pxsolidblack;
divid="
container"
ul>
ListItem
Child<
ListItem<
子选择器。
与后代选择器XY不同的是，子选择器只对X下的直接子级Y起作用。
在上面的css和html例子中，div#container>
ul仅对container中最近一级的ul起作用。
从理论上来讲X>
Y是值得提倡选择器，可惜IE6不支持。
兼容浏览器：
IE7+、Firefox、Chrome、Safari、Opera
相邻选择器X~Y
ul~p{
相邻选择器，与前面提到的X+Y不同的是，X~Y匹配与X相同级别的所有Y元素，而X+Y只匹配第一个。
否定伪类选择器X:
not（selector）
div:
not（#container）{
blue;
否定伪类选择器用来在匹配元素时排除某些元素。
在上面的例子中，设定除了id为container的div元素字体颜色为blue。
2.3CSS盒子模型
通常有下面四种书写方法:
property:
value1;
表示所有边都是一个值value1；
value1value2;
表示top和bottom的值是value1,right和left的值是value2
value1value2value3;
表示top的值是value1，right和left的值是value2，bottom的值是value3
value1value2value3value4;
四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针：
上、右、下、左。
具体应用在margin和padding的例子如下：
margin:
1px02px5px;
三、边框（border）
边框的属性如下：
border-width:
1px;
-------------------------边框宽度
border-style:
solid;
-------------------------边框样式（实线，虚线等）
border-color:
#000;
-------------------------边框颜色
可以缩写为一句：
border:
1pxsolid#000;
（属性值没有顺序。
）
四、背景（Backgrounds）
背景的属性如下：
background-color:
#f00;
--------------------------------------背景颜色
background-image:
url（background.gif）;
-------------------背景图片
background-repeat:
no-repeat;
---------------------------------背景图片是否重复
background-attachment:
fixed;
--------------------------------背景图片是否固定
background-position:
00;
--------------------------------------背景图片位置
background:
#f00url（background.gif）no-repeatfixed00;
语法是：
colorimagerepeatattachmentposition;
你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值
默认值为：
transparent，image:
none，repeat:
repeat，attachment:
scroll，position:
0%0%
五、字体（fonts）
字体的属性如下：
font-style:
italic;
------------------------------------字体风格（斜体，正常体等）
升级会员 