1.1 网页、网站
网页和网站的区别:
-
定义与组成:网页是网站的基本组成单元,它是由HTML、CSS、JavaScript等编写的单个页面,可以包含文本、图像、视频、链接等元素,用于展示信息或提供功能。而网站则是由多个网页组成的集合体,这些网页通过链接相互连接,形成一个完整的在线资源。网站还包括导航菜单、标志、底部信息等共享的元素1。
-
功能与技术:网页通常实现几个简单功能,如表单提交、图片点击等,而网站功能齐全,可能包括用户注册、登录、评论、搜索等,以满足用户的多样化需求。网站的开发和维护涉及到多种技术,如服务器端编程、数据库管理、前端开发等,而网页的开发主要涉及到前端技术23。
-
独立性与结构:网站具有独立域名和存放空间,而单个网页没有独立的域名和空间只能称为网页。网站通常具有较为复杂的结构,包括导航栏、侧边栏、底部等多个部分,以便于用户浏览和查找信息。网页的结构相对简单,通常只包含一个主体部分,网页之间的跳转主要通过超链接实现34。
-
访问与体验:网站需要部署到服务器,利用域名或IP地址访问,而网页可以直接在浏览器访问。网站给用户体验更为全面,是一个完整的系统,而网页只是一个功能界面展示2。
综上所述,网页是构成网站的基本单元,而网站是由多个网页通过链接相互连接形成的完整在线资源,具有更复杂的功能和结构
常用术语:
-
CSS:级联样式表(Cascading Style Sheets),用于描述HTML或XML(包括SVG、XHTML等)文档的样式。
-
DOM:文档对象模型(Document Object Model),是网页的标准模型,用于表示和修改网页的结构和内容。
-
HTML:超文本标记语言(HyperText Markup Language),用于创建网页的标准标记语言。
-
JavaScript:一种在浏览器中运行的脚本语言,用于实现网页的动态效果和交互性。
-
URL:统一资源定位符(Uniform Resource Locator),用于标识互联网上资源的地址。
-
Backlink:反向链接,也称为入站链接,是指从其他网站链接到特定网页的链接。
-
服务器:提供计算服务的设备,具有高处理能力、稳定性、安全性、可扩展性等特点。
-
域名:网站的地址,用于与IP地址关联,便于用户记忆和访问。
1.2 静态网页和动态网页
1.静态网页
静态网页是指客户端的浏览器发送UPL请求给WWW服务器,服务器查找需要的超文本文件并不加处理地直接下载到客户端,运行在客户端的页面是已经事先做好并存放在服务器中的网页。静态网页通常由纯粹的HTML/CSS语言编写。
2.动态网页
动态网页能够根据不同浏览者的请求来显示不同的内容,无论网页本身是否具有视觉意义上的动态效果,只要采用动态网站技术生成的网页都称为动态网页,其本质主要体现在交互性方面。根据程序运行区域的不同,动态网页可分为客户端动态网页与服务端动态网页。
客户端动态网页不需要与服务器进行交互,实现动态功能的代码往往采用脚本语言形式直接嵌入网页中,常见的客户端动态网页技术包括JavaScript,ActiveX和Flash等。
服务端动态网页则需要与客户端共同参与,客户端通过浏览器发出页面请求后,服务端根据URL携带的参数运行服务端程序,产生的结果页面再返回客户端。动态网页比较注重交互性,即网页会根据客户端的要求和选择而动态改变和响应。一般涉及数据库操作的网页(如注册、登录和查询等)都需要服务端动态网页程序。
1.3 页面布局结构
1.4初识WEB前端
Web前端开发的三大核心技术:
1. HTML(HyperText Markup Language,超文本标记语言)
-
作用:HTML是网页内容的骨架,用于描述网页的结构和内容。它定义了网页中的标题、段落、列表、链接、图片、表单等元素,并通过标签(如
<h1>
、<p>
、<a>
等)来表示这些元素。 -
特点:HTML是Web页面的基础语言,通过标签和属性来构建网页的结构,使得网页内容能够按照预定的格式进行展示。
2. CSS(Cascading Style Sheets,层叠样式表)
-
作用:CSS用于设置网页的视觉效果和布局,包括字体、颜色、间距、尺寸等。它允许开发者对HTML元素进行精细的样式控制,从而创造出美观、易读的网页界面。
-
特点:CSS是一种样式表语言,具有层叠和继承的特性。多个样式规则可能会应用于一个元素,浏览器会根据优先级、来源和顺序来决定最终的样式。此外,CSS还支持响应式设计,能够根据不同设备的屏幕尺寸和分辨率自动调整网页的布局和样式。
3. JavaScript
-
作用:JavaScript是一种客户端脚本语言,用于实现网页的交互功能。通过JavaScript,开发者可以操控网页内容、响应用户输入、与服务器通信、创建动画效果等,使网页具有更丰富的动态性和互动性。
-
特点:JavaScript能够直接操作HTML和CSS,通过DOM(Document Object Model)来访问和修改HTML元素,或者更改CSS样式规则。此外,JavaScript还支持异步编程,能够处理复杂的交互逻辑和数据交换。
1.5HTML语法基础
1. 语言
-
类型:HTML不是一种编程语言,而是一种标记语言。它通过一系列的标签(Tags)来描述网页的结构和内容,告诉浏览器如何显示这些内容和元素。
-
用途:HTML是Web开发的基础,几乎所有的网页都是使用HTML编写的。它允许开发者定义网页的标题、段落、链接、图像、列表、表格、表单等各种元素,以及这些元素在网页上的布局和样式。
-
发展:HTML自1990年由Tim Berners-Lee发明以来,经历了多个版本的更新和发展,包括HTML 1.0、HTML 2.0、HTML 3.2、HTML 4.0、HTML 4.01以及最新的HTML5。每个新版本都引入了新的特性和改进,以支持更丰富的网页内容和更高级的交互性。
2. 超文本
-
定义:超文本(Hypertext)是一种组织信息的方式,它通过超级链接(Hyperlinks)将文本中的文字、图表、声音、视频等多媒体信息与其他信息媒体相关联。这些相互关联的信息媒体可能位于同一网页内,也可能位于其他文件或地理位置相距遥远的计算机上。
-
特点:HTML文档就是超文本的一种实现,它允许用户通过点击链接跳转到网页上的其他部分或不同的网页,从而方便地浏览和检索信息。这种超链接的特性使得Web成为一个巨大的、互联的信息网络。
3. 标记
-
基本概念:在HTML中,标记(Markup)是通过标签(Tags)来实现的。标签是HTML的基本组成部分,它们用尖括号(<>)包围起来,用于告诉浏览器如何显示网页的内容。
-
标签类型:HTML标签分为开始标签(Opening Tag)和结束标签(Closing Tag),它们分别用
<标签名>
和</标签名>
表示。有些标签是自闭合的(Self-Closing Tags),如<img />
和<br />
,它们不需要结束标签。 -
常见标签:HTML包含了许多常见的标签,如
<html>
(定义整个HTML文档)、<head>
(包含文档的元数据,如标题和字符集)、<body>
(包含网页的可见内容)、<h1>
到<h6>
(定义标题)、<p>
(定义段落)、<a>
(定义超链接)、<img>
(定义图像)等。这些标签共同构成了HTML文档的结构和内容。
1.6创建HTML文档
使用HBuilder 新建项目。依次点击选择“文件”——“新建”——“Web项目”,如图
第一个HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>我的第一个网页</p>
<p>20203级软件3班</p>
</body>
</html>
1.7网页头部标签
网页的头部(Head)部分包含了关于HTML文档的元数据(metadata),这些元数据不会直接显示在网页的内容区域,但对于网页的呈现和搜索引擎优化(SEO)等方面至关重要。头部标签通常位于<head>
和</head>
标签之间。以下是一些常见的头部标签及其用途:
-
<title>
:定义了文档的标题,这个标题会显示在浏览器的标题栏或页面的标签上。同时,它也是搜索引擎结果中显示的标题,对于SEO非常重要。 -
<meta>
:这是一个非常灵活的标签,用于提供有关HTML文档的元数据。<meta>
标签通常用于指定页面描述、关键词、字符集、作者、页面刷新等。例如,<meta charset="UTF-8">
指定了页面编码为UTF-8,<meta name="description" content="页面描述...">
用于定义页面的描述,有助于SEO。 -
<link>
:主要用于链接外部资源,如CSS样式表。例如,<link rel="stylesheet" href="style.css">
链接了一个名为style.css的外部样式表。 -
<script>
:虽然<script>
标签通常放在<body>
标签的底部以优化页面加载速度,但它也可以放在<head>
部分。<script>
标签用于包含或引用JavaScript代码,这些代码可以影响网页的行为。
<head>
<meta charset="utf-8" />
<meta name="keywords" content="xxx"/>
<meta name="description" content="xxx"/>
<title>我的第一个网页</title>
<link rel="stylesheet" href="/css/index.css" type="text/css"/>
<!-- <link rel="文件布局" href="路径" type="类型"/> -->
<script type="text/javascript" src="js/index.js"></script>
</head>
1.8 HTML5文档注释和特殊符号
1.注释
在HTML5中,注释是用来给代码添加说明的,这些说明对浏览器来说是不可见的,但对开发者来说却非常有用,尤其是在团队协作或项目维护时。注释可以帮助开发者理解代码的用途、逻辑结构或是标记未完成的工作。
HTML5中的注释使用<!--
来开始,使用-->
来结束。注释可以包含任何文本,但不能嵌套。也就是说,你不能在一个注释内部再创建一个注
示例
2.特殊符号
HTML5中的特殊符号是通过HTML实体编码来实现的,这些特殊符号可以用于在网页中添加特殊效果或图标,如箭头、心形、星星等。以下是一些常用的HTML5特殊符号及其对应的HTML实体编码:
常用特殊符号
符号描述 | 符号显示 | HTML实体编码 |
---|---|---|
空格 | | |
大于号 | > | > |
小于号 | < | < |
引号 | " | " |
版权符号 | © | © |
注册商标符号 | ® | ® |
乘号 | × | × |
除号 | ÷ | ÷ |
上标 | - | <sup></sup> |
下标 | - | <sub></sub> |
其他特殊符号
HTML5还支持许多其他类型的特殊符号,包括但不限于箭头类(如左箭头←←
、右箭头→→
)、基本形状类(如心形❤&heart;
、星星★☆
)、货币类(如日元符号¥¥
)、数学类(如二分之一½½
)、音乐符号类(如音符♫♫
)、星座类(如水瓶座♒♒
)、国际象棋类(如国王♚♚
)、扑克牌类(如梅花♣♣
)以及希腊字母(如OmegaΩΩ
)等。
注意事项
- 编码声明:使用这些特殊符号时,需要确保HTML文档声明为UTF-8编码,以便正确显示Unicode字符。
- 浏览器兼容性:虽然大多数特殊符号在主流浏览器中都能正常显示,但仍有少数符号可能在某些浏览器中的显示效果略有不同。因此,在实际应用中,最好在不同浏览器中进行测试,以确保兼容性。
- 转义字符:在HTML、CSS或JavaScript中使用特殊符号时,有时需要进行转义处理。例如,在HTML中直接使用
<
和>
会被解释为标签的开始和结束,因此需要使用<
和>
进行转义
1.9 综合案例——临江仙 · 送钱穆父
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>宋词精选</title>
</head>
<body>
<h1 align="center">临江仙 · 送钱穆父</h1>
<p align="center">宋 苏轼</p>
<!-- 使用<br />换行 -->
<p align="center" >
一别都门三改火,天涯踏进红尘。<br />
依然一笑作春温。<br />
无波真古井,有节是秋筠。<br />
惆怅孤帆连夜发,送行淡月微云。<br />
尊前不用翠眉颦。<br />
人生如逆旅,我亦是行人。<br />
</p>
<br />
<img src="img/20210901435.jpg"/>
</body>
</html>
如图:
运行结果: