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

snow_wind_rain

已于 2024-09-11 18:34:41 修改

阅读量894

点赞数 7

分类专栏：作业文章标签：前端 html5

于 2024-09-11 18:33:47 首次发布

本文链接：https://blog.csdn.net/m0_66763041/article/details/142147137

版权

作业专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.1.1网页、网站

网页和网站的区别：

1.网站 (Website)是由多个网页及其网络后端架构组成的集合体，通常共享同一个域名（例如www.dreamysoulsx.com）。一个网站可以包括主页、子页面、博客文章、产品列表等。网站通常有一个结构化的布局，包含导航栏、页脚和其他帮助用户浏览网站的设计元素。网站可以是静态的，也可以是动态的。静态网站包含固定的内容，而动态网站可以根据用户输入或其他变量改变其内容。

2.网页 (Web Page)是网站的一部分，是一个单独的HTML文档，它可以在浏览器中打开。一个网页可以有文本、图像、视频等多种媒体形式。每个网页都有一个唯一的URL（统一资源定位符），这使得用户可以通过这个地址直接访问该页面。网页可以是简单的，仅包含一些文本和图片，也可以是复杂的，具有交互功能，如表单提交、购物车操作等。

常用术语：FTP、HTTP与HTTPS、URL、IP、域名、WEB服务器、超链接、客户机与服务器

1.1.2静态网页和动态网页

网页的三大核心技术:HTML CSS JavaScript(二者只以是否使用JavaScript为区分)

1.2网页的基本构成元素

网页由各种元素构成，这些元素共同决定了网页的外观、功能以及用户体验。

1.2.1 文本

文本是网页上最基本的信息形式。HTML提供了多种标记来定义文本的不同样式和层级：

标题 (<h1> 至 <h6>): 定义页面的不同级别的标题，其中 <h1> 是最重要的标题。

段落 (<p>): 用于包裹文本段落。

强调 (<em> 和 <strong>): 分别用于表示强调语气和重要性。

链接 (<a>): 可以链接到其他网页或页面内的某个位置。

列表 (<ul>, <ol>, <li>): 用于创建无序或有序列表。

引用 (<blockquote>): 用于长篇引用，而 <q> 用于短引用。

1.2.2 图片和动画

图片和动画使得网页更加丰富和吸引人：

图片 (<img>): 使用 src 属性指定图像的URL，并通过 alt 属性提供替代文本。
动画 (GIF, SVG, <canvas>): GIF 图像可以展示简单的动画；SVG（可缩放矢量图形）适合复杂的图形和动画；HTML5 <canvas> 元素允许脚本绘制图形和动画。

1.2.3 超链接

超链接 (<a> 标签) 是互联网的核心概念之一，它允许用户从一个页面导航到另一个页面或页面内部的某个位置。

链接类型包括绝对链接、相对链接、锚点链接等。

1.2.4 音频视频

HTML5 引入了 <audio> 和 <video> 标签，允许直接在网页中嵌入音频和视频内容，无需依赖Flash或其他插件。

属性如 controls, autoplay, loop 等，可以控制媒体播放的行为。

1.2.5 交互表单

表单 (<form>) 允许用户向服务器提交数据，是实现用户与网站互动的关键：

输入类型包括文本输入 (<input type="text">), 密码输入 (<input type="password">), 单选按钮 (<input type="radio">), 复选框 (<input type="checkbox">) 等。
提交按钮 (<button> 或 <input type="submit">) 提交表单数据。

1.2.6 其他常见元素

还有许多其他元素用于构建复杂的功能：

表格 (<table>): 显示数据的表格格式。
分区 (<div> 和 <span>): <div> 用于大块内容的分隔，而 <span> 用于行内元素。
框架 (<iframe>): 在当前页面内嵌入另一个HTML文档。

1.3 页面布局结构

页面布局对于创造一致的视觉体验至关重要。

1.3.1 网页页面布局

现代布局技术包括：

CSS Grid: 提供了一个基于网格的布局模型。
Flexbox: 使创建响应式布局变得简单。
浮动和定位 (float, position): 更传统的布局方法。

1.3.2 网页色彩搭配

色彩选择不仅要美观，还要符合品牌识别和用户心理预期：

