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

小微怕小狗

已于 2024-09-12 21:16:29 修改

阅读量1k

点赞数 24

文章标签：网络

于 2024-09-10 21:27:01 首次发布

本文链接：https://blog.csdn.net/WWL009988/article/details/142092149

版权

1.1认识网页和网站

网页：网页，是网站中的一“页”。网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，您的网站就是由网页组成的，如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。

网站：网站指的是在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。网站是一系列相关网页的集合，这些网页通过超链接相互连接，形成一个整体，共享相关的主题或共同目标。网站可以包含几个到成千上万个网页，如新浪网就包括多个板块和大量网页‌

1.1.1网页、网站

网页和网站的区别:网站是运载体、网页是承载体，两者是相互形成的共存载体，他们的主要区别是性质和功能的不同，实际上网站是由网页组合而成，但是网页可以单独存在运行，他们都需要建立在互联网通信的基础条件上才能实现访问浏览的形态。

常术用语：

Internet、由各种不同类型的计算机网络链接起来的全球性网络。

WWW、功能是让Web客户端访问Web服务器中的网页。

浏览器、将Internet中的文本文档和其他文件翻译成网页的软件，通过浏览器可以快捷获取Internt中的内容。

URL、统一资源定位符，指定通信协议和地址。

IP、是英文Internet Protocol的缩写,意思是网络之间互连的协议,也就是为计算机网络相互连接进行通信而设计的协议,IP协议也可以叫做因特网协议。

域名、域名(英语:Domain Name),又称网域,是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称,用于在数据传输时对计算机的定位标识(有时也指地理位置)。

HTTP、HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送协议。

FTP、文件传输协议（英语：File Transfer Protocol，缩写：FTP）是一个用于在计算机网络上在客户端和服务器之间进行文件传输的应用层协议。

发布、将制作好的网页传到网上的过程叫上传网站。

站点、站点是指互联网上的一个网站、网页或网络服务的地址或位置。在计算机网络中,站点可以指一个域名或IP地址下的所有网页或内容。

超链接、超链接(Hyperlink),通常简称为链接(link),是网络背后的核心概念。

客户机和服务器、客户机(Client)和服务器(Server)是云计算领域中的两个关键组件,它们之间的通信是基于客户端-服务器架构(Client-Server Architecture)来实现的。

1..1.2静态网页和动态网页

HTML CSS JavaScript

判断一个网页是否为静态动态用Javascript与图片视段无关。

静态网页： 静态网页通常较缺乏交互性，页面上的内容固定，无法根据用户的输入或操作做出实时响应。

动态网页：动态网页的内容是根据用户请求和服务器端的逻辑动态生成的。每次用户访问时，内容可能会根据特定条件和参数而改变。

1.2网页的基本构成元素

1.2.1文本

网页文本：指的是文字、字母、数字、符号等可见字符的有序组。‌ 网页文本是网页表达信息的主要途径之一，互联网上大量信息的传播以文本为主。对于网页制作人员来说，文本的处理是最基本而重要的技巧之一。网页中的文本可以分为普通文本和特殊字符文本，普通文本是指可以直接在键盘上输入的字符，而特殊字符文本则包括数学、物理和化学等领域的特殊符号。网页文本的处理包括插入文本、符号、日期等基本编辑操作，以及设置文本的属性如字体、字号、风格等，这些操作通过HTML语言和相关CSS样式来实现。‌

1.2.2图片和动画

图片：‌‌图片是指由图形、图像等构成的平面媒体。‌ 图片的格式很多，但总体上可以分为‌点阵图和‌矢量图两大类。我们常用的‌BMP、‌JPG等格式属于点阵图形，而‌SWF、‌CDR、‌AI等格式的图形则属于矢量图形。图片相较于文字而言，所承载的信息内容更为丰富，具有丰富的画面感，可实现具体或模糊表达，承载着人类的大量丰富情感，如表情、人物照片等。

动画：‌‌动画是一种综合艺术，它结合了‌绘画、‌电影、‌数字媒体、‌摄影、‌音乐、‌文学等多种艺术形式，通过逐帧拍摄并连续播放来形成运动的影像技术。‌动画的制作过程涉及将原画关键动态之间的变化过程按照规定的动作范围、张数和运动规律逐帧绘制中间画，最终通过电影放映机、电视、网络等媒介传播，赋予画面活动的生命形态或动态艺术效果。动画不仅是一种特殊的艺术形式，也是一种兼顾实用性的文化形式，具有娱乐消费、传播知识、实行教育、提供社会服务等职能。

