第一章网页制作的基础知识

isbgjbs

于 2024-09-11 22:20:05 发布

阅读量419

点赞数 19

文章标签： html

本文链接：https://blog.csdn.net/isbgjbs/article/details/142053101

版权

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 页面布局结构

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非常重要。

1.8 HTML5文档注释和特殊符号

1.注释

为增加HTML5文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行。HTML5 使用标签为文档进行注释，注释标签以“”结束，中间的“···”替换为注释文字内容即可。标签支持单行和多行注释

2.特殊符号

HTML5中的特殊符号是通过HTML实体编码来实现的，这些特殊符号可以用于在网页中添加特殊效果或图标，如箭头、心形、星星等。以下是一些常用的HTML5特殊符号及其对应的HTML实体编码：

常用特殊符号

符号描述	符号显示	HTML实体编码
空格		` `
大于号	>	`>`
小于号	<	`<`
引号	"	`"`
版权符号	©	`©`
注册商标符号	®	`®`
乘号	×	`×`
除号	÷	`÷`
上标	-	`<sup></sup>`
下标	-	`<sub></sub>`

其他特殊符号

HTML5还支持许多其他类型的特殊符号，包括但不限于箭头类（如左箭头←←、右箭头→→）、基本形状类（如心形❤&heart;、星星★&star;）、货币类（如日元符号¥¥）、数学类（如二分之一½½）、音乐符号类（如音符♫♫）、星座类（如水瓶座♒♒）、国际象棋类（如国王♚♚）、扑克牌类（如梅花♣♣）以及希腊字母（如OmegaΩΩ）等。

注意事项

编码声明：使用这些特殊符号时，需要确保HTML文档声明为UTF-8编码，以便正确显示Unicode字符。
浏览器兼容性：虽然大多数特殊符号在主流浏览器中都能正常显示，但仍有少数符号可能在某些浏览器中的显示效果略有不同。因此，在实际应用中，最好在不同浏览器中进行测试，以确保兼容性。
转义字符：在HTML、CSS或JavaScript中使用特殊符号时，有时需要进行转义处理。例如，在HTML中直接使用<和>会被解释为标签的开始和结束，因此需要使用<和>进行转义

1.9 综合案例——临江仙 · 送钱穆父

运行结果：