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

2401_87185713

已于 2024-09-12 08:55:29 修改

阅读量899

点赞数 8

文章标签： html5

于 2024-09-11 22:29:33 首次发布

本文链接：https://blog.csdn.net/2401_87185713/article/details/142151408

版权

1.1 认识网页和网站

1.1.1 网页和网站
常用术语：

域名 (Domain Name)：用于识别互联网上网站的地址，如 example.com。

URL (Uniform Resource Locator)：统一资源定位符，是互联网上资源的地址，包括协议、域名和路径等信息，如 https://www.example.com/page.html。

HTTP (Hypertext Transfer Protocol)：超文本传输协议，是用于从服务器传输超文本到本地浏览器的传输协议。

HTTPS (Hypertext Transfer Protocol Secure)：安全的超文本传输协议，是HTTP的安全版本，通过SSL/TLS提供加密传输。

IP 地址 (Internet Protocol Address)：互联网协议地址，是设备在互联网上的数字标识。

DNS (Domain Name System)：域名系统，用于将域名转换为IP地址。

Web 服务器 (Web Server)：托管网站内容（如网页、图片、视频等）的服务器。

HTML (Hypertext Markup Language)：超文本标记语言，用于创建网页的标准标记语言。

CSS (Cascading Style Sheets)：层叠样式表，用于设置网页的视觉和版式。

JavaScript：一种脚本语言，用于网页的交互性和动态效果。

Web 浏览器 (Web Browser)：用于检索、呈现和浏览通过互联网传输的信息资源的应用程序。

搜索引擎 (Search Engine)：用于帮助用户在互联网上查找信息的系统。

SEO (Search Engine Optimization)：搜索引擎优化，通过优化网站内容和结构提高在搜索引擎中的排名。

CMS (Content Management System)：内容管理系统，用于创建和管理数字内容的平台。

Web 框架 (Web Framework)：用于开发Web应用程序的一套工具和库。

API (Application Programming Interface)：应用程序编程接口，允许不同软件间进行交互。

数据库 (Database)：存储和管理数据的系统，常用于网站的数据存储。

FTP (File Transfer Protocol)：文件传输协议，用于在网络上进行文件传输。

SSL/TLS (Secure Sockets Layer/Transport Layer Security)：用于在互联网通信中提供加密的安全协议。

Cookies：网站存储在用户浏览器上的小块数据，用于识别用户和存储用户偏好。

1.1.2静态网页和动态网页

静态网页 (Static Web Pages)
定义：静态网页是指内容固定不变的网页，通常由HTML、CSS和静态图像组成，不涉及服务器端的脚本处理。
内容：内容在创建时就已经确定，不会根据用户的行为或请求而改变。
存储：通常直接存储在服务器上，用户请求时直接发送相同的文件。
性能：加载速度快，因为不需要服务器处理，适合内容不经常更新的网站。
安全性：通常比动态网页更安全，因为不涉及服务器端脚本执行，减少了被攻击的风险。
开发：相对简单，不需要服务器端编程语言，如PHP、ASP.NET等。
SEO：对于搜索引擎优化来说，静态网页通常更易于被搜索引擎索引。
动态网页 (Dynamic Web Pages)
定义：动态网页是指内容可以根据不同用户、时间和请求而变化的网页，通常涉及到服务器端脚本和数据库。
内容：内容不是固定的，而是根据用户输入、数据库查询结果或程序逻辑动态生成。
存储：通常不直接存储为静态文件，而是在用户请求时由服务器端脚本动态生成。
性能：加载速度可能较慢，因为需要服务器处理和数据库查询。
安全性：由于涉及到服务器端脚本执行，可能面临更多的安全风险，如SQL注入、跨站脚本攻击等。
开发：相对复杂，需要服务器端编程语言和数据库知识。
用户体验：可以提供更加个性化和交互式的用户体验，如用户登录、表单提交、实时数据更新等。
SEO：动态网页的SEO可能更复杂，因为需要确保搜索引擎能够正确索引动态生成的内容。
区别总结
内容更新：静态网页内容固定，动态网页内容可变。
服务器交互：静态网页不涉及服务器端交互，动态网页需要服务器端脚本处理。
用户体验：动态网页通常提供更丰富的用户体验，如个性化内容和实时交互。
性能：静态网页通常加载更快，动态网页可能需要更多服务器资源。
安全性：静态网页通常更安全，动态网页需要更多的安全措施。
随着技术的发展，现代网站往往结合了静态和动态网页的特点，例如使用静态站点生成器（如Jekyll、Hugo）来生成静态网页，同时通过API和JavaScript来提供动态功能。

1.2 网页的基本构成元素

网页的基本构成元素包括以下几个主要部分，它们共同工作以提供丰富的内容和交互体验：

HTML (HyperText Markup Language)：

网页的基础结构，由一系列元素（或称为标签）组成，用于定义网页的结构和内容。
CSS (Cascading Style Sheets)：

用于设置网页的视觉样式和布局，包括字体、颜色、间距、布局等。
JavaScript：

一种脚本语言，用于添加交互性和动态功能，如响应用户操作、动画效果、表单验证等。
多媒体内容：

包括图像、视频、音频等，用于丰富网页内容和提升用户体验。
表单：

用于收集用户输入，如文本、选择框、单选按钮、复选框等。
导航菜单：

帮助用户在网站的不同页面或部分之间进行导航。
链接：

允许用户从一个页面跳转到另一个页面，可以是内部链接（指向同一网站内的其他页面）或外部链接（指向其他网站的页面）。
元数据 (Meta Tags)：

包含关于网页的元信息，如页面描述、关键词、作者、页面编码等，通常用于搜索引擎优化（SEO）。
响应式设计：

确保网页在不同设备和屏幕尺寸上都能良好显示和工作。
Web字体：

用于在网页上显示特定的字体样式，可以是系统字体或通过Web字体服务加载的自定义字体。
APIs (Application Programming Interfaces)：

允许网页与服务器或第三方服务进行交互，如获取数据、提交信息等。
后端技术：

对于动态网站，后端技术如PHP、Python、Ruby、Node.js等用于处理服务器端的逻辑。
数据库：

用于存储、管理和检索网站数据，如用户信息、文章内容等。
会话管理：

用于跟踪用户的状态和活动，如登录状态、购物车内容等。
安全措施：

包括SSL/TLS加密、数据验证和清理、防止跨站脚本攻击（XSS）和SQL注入等，以保护网站和用户数据的安全。
这些元素共同构成了现代网页的复杂生态系统，使得网页不仅仅是静态的信息展示，还能提供动态、交互式和个性化的用户体验

1.3 页面布局结构

网页页面布局结构是指网页上各个元素的组织和排列方式，它决定了用户如何与网页内容互动以及内容的呈现方式。一个良好的布局结构通常包括以下几个关键部分：

页眉（Header）：通常位于页面顶部，包含网站的标志、导航菜单、搜索栏等。

导航栏（Navigation Bar）：提供链接到网站其他部分的导航链接，可以是顶部、侧边或底部。

内容区域（Content Area）：页面的主体部分，展示主要信息，如文章、图片、视频等。

侧边栏（Sidebar）：通常位于内容区域的一侧，提供额外信息、链接、广告或搜索功能。

页脚（Footer）：位于页面底部，包含版权信息、联系方式、隐私政策、网站地图等。

响应式设计：确保布局能够适应不同设备和屏幕尺寸，提供一致的用户体验。

栅格系统（Grid System）：使用行和列来组织内容，帮助创建一致和有序的布局。

空白（Whitespace）：合理利用空白区域，提高页面的可读性和美观性。

视觉层次（Visual Hierarchy）：通过大小、颜色、对比度等视觉元素，引导用户注意页面的重要部分。

交互元素（Interactive Elements）：如按钮、表单、弹窗等，允许用户与网页进行交互。

多媒体内容：合理嵌入图像、视频和音频，增强用户体验。

适应性布局：根据用户设备和浏览器特性调整布局，以提供最佳显示效果。

一个有效的网页布局结构能够提升用户体验，帮助用户快速找到所需信息，并促进网站的目标实现，如提高转化率、增加用户参与度等

图1-1 常见网页页面布局

1.4 Web前端技术简介

1.4.1 初始Web前端

Web前端开发是创建和维护网站用户界面的过程，它涉及到以下关键技术和概念：

HTML：定义网页的结构和内容。
CSS：设置网页的视觉样式和布局。
JavaScript：添加交互性和动态功能。
响应式设计：确保网站在不同设备上都能良好显示。
前端框架和库：如React、Angular、Vue.js，提高开发效率。
版本控制：使用Git管理代码变更和协作。
构建工具：如Webpack，自动化开发任务。
任务运行器：如npm scripts，自动化常见任务。
包管理器：如npm、Yarn，管理项目依赖。
浏览器开发者工具：用于调试和测试网页。
性能优化：提高网站加载速度和性能。
可访问性：确保网站对所有用户可访问。
跨浏览器兼容性：确保网站在不同浏览器上正常工作。
前端安全：保护网站免受安全威胁。
测试：确保代码质量和功能正确性。
APIs：与后端服务通信。
Web组件：可重用的自定义HTML元素。
CSS预处理器：如Sass、Less，提供高级CSS功能。
设计系统：保持界面一致性和可维护性。
前端开发是一个动态的领域，需要不断学习新技术和工具

1.4.2 Web前端开发的三大核心技术

Web前端开发的三大核心技术是 HTML、CSS 和 JavaScript，它们共同构成了网页开发的基础。

HTML (HyperText Markup Language)：

定义网页的结构和内容。
包含文本、链接、图片、表格、列表等元素。
用于创建网页的基本骨架。
CSS (Cascading Style Sheets)：

控制网页的布局和视觉表现。
包括颜色、字体、间距、对齐、动画等样式属性。
通过响应式设计确保网页在不同设备上都能良好显示。
JavaScript：

一种脚本语言，用于添加交互性和动态功能。
可以响应用户操作，如点击、滚动、输入等。
可以与服务器进行异步通信，如通过AJAX请求获取数据。
这三种技术相互补充，HTML 提供内容的结构，CSS 负责美化和布局，而 JavaScript 则赋予网页交互能力。现代Web开发中，这些技术通常与各种框架、库和工具结合使用，以提高开发效率和用户体验。

1.4.3 Web前端开发工具

Web前端开发涉及多种工具，这些工具帮助开发者提高效率、优化代码、测试功能和部署应用。以下是一些常用的Web前端开发工具：

代码编辑器：

Visual Studio Code：功能强大的免费编辑器，支持扩展插件。
Sublime Text：轻量级且快速的编辑器，具有丰富的插件系统。
Atom：由GitHub开发的可自定义文本编辑器。
WebStorm：JetBrains开发的IDE，专为JavaScript开发设计。
浏览器开发者工具：

Chrome DevTools：Google Chrome内置的开发者工具，用于调试HTML、CSS和JavaScript。
Firefox Developer Tools：Mozilla Firefox的开发者工具，功能类似Chrome DevTools。
版本控制系统：

Git：分布式版本控制系统，用于代码版本管理。
GitHub：基于Git的代码托管平台，支持代码审查、项目管理等。
GitLab：另一基于Git的代码托管和协作平台。
Bitbucket：支持Git和Mercurial的代码托管服务。
包管理器：

npm：Node.js的包管理器，用于管理JavaScript项目的依赖。
Yarn：由Facebook开发的替代npm的包管理器，提供更快的安装速度和更好的锁定机制。
构建工具和任务运行器：

Webpack：模块打包器，用于优化和打包JavaScript、CSS和图片资源。
Gulp：自动化构建工具，用于执行多种开发任务。
Grunt：另一自动化构建工具，与Gulp类似。
CSS预处理器：

Sass：CSS的预处理器，提供变量、嵌套、混合等高级功能。
Less：另一种CSS预处理器，具有类似的功能。
JavaScript框架和库：

React：由Facebook开发的用于构建用户界面的JavaScript库。
Angular：由Google支持的全面前端框架。
Vue.js：渐进式JavaScript框架，易于上手和集成。
测试工具：

Jest：由Facebook开发的JavaScript测试框架。
Mocha：功能丰富的JavaScript测试框架。
Jasmine：简单而强大的JavaScript测试框架。
性能测试工具：

Lighthouse：Google开发的开源工具，用于改善网页质量和性能。
WebPageTest：在线工具，用于测试网页加载速度和性能。
代码格式化和linting工具：

Prettier：代码格式化工具，支持多种语言。
ESLint：JavaScript的linting工具，用于识别和报告代码中的问题。
API开发和测试工具：

Postman：用于API开发和测试的工具，支持多种协议。
设计和原型工具：

Figma：基于浏览器的界面设计工具，支持协作。
Adobe XD：Adobe的界面设计和原型工具。
这些工具的选择取决于项目需求、团队偏好和个人习惯。随着Web开发领域的不断发展，新的工具和平台也在不断涌现

1.5 HTML语法基础

HTML（HyperText Markup Language，超文本标记语言）是构建网页和网上应用的基础语言。它由一系列的元素（称为标签）组成，这些标签告诉浏览器如何显示内容。以下是一些基础的HTML语法和概念：

文档结构：一个HTML文档通常以<!DOCTYPE html>声明开始，这告诉浏览器这是一个HTML5文档。

HTML元素：HTML文档由元素构成，元素由标签定义。例如：

html复制

<p>这是一个段落。</p>
这里<p>是开始标签，</p>是结束标签，它们之间的内容是元素的内容。

