第一章总结

晚风许欣然

已于 2024-09-12 14:49:27 修改

阅读量846

点赞数 22

文章标签： java 前端服务器

于 2024-09-11 22:47:41 首次发布

本文链接：https://blog.csdn.net/P1121qqq/article/details/142052619

版权

第一章：网页制作的基本知识

1.1网页，网站

网页和网站的区别：

1.网页

网页由 HTML 编写，通过 WWW 网传输，被浏览器编译供用户获取信息，又称 Web 页，集合多种网页元素。若 WWW 是因特网大型图书馆，书为 Web 站点，网页是书中一页，页码即网址，多个网页组合成 Web 站点，其中特殊网页是主页。HTML 是描述文档结构的标记语言，网页用 HTML 描述，扩展名一般为 “.htm” 或 “.html”。因含超级链接，网页也叫超文本，传输超文本的协议是超文本传输协议。

2，网站

Web 站点也称网站，由无数网页组成，超链接将网页连接成便于浏览的整体。网站是 Internet 上提供服务的位置，由 IP 地址或域名描述，需服务器实现 WWW 服务，规模大小不同。网站是多个网页集合，按内容分 5 种类型，按设计技术分静态和动态网站。网站是有独立域名、空间内容的集合，不一定需很多网页，有独立域名和空间，一个页面也可称为网站。

3，常用术语

网页相关术语

页面布局：PL（Page Layout）
响应式设计：RD（Responsive Design）
首屏：ATF（Above the Fold）
网页加载速度：PLS（Page Load Speed）
超链接：HL（Hyperlink）
锚文本：AT（Anchor Text）

网站相关术语

域名：DN（Domain Name）
主机：WH（Web Hosting）
内容管理系统：CMS（Content Management System）
搜索引擎优化：SEO（Search Engine Optimization）
用户体验：UX（User Experience）

转化率：CR（Conversion Rate）
网站流量：WT（Website Traffic）
404 错误：404E（404 Error）

4，静态网页和动态网页

静态网页：由 HTML、CSS 和 JavaScript 构建，无后台数据库、不可交互，内容固定。特点是加载速度快，易被搜索引擎抓取，但维护麻烦需手动改 HTML 文件。

动态网页：可根据用户请求和特定条件动态生成内容，涉及服务器端脚本语言和数据库。特点是交互性和个性化强，能实现复杂功能，但加载速度可能较慢，搜索引擎优化复杂。

5，网页的基本构成

一、结构层（HTML）：
HTML 是网页结构基础，有多种标签定义元素和结构。如<title>定义网页标题，<body>包含主要内容，<p>定义段落，<h1>到<h6>定义不同级别标题，<ul>、<ol>和<li>用于列表，<a>创建链接。

二、表现层（CSS）：
CSS 控制网页外观和布局。由选择器和声明块组成样式规则，可设置布局属性、颜色和字体，通过媒体查询实现响应式设计。

三、行为层（JavaScript）：
JavaScript 为网页添加交互行为和动态效果。包括事件处理、动态效果、数据交互以及验证和错误处理。可监听用户操作，实现动画效果，与服务器交互，验证数据并处理错误。

6，

<1>文本

文本是用文字记录和表达信息的形式。在上述内容中，文本主要是关于网页设计的专业描述，涵盖 HTML、CSS 和 JavaScript 三个层面。

HTML 结构层：阐述各种标签作用，如<title>定义网页标题、<body>包含主要内容、<p>定义段落、<h1>到<h6>组织内容层次、列表标签展示列表、<a>创建链接。

CSS 表现层：介绍样式规则组成、布局属性作用、颜色字体设置及响应式设计技术。

JavaScript 行为层：说明事件处理、动态效果、数据交互和验证错误处理功能。

这些文本以清晰专业语言呈现网页设计关键要素和技术，助读者理解网页构建和功能实现方式。

<2>图片和动画

图片是通过图形、色彩等视觉元素传达信息或表达艺术美感的静态图像形式，可由摄影设备、绘画软件或图形设计工具制作，常见格式有 JPEG、PNG、GIF 等。

动画是由连续静态图像快速播放产生的动态视觉效果，分为二维和三维动画。二维动画通常手工绘制或用动画制作软件创建，具平面视觉效果；三维动画利用三维建模软件创建立体感场景和角色，通过渲染和动画制作技术呈现逼真效果。动画可用于电影、电视、广告、游戏等领域，增强视觉吸引力并传达复杂故事和信息。