1.2.3超链接

超链接一般指超文本。超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。超文本更是一种用户界面范式，用以显示文本及与文本之间相关的内容。现时超文本普遍以电子文档方式存在，其中的文字包含有可以连接到其他位置或者文档的链接，允许从当前阅读位置直接切换到超文本链接所指向的位置。超文本的格式有很多，最常使用的是超文本标记语言（标准通用标记语言下的一个应用）及富文本格式。

1.2.4音频视频

‌‌音频视频是指音频和视频的结合，通常指的是包含音频和视频数据的多媒体内容。‌ 音频视频可以指代多种形式，包括但不限于视频文件格式、‌可视电话的音频视频接口、以及多媒体内容本身。‌12

‌多媒体光盘‌：AVI格式主要用于多媒体光盘，用于保存电视、电影等各种影像信息。
‌通信技术‌：在可视电话中，音频视频接口使得通信更加直观和丰富。
‌互联网和数字媒体‌：随着互联网的发展，音频视频内容通过网络传播，成为数字媒体的重要组成部分。

随着技术的发展，音频视频内容的质量和传输效率不断提高，应用场景也日益丰富。超高清视频、虚拟现实（VR）和增强现实（AR）等技术的融合，将进一步推动音频视频内容的创新和发展。

1.2.5交互表单

交互表单‌是指一种用户界面元素，它允许用户输入数据并将其提交给计算机系统进行处理。这种表单通常包含各种输入字段，如文本框、下拉菜单、复选框等，用户可以通过这些字段输入信息，并通过提交按钮将信息发送给服务器。交互表单的设计和实现对于提高用户与系统之间的交互效率至关重要，因为它直接影响到用户填写数据的体验和系统的数据收集效率。

在Web开发中，HTML表单是构建交互表单的基础。HTML表单可以通过<form>标签来定义，其中可以包含各种<input>元素，如文本框、密码框、复选框等，用于收集用户输入的数据。

总的来说，交互表单是人机交互的重要组成部分，它通过提供一种结构化的方式让用户输入数据，并通过提交动作将数据传递给计算机系统进行处理，从而实现用户与系统的有效沟通‌12。

1.2.6其他常见元素

网页的其他常见元素包括但不限于：

‌按钮与表单控件‌：用于控制用户交互方式，如搜索框、登录/注册按钮等。
‌CSS样式表‌：虽然不是直接的可见元素，但它决定了整个站点的布局风格和颜色主题。
‌HTML标签‌：HTML提供了各种不同的标签来表示不同类型的元素，如a表示超链接，img代表图像等。
‌JavaScript动态效果和控制‌：通过JavaScript可以实现一些动态的交互式的效果和控制，增加用户体验度。
‌表格‌：在网页中用来控制网页中信息的布局方式。
‌时间插件、社交分享工具、在线沟通工具‌等其他元素，这些元素不仅能点缀网页，使网页更活泼有趣。

这些元素共同作用，使得网页不仅具有丰富的视觉效果，还能提供与用户的互动，从而提升用户体验和满意度‌1。

1.3页面布局结构

1.3.1网页页面布局

网页页面布局结构有多种类型，常见的包括：

‌右框型布局结构‌：顶部通常是网站Logo和banner，下方左面是菜单，右面显示主要内容。这种布局主次分明，结构明朗，适合初学者上手，广泛应用于各种网站。
‌目字型布局结构‌：在右框型结构基础上增加了一个竖列，缩小中间内容的宽度，将菜单和导航集中在上方横列和下方横列中。这种布局充分利用版面，信息量大，适合大型网站使用。
‌曰字形对称布局结构‌：这是一种对称的布局结构，具有强烈的反差对比和视觉冲击力强的特点。但因其制作难度较大，通常只用于设计型站点。
‌pop布局结构‌：适用于广告网页，将页面布局得如同一张宣传海报，以精美的图片为设计核心，常见于个人网站和娱乐类网站。
‌综合布局结构‌：结合了上述几种布局结构的优点，是一种较为复杂的布局方式，被广泛采用。
‌国字型布局‌：规范且常见，大型网站经常使用这种类型，特点是内容主次由上到下，上面是标题条幅、导航栏，下面是网站相关内容信息。
‌拐角型布局‌：把相关内容的链接放到网页的一面，另一面就是相关的文字信息。
‌标题正文型布局‌：利用文字来布局，除了标题，下面就是文章。
‌封面型布局‌：网站的首页是一些精美有创意的图案结合一些小的动画组成，没有导航栏指示，一般设计性网站用的比较多。
‌“T”结构布局‌：页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容。这是一种广泛使用的布局方式。
‌“口”型布局‌：页面上下各有一个广告条，左边是主菜单，右边是友情链接等，中间是主要内容。
‌卡片式网页布局‌：以卡片为交互信息的载体，提供相关的网页内容。适合放置大量内容同时保持每个内容清晰。
‌分屏网页布局‌：将页面分为两部分或更多部分，平等或不平等，用于区分文本信息和图像元素，使信息更有组织。

