1.1 网页、网站
网页和网站的区别:
定义与组成:网页是网站的基本组成单元,它是由HTML、CSS、JavaScript等编写的单个页面,可以包含文本、图像、视频、链接等元素,用于展示信息或提供功能。而网站则是由多个网页组成的集合体,这些网页通过链接相互连接,形成一个完整的在线资源。网站还包括导航菜单、标志、底部信息等共享的元素。
功能与技术:网页通常实现几个简单功能,如表单提交、图片点击等,而网站功能齐全,可能包括用户注册、登录、评论、搜索等,以满足用户的多样化需求。网站的开发和维护涉及到多种技术,如服务器端编程、数据库管理、前端开发等,而网页的开发主要涉及到前端技术。
独立性与结构:网站具有独立域名和存放空间,而单个网页没有独立的域名和空间只能称为网页。网站通常具有较为复杂的结构,包括导航栏、侧边栏、底部等多个部分,以便于用户浏览和查找信息。网页的结构相对简单,通常只包含一个主体部分,网页之间的跳转主要通过超链接实现34。
访问与体验:网站需要部署到服务器,利用域名或IP地址访问,而网页可以直接在浏览器访问。网站给用户体验更为全面,是一个完整的系统,而网页
综上所述,网页是构成网站的基本单元,而网站是由多个网页通过链接相互连接形成的完整在线资源,具有更复杂的功能和结构
常用术语:
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 页面布局结构![](https://i-blog.csdnimg.cn/direct/0648d1fa7cfc4c848d389222185d08a8.png)
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项目”
②创建项目名称,设置项目所在的位置确定即可,完成之后会在左边的项目栏管理器中出现
③打开项目“课堂练习”的文件夹,会看到里面有首页 index.html
④之后,便可以编写网页代码了,可以直接在 imdex.html 中编写代码
⑤在“创建文件向导”对话框中,选择好文件所在目录,并为文件命名,模板为html5
⑥本实例将文件命名为“示例程序1.2.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代码,这些代码可以影响网页的行为。
1.8 HTML5文档注释和特殊符号
1.注释
为增加HTML5文档的可读性,可为其添加注释部分。注释是文档中的说明文字,不会被浏览器执行。HTML5 使用<!--···-->标签为文档进行注释,注释标签以“<!--”开头,以“-->”结束,中间的“···”替换为注释文字内容即可。<!--···-->标签支持单行和多行注释
2.特殊符号
HTML5中的特殊符号是通过HTML实体编码来实现的,这些特殊符号可以用于在网页中添加特殊效果或图标,如箭头、心形、星星等。以下是一些常用的HTML5特殊符号及其对应的HTML实体编码:
常用特殊符号
符号描述 | 符号显示 | HTML实体编码 |
---|---|---|
空格 | | |
大于号 | > | > |
小于号 | < | < |
引号 | " | " |
版权符号 | © | © |
注册商标符号 | ® | ® |
乘号 | × | × |
除号 | ÷ | ÷ |
上标 | - | <sup></sup> |
下标 | - |
|
其他特殊符号
HTML5还支持许多其他类型的特殊符号,包括但不限于箭头类(如左箭头←←、右箭头→→)、基本形状类(如心形❤&heart;、星星★☆)、货币类(如日元符号¥¥)、数学类(如二分之一½½)、音乐符号类(如音符♫♫)、星座类(如水瓶座♒♒)、国际象棋类(如国王♚♚)、扑克牌类(如梅花♣♣)以及希腊字母(如OmegaΩΩ)等。
注意事项
编码声明:使用这些特殊符号时,需要确保HTML文档声明为UTF-8编码,以便正确显示Unicode字符。
浏览器兼容性:虽然大多数特殊符号在主流浏览器中都能正常显示,但仍有少数符号可能在某些浏览器中的显示效果略有不同。因此,在实际应用中,最好在不同浏览器中进行测试,以确保兼容性。
转义字符:在HTML、CSS或JavaScript中使用特殊符号时,有时需要进行转义处理。例如,在HTML中直接使用<和>会被解释为标签的开始和结束,因此需要使用<和>进行转义
1.9 综合案例——临江仙 · 送钱穆父
运行结果: