1.1认识网页与网站
1.1.1网页、网站
网页和网页的区别
网页：是构成网站的基本单元，是书籍中的一页
网站：由多个页面组成通常有一个共同的主题或由一个组织创建，网站中的网页通常在一个域名下
常用术语：网页设计有其专业术语
Internet：由各种不同类型的计算机网络连接起来的全球性网络
WWW:让Web客户端（常用浏览器）访问Web服务器中的网页
浏览器：将Internet中文件翻译为网页的软件
URL：统一资源定位符，指定通信协议和地址。“http://”表示通信协议为超文本传输协议，“www.~~~.com”表示网站名称
IP：网际协议
域名：网站名称
HTTP：超文本传输协议
FTP：文件传输协议
发布：将制作好的网页上传至网络的构成
站点：一个站点就是一个网站所有内容所存放的文件夹。~可分为父站和子站。~管理是对一个Internet的站点进行组织、维护和管理的功能集合
超链接：由一个网页指向一个目标的连接关系，这个目标可以是网页也可以是相同网页不同位置，也可以是一个图片、电子邮件网址、一个文件，甚至是一个程序。浏览页面时单击超链接即可跳转相应页面
1.1.2 静态网页和动态网页
静态网页是由HTML CSS编写
动态网页的客户端网页技术包括 JavaScript， ActiveX和Flash
1.2网页的基本构成元素
文本：用于展示主旨
图片与动画：使网页更生动
超链接：引入外部链接
音频与视频：使网页更多元化
交互表单：个人信息收集
其他元素：可点缀网页使网页更活泼有趣，在网上娱乐，电子商务等方面也有不可忽视的作用
1.3页面布局结构
1.3.1网页页面布局
1.3.2 网页色彩搭配
用RGB表示颜色，用逗号隔开。或用6位的16进制不同位表示颜色，需要在前面加上特殊符号“#”如“#0E533D”。
1.4 Web前端技术简介
1.4.1 初识WEB前端
web前端即为平时上网浏览的网页
1.4.2 WEB前端开发的三大核心技术
1 HTML
控制页面结构，是制作网页的标准语言
2 CSS语言
描述页面样式文件，用来表现HTML或XML等文件样式的计算机语言
3 JavaScript语言
（加入后网页转变为动态网页） 描述网页的行为调度和实现某种展现逻辑
1.4.3 前端开发工具
1 浏览器
浏览，开发网页的工具
2 编辑器
编译网页内容的工具
3 切图软件
对UI设计师设计的效果图进行切图操作
1.5 HTML语法基础
1.5.1 HTML概述
HTML是超文本标记语言，是一种用来制作超文本文档的简单标记语言
1.5.1.1 语言
用HTML编写的超文本文档称为HTML文档，它能独立于各个操作系统平台，使用HTML描述文件需要通过Web浏览器HTTP显示出效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>我的第一个网页</p>
<p>2023软件一班</p>
</body>
</html>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 HTML基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML文档结构</title>
</head>
<body>
<p>HTML文档结构由head，body标记组成</p>
<h3>标题3</h3>
</body>
</html>
演示结果如图
1.5.2.1 HTML文档标签<html>...</html>
HTML文档格式为
<html>HTML文档内容</html><html>位于文档最前面，表示HTML文档的开始，即浏览器从<html>开始解释，知道遇到</html>结束。每个HTML均如此。
1.5.2.2 HTML文档头标签<head>...</head>
HTML文档包括头部(head)和主体(body)。HTML文档头标签的格式为
<head>头部的内容</head>文档头部内容在开始标签<html>和结束标签</html>之间定义，其内容可以是标题名或者文本文件地址、创作信息等网页信息说明。
1.5.2.3 文档编码
文档编码格式如下:
<meta charset ="utf-8"/>为了被浏览器正确解释和通过 W3C代码标准，所有的 HTML 文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际编码一致，否则会成乱码。对于中文网页的设计者来说，用户一般使用GB2313(简体中文)。
1.5.2.4 HTML文档主体标签<body>...</body>
HTML文档主体标签的格式为
<body>网页的内容</body>主体位于头部以后，以<body>为开始标签，</body>为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。
1.6 创建HTML文档
1.使用 HBuilder 新建项目。依次点击选择“文件”→“新建”→“项目”
2.创建项目名称，设置项目所在的位置确定即可，完成之后会在左边的项目栏管理器中出现，在本示例中，项目名称为“sucai”。
3. )打开项目“课堂练习”的文件夹、会看到里面有首页imdex.huml,如图 1-9 所示有js文件夹，有css文件夹，还有图片的文件夹，基本齐全。
4.到了这一步之后，便可以编写网页代码了，可以直接在index.hm 中编写代码。也可以单击鼠标右键，新建一个HTML文件
5.)将文件命名为“示例”，开始编写网页代码，网页完成后，可以执行菜单“预览”
<!--示例程序-->
<!DOCTYPE html>
<html>
<head>
<meta charsel= " utf-8" />
<title>我的第一个网页</title>
</head>
<body>
开始学习网页设计与制作!
<hr size= " 3" color=" black">
<a href="http://www.baidu.com">百度</a>
<script type=" text/javascript" >
document.write("连接到百度");
</script>
</body>
</html>1.7 网页头部标签
在网页的头部中，通常存放一些介绍页面内容的信息。例如，页面标题、描述和关键词链接的CSS样式文件和客户端的JavaSeript脚本文件等。
例如，京东商城的文档标题:
1.7.1 <title>标签
~是页面标题标签，它将HTML文件的标题显示在浏览器标题栏中，
这个标签只能应用于<head>与</head>之间用于标识文档标题
<tide>标題</tide>例如，京东商城的文档标题:
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title>打开网页后，在网页文档头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示，尽管文档头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题内容。
1.7.2 <meta>标签
<meta>标签是元信息标签，在HTML中是一个单标签。该标签可重复出现在头部标签中，用来指明本页的作者、制作工具、所包含的关键字，以及其他一些描述网页的信息。
<mela>标签分两大属性:HTTP标题属性(htp-equiv)和页面描述属性(name)。不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。本节主要讲解的name 属性，用于设置搜索关键字和描述。<meta>标签的name 属性的语法:
<meta name="参数"content="参数值"> name 属性主要用于描述网页摘要信息，与之对应的属性值为content。content 中的内容主要是便于搜索引擎查找信息和分类信息用。
name属性主要有以下两个参数:keywords(关键字)和deseription(网站内容描述)
1.7.2.1 keywords
keywords 用来告诉搜索引擎网页使用的关键字。例如
<meta name="keywords”content=”同上购物,同上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护食品,生鲜，京东”/>1.7.2.2 description
description用来告诉搜索引擎网站主要的内容。例如，京东商城网站主页的内容播述设置如下:
<meta name="description"content="京东JD.COM-专业的综合同上购物商城,为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家,袁括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类,满足各种购物需求。"/>1.7.3 <link>标签
<link>标签用于连接外部资源和当前 HTML 文档，它只在首部标签<head>和</head>中通常用于连接外部样式表。<link>标签并不将其他文档实际链接到当前文档中，只是提供接该文档的一个路径，link 标签最常用的是用来链接CSS样式文件，格式如下:
<link rel="stylesheet"href="外部样式表文件名.css"type="text/css"/>如果需要同时引用多个外部样式表文件，则需要为每一个 CSS 样式文件单独使用一》<link>标签。
1.7.4 <script>标签
<seipl>标签是脚本标签，用于为 HTML 文档定义客户端脚本信息。此标签可以在文中包含一段客户端脚本程序，可以位于文档中任何位置，但常位于<head>标签内，以便维护。格式如下:
<script type="text/css" src="脚本文件名.js"></script>1.8 HTML5文档注释和特殊符号
1.8.1 注释
为增加 HTML5 文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTML5 使用<!--…-->标签为文档进行注释，注释标签以“<!--”开头，以“-->”结束，中间的“…”替换为注释文字内容即可。<!--…-->标签支持单行和多行注释。
1.8.2 特殊符号
由于大于号“>”和小于号“<”等已作为 HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的HTML代码被称为字符实体。
常用的特殊符号及对应的字符实体见表。这些字符实体都以“&”开头，以“;”结束
| 特殊符号 | 字符实体 | |
| 空格 |   ; | |
| 大于（>） | > | |
| 小于(<) | < | |
| 引号(") | " | |
| 版权号© | © |
1.9 综合案例——临江仙 · 送钱穆父
以一首宋词为例子，参照给定的HTML代码和图片资源，利用HBuilder设计Wea在编写时要遵守HTML代码的编写规范，并养成良好的编码习惯。以下为完整代码，以供参考。
<html>
<head>
<meta name="keywords” conten!="宋词,苏轼" charsei="uf-8" />
<meta name="description" conlen!="本网站收录精选宋词"/>
<title>宋词精选</title>
<style lype = "text/css" >
P{
text-align :center;
font-size :larger;
}
</style>
</head>
<body bgeolor="antiquewhite" text="#333333” >
<h2 align="center">临江仙·送钱穆父</h2>
<p>宋 苏轼</p>
<!--使用<br/>的效果-->
<p>一别都门三改火,天涯踏尽红尘。<br/>
依然一笑作春温。<br/>
无波真古井,有节是秋筠。<br/>
惆怅孤帆连夜发,送行淡月微云。<br/>
尊前不用翠眉颦。<br/>
<font color="brown"face="微软雅黑">人生如逆旅,我亦是行人。</foni></p>
<!--水平线-->
<hr size=" 2" color=" black" width=" 100%" />
<p align="center">网页制作教程 Copyrighl©江西应用工程职业</p>
</body>
</html>
7297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
