Web前端开发实战(第1辑)(套装共3册, HTML5+CSS+Canvas)(txt+pdf+epub+mobi电子书下载)

作者：莫振杰

出版社：人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

Web前端开发实战(第1辑)(套装共3册, HTML5+CSS+Canvas)试读：

前言

第一部分 HTML入门

第1章 HTML基础

1.1 Web技术简介

1.2 HTML是什么

1.3 HTML入门简介

1.4 本章总结

第2章 前端开发工具

2.1 前端开发工具

2.2 新建HTML页面

第3章 HTML 基本标签

3.1 HTML基本结构

3.2 head标签

3.3 body标签

3.4 HTML注释

3.5 本章总结

训练题

第4章 段落与文字

4.1 段落与文字简介

4.2 标题标签

4.3 段落标签

4.4 文本格式化标签

4.5 水平线标签

4.6

4.7 网页特殊符号

4.8 自闭合标签

4.9 块元素和行内元素

4.10 本章总结

4.11 训练题

第5章 列表

5.1 HTML列表简介

5.2 有序列表

5.3 无序列表

5.4 定义列表

5.5 HTML中的大误区

5.6 本章总结

5.7 训练题

第6章 表格

6.1 表格简介

6.2 表格基本结构

6.3 表格完整结构

6.4 表格语义化

6.5 合并行rowspan

6.6 合并列colspan

6.7 本章总结

6.8 训练题

第7章 图像

7.1 图像标签

7.2 相对路径和绝对路径

7.3 图片格式

7.4 本章总结

第８章 超链接

8.1 超链接简介

8.2 a标签

8.3 内部链接

8.4 锚点链接

8.5 本章总结

第9章 表单

9.1 表单简介

9.2 form标签

9.3 input标签简介

9.4 单行文本框text

9.5 密码文本框password

9.6 单选按钮radio

9.7 复选框checkbox

9.8 表单按钮

9.9 图片域image

9.10 隐藏域hidden

9.11 文件域file

9.12 多行文本框textarea

9.13 下拉列表select

9.14 input标签按钮与button标签按钮

9.15 本章总结

9.16 训练题

第10章 多媒体

10.1 网页中插入音频和视频

10.2 网页中插入背景音乐

10.3 网页中插入Flash

10.4 本章总结

第11章 框架

11.1 浮动框架iframe

第二部分 CSS入门

第12章 CSS基础

12.1 CSS是什么

12.2 CSS入门简介

12.3 CSS的三种引用方式

第13章 CSS选择器基础

13.1 元素的id和class

13.2 什么叫CSS选择器

13.3 CSS选择器入门（上）

13.4 CSS选择器入门（下）

第14章 字体样式

14.1 字体样式简介

14.2 字体类型font-family

14.3 字体大小font-size

14.4 字体颜色color

14.5 字体粗细font-weight

14.6 字体斜体font-style

14.7 CSS注释

14.8 本章总结

第15章 文本样式

15.1 文本样式简介

15.2 下划线、删除线和顶划线text-decoration

15.3 文本大小写text-transform

15.4 font-variant属性

15.5 首行缩进text-indent

15.6 文本水平对齐text-align

15.7 行高line-height

15.8 字母间距letter-spacing和词间距word-spacing

15.9 文本样式总结

第16章 边框样式

16.1 边框样式简介

16.2 整体边框样式

16.3 局部边框样式

16.4 本章总结

第17章 背景样式

17.1 背景样式简介

17.2 背景颜色background-color

17.3 背景图像简介

17.4 背景图像样式background-image

17.5 背景重复样式background-repeat

17.6 背景图像位置background-position

17.7 背景固定样式background-attachment

17.8 本章总结

第18章 超链接样式

18.1 超链接伪类

18.2 深入了解:hover伪类

18.3 鼠标样式

18.4 本章总结

第19章 图片样式

19.1 图片大小

19.2 图片边框border

19.3 图片水平对齐

19.4 图片垂直对齐

19.5 文字环绕效果float

19.6 本章总结

第20章 列表样式

20.1 列表项符号list-style-type

20.2 自定义列表项符号list-style-image

20.3 本章总结

第21章 表格样式

21.1 表格边框合并border-collapse

21.2 表格边框间距border-spacing

21.3 表格标题位置caption-side

21.4 本章总结

第22章 CSS盒子模型

22.1 CSS盒子模型

22.2 宽度width和高度height

22.3 边框border

22.4 内边距padding

22.5 外边距margin

22.6 本章总结

第23章 浮动布局

23.1 HTML文档流

23.2 浮动float

23.3 清除浮动clear

23.4 本章总结

第24章 定位布局

24.1 定位布局简介

24.2 固定定位fixed

24.3 相对定位relative

24.4 绝对定位absolute

24.5 CSS静态定位static

附录 HTML标签的语义

后记

返回总目录作者简介

2011~2015年就读于暨南大学信科院计算机科学与技术专业，从事前后端开发一年多，开发过绿叶学习网、广州智能工程研究会网站、大量在线应用工具，业余时间阅读大量国内外技术书籍。 现为绿叶学习网（http://www.lvyestudy.com）的站长，该网站用于分享自己在前后端开发中的一些经验，并且制作相关前后端开发的在线教程。这些在线教程在互联网引起广泛关注，极大受到网友推崇。本人编写过大量原创在线教程，每一个教程广受网友称赞与推崇。

本书特色（1）高度浓缩，由互联网公认最高效最精华的原创在线教程转化而来；（2）讲解通俗易懂，很多地方用最形象的例子直击知识的本质；（3）一针见血，直指痛点，过时的知识和思维不会涉及，鲜少用的只是提及一下，减轻学习者负担；（4）严格按照W3C规范，规避市面上大多数良莠不齐的书籍中的思维误区；（5）结合互联网最好的在线教程进行同步学习；（6）大量把个人经验分享到其中，第一人称角度，文字有温度，不像大多数书籍机械化地讲解；（7）本书附有大量最实用的前端开发工具、手册等；

区别于同类图书（1）由极受欢迎的在线教程（作者编写放上互联网）转化而来，即本书内容有过半年的互联网考验，被公认为互联网最好的HTML和CSS教程之一；（2）语言简练，注重实战，规避市场上大多数同类书籍大篇幅的讲解技术历史；（3）结合自己开发经验，大量开发技巧贯穿全书，这一点是大多数同类书籍所没有的；（4）通俗易懂，口语化但不失严谨，这一点是大多数书籍所没有的；内容提要

本书分为两大部分：第一部分是HTML入门，主要介绍网页结构基础知识；第二部分是CSS入门，主要介绍网页样式方面的基础知识。此外，本书还融入了大量的开发技巧，更加注重编程思维的培养，使得学习者能有顺畅的学习思路。

作者结合自己的网站前后端开发中的大量实践经验，将知识系统化，浓缩为精华，用通俗易懂的语言直指网页设计初学者的痛点。本书适合Web前端开发初学者、大中专院校相关专业学生，以及想要系统掌握Web开发基础知识的读者学习参考。前言

近年来，Web前端技术飞速发展，日趋重要。在Web前端技术中，HTML和CSS是最基础的知识。

本书内容源于笔者在绿叶学习网分享的两个超人气在线教程。这两个教程被公认为是互联网最好的入门教程，广受学友称赞。本书对这些内容进行深加工，使其更加完善。为了避免前端新人走太多的弯路，笔者把前端碎片化的知识系统化，指出许多书籍中所没有提到的学习误区，并且提供给前端初学者一个学习思路的流程。除了注重知识的讲解，更加注重开发技巧和思维。本书特色

①高度浓缩，对于过时的知识和思维不会过多涉及，减轻学习者负担。

②通俗易懂，用最贴心形象的语言直指技术本质。

③同步学习，将本书内容结合在线教程同步学习，提高效率。

④贴近读者，结合自己学习经历，文字有温度。

⑤直击痛点，规避很多学习中的思维误区，如使用HTML属性定义样式、Dreamweaver界面操作开发。读者对象

①Web前端开发初学者。

②大中专院校相关专业学生。

③想要系统学习、有一定基础的Web爱好者。代码下载

本书中的代码请从www.epubit.com.cn本书页面下载。特别致谢

本书在编写的过程中得到了很多人的帮助。特别感谢杨炳晔女士的不断鼓励与支持，非常感谢陈志东先生给笔者诸多有用的建议以及对稿件细致的审阅。此外感谢邵婵、程紫梦、孙鸿焱、方明晨等人给予的莫大帮助与支持。

由于作者水平有限，书中难免有错漏之处，读者如果遇到问题或有任何意见和建议，都可以到绿叶学习网（http://www.lvyestudy.com）或者以邮件（lvyestudy@foxmail.com）与编者联系。编者第一部分HTML入门第1章HTML基础1.1　Web技术简介

在HTML入门教程学习之前，有必要跟大家讲一些网站开发的相关知识。了解这些知识，对你以后网站开发之路如何走、该学习些什么，是非常有用的。同时也避免你走太多的弯路。1.1.1　从网页制作到前端开发1．Web 1.0时代的网页制作

网页制作是Web 1.0时代的产物，那个时候的网页主要是静态网页，所谓的静态网页就是没有与用户进行交互，且仅仅供读者浏览的网页，例如一篇QQ日志、一篇博文等展示性网页。在Web 1.0时代，用户能做的唯一一件事就是浏览这个网站的文字图片内容，不能像现在一样评论交流（缺乏交互性）。现在大多数人都听过“网页三剑客Dreamweaver+Fireworks+Flash”吧，这个组合就是Web 1.0时代的产物。

注：网页三剑客指的是“Dreamweaver、Fireworks和Flash”。2．Web 2.0时代的前端开发“前端开发”是从“网页制作”演变而来的。

从2005年开始，互联网进入Web 2.0时代，由单一的文字和图片组成的静态网页已经不能满足用户的需求，用户需要更好的体验。在Web 2.0时代，网页有静态网页和动态网页。所谓动态网页，就是指用户不仅仅可以浏览网页，还可以与服务器进行交互。举个例子，你登录新浪微博，要输入账号密码，这个时候就需要服务器对你的账号和密码进行验证通过才行。Web 2.0时代的网页不仅包含炫丽的动画、音频和视频，还可以让用户在网页中评论交流、上传和下载文件等（交互性）。这个时代的网页，如果是用“网页三剑客Dreamweaver+Fireworks+Flash”制作的，那远远不能满足需求。现在网站开发无论是开发难度，还是开发方式，都更接近传统的网站后台开发，所以现在不再叫“网页制作”，而是叫“Web前端开发”。

所以，处于Web 2.0时代的你，如果要学习网站开发技术，就不要再相信所谓的“网页三剑客Dreamweaver+Fireworks+Flash”，因为这个组合已经是上个互联网时代的产物。而且这个组合开发出来的网站的问题也非常多，例如代码冗余、维护困难（学习到后期，你会知道为什么不用这个组合了）。1.1.2　前端技术1．前端开发最核心技术

我们知道，用所谓的网页三剑客已经不能满足需求了，那前端开发究竟要学习什么技术呢？网页最主要由三部分组成：结构、表现和行为。现在网页的新标准是W3C，目前的模式是HTML、CSS和JavaScript，如图1-1所示。图1-1　前端最核心三种技术（1）HTML是什么

HTML，全称“Hyper Text Markup Language”（超文本标记语言），简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。（2）CSS

CSS，全称“层叠样式表”。以后我们在别的地方看到“层叠样式表”或“CSS样式”，指的就是CSS。（3）JavaScript

JavaScript是一门脚本语言。（4）HTML、CSS和JavaScript的区别

我们都知道前端技术最核心的是HTML、CSS和JavaScript这三种。但是这三者究竟是干嘛的呢？“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。”

这不是等于没说吗？好吧，我给大家打个比喻。我们把前端开发的过程比喻成“建房子”，做一个网页就像盖一栋房子，先把房子结构建好（HTML）。建好房子之后给房子装修（CSS），例如往窗户安上窗帘、给地板铺上漂亮的瓷砖。最后呢，装修完了之后，当夜幕降临的时候，我们要开灯（JavaScript），这样才能看得见里面。现在大概懂了吧。

回到实际例子中去，看一下绿叶学习网的导航条。我们先分析一下“前端技术”这一栏目具有的基本特点，如图1-2所示。

① 导航条文字颜色是白色。

② 大小是14px。

③ 背景颜色是绿色。

④ 鼠标指针移动到上面时颜色会变成深绿色。

这些效果是怎么做出来的呢？其实思路就跟上面介绍的“建房子”一样。我们先用HTML搭建网页结构，默认情况下，字体、字体颜色、字体大小和背景颜色如图1-2所示。然后我们通过CSS修饰一下，改变其字体、字体大小、字体颜色和背景颜色，得到如下的效果图（见图1-3）。图1-2　仅仅使用HTML的文字图1-3　在HTML基础上加入CSS的文字

最后，我们通过JavaScript定义一个鼠标行为，就是鼠标指针移动到上面的时候，背景颜色会变为深绿色，效果如图1-4。图1-4　加入JavaScript特效的文字

现在大家就知道一个缤纷多彩的网页究竟是怎样做出来的，也知道为什么前端技术最核心的是HTML、CSS和JavaScript了吧？2．前端开发其他技术

前端技术最核心的是HTML、CSS和JavaScript，但是对于一个真正的前端工程师来说，哪怕你精通这三种，也不能称为一个真正的“前端工程师”。因为前端技术除了HTML、CSS和JavaScript这三种，还需要学习HTML5、CSS3、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.3　后端技术

如果我们学习完前端技术，其实也差不多可以开发属于自己的网站了。不过这个时候开发出来的网站是一个静态的网站，唯一的功能是供用户浏览，缺乏与用户的交互性，用户能操作的东西不多。因此，如果我们要开发一个用户体验更好、功能更加强大的网站，就要学习一下后端技术。