属性：HTML元素可以有属性，属性提供了有关HTML元素的额外信息。例如：

html

lt=<img src="image.jpg" alt="描述性文字">
src属性指定了图像的URL，alt属性提供了图像的替代文本。

头部和主体：

<head>元素包含了文档的元数据，如<title>、<link>（用于链接外部CSS）、<script>（用于嵌入JavaScript）等。
<body>元素包含了可见的页面内容，如文本、图片、链接等。
文本格式化：

<b>：加粗文本
<i>：斜体文本
<u>：下划线文本
<sub>：下标文本
<sup>：上标文本
链接：

html

<a href="https://www.example.com">访问示例网站</a>
href属性指定了链接的目标URL。

图片：

html

<img src="image.jpg" alt="描述性文字">
src属性指定了图像的路径，alt属性提供了图像的替代文本，用于图像无法显示时提供信息。

列表：

无序列表使用<ul>和<li>标签。
有序列表使用<ol>和<li>标签。
表格：

<table>：定义表格
<tr>：定义表格行
<td>：定义表格单元格
<th>：定义表头单元格
表单：

<form>：定义表单，用于收集用户输入
<input>：定义输入字段
<button>：定义按钮
语义化标签：HTML5引入了一些新的语义化标签，如<header>、<footer>、<section>、<article>等，它们帮助定义页面的结构和内容。

注释：HTML中的注释不会显示在浏览器中，格式如下：

html

这些是HTML的一些基础概念，掌握它们是学习网页设计的第一步。随着学习的深入，你还会接触到更复杂的HTML特性和结构

1.5.1 HTML语法概述

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它由一系列元素组成，这些元素可以定义网页的结构和内容。以下是HTML语法的简要概述：

文档类型声明（DOCTYPE）： HTML文档以<!DOCTYPE html>声明开始，这告诉浏览器这是一个HTML5文档。

html

<!DOCTYPE html>
HTML元素： HTML文档由元素组成，元素由开始标签、内容和结束标签组成。例如：

html

<p>这是一个段落。</p>
属性： HTML元素可以包含属性，属性提供了关于元素的额外信息。属性通常在开始标签中指定。

html

<a href="https://www.example.com">访问示例网站</a>
在这个例子中，href是<a>元素的属性，它指定了链接的目标URL。

头部（Head）： <head>元素包含了文档的元数据，如标题、样式表链接、脚本等。

html

<head>
<title>页面标题</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
主体（Body）： <body>元素包含了网页的可见内容，如文本、图片、链接、列表、表格等。

html

<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个段落。</p>
</body>
文本格式化： HTML提供了多种标签来格式化文本，如加粗（<b>）、斜体（<i>）、下划线（<u>）等。

html

<b>加粗文本</b>
<i>斜体文本</i>
<u>下划线文本</u>
链接（Links）：使用<a>标签创建链接，href属性指定链接的目标地址。

html

<a href="https://www.example.com">访问示例网站</a>
图片（Images）：使用<img>标签插入图片，src属性指定图片的路径，alt属性提供图片的替代文本。

html

<img src="image.jpg" alt="描述性文字">
列表（Lists）：

无序列表使用<ul>和<li>标签。
有序列表使用<ol>和<li>标签。
html

<ul>
<li>项目1</li>
<li>项目2</li>
</ul>
<ol>
<li>项目1</li>
<li>项目2</li>
</ol>
表格（Tables）：使用<table>、<tr>、<td>和<th>标签创建表格。

html

<table>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
表单（Forms）：使用<form>标签创建表单，<input>和<button>标签用于收集用户输入。

html

<form action="/submit-form" method="post">
<input type="text" name="username">
<button type="submit">提交</button>
</form>
注释（Comments）： HTML中的注释不会显示在浏览器中，格式如下：

html

语义化标签（Semantic Tags）： HTML5引入了一些新的语义化标签，如<header>、<footer>、<section>、<article>等，它们帮助定义页面的结构和内容。

html

<header>
<h1>网站标题</h1>
</header>
<footer>
<p>版权信息</p>
</footer>
这些是HTML的基本组成部分和语法规则，它们构成了网页的基础结构。随着你对HTML的进一步学习，你将能够创建更复杂和功能丰富的网页

1.5.2 HTML基本结构

HTML文档的基本结构包括几个关键部分，这些部分共同构成了一个完整的HTML页面。下面是一个典型的HTML5文档的基本结构：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>

<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>

<header>

</header>
<nav>

</nav>
<main>

<section>

</section>
<article>

</article>
<aside>

</aside>
</main>
<footer>

</footer>
</body>
</html>