第一章 前端开发工具说明
一、Notepad++
问题一：为什么看别人写的html代码标签有颜色，而自己的没有？
解答：首先，看有没有设置代码颜色高亮（首选项——其他），其次你所编辑的文件一定要带上某种格式，否者他无法识别何种格式的文件，就不会高亮显示了。
问题二：自动补全？
为Notepad++安装 Zen Coding 插件下载Zen.Coding-Notepad++.v0.6.1.zip 解压将解压所得的文件放入 Notepad++ 程序的安装目录下的plugins文件夹。重启Notepad++，即可开始使用 Zen Coding。
使用方法：例如输入div 再按 ctrl +E 会自动补全div标签
二、Editplus
问题一：如何设置editplus中的自动补全功能？
首先在Tools中找到Configure User Tools...，点击File选项下的Settings &&syntax，在File types中选中HTML。
将下面的Auto Completion选项勾选，默认是htmlbar.acp。点击下面的OK就可以了。
问题二：怎么使用editplus的自动补全呢？
首先先新建一个HTML页面，当你要编写一个标签的时候，比如：<div></div>；你只需要编写div + 空格/回车，editplus就帮你自动补全为<div id="" class=""></div>了，非常方便。如果你不知道还有哪些快捷命令，你可以打开htmlbar.acp进行查看。找不到这个文件你就点击上图中红圈圈的那个open按钮，这样也可以打开。
三、HBuilder
一款类似于Dreamweaver的前端开发工具，但比它更强大。
快捷键：在win系统下
Ctrl+p ---- 进入边改边看模式
Ctrl+回车 ---- 回到下一行
Alt+左键点击引用的方法、id、css类、文件 ----跳转到引用的地方
非常强大的是，写js时，属性和方法哪些浏览器支持，哪些不支持，或者哪些部分支持都可以看到。例如：arguments--火狐和谷歌支持，IE和safari等不支持。
第二章 前端基础
一、hmtl定义
Html(HyperText Mark-up Language)超文本标记语言
注意：标记字母大小写均可，但是习惯都是小写。
二、常用标记
| 标记 | 类型 | 译名或意义 | 作 用 | 备注 |
| 文件标记 | ||||
| <HTML> | ● | 文件声明 | 让浏览器知道这是HTML文件 |
|
| <HEAD> | ● | 开头 | 提供文件整体资讯 |
|
| <TITLE> | ● | 标题 | 定义文件标题，将显示于浏览顶端 | <TITLE>只可出现于开头部分 |
| <BODY> | ● | 本文 | 设计文件格式及内文所在 |
|
| 排版标记 | ||||
| <!--注解--> | ○ | 说明标记 | 为文件加上说明，但不被显示 |
|
| <P> | ○ | 段落标记 | 为字、画、表格等之间留一空白行 | 但从 HTML 2.0 开始己不需要</P>作结尾 |
| <BR> | ○ | 换行标记 | 令字、画、表格等显示于下一行 |
|
| <HR> | ○ | 水平线 | 插入一条水平线 | <HR size="2" width="70%" color="#0000FF"> |
| <CENTER> | ● | 居中 | 令字、画、表格等显示于中间 | 反对 |
| <PRE> | ● | 预设格式 | 令文件按照原始码的排列方式显示 |
|
| <DIV> | ● | 区隔标记 | 设定字、画、表格等的摆放位置 |
|
| <NOBR> | ● | 不折行 | 令文字不因太长而绕行 |
|
| <WBR> | ● | 建议折行 | 预设折行部位 |
|
| 字体标记 | ||||
| <STRONG> | ● | 加重语气 | 产生字体加粗 Bold 的效果 | 逻辑标记 |
| <B> | ● | 粗体标记 | 产生字体加粗的效果 | 实体标记 |
| <EM> | ● | 强调标记 | 字体出现斜体效果 | 逻辑标记 |
| <I> | ● | 斜体标记 | 字体出现斜体效果 | 实体标记 |
| <TT> | ● | 打字字体 | Courier字体，字母宽度相同 | 逻辑标记 |
| <U> | ● | 加上底线 | 加上底线 | 反对/实体标记 |
| <H1> | ● | 一级标题标记 | 变粗变大加宽，程度与级数反比 |
|
| <H2> | ● | 二级标题标记 | 将字体变粗变大加宽 |
|
| <H3> | ● | 三级标题标记 | 将字体变粗变大加宽 |
|
| <H4> | ● | 四级标题标记 | 将字体变粗变大加宽 |
|
| <H5> | ● | 五级标题标记 | 将字体变粗变大加宽 |
|
| <H6> | ● | 六级标题标记 | 将字体变粗变大加宽 |
|
| <FONT> | ● | 字形标记 | 设定字形、大小、颜色 | 反对/默认预设size为3设置绝对size=“5”相对size=”+2” |
| <BASEFONT> | ○ | 基准字形标记 | 设定所有字形、大小、颜色 | 反对 |
| <BIG> | ● | 字体加大 | 令字体稍为加大 |
|
| <SMALL> | ● | 字体缩细 | 令字体稍为缩细 |
|
| <STRIKE> | ● | 画线删除 | 为字体加一删除线 | 反对 |
| <CODE> | ● | 程式码 | 字体稍为加宽如<TT> | 逻辑标记 |
| <KBD> | ● | 键盘字 | 字体稍为加宽，单一空白 | 逻辑标记 |
| <SAMP> | ● | 范例 | 字体稍为加宽如<TT> | 逻辑标记 |
| <VAR> | ● | 变数 | 斜体效果 | 逻辑标记 |
| <CITE> | ● | 传记引述 | 斜体效果 | 逻辑标记 |
| <BLOCKQUOTE> | ● | 引述文字区块 | 缩排字体 |
|
| <DFN> | ● | 述语定义 | 斜体效果 | 逻辑标记 |
| <ADDRESS> | ● | 地址标记 | 斜体效果 | 逻辑标记 |
| <SUB> | ● | 下标字 | 指数 |
|
| <SUP> | ● | 下标字 | 下标字 |
|
| 清单标记 | ||||
| <OL> | ● | 顺序清单 | 清单项目将以数字、字母顺序排列 |
|
| <UL> | ● | 无序清单 | 清单项目将以圆点排列 | type="disc"默认黑实心圆 type="circle" type="square" |
| <LI> | ○ | 清单项目 | 每一标记标示一项清单项目 |
|
| <MENU> | ● | 选单清单 | 清单项目将以圆点排列，如<UL> | 反对/与ul一样 |
| <DIR> | ● | 目录清单 | 清单项目将以圆点排列，如<UL> | 反对/与ul一样，但在旧ie或nc上可能没有类型效果 |
| <DL> | ● | 定义清单 | 清单分两层出现 |
|
| <DT> | ○ | 定义条目 | 标示该项定义的标题 | 旧浏览器不支持：ie3 |
| <DD> | ○ | 定义内容 | 标示定义内容 | 旧浏览器不支持：ie3 |
| 表格标记 | ||||
| <TABLE> | ● | 表格标记 | 设定该表格的各项参数 Bordercolorlight 向光部（左上）bordercolordark背光部（右下） | <tablealign="CENTER"valign="TOP"bordercolor="#FF00FF" cols="2"> |
| <CAPTION> | ● | 表格标题 | 做成一打通列以填入表格标题 |
|
| <TR> | ● | 表格列 | 设定该表格的列 | <tralign="RIGHT"valign="MIDDLE"> |
| <TD> | ● | 表格栏 | 设定该表格的栏 |
|
| <TH> | ● | 表格标头 | 相等于<TD>，但其内之字体会变粗 |
|
| 表单标记 | ||||
| <FORM> | ● | 表单标记 | 决定单一表单的运作模式 |
|
| <TEXTAREA> | ● | 文字区块 | 提供文字方盒以输入较大量文字 |
|
| <INPUT> | ○ | 输入标记 | 决定输入形式 |
|
| <SELECT> | ● | 选择标记 | 建立 pop-up 卷动清单 |
|
| <OPTION> | ○ | 选项 | 每一标记标示一个选项 |
|
| 图形标记 | ||||
| <IMG> | ○ | 图形标记 | 用以插入图形及设定图形属性 Hspace:图片左右空间 Vspace:图片上下空间 Lowsrc:一般加载大图片，是提前加载灰阶图片 | <imgsrc="logo.gif"hspace=5 vspace=5align="top"lowsrc="pre_logo.gif"> |
| 连结标记 | ||||
| <A> | ● | 连结标记 | 加入连结 |
|
| <BASE> | ○ | 基准标记 | 可将相对 URL 转绝对及指定连结目标 |
|
| 框架标记 | ||||
| <FRAMESET> | ● | 框架设定 | 设定框架 |
|
| <FRAME> | ○ | 框窗设定 | 设定框窗 |
|
| <IFRAME> | ○ | 页内框架 | 于网页中间插入框架 | IE |
| <NOFRAMES> | ● | 不支援框架 | 设定当浏览器不支援框架时的提示 |
|
| 影像地图 | ||||
| <MAP> | ● | 影像地图名称 | 设定影像地图名称 |
|
| <AREA> | ○ | 连结区域 | 设定各连结区域 |
|
| 多媒体 | ||||
| <BGSOUND> | ○ | 背景声音 | 于背景播放声音或音乐 | IE |
| <EMBED> | ○ | 多媒体 | 加入声音、音乐或影像 |
|
| 其他标记 | ||||
| <MARQUEE> | ● | 走动文字 | 令文字左右走动 |
|
| <BLINK> | ● | 闪烁文字 | 闪烁文字 | NC |
| <ISINDEX> | ○ | 页内寻找器 | 可输入关键字寻找于该一页 | 反对 |
| <META> | ○ | 开头定义 | 有关页面的元信息（meta-information）比如针对搜索引擎和更新频度的描述和关键词。 | <meta> 标签永远位于head 元素内部。元数据总是以名称/值的形式被成对传递的。
|
| <LINK> | ○ | 关系定义 | 定义该文件与其他 URL 的关系 |
|
| StyleSheet | ||||
| <STYLE> | ● | 样式表 | 控制网页版面 |
|
| <span> | ● | 自订标记 | 独立使用或与样式表同用 |
|
说明： ● 表示该标记属围堵标记，即需要关闭标记如 </标记>。
○ 表示该标记属空标记，即不需要关闭标记。
IE 表示该标记只适用于 Internet Explorer。
NC 表示该标记只适用于 Netscape Communicator。
反对 表示该标记不为 W3C 所赞同，通常这标记是 IE 或 NC 自订，且己为众所支 持，只是 HTML 标准中有其它同功能或更好的选择。
弃用 表示该标记己为 W3C 所弃用，是过时的标记，但 HTML 具向下兼容的特 性，不用担心新浏览器不支援旧标记。
新 表示该标记是 HTML 4.0 中新增的。
实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同。多个实体标记亦可有效标示同一字句，逻辑标记则通常于旧浏览器不能有效显示多重的标示。
<STRONG> <B> ：两者皆能产生字体加粗的效果，但必须注意的是当文件被设为 gb2312 Encoding 时，两者所 标示的中文字不会于 Netscape Netvigator 显示粗体效果。
<I> <EM> <VAR> <CITE> <DFN> <ADDRESS>：这些标记于 Internet Explorer 都产生斜体效果，而只有 </DFN> 于 Netscape Netvigator 失去作 用。这些标记中只有 <ADDRESS> 较为特别，因它包括换行效果所以不必在它前面加上 <BR> 标记。
<TT> <SAMP> <CODE> <KBD> 可令每字母有相等宽度且每字母之间的距离稍为加 宽。但于 NC 不见得如此。
<U> 是加底线的标记，一些特别的浏览器并不支援，因顾虑到与连结混淆。
<STRIKE> 加上删除线的标记。
<BIG> 令字体加大。
<SMALL> 令字体变细。
<SUB> 为下标字， <SUP> 则为上标字，仅剩的数学标记。
忽略空格style=”white-space:pre”
三、链接标记详解：
1、<A> 称链接标记
<a href="index.html" name="hello" target="_top">
常见属性解释：
href作为一外部链接时：可以使相对路径也可以是绝对路径。
作为内部链接时：需要配合name属性使用，name属性事先设定好需要链接到的参考点。例如<a href="#C4" name="" target="_top">点击跳转到当前页name=”C4”标记的地方</a>。
也可以跳其他页面的：<a href="a.html#C4" name="" target="_top">点击跳a.htmlC4</a>
· target="_blank" 或 target="new" 将连结的画面内容，开在新的浏览视窗中。
· target="_parent" 将连结的画面内容，当成文件的上一个画面。
· target="_self" 将连结的画面内容，显示在目前的视窗中。(内定值)
· target="_top"(默认) 将框架中连结的画面内容，显示在没有框架的视窗中。（即除去了框架) /回到顶部
href=”#” 和 javaScript:void(0)区别：
href=”#”包含了一个位置信息，默认是锚点#top,回到网页上端；
Void(window.open)返回udefined,void是一个操作符，指定要计算的一个表达式，不返回值。
javaScript:void(0) 和return false(绑定a链事件，取消a节点的默认行为，跳出执行的语句块)
<a href="javascript:onreturn()" id="a4">我是连接</a>
function onreturn(){
return false;
}<BASE> 是一个连结基准标记，用以改变文件中所有连结标记的参数内定值。它只能应用于文件的开头部分，即标记 <HEAD> 与 </HEAD> 之间。简单的说就相当于设定了一个基础的路径，后面的连接都在这个路径的基础下打开。例如：在<base href="http://127.0.0.1:8020/testHtml/" target="_top">此时在下面连接中的地址，都是一次地址为基础去打开的链接。
2、框架标记详解：
<FRAMESET> 称框架标记，用以宣告HTML文件为框架模式，并设定视窗如何分割。
<FRAME> 则只是设定某一个框窗内的参数属性。
<frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="">
clos纵向切割 rows横向切割
frameborder="0" 设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。（避 免使用 yes 或 no ）
注意：<FRAMESET>不能和<body>一起使用，否者<FRAMESET>会无效
例如：
<frameset cols="150,*">
<frameset rows="80,*">
<frame name="upper_left" src="a.html">
<frame name="lower_left" src="b.html">
</frameset>
<frame name="right" src="c.html">
</frameset> <NOFRAMES> ：当别人使用的浏览器太旧，不支援框架这个功能时，他看到的将会是一片空白。为了避免 这种情况，可使用 <NOFRAMES> 这个标记，当使用者的浏览器看不到框架时，他就会看 到 <NOFRAMES> 与 </NOFRAMES> 之间的内容，而不是一片空白。这些内容可以是提醒 浏览转用新的浏览器的字句，甚至是一个没有框架的网页或能自动切换至没有框架的版本 亦可。
<frameset rows="80,*">
<noframes>
<body>
很抱歉，陛下使用的浏览器不支援框架功能，请转用新的浏览器。
</body>
</noframes>
<frame name="top" src="a.html">
<frame name="bottom" src="b.html">
</frameset><IFRAME> ：它的作用是在一页网页中间插入一个框窗以显示另一个文件。
3、其他特殊标签：
<META> 是放于 <HEAD> 与 </HEAD>之间的标记：
- <meta name="Description" content="This is Chris's Home Page"> 该网页的描述，作用于搜索引擎的登录。
- <meta name="Keywords" content="Chris, Web, Music, photo"> 该网页的关键字，作用于搜索引擎的登录。
- <meta http-equiv="Expires" content="Tue, 09 Dec 1997 00:00:00 GMT">
- <meta http-equiv="Pragma" content="no-cache">
- 以上行功能相同，都是要浏览器重新载入该页，不要使用快取功能，当然可以修改 Expire （过期）时间。
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- 设定这是 HTML 文件及其编码语系，简体中文网页使用charset=gb2312，繁体中文使用charset=big5，或者不设编码也可，纯英文网页建议使用 iso-8859-1。
- <meta name="GENERATOR" content="Mozilla/4.04 [en] (Win95; I) [Netscape]">
- <meta name="GENERATOR" content="Microsoft FrontPage 3.0">
- 这只表示该网页由什么编辑器写的。
- <meta http-equiv="refresh" content="10; url=http://www.hkiwc.com/">
这行较为实用，能于预定秒数内自动转到指定网址。原代码中 10 表示 10秒。
4、网页中常用的特殊字符：
| HTML 原始码 | 显示结果 | 描述 |
| < | < | 小於号或显示标记 |
| > | > | 大於号或显示标记 |
| & | & | 可用於显示其它特殊字符 |
| " | " | 引号 |
| @reg | ® | 己注册 |
| @copy; | © | 版权 |
| ™ | ™ | 商标 |
|   |
| 半方大的空白 |
|   |
| 全方大的空白 |
| |
| 不断行的空白 |
5、色调概述
HTML 的颜色表示可分两种：
- 以命名方式定义常用的颜色，如 RED。
- 以 RGB 值表示，如 #FF0000 表示 red。
命名方式涵括的色种不多亦不甚方便，较少采用，以下介绍 RGB 值的原理：
众所皆知颜色是由 "red" "green" "blue" 三原色组合而成的，在 HTML 中对於彩度的定义是 采十六进位的，对於三原色 HTML 分别给予两个十六进位去定义，也就是每个原色可有 256 种彩度，故此三原色可混合成一千六佰多万的颜色。
例如
白色的组成是 red=ff, green=ff, blue=ff, RGB 值即为 ffffff
红色的组成是 red=ff, green=00, blue=00, RGB 值即为 ff0000
绿色的组成是 red=00, green=ff, blue=00, RGB 值即为 00ff00
蓝色的组成是 red=00, green=00, blue=ff, RGB 值即为 0000ff
黑色的组成是 red=00, green=00, blue=00, RGB 值即为 000000
应用时常在每个 RGB 值之前加上符号 # 以示分别，但不加亦可。 对于红色来说：00-ff颜色在亮度上发生改变，00时极暗好似黑色，当逐渐增加时，其亮度也逐渐增加，由暗红变为鲜红。红+绿=黄；绿+蓝=浅绿；红+蓝=桃红；我们可以通过颜色搭配来预测组合后的颜色。
常用颜色对应表
其他颜色对应表
1470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