那后端技术究竟是怎样的一门技术呢？举个简单的例子，很多大型网站都有注册功能，只有用户注册了之后才具有某种权限。例如你要使用QQ空间，你就要注册一个QQ才能使用。这样的功能就是用后端技术实现的。再有，淘宝网不是有很多商家吗？这些商家有各种各样的商品，这些庞大的数据只能使用后端技术中的数据库技术才能实现。1．PHP

PHP是一种通用开源脚本语言。其语法吸收了C语言、Java和Perl的特点，易于学习，使用广泛，主要适用于Web开发领域。2．JSP

JSP技术有点类似ASP技术，它是在传统的网页HTML文件中插入Java程序段（Scriptlet）和JSP标记（tag），从而形成JSP文件。用JSP开发的Web应用是跨平台的，既可以在Windows系统下运行，也能在其他操作系统（如Linux）上运行。3．ASP.NET

ASP.NET的前身就是我们常说的ASP技术。我们的官网绿叶学习网就是使用ASP.NET开发的。对于新手要注意一点，ASP是落后20年的技术了，我们应该学习的是ASP.NET而不是ASP。

以上三种都是动态网页技术，大家可以到百度百科中详细了解一下动态网页技术。

很多人都以为“网站就是很多网页的集合”，这个理解太恰当了。准确来说，应该是“网站是前端与后端的结合”。1.1.4　从前端开发到后端开发的学习路线1．常见的Web技术（见图1-5）图1-5　常见的Web技术2．学习路线

从上面我们可以看出，Web技术实在是太多了，很多同学都不知道怎么入手，上网问别人，回答又五花八门。以下是本书的推荐路线。HTML→CSS→JavaScript→jQuery→CSS3→HTML5→ASP.NET（或PHP）→AJAX

这条路线是一条比较理想的、从前端开发到后端开发的学习路线，你别看这条路线那么长，其实我是截断了来定制的，要掌握的也就几门技术：HTML、CSS、JavaScript、ASP.NET（PHP）、Ajax等。

在HTML刚刚入门的时候，你不需要一定要把HTML学到精通才去学CSS入门教程（这也不可能），这是一种最笨又最浪费时间的学习模式。所以对于初学者，千万别想着精通了一门技术，再去精通另外一门技术。你要是能做到了，我相信很多人都拜你为师了。因为技术这种东西是要“通十行”才会把一行给通了。

如果走别的路线，你可能将会走很多很多的弯路。这条路线是本人从前端技术初学者开始，到开发了绿叶学习网、广州智能工程研究会网站、毕业选题系统、大量在线工具等项目以及阅读大量技术书籍之后的心血总结。当然，这条路线也只是一个建议，并非硬性的。

接下来，让我们踏入前端开发的第一步——HTML入门教程。【疑问】

1．什么叫XHTML+CSS+JavaScript？

市面上很多书名都叫“DIV+CSS”或“HTML+CSS”，其实这两个叫法都是不严谨的，准确来说是“XHTML+CSS”。但是叫的人多了，大家也知道是那个意思，所以就约定俗成干脆称为“DIV+CSS”或“HTML+CSS”。所以以后，我们看到“DIV+CSS”或“HTML+CSS”，心里也应该知道指的是“XHTML+CSS”。然而什么叫XHTML，我们在后面的章节会介绍，读者现在不必惊慌。

2．常见的JavaScript框架应该学习哪个？

我们知道，HTML、CSS和JavaScript是前端技术中最基本的三个元素。HTML和CSS，它们没有别的框架，但是对于JavaScript来说，它却有很多框架，例如：“jQuery、ExtJS、Dojo、YUI……”

那对于初学者来说，应该选择哪个JavaScript框架比较好呢？当然非jQuery莫属了。jQuery是全球最流行的JavaScript框架，是最简单易懂、最适合初学者入门的JavaScript框架，没有之一。1.2　HTML是什么

HTML，全称“Hyper Text Markup Language”（超文本标记语言），它是制作万维网页面的标准语言。

HTML不是一门编程语言，而是一门描述性的“标记语言”。HTML最基本的语法如下：<标签符>内容

标签符一般都是成对出现，有一个开始符号和一个结束符号，结束符号只是在开始符号的前面加一个斜杠“/”。当浏览器收到HTML文本后，就会解释里面的标签符，然后把标签符相对应的功能表达出来。

例如，用< em >< /em >标签用来定义文字为斜体字；用< strong >< /strong >来定义文字为粗体。当浏览器遇到标签对时，就会把标签中所有文字用斜体显示出来。绿叶学习网

当浏览器遇到上面这行代码时，会得到如下斜体文字效果，见图1-6。图1-6　浏览器解析代码效果

HTML要学习什么呢？用一句很简单易懂的话来说就是：学习HTML就是学习各种标签，就是学习网页的“骨架”。