这些布局结构各有特点，适用于不同类型的网站和内容展示需求‌12。

1.3.2网页色彩搭配

概括：当浏览者打开一个网站浏览网页时，网页给其留下的第一印象或许不是丰富的内容或合理的版式布局，而是网页中的色彩，一个网站的优秀与否，在一定程度了取决于设计师的色彩运用和搭配是否成功，所以在设计网页时必须重视网页配色。

在色彩中使用比较普遍的是黑、白、灰，任意颜色与其搭配都很协调，如果在配色时遇到色彩不协调的问题，可以尝试加入黑色或灰色，以协调色彩的搭配；如果是一些明度高的网站，加入少许黑色，可以起到降低明度的作用。白色是最常用的一种色彩，在网页设计中可以通过留白艺术给人提供想象的空间。了解黑、白、灰3种颜色的搭配艺术后，在进行网页色彩搭配时还要注意以下几点。

● 色彩的鲜明鲜明的色彩会引人注目，让人产生过目不忘、印象深刻的效果。

● 色彩的独特独特的色彩有着与众不同的感觉，有着点晴之笔之效，可以给人留下强烈的印象。

● 色彩的适合适合的色彩可以起到和表达的内容相协调的效果。

色彩搭配技巧：

在网页设计过程中，网页色彩搭配是一项技术而又艺术的工作，因此设计师在设计网页时要掌握网页色彩搭配的相关技巧，通常有以下几种。

1．同一色系同一色系的配色能让人感觉出页面的统一，并能使网页界面透露出层次感，在配色时首先要选择一种色彩，然后相应地调整该颜色的透明度或者是饱和度，从而产生新的色彩，应用到网页中的不同位置，完成同一色系的配色。

2．对比色系对比色系的配色能让人感觉出页面的丰富而不会觉得花哨，并能使网页界面透露出和谐感，在配色时首先要选择一种色彩，然后选择该色彩的对比色，并调整其饱和度，从而产生新的色彩，放置在网页中的不同位置，完成对比色系的配色。

3．相近色系相近色系的配色能让人感觉出页面的统一协调，并能使网页界面产生颜色过渡效果，在配色时首先要选择一种色彩，然后选择该颜色的相近色系，如淡蓝、淡黄、淡绿或土黄、土红等，应用到网页中的不同位置，完成相近色系的配色。

1.4Web前端技术简介

1.4.1初识WEB前端

Web前端主要负责开发和维护网站的用户界面(‌UI)，编写‌HTML、‌CSS和‌JavaScript代码，确保页面在不同浏览器和设备上的兼容性，并优化代码以提高页面加载速度。‌‌12

Web前端的核心职责

‌开发和维护用户界面‌：Web前端工程师负责创建和优化网站的前端部分，包括页面的布局、颜色、字体等视觉元素，以及页面的交互功能。
‌编写代码‌：使用HTML、CSS和JavaScript等前端技术编写代码，实现页面的结构和样式，以及页面的交互逻辑。
‌确保兼容性‌：测试页面在不同浏览器和设备上的显示效果，解决兼容性问题，确保用户体验的一致性。
‌优化性能‌：通过优化代码和资源，提高页面的加载速度，提升用户体验。

Web前端的工作内容

‌结构、样式和行为‌：前端开发涉及页面的结构（HTML）、样式（CSS）和行为（JavaScript）三个方面。
‌公共组件和基础框架设计‌：设计和实现前端公共组件和基础框架，提高开发效率和页面的一致性。
‌交互效果实现‌：根据需求实现页面的交互效果，配合后台开发工程师完成前端用户交互功能。
‌测试和维护‌：测试和维护网站，确保性能和可用性，及时修复发现的问题。

Web前端的技能要求

‌技术基础‌：掌握HTML、CSS、JavaScript等前端基础技术。
‌框架和工具‌：熟悉‌React、‌Vue、‌Angular等前端框架，以及‌Git等版本控制工具。
‌兼容性和性能优化‌：了解常见的浏览器兼容性问题及解决方案，掌握代码优化技巧。
‌团队协作‌：与设计师、后端开发人员、测试人员等紧密合作，确保项目顺利进行。

通过上述内容，我们可以看到Web前端工程师在网站开发中的重要性，他们的工作直接影响到用户体验和网站的可用性。因此，具备扎实的技能和良好的团队协作能力是成为一名优秀的Web前端工程师的关键。

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

‌HTML‌（超文本标记语言）是用于创建网页结构和内容的标记语言。它由一系列的标签组成，每个标签都有特定的含义和作用。通过使用不同的HTML标签，可以创建标题、段落、链接、列表、图片等元素来构建网页的结构。HTML标签使用尖括号(<>)包围，通常是成对出现的，有起始标签和结束标签。例如，<h1>表示一级标题的起始标签，而</h1>表示一级标题的结束标签。HTML可以指定元素的属性，如id、class、src等，用于进一步控制元素的样式和行为。
‌CSS‌（层叠样式表）用于为HTML文档添加样式和布局。通过CSS，可以改变网页中元素的外观和排列方式。CSS使用选择器来选取HTML元素，并通过属性值对其进行样式设置。例如，可以选择一个标题元素<h1>，然后通过CSS设置其颜色、字体大小、边距等样式。CSS具有层叠的特性，即当多个规则同时应用到一个元素时，可以通过设置优先级来确定最终的样式。此外，CSS还支持响应式设计，可以通过媒体查询等技术，让网页在不同设备和屏幕尺寸下有不同的样式和布局。
‌JavaScript‌是一种脚本语言，用于为网页添加交互和动态功能。它使得网页能够对用户的操作作出响应、处理数据和与服务器进行通信。通过JavaScript，可以操作网页的各种元素，如修改文本内容、处理表单数据、创建动画效果、发送网络请求等。JavaScript还拥有强大的编程功能，支持面向对象编程、异步操作和模块化开发等。它可以与HTML和CSS紧密结合，为网页提供更加交互性、复杂性的功能和效果。

这三大核心技术共同构成了现代Web前端开发的基础，它们互相配合、相互作用，使得网页不仅能够展示静态的内容，还能响应用户的操作，实现动态的效果和交互逻辑，从而构建出功能完善、用户友好的Web应用‌12。

1.4.3前端开发工具

‌代码编辑器‌：
- ‌Visual Studio Code (VS Code)‌：支持多种编程语言，提供智能提示、调试支持等功能。
- ‌Sublime Text‌：轻量级文本编辑器，支持多种编程语言和插件。
- ‌Atom‌：由GitHub开发的开源文本编辑器，支持自定义和扩展。
‌框架和库‌：
- ‌Bootstrap‌：用于快速开发响应式布局的Web应用。
- ‌Foundation‌：提供响应式设计框架，适用于各种设备。
- ‌AngularJS‌：用于构建单页应用的JavaScript框架。
- ‌React‌：由Facebook开发的用于构建用户界面的JavaScript库。
‌集成开发环境（IDE）‌：
- ‌WebStorm‌：由JetBrains开发，专为Web开发设计，提供代码补全、调试等功能。
- ‌IntelliJ IDEA‌：适用于Java、Kotlin等语言的开发，但也可用于Web开发。
‌版本控制‌：
- ‌Git‌：分布式版本控制系统，广泛用于项目管理。
- ‌GitHub‌：基于Git的代码托管平台，便于团队协作。
‌测试和调试工具‌：
- ‌Jest‌：用于JavaScript的测试框架。
- ‌Mocha‌：灵活的测试框架，支持BDD、TDD等多种测试方法。
‌其他工具‌：
- ‌Webpack‌：前端资源构建工具，支持模块打包、优化等。
- ‌Chrome DevTools‌：Chrome浏览器的开发者工具，提供调试、性能分析等功能。