<3>超链接

超链接是在网页、文档等数字内容中建立的连接，可将用户从一处引导至另一处。网页中的超链接常以文本、图片或按钮形式出现，用户点击后浏览器根据目标地址加载网页、文件等内容或跳转到网页不同部分。超链接分内部链接和外部链接，内部链接用于同一网站内导航，外部链接指向其他网站页面提供更广泛信息资源。目标地址可为绝对地址（完整 URL）或相对地址（相对于当前页面位置确定目标）。

<4>音频视频

音频是指可以被听到的声音信号，它可以通过录制、合成等方式产生。音频可以以各种格式存储，如 MP3、WAV、FLAC 等。音频可以用于音乐、广播、语音通话、音效等多个领域。

视频是由一系列连续的图像帧组成，再加上音频信号，共同形成的一种多媒体形式。视频可以通过拍摄、动画制作等方式生成。常见的视频格式有 MP4、AVI、MOV 等。视频广泛应用于电影、电视、在线视频平台、广告、教育培训等领域。

<5>交互表单

交互表单是一种在网页或软件应用中用于收集用户输入信息的工具。它通常由一系列输入字段、选择框、按钮等组成，允许用户与系统进行交互。

<6>其他常见元素

图像映射：可在图片上定义多个可点击区域，链接不同目标地址，增加网页趣味性和功能性。
水平线：<hr>标签在网页中插入水平分隔线，区分内容区域或起装饰作用。
注释：HTML 代码中用注释记录功能、作者等信息，不显示但利于维护和理解。
特殊字符：网页需用特殊字符时，可通过 HTML 实体表示以正确显示。
网页框架：可将网页分割成多个区域，独立加载不同内容，提高加载速度和可维护性，但有兼容性问题和安全风险。

7，页面布局结构

一、流式布局：又称自适应布局，网页内容随浏览器窗口大小自动调整和流动，适应不同屏幕尺寸设备，有较好响应式设计效果。

二、固定布局：网页宽度通常为固定像素值，不随浏览器窗口变化，设计简单但在不同设备上显示效果可能有差异。

三、弹性布局：用相对单位定义网页元素尺寸和位置，能在不同尺寸屏幕上保持相对比例显示效果，结合了流式布局和固定布局优点。

四、栅格布局：将网页划分为等宽列和行，通过组合构建布局，使网页设计更规范统一，提高页面可读性和易用性。

8，网页页面布局

页页面布局是指在网页设计中，对各种元素进行组织和安排的方式。一个良好的页面布局能够提高网页的可读性、易用性和美观度，为用户提供更好的浏览体验。

9，网页色彩搭配

网页色彩搭配在网页设计中起着至关重要的作用，它能够影响用户的情绪、感知和行为，同时也能传达品牌的个性和价值观。

10，web前端技术简介、

Web 前端技术主要负责网页的用户界面和交互体验部分。它涵盖了一系列用于构建和呈现网页内容的技术和工具。

11，初识web前端

初识 Web 前端，如同开启数字世界精彩展现之门。Web 前端负责浏览器中用户看到的界面部分，是用户与网站或网络应用交互的最前沿。

HTML 是构建网页结构的基石，用各种标签定义网页元素。CSS 如魔法师，赋予网页美丽外观，控制样式属性。JavaScript 是关键，让网页动态且交互性十足，可实现动画效果等功能，提升用户体验。响应式设计随移动设备广泛使用成为重要部分，能让网页在不同屏幕尺寸良好显示初识 Web 前端，会发现这是充满创意和挑战的领域，通过不断学习和实践可掌握技术，创造惊艳网页界面，带来卓越数字体验。

12，web前端开发的三大核心技术

一、HTML（超文本标记语言）

HTML 是网页的结构基础，用于定义网页的内容和布局。它使用各种标签来描述网页中的不同元素，如标题、段落、图片、链接等。HTML 的主要作用是为网页提供一个基本的框架，使网页的内容能够被浏览器正确地解析和显示。

二、CSS（层叠样式表）

CSS 用于控制网页的外观和布局。它可以定义网页元素的颜色、字体、大小、位置等样式属性，使网页具有更好的视觉效果。CSS 还可以实现网页的响应式设计，使网页能够适应不同的设备和屏幕尺寸。

三、JavaScript

