第1章网页基础知识

与秋逐鹿¥

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

阅读量388

点赞数 21

分类专栏： html 文章标签：前端 html

于 2024-09-11 11:01:29 首次发布

本文链接：https://blog.csdn.net/qq_62558682/article/details/142054537

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.1 认识网页和网站

在当今数字化时代，网页和网站是人们获取信息、进行交流和开展业务的重要平台。以下是关于网页和网站的认识：

一、网页

1. 定义

- 网页是构成网站的基本元素，是通过超文本标记语言（HTML）等技术创建的包含文本、图像、音频、视频等多种内容的文档。

- 通常以.htm 或.html 为后缀名，可以在浏览器中显示。

2. 组成部分

- 页面内容：包括文字、图片、音频、视频等各种信息。

- 超链接：可以链接到其他网页或资源，方便用户浏览和获取更多信息。

- 导航栏：帮助用户在不同的网页之间进行导航。

- 表单：用于收集用户输入的信息，如注册表单、搜索表单等。

3. 类型

- 静态网页：内容固定，不会随着用户的操作或时间的变化而改变。

- 动态网页：可以根据用户的请求或特定的条件动态生成内容，如新闻网站、电子商务网站等。

二、网站

1. 定义 - 网站是由多个网页组成的集合，通常具有统一的主题和风格，提供特定的服务或信息。 - 可以通过域名进行访问，是一个在互联网上的虚拟存在。

2. 组成部分

- 域名：网站的地址，用于在互联网上唯一标识一个网站。

- 服务器：存储网站的文件和数据，并通过网络将网页内容发送给用户的计算机。

- 网页内容：包括各种类型的网页，如首页、产品页面、新闻页面等。

- 数据库：用于存储网站的数据，如用户信息、文章内容等。

3. 类型 -

企业网站：用于展示企业的产品、服务、新闻等信息，提升企业形象和品牌知名度。

- 电子商务网站：提供在线购物功能，包括商品展示、购物车、支付等环节。

- 新闻网站：发布各种新闻资讯，包括国内外新闻、财经新闻、体育新闻等。

- 社交网站：提供社交功能，让用户可以与朋友、家人和同事进行交流和互动。

总之，网页是网站的组成部分，网站是由多个网页组成的集合。了解网页和网站的特点和类型，可以帮助你更好地利用互联网获取信息和开展各种活动。

1.1.1 网页、网站及常用术语

1 网页

网页是互联网上展示特定内容的页面，可以通过浏览器访问。它通常由 HTML、CSS、JavaScript 等语言编写而成，包含文本、图片、音频、视频等多种元素。

2 网站

网站是由多个网页组成的集合，围绕特定主题或目的构建。网站具有统一的域名和风格，通过超链接相互连接。

3 常用术语

常用术语包括：

域名：网站的地址标识，如 www.example.com。

URL：统一资源定位符，用于指定网页的位置。

服务器：存储网站文件并响应客户端请求的计算机设备。

1.1.2 静态网页和动态网页

1 静态网页

静态网页的内容是固定的，不会随用户操作或时间变化而改变。它通常以 HTML、CSS 和少量 JavaScript 编写，加载速度快，但交互性有限。

2 动态网页

动态网页可以根据用户请求或其他条件动态生成内容。它通常使用服务器端脚本语言（如 PHP、Python、Java 等）和数据库来实现，具有更强的交互性和个性化功能。

1.2 网页的基本构成元素

一文本

文本是网页中最基本的元素，用于传达信息。可以通过设置不同的字体、大小、颜色、对齐方式等样式来美化文本。

二图片和动画

图片可以增强网页的视觉效果，吸引用户注意力。常见的图片格式有 JPEG、PNG、GIF 等。
动画可以为网页增添生动感，如 GIF 动画、使用 JavaScript 实现的动态效果等。

三超链接

超链接用于连接不同网页或同一网页的不同部分，使用户可以方便地浏览网站。超链接可以是文本链接、图片链接等形式。

四音频视频

音频和视频可以为网页增添多媒体元素，提供更丰富的用户体验。可以使用 HTML5 的 <audio> 和 <video> 标签来嵌入音频和视频文件。

五交互表单

交互表单允许用户输入信息并提交给服务器进行处理，如注册表单、登录表单、调查问卷等。

六其他常见元素

导航栏：帮助用户快速找到所需的页面或功能。
版权声明：标明网站的版权信息。
社交媒体图标：方便用户分享网页内容到社交媒体平台。

1.3 页面布局结构

一网页页面布局

流式布局：网页内容根据浏览器窗口大小自动调整布局，适应不同的屏幕尺寸。
固定布局：网页内容具有固定的宽度和位置，不会随浏览器窗口大小变化而改变。
响应式布局：结合流式布局和固定布局的优点，能够根据不同的设备和屏幕尺寸自动调整布局，提供最佳的用户体验。

二网页色彩搭配

1 色彩选择：根据网站的主题和目标受众选择合适的色彩方案。色彩可以传达情感、品牌形象和信息。

2 色彩搭配原则：遵循色彩搭配的基本原则，如对比度、协调性、色彩心理学等，以确保网页的视觉效果和可读性。

1.5 HTML 语法基础

1.5.1 HTML 概述：HTML（HyperText Markup Language）的介绍，它是网页内容的标准标记语言。

1.5.2 HTML 基本结构：HTML文档的基本结构，包括`<!DOCTYPE html>`、`<html>`、`<head>`和`<body>`等标签。

1.6 创建 HTML 文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<a href="https://www.baidu.com">baidu </a>
</body>
</html>

1.7 网页头部标签

1.7.1 <title>标签：定义网页的标题，显示在浏览器的标题栏或标签页上。
1.7.2 <meta>标签：提供关于HTML文档的元数据，如字符集声明、页面描述、关键词等。
1.7.3 <link>标签：用于链接外部资源，如CSS样式表或图标文件。
1.7.4 <script>标签：用于嵌入或引用JavaScript代码。

1.8 HTML5 文档注释和特殊符号

1.8.1 注释：如何在HTML文档中添加注释，以便开发者理解代码或暂时移除代码段。
1.8.2 特殊符号：如何在HTML中表示特殊字符，如引号、小于号、大于号等。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宋词精选</title>
    <style type="text/css">
        div {
            text-align: center;
            font-size: 30px;
            font-weight: bold;
        }

    </style>
</head>
<body>
<div>
    <h2>临江仙-送钱穆父</h2>
    <p>宋 苏轼</p>
    <p>一别都门三改火，天涯踏尽红尘。依然一笑作春温。</p>
    <p>无波真古井，有节是秋筠。</p>
    <p>惆怅孤帆连夜发，送行淡月微云。尊前不用翠眉颦。</p>
    <p>人生如逆旅，我亦是行人。</p>
    <img src="../imgs/1.jpg"></div>
<hr size="2px" color="black" width="1000">
</body>
</html>