一、简介
1、前端开发最核心技术
我们知道，用所谓的网页三剑客已经不能满足需求了，那前端开发究竟要学习什么技术呢？网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。
前端开发技术
前端开发最核心的3个技术
（1）HTML是什么？
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
（2）CSS
CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。
（3）JavaScript
JavaScript是一门脚本语言。
2、前端开发其他技术
前端技术最核心的是HTML、CSS和JavaScript，但是对于一个真正的前端工程师来说，哪怕你精通这三个，你也不能称为一个真正的“前端工程师”。因为前端技术除了HTML、CSS和JavaScript这三种，还需要学习Ajax、SEO等。
（1）Ajax
Ajax，即“Asynchronous Javascript And XML（异步JavaScript和XML）”，是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个页面。
Ajax是前后端交互的技术，主要实现在前端。（不懂？！没关系，我们在Ajax教程中会讲解到）
（2）SEO
SEO，即“Search Engine Optimization（搜索引擎优化）”。SEO优化是专门利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式（国内常见的搜索引擎有百度、360、搜狗等）。
简单来说，你建好了网站并不代表你网站就能被搜索引擎搜索到，我们一般使用百度搜索资料时，搜索出来的网页有很多，但是我们一般看了搜索结果的第一、二页就不再往下看了。SEO，就是为了我们的网站能排在搜索结果的前面，这样你的网站才会有流量。你做网站，相信你也是想让你网站有更多人浏览的吧。
二、基础内容
1.基础总结
1、从web1.0到web2.0，网页制作已经变为前端开发了。现在对于前端开发，你要学的不是什么“网页三剑客”，而是“HTML+CSS+JavaScript”；
2、前端技术核心元素的是HTML、CSS和JavaScript，但是我们还要学习一些Ajax、SEO知识；
3、前端技术只能开发静态网页，而进一步学习了后端技术，你能开发一个用户交互性更好、功能更加强大的网站；
4、后端技术有ASP.NET（或PHP）、SQL Server等；
5、学习路线：HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP.NET入门（或PHP入门）→Ajax→ASP.NET进阶（或PHP进阶）；
6、学习HTML就是学习各种标签，然后针对你想要的内容来使用相应的标签；
7、HTML标签即“HTML元素”；
8、HTML基本结构：
HTML基本结构
2.HTML的基本标签
(1)HTML标签
整个网页是从这里开始的，然后到结束。
(2)head标签
head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。
表1 内部标签
内部标签 说明(3)body标签
body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。
后续课程讲解的标签都是在标签内部的各种标签。
3、段落与文字
(一)、段落标签
(1)、段落与文字标签
表1 段落与文字标签
标签 语义 说明
~
header 标题
paragraph 段落
break 换行
horizontal rule 水平线
表2 文本格式化标签
标签 语义 说明
strong（加强） 加粗
emphasized（强调） 斜体
cite（引用） 斜体
superscripted（上标） 上标
subscripted（下标） 下标
(二)、网页特殊符号
网页特殊符号只需要记忆一个就行了，就是HTML空格“ ”，其他的特殊符号我们不需要记忆，当我们需要的时候再回来查找一下特殊符号表就OK了。
(三)、自闭合标签
HTML标签分为2种，一种是“一般标签”，另外一种是“自闭合标签”。一般标签有开始符号和结束符号，自闭合标签只有开始符号没有结束符号。
一般标签可以在开始符号和结束符号之间插入其他标签或文字。
自闭合标签由于没有结束符号，不能插入其他标签或文字，只能定义自身的属性。
(1)、一般标签
举例：
(2)、自闭合标签
举例：
、
(四)、块元素和行内元素
(1)、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；
(2)、块元素特点：
（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
（2）块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。
(3)、行内元素特点：
（1）可以与其他行内元素位于同一行；
（2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
常见行内元素有：strong、em、span等。
(五)、练习题
(1)、下面是一个网页在浏览器上的效果，请制作一张一模一样的网页。
HTML段落与文字训练题
HTML段落与文字训练题
1
(6)标签的语意
标签语义对照表
标签名 英文全称 中文解释
div division 分割（块元素）
span span 区域（行内元素）
p paragraph 段落
ol ordered list 有序列表
ul unordered list 无序列表
li list item 列表项
dl definition list 定义列表
dt definition term 定义术语
dd definition description 定义描述
h1~h6 header1 ~header6 标题1~标题6
hr horizontal rule 水平线
a anchor 锚点，超链接
strong strong 强调（粗体）
em emphasized 强调（斜体）
sup superscripted 上标
sub subscripted 下标
br break 换行
fieldset fieldset 域集
legend legend 图例
caption caption （表格、图像等）标题
thead table head 表头
tbody table body 表身
tfoot table foot 表脚
th table header 表头单元格
td td 表身单元格
4、列表
3种列表的语义记忆：
表1 3种列表记忆
标签 语义 说明
ol ordered list 有序列表
ul unordered list 无序列表
dl definition list 定义列表
(一)、HTML3种列表
列表有3种：有序列表、无序列表和定义列表。
有序列表和无序列表都比较常用，而定义列表比较少用。在实际应用中，最常用的是无序列表，请大家重点掌握。
目录列表和菜单列表已经被废除，大家可以直接忽略这两种列表。
(1)、有序列表
1
2
3
4
5
<li>有序列表项</li> <li>有序列表项</li> <li>有序列表项</li>
表1 有序列表type属性
type属性值 列表项的序号类型
1 数字1、2、3……
a 小写英文字母a、b、c……
A 大写英文字母A、B、C……
i 小写罗马数字i、ii、iii……
I 大写罗马数字I、II、III……
学习了CSS入门教程之后，有序列表列表项符号由list-style-type属性定义，到时候应该摒弃type属性。
(2)、无序列表
无序列表是三个列表中最为重要的列表。
语法：
1
2
3
4
5
<li>无序列表项</li> <li>无序列表项</li> <li>无序列表项</li>
表1 无序列表type属性
type属性值 列表项的序号类型
disc 默认值，实心圆“●”
circle 空心圆“○”
square 实心正方形“■”
学习了CSS之后，无序列表列表项符号由list-style-type定义，到时候应该摒弃type属性。
(3)、定义列表
语法：
1
2
3
4
5
<dt>定义名词</dt>
<dd>定义描述</dd>
……
说明：
-
即“definition list（定义列表）”，
即“definition term（定义名词）”，而
- 即“definition description（定义描述）”。
在该语法中，
-
标记和
(二)、HTML学习中的误区
学习HTML的目的就是在你需要的地方用到符合语义的标签，把标签用“对”这才是HTML学习的目的。例如一段文字，应该使用p标签，而不是使用div标签或者其他标签。
网页语义结构良好，对于搜索引擎来说也是极为重要的一点。
(三)、练习题
1、问卷调查：下面是一个网页在浏览器上的效果，请制作一张一模一样的问卷调查网页。
要求：
（1）大标题使用
标签；
（2）问卷调查题目使用
标签
（3）前2个问题选项使用有序列表；
（4）最后一个问题选项使用无序列表
绿叶学习网问卷调查
2
5、表格
(一)、表格语义记忆
通过语义化记忆表格标签：
表1 表格基本标签
标签 语义 说明
table table（表格） 表格
tr table row（表格行） 行
td table data cell（表格单元格） 单元格
表2 表格结构标签
标签 语义 说明
thead table head 表头
tbody table body 表身
tfoot table foot 表脚
th table header 表头单元格
(二)、表格基本结构
| 是HTML表格最基本的3个标签，其他标题标签 |
| 可以没有，但是这3者必须要有。 |
|---|
HTML表格基本结构
语法：
1
2
3
4
5
6
7
8
9
10
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
说明：
和(三)、表格完整结构
表格完整结构应该包括表格标题（caption）、表头（thead）、表身（tbody）和表脚（tfoot）4部分。
表格语义化之后，使得代码更清晰和更利于后期维护。
HTML表格完整结构
语法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
说明：
、和这三个标签分别表示表头、表身、表脚。th表示表头单元格，th表示表身单元格。每一对“”表示一行。(四)、合并行和合并列
合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性。
(1)、合并行
语法：
举例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<title>合并行rowspan</title>
<table>
<!--第1行-->
<tr>
<td>姓名:</td>
<td>小明</td>
</tr>
<!--第2行-->
<tr>
<td rowspan="2">喜欢水果:</td>
<td>苹果</td>
</tr>
<!--第3行-->
<tr>
<td>香蕉</td>
</tr>
</table>
在浏览器预览效果如下：
rowspan
(2)、合并列
语法：
举例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<title>合并列colspan</title>
<table>
<!--第1行-->
<tr>
<td colspan="2">绿叶学习网精品教程</td>
</tr>
<!--第2行-->
<tr>
<td>HTML教程</td>
<td>CSS教程</td>
</tr>
<!--第3行-->
<tr>
<td>jQuery教程</td>
<td>SEO教程</td>
</tr>
</table>
在浏览器预览效果如下：
colspan
6、图像
(一)、图像标签
在HTML中，图像标签为。是一个自闭合标签。img标签只需要掌握3个属性就可以了：src、alt、title。
语法：
表1 img标签常用属性
属性 说明
src 图像的文件地址
alt 图片显示不出来时的提示文字
title 鼠标移到图片上的提示文字
src和alt这两个属性是img标签必不可少的属性。其他属性我们一般用不到，所以只需要掌握这两个属性即可，大家要是在别的书籍上看到还有别的属性，你不用去记忆它们。
(二)、相对路径和绝对路径
相对路径，指的是同一个网站下，不同文件之间的的位置定位。引用的文件位置是相对当前文件的位置而言，从而得到相对路径。
绝对路径，指的是文件的完整路径。
详细复习内容，请查看相对路径和绝对路径。
(三)、图片格式
虽然图片格式这一节知识比较多，大部分我们只需要了解就可以了，我们只需要掌握.jpg、.png和.gif三种图片格式的区别即可。
1、JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。
2、PNG格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。
3、GIF格式图片图像效果很差，但是可以制作动画。
7、链接
超链接使用a标签，语法如下：
表1 标签target属性
target属性值 说明
_self 默认方式，即在当前窗口打开链接
_blank 在一个全新的空白窗口中打开链接
_top 在顶层框架中打开链接
_parent 在当前框架的上一层里打开链接
我们只需要掌握“_self”和“_blank”这两个属性值就可以了，其他两个用不到。
超链接根据链接对象的不同分为：
（1）外部链接
（2）内部链接：①内部页面链接；②锚点链接；
举例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<title>锚点链接</title>
<div>
<a href="#music">推荐音乐</a><br />
<a href="#movie">推荐电影</a><br />
<a href="#article">推荐文章</a><br />
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="music">
<h3>推荐音乐</h3>
<ul>
<li>林俊杰-被风吹过的下图</li>
<li>曲婉婷-在我的歌声里</li>
<li>许嵩-灰色头像</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="movie">
<h3>推荐电影</h3>
<ul>
<li>蜘蛛侠系列</li>
<li>钢铁侠系统</li>
<li>复仇者联盟</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="article">
<h3>推荐文章</h3>
<ul>
<li>朱自清-荷塘月色</li>
<li>余光中-乡愁</li>
<li>鲁迅-阿Q正传</li>
</ul>
</div>
锚点链接，就是点击某一个超链接，它就会跳到当前页面的某一部分。如下图：
锚点链接
只要我们点击“推荐音乐”、“推荐电影”和“推荐文章”这三个超链接，滚动条就会滚动到相应的版块。
8、表单
表单标签共有4个：、、和。其中和是配合使用的。
我们通过一张表单来把所有input标签囊括：
HTML表单
(一)、input标签表单
大部分表单都是用input标签完成的。
语法：
说明：
表1中的表单都是使用input标签，所不同的就是type属性值不同。
input标签
(二)、textarea标签表单
(1)、多行文本框
语法：
多行文本框内容
表现形式如下：
textarea标签
(2)、3种文本框对比
单行文本框和密码文本框使用标签，而多行文本框使用标签。
①单行文本框
语法：
①密码文本框
语法：
①多行文本框
语法：
多行文本框内容
(三)、select和option
下拉列表由标签和标签配合使用。
语法：
1
2
3
4
5
<option value="选项值" selected="selected">选项显示的内容</option>
……
<option value="选项值">选项显示的内容</option>
表现形式如下：
select标签，下拉列表
(四)、训练题
1、使用你在这一章学习到的表单标签制作下面的一个表单：
HTML表单训练题
3
9、多媒体
(一)、插入音频、视频和flash
在网页中插入音频、视频和flash都是使用embed标签。
语法：
说明：
多媒体文件地址可以是相对地址，也可以是绝对地址。
width和height使用px作为单位。
(二)、插入背景音乐
为某个网页设置背景音乐，使用的是bgsound标签。不过bgsound标签只适用于IE浏览器，在Firefox等浏览器中未必适用。
设置网页背景音乐时常用的方法除了使用bgsound标签，还有使用embed标签和object标签。
语法：
说明：
loop="2"表示重复2次，loop=“infinite"表示无限次循环播放，也可以使用loop=”-1"表示无限次循环播放。
10、浮动框架iframe
(一)、浮动框架iframe简介
由于HTML5已经舍弃了frameset标签（框架集标签），所以在这一章，我们不讲解框架集frameset，只讲解一个标签：iframe标签（浮动框架标签）。
浮动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套的子窗口，整个页面并不一定是框架页面，但要包含一个框架窗口。框架可以完全由设计者定义宽度和高度，并且可以放置在一个网页的任何位置，这极大地扩展了框架页面的应用范围。
生成的框架结构是依赖上级空间尺寸的，它的宽度或者高度必须有一个和上级框架相同。而浮动框架可以完全由指定宽度和高度决定。语法：
说明：
src属性是iframe的必须属性，它定义浮动框架页面的源文件地址。
在普通框架结构中，由于框架就是整个浏览器的窗口，因此不需要设置其大小。但是在浮动框架中，框架是插入到普通HTML页面中，所以可以调整框架的大小。浮动框架的宽度和高度都是以像素为单位。width和height这2个都是可选属性。
举例：
1
2
3
4
5
6
7
8
9
10
11
12
<title></title>
<div id="main">
<h3>绿叶学习网</h3>
<iframe src="http://www.baidu.com" width="400px" height="300px"></iframe>
</div>
在浏览器预览效果如下；
框架，iframe标签
iframe标签
分析：
在这段代码中，设置了iframe的src属性值为“http://www.baidu.com”（百度首页地址），宽width为400px，高height为300px。
大家在浏览器查看到该页面嵌入了一个子页面，而这个子页面就是百度的首页。
(二)、设置浮动框架是否显示滚动条scrolling
对于浮动框架iframe的的滚动条，我们可以使用scrolling属性来控制。scrolling属性有3种情况：根据需要显示、总是显示和不显示。
语法：
说明：
scrolling属性取值如下：
scrolling属性值
scrolling属性值 说明
auto 默认值，整个表格在浏览器页面中左对齐
yes 总是显示滚动条，即使页面内容不足以撑满框架范围，滚动条的位置也预留
no 在任何情况下都不显示滚动条
举例：
1
2
3
4
5
6
7
8
9
10
11
12
<title></title>
<div id="main">
<h3>绿叶学习网</h3>
<iframe src="http://www.baidu.com" width="400px" height="300px" scrolling="no"></iframe>
</div>
在浏览器预览效果如下；
iframe标签，HTML框架
iframe标签
分析：
大家可以看到，浮动框架iframe的滚动条都消失了。大家可以在“在线测试工具”中修改一下scrolling属性值，看看不同属性值下有什么不同的效果。
浮动框架，说白了就是在一个页面嵌入一个或多个子页面，这样大家好理解了吧。
711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