JavaScript 是一种编程语言，用于为网页添加交互性和动态效果。它可以响应用户的操作，如点击、鼠标移动、键盘输入等，并执行相应的代码。JavaScript 还可以与后端服务器进行数据交互，实现网页的动态更新和数据处理。

13，web前端开发工具

一、代码编辑器：
Visual Studio Code：功能强、免费开源、插件多，满足前端开发需求，支持语法高亮等功能。
Sublime Text：简洁高效、响应快，插件多，适合快速写代码。
WebStorm：专业工具，JavaScript 开发出色，有强大代码分析和调试功能。

二、浏览器开发者工具：
Chrome 开发者工具：广泛使用，可调试网页、分析性能等，功能丰富。
Firefox 开发者工具：强大，有独特之处。

三、版本控制工具：
Git：管理代码版本，方便团队协作，可跟踪修改历史等，配合 GitHub 等平台使用。·····

四、包管理工具：
npm：管理 JavaScript 包和模块，方便安装等操作。
yarn：类似 npm，速度快、确定性和可靠性好。

五、自动化构建工具：
Webpack：强大模块打包工具，可打包优化前端资源，提高效率和性能。

14，HTML语法基础

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个网页项目<title>
		<link rel="stylesheel"
		href="/css/index.css"
		type="text/css"/>
		<script type="text/javascript"
		src="js/index.js"></script>
	</head>
	<body>
		<!--一月又一月-->
		<h1>我的第一个网页项目</h1>
		<p>2023软件技术三班</p>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

15，HTML概述

HTML（HyperText Markup Language），即超文本标记语言，是用于创建网页的标准标记语言。

HTML 主要有以下几个特点：

一、结构与内容定义

它通过各种标签来定义网页的结构和内容。比如，<h1>到<h6>标签用于定义不同级别的标题，<p>标签用于定义段落，<img>标签用于插入图片等。这些标签使得网页的内容具有明确的层次和组织。

二、超文本特性

HTML 具有超文本的特性，允许在网页中创建链接，使用户可以通过点击链接跳转到其他网页或同一网页的不同部分。链接通过<a>标签来创建，通过设置href属性指定链接的目标地址。

三、跨平台性

HTML 文档可以在各种操作系统和设备上的浏览器中显示，具有很强的跨平台性。无论用户使用的是 Windows、Mac 还是 Linux 系统，无论是在电脑、手机还是平板电脑上，只要有浏览器，就可以浏览 HTML 网页。

四、与其他技术结合

HTML 通常与 CSS（层叠样式表）和 JavaScript 一起使用。CSS 用于控制网页的外观和布局，使网页更加美观；JavaScript 用于为网页添加交互性和动态效果，提升用户体验。

16，HTML基本结构

一、文档类型声明（DOCTYPE）

在 HTML 文档的开头，需要添加文档类型声明，告诉浏览器使用的 HTML 版本。例如，<!DOCTYPE html>表示使用 HTML5 版本。

二、html 标签

<html>标签是整个 HTML 文档的根元素，它包含了文档的所有内容。

三、head 标签

<head>标签包含了文档的元数据，如标题、字符编码、样式表链接、脚本链接等。常见的元素包括：

<meta charset="UTF-8">：设置字符编码为 UTF-8，以支持多种语言的字符显示。
<title>网页标题</title>：定义网页的标题，显示在浏览器的标题栏上。

四、body 标签

<body>标签包含了网页的可见内容，如文本、图片、链接、表格等。

17，

<!DOCTYPE html>
<html>
<head>
    <meta name="keywords" content="宋词，苏轼" charset="utf-8">
    <meta name="description" content="本网站收录精选宋词">
    <title>宋词精选</title>
    <style type="text/css">
        p {
            text-align: center;
            font-size: larger;
        }
    </style>
</head>
<body bgcolor="antiquewhite" text="#333333">
    <h2 align="center">临江仙·送钱穆父</h2>
    <p>宋 苏轼</p>
    <!--使用<br/>的效果-->
    <p>一别都门三改火，天涯踏尽红尘。</p>
        <p>依然一笑作春温。</p>
        <p>无波真古井，有节是秋筠。</p>
        <p>惆怅孤帆连夜发，送行淡月微云。</p>
       <p> 尊前不用翠眉颦。</p>
        <font color="brown" face="微软雅黑">人生如逆旅,我亦是行人。</font></p>
    <img src="img/20210901436.jpg"/>
    <!--水平线-->
    <hr size="2" color="black" width="100%"/>
    
	
</body>
</html>