对于手机Web前端开发，特别推荐使用支持移动设备模拟的工具，如Chrome DevTools提供的设备模拟功能，以及使用响应式设计测试工具如Window Resizer来确保应用在不同设备上的兼容性。此外，对于移动端特有的调试和测试工具也是必不可少的，例如使用真机调试工具进行现场调试等。

1.4.3.1 浏览器

‌‌浏览器是一种用于访问互联网的软件应用程序，允许用户通过输入URL或点击链接来获取并展示网页上的信息。‌ 浏览器的主要功能包括导航、渲染、脚本执行、插件支持、书签和历史记录管理以及安全性等。随着互联网的发展，浏览器的功能和性能不断提升，为用户提供更好的上网体验。浏览器通过使用网络协议（如HTTP、HTTPS等）与远程服务器通信，下载网页内容并将其呈现给用户。它还提供了一系列功能，如解析和渲染HTML、‌CSS和‌JavaScript代码，显示图像、视频和音频，支持用户输入和交互，以及管理浏览历史记录、书签等。‌12

1.4.3.2 网页编辑器

‌网页编辑器‌是一种专门用于创建和编辑网页的工具，它可以帮助用户更高效地创建和编辑网页内容。网页编辑器通常提供可视化的界面，使用户能够通过拖拽和点击的方式添加和修改网页元素，而无需直接编写复杂的HTML代码。这种工具不仅提高了网页制作的效率，还降低了对编程知识的需求，使得即使是没有编程基础的用户也能轻松地创建和编辑网页。

网页编辑器的主要功能包括：

‌可视化编辑‌：提供直观的图形界面，使用户能够通过拖拽和点击来添加、修改网页元素，如文本、图片、视频等。
‌代码编辑‌：虽然主要面向非程序员用户，但一些高级用户可能仍然需要直接编辑HTML、CSS等代码，因此一些网页编辑器也提供了代码编辑功能，包括语法高亮、错误检查等，以方便用户进行更精细的控制。
‌样式和布局调整‌：允许用户通过简单的操作来调整网页的样式和布局，以满足不同的视觉需求。
‌预览功能‌：提供实时预览，让用户能够即时看到修改后的效果，便于调整和优化。
‌导出和发布‌：支持将完成的网页导出为标准的HTML格式，并上传到web服务器进行发布。

常见的网页编辑器包括Adobe Dreamweaver、Visual Studio Code、Sublime Text等，这些工具各有特点，但共同的目标都是提高网页制作的效率和便利性。无论是专业的web开发者还是业余的网站爱好者，都可以根据需要选择合适的网页编辑器来完成他们的创作‌

1.4.3.3 切图软件

‌切图软件‌是一种用于处理图片的工具，它允许用户对图片进行切割操作，以满足特定的需求。这类软件通常支持多种常见的图片文件格式，如JPEG、JPG、PNG、GIF、BMP等，并且提供了一系列工具和功能，使用户能够方便地对图片进行切割、调整大小、旋转等操作。切图软件不仅适用于个人用户进行图片处理，也广泛应用于设计、摄影、广告等领域，帮助用户快速完成图片切割任务。

1.5 HTML语法基础

‌HTML语法基础主要包括HTML标签、HTML元素、以及HTML文档的基本结构。‌

‌HTML标签‌是由尖括号包围的关键词，例如<html>、<p>等。这些标签通常成对出现，第一个称为开始标签，第二个称为结束标签。例如，<p>这是一个段落。</p>中，<p>是开始标签，</p>是结束标签。有些特殊的标签可能是单个标签，称为单标签，例如<br/>（换行标签）。
‌HTML元素‌是由开始标签、内容和结束标签组成的。例如，<p>这是一个段落。</p>定义了一个段落元素，其中<p>是开始标签，</p>是结束标签，而“这是一个段落”是元素的内容。
‌HTML文档的基本结构‌通常包括<html>、<head>和<body>等标签。

1.5.1 HTML概述

‌HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。‌ 它不是一种编程语言，而是一种标记语言，这意味着它使用一系列的标签来描述网页的结构和内容，而不是通过编写程序来执行特定的操作。HTML文档包含了HTML标签及文本内容，这些HTML标签通常被称为HTML元素，它们共同构成了网页的骨架。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，用于结构化信息，例如标题、段落和列表等。此外，HTML还可以用来在一定程度上描述文档的外观和语义，通过与CSS和JavaScript的结合使用，可以进一步增强网页的功能和表现力。