标签有文字标签、图像标签、音频标签、表单标签等。HTML这门语言就是一门描述性的语言，就是用标签来说话的。举个例子：如果你要在浏览器显示一段文字，你就用到段落标签p；如果你要在浏览器显示一张图像，就要用到图像标签img……针对对象不同，使用的标签不同。假如你想要在浏览器显示一张图片，你用段落标签p就不可能将图片显示出来。所以，学习HTML说白了就是学习各种各样的标签，然后针对你想要显示的内容来使用相应的标签，并且在相应的地方用对标签。

此外，很多时候我们也把“标签”说成“元素”，例如“p标签”说成“p元素”，这说的是一个意思，只是叫法不同而已。而“标签”的叫法更形象地说明了HTML元素是用来“标记”的，来标记这是一段文字还是一张图片，从而让浏览器将你的代码解析出来而展示给用户看。1.3　HTML入门简介1.3.1　教程说明

在1.1节“Web技术简介”中，我们讲到从前端技术到后端技术的学习流程：HTML→CSS→JavaScript→jQuery→CSS3→HTML5→ASP.NET（或PHP）→AJAX

在HTML入门学习之前，我们有必要给初学者说明一下：在接下来的HTML入门教程学习中，我们仅仅是学习标签，不会像别的书籍那样将HTML和CSS进行混合讲解。

本书是我的心血积累，在编写的时候字斟句酌。从一开始学习HTML的时候，我就在记录自己当初作为初学者时所遇到的一些问题，所以我很了解作为初学者的你的心态，也很清楚你应该怎么样才能快速而无阻碍地学习。我是站在初学者的角度，而不是站在已经学会的角度来编写本书的。有一句话说得好，如果你已经站在山顶上了，当初在爬山的时候你若缺少细心体会，这时你早就忘记作为攀岩者艰苦攀登时的心情了。

对于本书中的每一句话，我都精心编写，审阅了无数遍，尽量把精华呈现给大家。所以大家在阅读的时候，不要图快，尽量把速度放慢，把每一个概念都理解，千万别指望什么“48小时精通HTML+CSS”。别信这种鬼话。

当然，个人能力有限，书中疏漏和错误在所难免，也欢迎大家指正。

有一种学习模式是值得推荐的：学技术，泛读十本书不如精读一本书十遍。这句话适用于学习任何课程。挑一本最精华的书，把这本书当做主体，然后辅以其他的书籍来弥补这本书的缺陷。

大家在学习过程中遇到任何困难，都可以到绿叶学习网的论坛上面提问，届时会有很多热心的网友帮忙喔。如果大家发现教程中有任何错误，也希望大家发邮件给本人（lvyestudy@foxmail.com），以便我把教程做得更加完善。

在HTML入门教程中，我把一些HTML学习的思想和技巧，如“HTML语义化”等穿插在各个章节，以便大家更好地提高技能。1.3.2　初学者比较关心的问题1．HTML入门需要什么基础？

学习HTML不需要任何编程基础，哪怕你是一个小学生都可以学习。当年我的计算机网络课的教授说，他见过有些小学生都会做网页了！当时我立刻晕了过去，因为当时我还不懂什么HTML标签。后来自己学到一定程度才知道为什么大学课程没有涉及HTML这些东西，因为这些是完全可以自学的，跟离散数学、算法分析、数据结构那些知识完全没办法比。也就是说，网站开发的基本技术（如HTML和CSS）是非常容易学的，不要抱怨自己不会，那是你不够努力。如果你是大学生，你还不赶紧努力？！ 在接下来的学习，你没有理由再抱怨难学了。2．学习完HTML入门后，能达到什么程度？

可以把基本的网页都做出来了，例如一篇博客。3．学习HTML入门，要花多少时间？

不多，努力学的话，3到5天就学得很好了。当然仅仅学完这门教程，也只是入门程度。1.4　本章总结1．前端技术简介（1）从Web 1.0到Web 2.0，网页制作已经变为前端开发了。现在对于前端开发，你要学的不是什么“网页三剑客”，而是HTML+CSS+JavaScript。（2）前端技术核心元素的是HTML、CSS和JavaScript，但是我们还要学习一些AJAX、SEO知识。（3）前端技术只能开发静态网页，而进一步学习后端技术后，你能开发一个用户交互性更好、功能更加强大的网站。（4）后端技术有PHP、JSP、ASP.NET。（5）学习路线：HTML→CSS→JavaScript→jQuery→CSS3→HTML5→ASP.NET（或PHP）→AJAX2．什么是HTML？（1）学习HTML就是学习各种标签，然后针对你想要的内容来使用相应的标签。（2）HTML标签即“HTML元素”。第2章前端开发工具2.1　前端开发工具

根据个人经验，目前比较好的前端开发工具有Dreamweaver、Subline Text和Visual Studio等。2.1.1　Dreamweaver

