网页和网页的区别
网页：是构成网站的基本单元，是书籍中的一页
网站：由多个页面组成通常有一个共同的主题或由一个组织创建，网站中的网页通常在一个域名下
常用术语：网页设计有其专业术语
Internet：由各种不同类型的计算机网络连接起来的全球性网络
WWW:让Web客户端（常用浏览器）访问Web服务器中的网页
浏览器：将Internet中文件翻译为网页的软件
URL：统一资源定位符，指定通信协议和地址。“http://”表示通信协议为超文本传输协议，“www.~~~.com”表示网站名称
IP：网际协议
域名：网站名称
HTTP：超文本传输协议
FTP：文件传输协议
发布：将制作好的网页上传至网络的构成
站点：一个站点就是一个网站所有内容所存放的文件夹。~可分为父站和子站。~管理是对一个Internet的站点进行组织、维护和管理的功能集合
超链接：由一个网页指向一个目标的连接关系，这个目标可以是网页也可以是相同网页不同位置，也可以是一个图片、电子邮件网址、一个文件，甚至是一个程序。浏览页面时单击超链接即可跳转相应页面
静态网页是由HTML CSS编写
动态网页的客户端网页技术包括 Javascript， ActiveX和Flash
文本：用于展示主旨
图片与动画：使网页更生动
超链接：引入外部链接
音频与视频：使网页更多元化
交互表单：个人信息收集
其他元素：可点缀网页使网页更活泼有趣，在网上娱乐，电子商务等方面也有不可忽视的作用
用RGB表示颜色，用逗号隔开。或用6位的16进制不同位表示颜色，需要在前面加上特殊符号“#”如“#0E533D”。
web前端即为平时上网浏览的网页
1 HTML
控制页面结构，是制作网页的标准语言
2 CSS语言
描述页面样式文件，用来表现HTML或XML等文件样式的计算机语言
3 Javascript语言
（加入后网页转变为动态网页） 描述网页的行为调度和实现某种展现逻辑
1 浏览器
浏览，开发网页的工具
2 编辑器
编译网页内容的工具
3 切图软件
对UI设计师设计的效果图进行切图操作
HTML是超文本标记语言，是一种用来制作超文本文档的简单标记语言
1.5.1.1 语言
用HTML编写的超文本文档称为HTML文档，它能独立于各个操作系统平台，使用HTML描述文件需要通过Web浏览器HTTP显示出效果。
1.5.1.2 超文本
~可以加入图片、声音影视等内容文本，每个HTML都是静态网页文件，文件包含了HTML指令代码，这些指令并不是一种程序语言，他只是排版网页中资料显示位置的标记结构语言261355
1.5.1.3 标记
HTML5 实际上不算是一种编程语言，而是一种标记语言。HTML5 文件是由一系列成对出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档的某个部分。在HTML,中每个用作标签的符号都是一条命令，它会告诉浏览器如何显示文本。这些标签均由“<”和“>”符号以及一个字符串组成。如<head>，<body>等。而浏览器的功能是对这些标记进行解释，显示出文字图片、动画和播放声音。这些标签符号用“<标签名字属性>”来表示。标签分为单标签和双标签两大类: 单标签指的是只存在一个标签的写法，如<meta><input>等。 双标签指的是存在一对标签的写法，如<head></head>，<body></body>等。 注意，在双标签中第一个标签称为起始标签，第二个标签称为结束标签，结束标签需要在左尖括号后添加一个关闭符“/”。 HTML只是一个纯文本文件。创建一个HTML文档，需要HTML编辑器和Web浏览器两个工具。HTML编辑器是用于生成和保存HTML文档的应用程序。Web浏览器用来打开Web网页文件，提供查看Web资源的客户端程序。
演示结果如图
1.5.2.1 HTML文档标签<html>...</html>
HTML文档格式为
<html>位于文档最前面，表示HTML文档的开始，即浏览器从<html>开始解释，知道遇到</html>结束。每个HTML均如此。
1.5.2.2 HTML文档头标签<head>...</head>
HTML文档包括头部(head)和主体(body)。HTML文档头标签的格式为
文档头部内容在开始标签<html>和结束标签</html>之间定义，其内容可以是标题名或者文本文件地址、创作信息等网页信息说明。
1.5.2.3 文档编码
文档编码格式如下:
为了被浏览器正确解释和通过 W3C代码标准，所有的 HTML 文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际编码一致，否则会成乱码。对于中文网页的设计者来说，用户一般使用GB2313(简体中文)。
1.5.2.4 HTML文档主体标签<body>...</body>
HTML文档主体标签的格式为
主体位于头部以后，以<body>为开始标签，</body>为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。
1.使用 HBuilder 新建项目。依次点击选择“文件”→“新建”→“项目”
2.创建项目名称，设置项目所在的位置确定即可，完成之后会在左边的项目栏管理器中出现，在本示例中，项目名称为“sucai”。
3. )打开项目“课堂练习”的文件夹、会看到里面有首页imdex.huml,如图 1-9 所示有js文件夹，有css文件夹，还有图片的文件夹，基本齐全。
4.到了这一步之后，便可以编写网页代码了，可以直接在index.hm 中编写代码。也可以单击鼠标右键，新建一个HTML文件
5.)将文件命名为“示例”，开始编写网页代码，网页完成后，可以执行菜单“预览”
结果
在网页的头部中，通常存放一些介绍页面内容的信息。例如，页面标题、描述和关键词链接的CSS样式文件和客户端的JavaSeript脚本文件等。
例如，京东商城的文档标题:
~是页面标题标签，它将HTML文件的标题显示在浏览器标题栏中，
这个标签只能应用于<head>与</head>之间用于标识文档标题
例如，京东商城的文档标题:
打开网页后，在网页文档头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示，尽管文档头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题内容。
<meta>标签是元信息标签，在HTML中是一个单标签。该标签可重复出现在头部标签中，用来指明本页的作者、制作工具、所包含的关键字，以及其他一些描述网页的信息。 <mela>标签分两大属性:HTTP标题属性(htp-equiv)和页面描述属性(name)。不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。本节主要讲解的name 属性，用于设置搜索关键字和描述。<meta>标签的name 属性的语法:
name 属性主要用于描述网页摘要信息，与之对应的属性值为content。content 中的内容主要是便于搜索引擎查找信息和分类信息用。 name属性主要有以下两个参数:keywords(关键字)和deseription(网站内容描述)
1.7.2.1 keywords
keywords 用来告诉搜索引擎网页使用的关键字。例如
1.7.2.2 description
description用来告诉搜索引擎网站主要的内容。例如，京东商城网站主页的内容播述设置如下:
<link>标签用于连接外部资源和当前 HTML 文档，它只在首部标签<head>和</head>中通常用于连接外部样式表。<link>标签并不将其他文档实际链接到当前文档中，只是提供接该文档的一个路径，link 标签最常用的是用来链接CSS样式文件，格式如下:
如果需要同时引用多个外部样式表文件，则需要为每一个 CSS 样式文件单独使用一》<link>标签。
<seipl>标签是脚本标签，用于为 HTML 文档定义客户端脚本信息。此标签可以在文中包含一段客户端脚本程序，可以位于文档中任何位置，但常位于<head>标签内，以便维护。格式如下:
为增加 HTML5 文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTML5 使用<!--…-->标签为文档进行注释，注释标签以“<!--”开头，以“-->”结束，中间的“…”替换为注释文字内容即可。<!--…-->标签支持单行和多行注释。
由于大于号“>”和小于号“<”等已作为 HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的HTML代码被称为字符实体。 常用的特殊符号及对应的字符实体见表。这些字符实体都以“&”开头，以“;”结束
以一首宋词为例子，参照给定的HTML代码和图片资源，利用HBuilder设计Wea在编写时要遵守HTML代码的编写规范，并养成良好的编码习惯。以下为完整代码，以供参考。