HTML5+CSS3+jQuery Mobile移动网站与App开发实战（视频讲解版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.1 HTML基础

HTML主要运用标签使页面文件显示出预期的效果，也就是在文本文件的基础上，加上一系列的网页元素展示效果，最后形成后缀名为.htm或.html的文件。通过浏览器阅读HTML文件时，浏览器负责解释插入到HTML文件中的各种标签，并以此为依据显示内容，将HTML语言编写的文件称为HTML文本，HTML语言即网页的描述语言。

1.1.1 什么是HTML

在介绍HTML语言之前，不得不介绍World Wide Web（万维网）。万维网是一种建立在因特网上的、全球性的、交互的、多平台的和分布式的信息资源网络。它采用HTML语法描述超文本（Hypertext）文件。Hypertext一词有两个含义：一个是链接相关联的文件；另一个是内含多媒体对象的文件。

HTML语言是英文Hyper Text Markup Language的缩写，它是一种文本类、解释执行的标记语言，是在标准一般化的标记语言（SGML）基础上建立的。SGML仅描述了定义一套标记语言的方法，而没有定义一套实际的标记语言。而HTML就是根据SGML制定的特殊应用。

HTML语言是一种简易的文件交换标准，有别于物理的文件结构，它旨在定义文件内对象的描述文件的逻辑结构，而并不是定义文件的显示。由于HTML所描述的文件具有极高的适应性，所以特别适合于万维网的环境。

HTML于1990年被万维网所采用，至今经历了众多版本，主要由万维网国际协会（W3C）主导其发展。由于很多编写浏览器的软件公司也根据自己的需要定义HTML标签或属性，所以导致现在的HTML标准较为混乱。

由于HTML语言编写的文件是标准的ASCII文本文件，所以可以使用任何的文本编辑器打开HTML文件。

提示

HTML文件可以直接由浏览器解释执行，而无需编译。当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示为网页内容，正因为如此，网页显示的速度同网页代码的质量有很大的关系，保持精简和高效的HTML源代码是十分重要的。

1.1.2 HTML的主要功能

HTML语言作为一种网页编辑语言，易学易懂，能制作出精美的网页效果，其主要功能如下。

（1）利用HTML语言格式化文本。例如，设置标题、字体、字号、颜色；设置文本的段落、对齐方式等。

（2）利用HTML语言可以在页面中插入图像。使网页图文并茂，还可以设置图像的各种属性。例如，大小、边框、布局等。

（3）HTML语言可以创建列表，把信息用一种易读的方式表现出来。

（4）利用HTML语言可以建立表格。表格为浏览者提供了快速找到需要信息的显示方式。

（5）利用HTML语言可以在页面中加入多媒体。可以在网页中加入音频、视频、动画，还能设定播放的时间和次数。

（6）HTML语言可以建立超链接。通过超链接检索在线的信息，只需用鼠标单击，就可以链接到任何一处。

（7）利用HTML语言还可以实现交互式表单等效果。

1.1.3 HTML的编辑环境

网页文件即扩展名为htm或html的文件，本质上是文本类型的文件，网页中的图片、动画等资源是通过网页文件的HTML代码链接的，与网页文件分开存储。

由于HTML语言编写的文件是标准的ASCII文本文件，因此可以使用任意一种文本编辑器来打开或编辑HTML文件，例如，Windows操作系统中自带的记事本或者专业的网页制作软件Dreamweaver。

➢ 记事本

HTML是一种以文字为基础的语言，并不需要什么特殊的开发环境，可以直接在Windows操作系统自带的记事本中进行编辑，其优点是方便快捷，缺点是无任何语法提示、无行号提示，以及格式混乱等，初学者使用困难。

➢ Dreamweaver

著名的网页设计制作软件，其优点是有所见即所得的设计视图，能够通过鼠标拖放直接创建并编辑网页文件，自动生成相应的HTML代码。Dreamweaver的代码视图有非常完善的语法自动提示、自动完成和关键词高亮等功能。可以说，Dreamweaver是一个非常全面的网页制作工具，在本书内容的讲解和制作过程中就是使用Dreamweaver软件。

➢ EditPlus

一款非常优秀的代码编辑器，可以很方便地创建和编辑网页文件。其优点也是方便快捷、语法高亮、行号提示和HTML代码快捷插入等。缺点是无语法自动提示、无所见即所得的网页设计视图。专业的代码编辑器比较适合代码熟练的用户，并不适合初学者。

1.1.4 认识Dreamweaver中的代码工具

在Dreamweaver的代码视图中会以不同的颜色显示HTML代码，帮助用户区分各种标签，同时用户也可以自行指定标签或代码的显示颜色。总体看来，代码视图更像是一个常规的文本编辑器，只要单击代码的任意位置，就可以开始添加或修改代码了，如图1-1所示。