Dreamweaver，简称DW，是Adobe公司的一款非常优秀的网页开发工具，并且深受广大用户（特别是初学者）的喜爱。现在最新的版本是Dreamweaver CC。

对于初学者来说，Dreamweaver是最理想的开发工具，是广大前端入门者的首选。但是要强调一下，如果选择了Dreamweaver作为开发工具，我们一定不要使用Dreamweaver那种传统的、使用操作界面的方式来开发网页。这种开发方式已经被摒弃很久了。笔者当初刚刚接触前端开发的时候，也是深受其害。当时跟着一个视频学，第一步点击哪里，第二步点击哪里……点点点，全部是用鼠标来点，点到我头都晕了。

大家不要觉得Dreamweaver用鼠标操作的方式来制作网页既简单又方便。学了一段时间你会发现，你学到的根本不是知识，而只是开发网页时你应该点哪里！还有，当你用Dreamweaver鼠标操作的方式来制作网页时，你会发现弊端何其多！特别是冗余的代码，一堆一堆的，让开发出来的网站难以在后期进行维护。

当然，Dreamweaver还是挺不错的一个开发工具，我并非反对大家使用Dreamweaver，而是反对大家使用Dreamweaver界面操作的方式来制作网页。对于刚刚接触前端开发的新手来说，可以使用Dreamweaver作为开发工具，不过本人强烈建议你一定要用代码去写网页，别用鼠标点击的方式进行。还有，我可以很清楚地告诉你，现在大部分网站都不用鼠标操作实现的，而是靠编写代码。哪怕人家用Dreamweaver开发，都不会单纯采用鼠标点击的方式。

不过话说回来，Dreamweaver依然是初学者的首选开发工具，简单方便。但是我们一定不要使用“点点点”方式来开发网页，切记。2.1.2　Sublime Text

Sublime Text凭借其漂亮的用户界面和极其强大的功能，被誉为“神级”代码开发工具。

Sublime Text 支持多种编程语言的语法高亮，拥有优秀的代码自动完成功能。此处，它还拥有代码片段（Snippet）的功能，可以将常用的代码片段保存起来，在需要时随时调用。Sublime Text 支持 VIM 模式，可以使用VIM模式下的多数命令。

Sublime Text 还具有良好的扩展能力和完全开放的用户自定义配置与神奇实用的编辑状态恢复功能，支持强大的多行选择和多行编辑。

该编辑器在界面上比较有特色的是支持多种布局和代码缩略图。利用右侧的文件缩略图滑动条，可以方便地观察当前窗口在文件的哪个位置。

如果你已经有一定的前端基础，我相信Sublime Text更加适合你。Sublime Text可以让你快速地进行开发，强力推荐！2.1.3　Visual Studio

Microsoft Visual Studio，简称VS，是微软公司的开发工具包系列产品，是目前最流行的Windows平台应用程序的集成开发环境（IDE）。所谓的集成开发环境，就是指用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面工具。这么复杂，谁看得懂呀？哎，简单来说，Visual Studio是一个具有很多用途的开发工具，它可以用来开发功能很强大的网站。这下懂了吗？

Visual Studio是笔者推荐的三款开发工具中功能最强大的，但是使用起来也相对复杂。不过用习惯了之后，开发效率还是非常高的。Visual Studio不仅可以开发静态网页，还非常有利于开发动态网页。在开发动态网页方面，可以说Visual Studio比Dreamweaver更胜一筹。前面我们说过，静态网页一般是没有交互性的，用户能做的也仅仅是浏览网页。而在动态网页中，作为用户，我们可以参与评论交流、上传文件，以及使用与服务器交互。

这三款开发工具，大家可以根据自己的实际情况选择一下。2.2　新建HTML页面

不管你使用何种前端开发工具，Dreamweaver、Sublime Text，还是Visual Studio，在进行页面开发的时候，我们都需要新建一个页面，然后再在这个页面中进行代码开发。

对于新手来说，我们首选Dreamweaver作为开发工具。在Dreamweaver中新建一个HTML页面，只需要两小步就行。【第1步】：打开Dreamweaver，界面如图2-1。【第2步】：在界面中部的“新建”中找到“HTML”，点击后界面如图2-2。

之后，我们就可以在代码处编写网页代码了。这里只是对Dreamweaver进行一个简单的介绍。关于Dreamweaver的更多操作，如新建站点、新建CSS文件等，在互联网上有大量的资源。大家在接下来的学习中，要一边学习代码，一边摸索开发工具的使用。图2-1　Dreamweaver打开界面图2-2　Dreamweaver新建HTML页面

关于Dreamweaver，我们只需要掌握几个基本操作就行了，但是大家一定要注意，不要用鼠标“点点点”的方式去生成代码。对于网页代码，我们都尽量手写。