HTML的设计初衷是为了将文本或图形方便地联系在一起，形成一个逻辑整体，使得用户可以通过点击图标或链接，快速访问与该图标或链接相关的内容，无论这些内容是存储在同一台电脑中还是网络的另一台电脑上。这种组织信息的方式，使得HTML成为构建和展示网页的基础技术。

HTML文档可以通过浏览器读取并显示为可视化的网页。浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们直接显示在页面上。HTML的标签通常由尖括号包围的关键词组成，例如<html>，并且大多数标签是成对出现的，如开始标签和结束标签，也有一些标签是单独存在的，例如<br/>用于换行。

维护HTML和CSS标准的组织W3C（World Wide Web Consortium）鼓励使用CSS来替代一些用于表现的HTML元素，以确保网页的标准化和兼容性。总的来说，HTML是构建和展示网页的基础，它使得网络上的信息资源能够以一种结构化和视觉化的方式呈现给用户‌12。

1.5.1.1 语言

‌‌HTML语言是超文本标记语言（HyperText Markup Language），用于创建和结构化网页内容。‌‌HTML语言通过一系列的标签来定义网页的结构和内容，这些标签可以描述网页中的各种元素，如文本、图片、链接、表格等。HTML文档是一种纯文本文件，其最终显示效果依赖于‌Web浏览器的解析和展示。HTML文档的扩展名通常为.html或.htm。HTML语言的特点包括简易性、可扩展性、平台无关性和通用性，这使得它成为构建和设计网页的标准语言。

1.5.1.2 超文本

HTML，即超文本标记语言（HyperText Markup Language）。

超文本，就是链接的意思。而标记，也就是html中经常使用的标签，即带尖括号的文本如<div></div>。

1.5.1.3 标记

‌HTML标记‌是超文本标记语言(HTML)中的基本组成部分，它包括标签、属性、字符数据类型、字符引用和实体引用等几个关键部分。HTML标记用于创建网页的标准，通过一系列的标签来描述网页的结构和内容，如文字、图形、动画、声音、表格和链接等。这些标签通常成对出现，第一个标签称为开始标签，第二个标签称为结束标签，两者之间的内容为元素的内容。有些标签没有内容，为空元素，如<br/>（换行符）。

HTML标记的设计目的是为了能把存放在不同电脑中的文本或图形方便地联系在一起，形成有机的整体，使得用户无需考虑信息是在当前电脑上还是在网络的其它电脑上。通过使用鼠标在文档中点取一个图标，Internet可以立即转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。HTML文本由HTML命令组成，这些命令可以说明网页中的各种元素，从而实现网页的丰富性和互动性。

HTML标记是网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码。网页浏览器可以读取HTML文件，并将其渲染成可视化网页，呈现给用户。HTML标记的掌握对于制作和设计网页至关重要，它使得开发者能够通过简单的文本编辑器创建和编辑网页，而无需编写复杂的程序代码‌

1.5.2 HTML基本结构

HTML基础结构包括<!DOCTYPE html>, <html>, <head>和<body>元素，是由一系列的元素和标签组成。

1.5.2.1 HTML文档标签<html>...</html>

<html>处于文档最前面，表示HTML文档的开始，从浏览器<html>开始解释，直到遇到</html>为止。每一个HTML文档均以<html>开始，以</html>结束。

.5.2.2 HTML文档头标签<head>...</head>

HTML文档头标签<head>…</head>主要用于存放关于网页元信息以及样式表、脚本等非可见内容。它并不直接显示在浏览器的页面上，但对页面的呈现起着关键作用。在头部，你可以设置标题<title></title>，让搜索引擎和浏览器标签页看到；使用<meta>标签定义文档的字符集、关键字、描述等元数据；还可以包含外部链接<link>到CSS样式表，以及<script>标签引入JavaScript文件，以控制页面的布局和功能。

1.5.2.3 文档编码

文档编码是指将文本转换成二进制形式的过程，以便计算机能够理解和存储文字。在处理不同语言和特殊字符时，文档编码至关重要，因为每个字符都有对应的数字代表。