主色调应该反映品牌形象。
对比度对于可读性和无障碍访问非常重要。
配色方案可以是单色系、互补色或类似色等。

1.4 Web前端技术简介

Web前端技术是构建现代网站所需的知识和技术。

1.4.1 初识Web前端

Web前端涉及创建用户界面的所有方面，包括HTML结构、CSS样式以及JavaScript行为。

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

HTML: 定义网页的结构。
CSS: 控制网页的样式。
JavaScript: 实现网页的交互。

1.4.3 前端开发工具

浏览器: 开发者工具提供了调试HTML、CSS和JavaScript的强大功能。
编辑器: Visual Studio Code、Sublime Text 等提供代码高亮、智能感知等功能。
切图软件: Adobe Photoshop、Sketch 等用于设计原型和导出资源。

1.5 HTML语法基础

HTML（超文本标记语言）是网页的基础。

1.5.1 HTML概述

语言: HTML不是编程语言而是标记语言。
超文本: 文档可以包含指向其他文档的链接。
标记: 标签用来定义文档的结构和内容。

1.5.2 HTML基本结构

文档标签 (<html>): 包含整个HTML文档。
文档头 (<head>): 包含元数据如标题、字符集声明等。
文档体 (<body>): 包含实际显示给用户的内容。

1.6 创建HTML文档

创建HTML文档涉及编写HTML代码并保存为.html文件，在浏览器中打开以查看结果。

1.7 网页头部标签

头部标签定义了关于文档的信息，但它们不会直接显示在页面上，而是被用来控制文档的元数据和加载外部资源。

1.7.1 <title>标签

<title>标签定义了网页的标题，这个标题会出现在浏览器的标签页上，并且在搜索引擎结果中也会显示。它是 <head> 部分的一部分。

<title>我的个人博客</title>

1.7.2 <meta>标签

1.7.2.1 keywords

虽然搜索引擎已经不再重视这个元标签，但在某些情况下仍然会被用到，例如RSS阅读器或其他元数据处理系统。

<meta name="keywords" content="HTML, CSS, JavaScript">

1.7.2.2 description

描述元标签提供了页面的简短描述，这通常是搜索引擎摘要的基础。

<meta name="description" content="学习HTML, CSS, JavaScript的最佳资源">

1.7.3 <link>标签

用于连接外部资源，如样式表。

<link rel="stylesheet" href="styles.css">

1.7.4 <script>标签

<script src="script.js"></script>

1.8 HTML5文档注释和特殊符号

1.8.1 注释

HTML注释允许开发者在文档中添加不会被浏览器解析和显示的注释信息。

<!-- 这是一个注释 -->

1.8.2 特殊符号

HTML实体是用来在HTML文档中表示特殊字符的一种方式。以下是一些常用的HTML实体及其意义：

版权符号 (©): 表示版权 ©。
注册商标 (®): 表示注册商标 ®。
小于号 (<): 表示小于号 <。
大于号 (>): 表示大于号 >。
和号 (&): 表示与号 &。
不等于 (≠): 表示不等于 ≠。（注意，≠ 不是HTML5标准的一部分，应使用 != 或者 ≠）
商标符号 (™): 表示商标 ™。
欧元符号 (€): 表示欧元 €。
英镑符号 (£): 表示英镑 £。
日元符号 (¥): 表示日元 ¥。
度数符号 (°): 表示度 °。
分之 (&frasl;): 表示斜杠 ⁄。
这些符号在HTML文档中非常有用，尤其是在需要显示数学公式、货币符号或者法律声明的时候。

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

<! --案例-->
<!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>
			<! --使用的效果-->
			<p>一别都门三改火，天涯踏尽红尘。<br/>
					依然一笑作春温。<br/>
				无波真古井，有节是秋筠。<br/>
				惆怅孤帆连夜发，送行淡月微云。<br/>
				尊前不用翠梅颦。<br/>
				<font color ="brown" face="微软雅黑">人生如逆旅，我亦是行人。</font></p>
			<img src="teacher.jpg"/>
			<!--水平线-->
			<hr size="2" color="black" with="100%" />
			<p align="center">网页制作教程Copyright&copy；家里蹲大学</p>
	</body>
</html>