对于Sublime Text和Visual Studio这些编辑器的用法，各种快捷键等，我们同样能够在互联网上找到大量的资源，这里不再赘述。第3章HTML 基本标签3.1　HTML基本结构3.1.1　HTML基本结构

我们下面通过一张图来说明HTML的基本结构（见图3-1）。图3-1　HTML基本结构

一张网页就是一个HTML文档，一个HTML文档由4个基本部分组成。

① 文档声明：< !DOCTYPE html >

② html标签对：< html >< /html >

③ head标签对：< head >< /head >

④ body标签对：< body >< /body >

大家都看到了吧，所谓的HTML就是一对对的标签（也有例外）。我们简单介绍一下这几个基本标签的作用。1．文档声明

< !DOCTYPE html >声明这是一个HTML文档。2．html标签

html标签的作用相当于开发者在告诉浏览器，整个网页是从< html >这里开始的，然后到< /html >结束。

对于html这个标签，我们经常看到这样一句代码：

这句代码声明了该网页使用的是W3C组织的XHTML标准，我们在后面会经常遇到。3．head标签

head标签是页面的“头部”，在< head >< /head >标签对内部只能定义一些特殊的内容。4．body标签

body标签是页面的“身体”，网页绝大多数的标签代码都是在< body >< /body >标签对内部编写。

在此说明一下：

① 对于HTML的基本结构，你至少要默写出来，这些都要记忆；

② 记忆标签有个小技巧，那就是根据标签的英文含义，比如head表示“页头”，body表示“页身”。3.1.2　用记事本编写网页【第1步】：新建“记事本”，把下面这段代码复制到记事本中去，然后保存，将记事本名字改为“我的第一个网页”。 　　　　

这是网页的内容

title标签是head标签的内部标签，< title >< /title >标签对中定义的是网页的标题内容，这个标题不是文章的标题，而是在浏览器上栏显示的那个标题。

p标签是段落标签，可以定义一段文字内容，我们在后面会讲到这些标签的具体用法，在这里读者只需要了解一下即可。3.1.3　用Dreamweaver编写网页

前面我们已经讲解了怎么在Dreamweaver建立一个网页，现在我们新建一个“HTML页”，接下来我们就用Dreamweaver编写跟用记事本编写的一样的网页。完整的代码如下： 　　 　　

这是网页的内容

点击“浏览器查看”，效果如图3-4。图3-4　浏览器查看效果

虽然用记事本也可以写网页代码，但是这是一个很原始的做法，建议读者以后都用Dreamweaver或其他编辑器编写。3.2　head标签

上一节已经给大家介绍了HTML的基本结构，也大概说了一下head标签的作用。在head标签中，只有一些比较特殊的标签才能放在< head >< /head >标签内，其他大部分标签都是放在< body >< /body >标签内。

本节内容可能比较抽象，对于初学者也缺乏实操性，因为这几个标签一般都是前端学习中期或者建站时期才用得到，读者在刚刚接触HTML的过程中，用到的并不多。但是为什么要在课程之初就给大家讲解head标签呢？其实是为了让大家有一个更流畅的学习思路：学习网页，先把“页头”学了，然后再学“页身”。

对于初学者而言，在这一小节的学习中，大家只需要记得head标签内部都有哪几个重要的标签，这些标签都有什么用。如果你实在记不住，至少也要有个大概印象。等到我们学完前端后期，再回过头来看本节内容的时候，我们会受益匪浅的。

一般来说，只有6个标签能放在head标签内：

① < title >

② < meta >

③ < link >

④ < style >

⑤ < script >

⑥ < base >3.2.1　head标签内的title标签

在HTML中，title标签唯一的作用就是定义网页的标题，这个标题指的是浏览器上栏的标题，而不是网页文章中的标题。语法： 说明：

网页的标题内容，都是在< title >< /title >标签内定义。举例： 　　　　　　　　　　　　　　　

这是网页的内容

meta标签又叫“元信息标签”，是head标签内的一个辅助性标签。meta标签内的信息不显示在页面中，一般用来定义页面的关键字、页面的描述等，以方便搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）来搜索到这个页面的信息。通俗点说，meta标签就是用来告诉搜索蜘蛛这个页面是干嘛的。

在互联网中，我们一般很形象地称搜索引擎为“搜索蜘蛛”或“搜索机器人”。

meta标签有两个重要的属性name和http-equiv。1．meta标签的name属性

我们先看一个实例：　　　　　　　　　　　　　　　　

下面我们总结一下meta标签name属性的主要属性值。meta标签的name属性取值属性值说明网页的关键字（关键字可以是多个，而不仅仅是一keywords个，用英文逗号隔开）description网页的描述author网页的作者copyright版权信息

上面只是列举了meta标签中name属性最常用的属性值。实际上，name的属性值还远远不止上面这几个。对于初学者，我们仅仅了解表中的这几个就完全足够了。对于meta标签的其他属性值，大家可以查看附录。2．meta标签的http-equiv属性