ASCII（美国标准信息交换码）：最早的字符编码之一，只支持英文字符，每个字符占用7位。
Unicode：一种广泛使用的字符集，包含了世界上几乎所有的字符，包括字母、汉字、表情符号等，使用16位或32位来表示字符。
UTF-8：Unicode的变种，是最常用的网页和电子文档编码，它使用1到4个字节来表示不同的字符，并兼容ASCII。
GB2312、GBK、GB18030（中国国家标准编码）：针对中文字符设计的编码方案，常用于中国的文档和网站。

1.5.2.4 HTML文档主体标签<body>...</body>

HTML文档的<body>标签是文档的主要内容区域，位于<html>和</html>之间。它是页面上所有可见内容的容器，包括文本、图像、链接、表格、列表等各种元素。浏览器解析HTML时，会忽略<head>部分的内容，直接渲染<body>内的结构。

在<body>标签内，你可以编写各种HTML元素，它们会被按照HTML语法规则排列和呈现给用户。例如，<p>用于创建段落，<h1>至<h6>定义标题层次，<img>用于插入图片，<a>用于创建超链接等等。

<body>标签通常还会包含脚本标记<script>，放置JavaScript代码，以及CSS样式声明（通过<style>标签），这两者共同控制页面的交互性和外观。

1.6 创建HTML文档

1.7 网页头部标签

HTML头部标签是网页中非常重要的部分，通过优化头部标签可以提升网页排名和用户体验。

1.7.1 <title>标签

页面标题（title）是网页中最重要的元素之一，它不仅可以告诉搜索引擎页面的主要内容，还可以吸引用户点击。优化页面标题可以提升网页在搜索引擎中的排名，同时也可以提升用户对网页的认知和理解。

1.7.2 标签<meta>

元数据（metadata）是关于数据的信息。
标签提供关于 HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

1.7.2.1 keywords

keywords是用来告诉收索引擎网页使用的关键词。

1.7.2.2 description

description用来告诉我们收索引擎网站主要的内容。

1.7.3 <link>标签

HTML外部资源链接元素 (<link>) 规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标(比如PC端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。

1.7.4 <script>标签

script标签是在web中有一种非常重要的标签，它的存在才使得脚本可以引入dom文档，并且动态网页的实现也需要使用此标签

在Html文档中可以编写任意多的script标签，编写任意多的js代码。script标签可以放在<body> 或 <head>当中。

1.8 HTML5文档注释和特殊符号

在HTML5中，注释的格式是以结束。这种格式允许你对HTML代码进行注释，而不会影响页面的显示或功能。注释的内容在浏览器中不会显示，也不占用浏览器的空间。你可以使用多行进行注释，只要内容被包裹在这一对注释符号中即可。注释也可以写在一行程序的末尾，或者一行程序的中间，也就是说，只要你喜欢或者需要，随时随地都可以写注释。

1.8.1 注释

HTML中的注释以结束，快捷键为 Ctrl+ / 添加和取消注释

1.8.2特殊符号

；：小空格

&emsp；：一个字符的大空

>；：大于号

<；：小于号

©；：版权符号

®注册商标

"；引号

<sup></sup>上标

<sub></sub>下标

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="宋词, 苏轼">
    <meta name="description" content="本网站收录精选宋词">
    <title>宋词精选</title>
    <style type="text/css">
        p {
            text-align: center;
            font-size: larger;
        }
    </style>
</head>
<body background-color="#AntiqueWhite" text="#333333">
    <h2 style="text-align: center;">临江仙·送钱穆父</h2>
    <p>宋 苏轼</p>
    <!-- 使用换行符 -->
    <p><br />一别都门三改火, 天涯踏尽红尘。<br />
        依然一笑作春温。<br />
        无波真古井, 有节是秋筠。<br />
        惆怅孤帆连夜发, 送行淡月微云。<br />
        尊前不用翠眉颦。<br />
        <font color="brown" face="微软雅黑">人生如逆旅, 我亦是行人。</font></p>
    <img src="https://img2.baidu.com/it/u=3960559773,3296047960&fm=253&fmt=auto&app=138&f=JPEG?w=861&h=500" alt="宋词插图">
    <!-- 水平线 -->
    <hr size="2" color="black" width="100%">
	<p align="center">
	<a href="https://mortaltom.blog.csdn.net" target="_blank">网页制作教程 &copy; MortalTom</a>
	</p>
</body>
</html>