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>