学习meta标签的http-equiv属性，我们只需要了解它的以下两个作用就行了。（1）定义页面所使用的语言。（2）实现页面的自动刷新跳转。

定义页面所使用的语言，语法如下：　　　　说明：

这段代码告诉浏览器，该页面所使用的字符集是gb2312，即国际汉字码。我们不需要记住，只需要了解就行了。

实现页面的自动刷新跳转，语法如下：　　　　说明：“秒数”是一个整数，表示经过多少秒进行刷新跳转。“网址”是刷新跳转的地址。举例： 　　　　　　　　　　　　　　　　　　　　

这个页面在6秒之后自动跳转到百度首页

在前端开发学习前期，meta标签对于我们来说实际意义不大。只有在真正的实战开发中，我们才会经常用到meta标签的各种属性。对于初学者来说，我们只需要了解一下meta标签就可以了。不会写代码没关系，记不住也没关系。等以后我们回头翻一翻就行了。3.2.3　head标签内的style标签

在head标签中，style标签用于定义元素的CSS样式。在后面的CSS入门章节我们会详细给大家介绍，在HTML入门学习中我们不需要深入探究。语法：　　说明：

对于CSS样式，我们很多时候都是在< style >< /style >标签内编写的。3.2.4　head标签内的script标签

在head标签中，script标签用于定义页面的JavaScript代码。在HTML和CSS的学习中，我们不需要去了解。等我们学习了JavaScript，自然就会用。语法：　　说明：

对于JavaScript代码，我们很多时候都是在< script >< /script >标签内编写的。3.2.5　head标签内的link标签

在head标签中，link标签都是用于引用外部CSS样式文件。对于link标签，我们在学习CSS时才会用到，在HTML的学习中了解一下即可。语法：　　说明：

CSS样式文件都是以“.css”为扩展名。

此外，HTML标签中还有一个base标签，这个标签大家可以忽略，没有太多用处。

对于初学者来说，这一节的学习，大家只需要留个印象即可。但是当大家把HTML和CSS都学得差不多了，一定要回来认真把这一节学好。因为这一节的内容也是很重要的。3.3　body标签

head标签代表的是网页的“头部”，而body标签代表的就是网页的“身体”了。如果说html标签定义了整个网页的开始和结束，那么body标签的作用就是定义了网页主题内容的开始和结束。在以后的章节中，我们学习的所有标签都是位于body标签内部的。

之前我们也接触过body标签，下面来看一个body标签的例子。举例： 　　　　

静夜思

床前明月光，疑是地上霜。

举头望明月，低头思故乡。

在浏览器预览效果如图3-5。图3-5　body标签

分析：“< title >body标签< /title >”表示网页的标题内容是“body标签”。我们在< body >< /body >标签内部定义了一个三级标题（< h3 >< /h3 >），以及两个段落（< p >< /p >）。3.4　HTML注释

在编写HTML代码时，我们经常要在一些关键代码旁做一下注释，所谓的注释就是对相应的代码做一个说明或备注。这样做的好处很多。比如，方便理解、方便查找或方便项目组里的其他程序员了解你的代码，而且方便你以后对自己的代码进行修改。语法：说明：“< !--”表示注释的开始，“-- >”表示注释的结束。举例： 　　　　

静夜思

床前明月光，疑是地上霜。

举头望明月，低头思故乡。

我们把上面这段代码复制到Dreamweaver中，可以看出注释的代码颜色跟其他代码的颜色都不一样。注释的代码是浅绿色的。

然后我们在浏览器中预览，效果如图3-6。图3-6　HTML注释

分析：

注释标签“< !---- >”用于在代码中插入必要的注释，大家可以看到，用“< !---- >”注释的内容不会显示在浏览器中。不管是哪种编程语言，对关键代码进行注释，有助于以后快速地看懂你当初所编写的代码。

对关键代码的注释是一个良好的习惯。在个人开发经验中，整站开发或功能模块开发时，代码的注释尤其重要。因为那个时候编写的代码往往都是几百上千行，你要是不对关键的代码进行注释，往往你自己都会觉得头晕，甚至看不懂自己当时写的代码。这样的感受，大家在以后的开发中会深刻地感受到。希望大家养成良好的代码注释习惯。3.5　本章总结1．HTML基本结构（见图3-7）（1）HTML标签

整个网页是从< html >这里开始的，然后到< /html >结束。图3-7　HTML基本结构（2）head标签

head标签代表网页的“头”。在< head >< /head >中往往定义的是一些特殊的内容，这些内容往往都是“不可见内容”（在浏览器不可见）。head标签内部标签内部标签说明

试读结束[说明：试读内容隐藏了图片]

下载完整电子书