0

图1-1　Dreamweaver代码编辑工具

➢ “打开文档”按钮0

单击该按钮，在其弹出菜单中列出了当前在Dreamweaver中打开的文档，选中其中一个文档，即可在当前的文档窗口中显示所选择的文档代码。

➢ “显示代码浏览器”按钮0

单击该按钮，即可显示光标所在位置的代码浏览器，在代码浏览器中显示光标所在标签中所应用的CSS样式设置。

➢ “折叠整个标签”按钮0

折叠一组开始和结束标签之间的内容。将光标定位在需要折叠的标签中即可，例如，将光标置于<body>标签内，然后单击该按钮，即可将其首尾对应的标签区域进行折叠。

如果在按住Alt键的同时，单击“折叠整个标签”按钮，则将折叠外部的标签。“折叠整个标签”按钮的功能只能对规则的标签区域起作用，如果标签不够规则，则不能实现折叠效果。

➢ “折叠所选”按钮0

将所选中的代码折叠。可以直接选择多行代码，单击该按钮，代码折叠后，当将鼠标光标移到标签上时，可以看到标签内被折叠的相关代码。

➢ “扩展全部”按钮0

单击该按钮，可以还原页面中所有折叠的代码。如果只希望展开某一部分的折叠代码，只要单击该部分折叠代码左侧的展开按钮0即可。

➢ “选择父标签”按钮0

选择插入点的那一行的内容及其两侧的开始和结束标签。如果反复单击此按钮且标签是对称的，则最终将选择最外面的<html>和</html>标签。例如，将光标置于<title>标签内，单击“选择父标签”按钮0，将会选择<title>标签的父标签<head>标签。

➢ “选取当前代码段”按钮0

选择插入点那一行的内容及其两侧的圆括号、大括号或方括号。如果反复单击此按钮且两侧的符号是对称的，则最终将选择该文档最外面的大括号、圆括号或方括号。

➢ “行号”按钮0

单击该按钮，可以在代码视图左侧显示HTML代码的行号，默认情况下，该按钮为按下状态，即默认显示代码行号。

➢ “高亮显示无效代码”按钮0

单击该按钮，可以使用黄色高亮显示HTML代码中无效的代码。

➢ “自动换行”按钮0

单击该按钮，当代码超过窗口宽度时，自动换行，默认情况下，该按钮为按下状态。

➢ “信息栏中的语法错误警告”按钮0

启用或禁用页面顶部提示出现语法错误的信息栏。当Dreamweaver检测到语法错误时，语法错误信息栏会指定代码中发生错误的那一行。此外，会在代码视图中文档的左侧突出显示出现错误的行号。默认情况下，信息栏处于启用状态，但仅当Dreamweaver检测到页面中的语法错误时才显示。

➢ “应用注释”按钮0

单击该按钮，在弹出菜单中选择相应的选项，使用户可以在所选代码两侧添加注释标签或打开新的注释标签，如图1-2所示。

0

图1-2　应用注释列表

➢ “删除注释”按钮0

单击该按钮，可以删除所选代码的注释标签。如果所选内容包含嵌套注释，则只会删除外部注释标签。

➢ “环绕标签”按钮0

环绕标签主要是防止写标签时忽略关闭标签。其操作方法是，选择一段代码，单击“环绕标签”按钮0，然后输入相应的标签代码，即可在该选择区域外围添加完整的新标签代码。这样既快速又防止了前后标签遗漏不能关闭的情况。

➢ “最近的代码片断”按钮0

单击该按钮，可以在弹出的菜单中选择最近使用过的代码片断，将该代码片断插入到光标所在的位置。

➢ “移动或转换CSS”按钮0

单击该按钮，弹出菜单包括“将内联CSS转换为规则”和“移动CSS规则”两个选项，可以将CSS移动到另一位置，或将内联CSS转换为CSS规则。

➢ “缩进代码”按钮0

选中相应的代码，单击该按钮，可以将选定内容向右移动。

➢ “凸出代码”按钮0

选中相应的代码，单击该按钮，可以将选定内容向左移动。

➢ “格式化源代码”按钮0

单击该按钮，可以在弹出菜单中选择相应的选项。将先前指定的代码格式应用于所选代码，如果未选择代码，则应用于整个页面。也可以通过从“格式化源代码”按钮中选择“代码格式设置”来快速设置代码格式首选参数，或通过选择“编辑标签库”编辑标签库。

提示

为了保证程序代码的可读性，一般都需要将标签代码进行一定的缩进凸出，从而显得错落有致。选择一段代码后按Tab键完成代码的缩进，对于已经缩进的代码，如果想要凸出，可以按快捷键Shift+Tab。也可以通过单击“缩进代码”按钮0和“凸出代码”按钮0实现上述功能。

上一章目录下一章