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

1.1 认识网页和网站

1.1.1 网页、网站

网站和网页的区别：

网页（Web Page）：是指互联网上的一份信息展示，通常包含文本、图片、视频等元素，并通过HTML语言编写，用户可以单个访问。网页是一个静态文件，内容固定不变，比如博客文章、新闻页面等。

而网站（Website）：是由一组相关的网页以及它们之间的链接组成的一个完整的信息集合。它不仅仅包含单一的网页，还包括主页、子页面、数据库交互等功能，通常有明确的主题和结构，如电子商务网站、新闻网站或个人博客。网站可以动态更新，响应用户的操作，提供更丰富的服务功能。

网页是静态内容的体现，而网站是多个网页的集合，体现了更完整的在线存在和功能结构。

常用术语：

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

WWW:其功能是让Web客户端（常用浏览器）访问 Web 服务器中的网页。

浏览器：

将Internet中的文本文档和其他文件翻译成网页的软件，通过浏览器可以快捷地获取Internet中的内容。常用的浏览器有 Internet Explorer（IE)浏览器，Firefox浏览器和Chrorne 浏览器等。

URL:统一资源定位符，指定通信协议和地址，如“http://www.baidu.com"是一个URL，"http://"代表通信协议为超文本传输协议，”www.baidu.com"表示网站名称。

IP：网际协议。Internet 中的每台计算机都有唯一的IP地址，表示该计算机在 Internet 中的位置。IP通常分为A、B和C三类。

域名：指网站名称，在全世界是唯一的。通常把域名看成网站的网址。域名由固定的网络域名管理组织进行全球统一管理。域名需向各地的网络管理机构进行申请才能获取。域名的书写格式：机构名、主机名、类别名、地区名。

HTTP:超文本传输协议，是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。

FTP:文件传输协议，通过该协议，可把文件从一个地方传到另外一个地方，从而真正地实现资源共享。

发布：指将制作好的网页传到网络上的过程，也称为上传网站。

站点：一个站点就是一个网站所有内容所存放在文件夹。Dreamweaver的使用是以站点为基础的，必须为每一个要处理的网站建立一个本地站点。站点可分父子站点。站点管理是对一个Internet的站点进行组织、维护和管理的功能集合。

超链接：从一个页面指向一个目标的链接关系，这个目标可以是另一个网页，可以是相同网页的不同位置，也可以是一个图片、一个电子邮件地址、一个文件，甚至是一个程序。在浏览网页时单击超链接就能跳转到与之相应的页面。

客户机与服务器：浏览网页是由个人计算机向 Internet 中的计算机发出请求，Internt中的计算机在接受到请求后响应请求，将需要的内容发到个人计算机上，这种发布请求的个人计算机称为客户机或客户端，而 Internet 中的计算机称为服务器或服务端。 

1.1.2 静态网页和动态网页

静态网页：它们是由HTML、CSS和JavaScript等基础 Web 技术直接创建的固定内容页面。内容通常在服务器上预先编写好，并不会随着用户的请求而改变。每次用户访问相同的URL，返回的就是相同的内容。例如，新闻网站上的文章列表就是静态内容。

动态网页：动态网页则通过服务器端脚本语言如PHP、ASP.NET或JSP处理用户的请求，生成个性化响应。这些脚本能够实时获取数据库信息、执行计算或逻辑操作，然后将结果嵌入到HTML中发送给用户。比如在线购物网站，用户的搜索历史、商品库存状态都是动态变化的。

如何判断是否是动态网页只要看是不是JavaScript。

静态网页和动态网页的主要区别在于内容生成的方式和服务器响应的形式：

1. 内容生成：静态网页的内容是在服务器端预先创建好的HTML、CSS和JavaScript文件，当用户请求访问时，服务器直接发送这些预定义的文件。由于内容固定不变，每次请求都是一样的。

2. 数据处理：静态网页通常不含服务器端脚本，如PHP、Python或JSP等，因此无法处理用户的输入，内容不会随用户的操作实时更新。

3. 交互性：动态网页则由服务器端脚本处理请求，根据用户的输入动态生成页面内容，可以包含数据库查询、用户登录验证等功能。这意味着每个用户的请求都会得到定制化的响应。

4. 性能：静态网页加载速度快，因为它们不需要经过复杂的解析和计算过程。而动态网页需要更多时间，因为服务器要在运行时生成内容。

1.2 网页的基本构成元素

一般网站的首页包含常见的网页元素：导航栏、图片、交互表单、文本、超链接。

1.2.1 文本

文本具有体积小、网络传输速度快等特点，可使用户更更方便地浏览和下载文本信息，是网页最重要的基本元素，也是页面中最主要的信息载体。

缺点：不能像图片那样能够很快引起浏览者的注意。

1.2.2.图片和动画

图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。网页中的网站标识、背景、链接等都可以是图片。用户在网页中使用的图片格式主要包括 GIF、JPEG和 PNG等，其中使用最广泛的是GIF和JPEG两种格式。在网页中，为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。

1.2.3.超链接  

超链接技术是 www 流行起来的最主要的原因。超链接是从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置,可以是文本链接、图像链接和锚链接等。超链接可以在当前页面中进行跳转，也可以在页面外进行跳转。

1.2.4.音频视频

网页中的视频文件一般为v格式，它是一种基于FashMX的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。

1.2.5.交互表单

网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。表单一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点等。

1.2.6.其他常见元素 

1. 布局容器（Layout Containers）：如`<div>`、`<section>`、`<article>`、`<aside>`等HTML5元素，用于创建网页的布局和结构。

2. 列表（Lists）：包括无序列表（`<ul>`）、有序列表（`<ol>`）和定义列表（`<dl>`），用于组织相关项目的集合。

3. 表格（Tables）：使用`<table>`元素来展示数据，虽然现在更推荐使用CSS进行布局，但在展示表格数据时仍然很有用。

4. 按钮（Buttons）：通常使用`<button>`元素或将`<input>`元素的类型设置为"button"，用于触发表单提交或其他JavaScript操作。

5. 图标（Icons）：使用图标字体（如Font Awesome）、SVG图像或图片来表示功能或传达信息。

6. 下拉菜单（Dropdown Menus）**：用于导航或表单中选择选项，通常结合CSS和JavaScript实现。

7. 模态框（Modals）：也称为弹出窗口，用于显示信息、表单或其他内容，而不离开当前页面。

8. 轮播图（Carousel）：一种图片或内容轮播展示的组件，常用于首页或产品展示。

9. 签页（Tabs）：允许用户在不同内容面板之间切换，常用于组织相关但不同的信息。

10. 工具提示（Tooltips）：当用户将鼠标悬停在某个元素上时，显示的简短信息。

11. 弹出提示（Popovers）：类似于工具提示，但可以包含更复杂的内容，如文本、图片或表单。

12. 进度条（Progress Bars）：用于展示任务的完成进度，如文件上传或下载。

13. 分页（Pagination）：当内容较多时，分页可以帮助用户浏览不同的页面。

14. 响应式设计元素（Responsive Design Elements）**：如媒体查询、弹性布局和可伸缩图片，确保网页在不同设备上都能良好显示。

15. 社交媒体集成（Social Media Integration）：包括分享按钮、关注按钮或社交媒体内容的嵌入。

16. 地图（Maps）：如Google Maps或百度地图的集成，用于展示地理位置信息。

17. *评论系统（Comment Systems）：允许用户对网页内容进行评论，可能使用第三方服务如Disqus。

1.3 页面布局结构 

1.3.1 网页页面布局

1. 固定布局（Fixed Layout）**：
   - 页面宽度固定，不会随浏览器窗口大小变化而变化。
   - 适合内容量较少的网页。

2. 流体布局（Fluid Layout）**：
   - 页面宽度以百分比形式设置，会随浏览器窗口大小的变化而变化。
   - 适合多种设备和屏幕尺寸。

3. **响应式布局（Responsive Layout）**：
   - 使用媒体查询等技术，根据不同设备和屏幕尺寸调整页面布局和内容显示。
   - 确保在手机、平板电脑、桌面电脑等多种设备上都能良好显示。

以下是一些具体的布局结构：

1. 单列布局：
   - 所有内容都排列在一列中，简单且易于实现。
   - 适用于内容较少或强调垂直阅读的网页。

2. 两列布局：
   - 通常包含一个主内容区域和一个侧边栏。
   - 侧边栏可以放置导航菜单、广告或其他辅助信息。

3. 三列布局：
   - 包含一个主内容区域和两个侧边栏。
   - 适用于需要更多导航和额外信息的复杂网页。

4. 网格布局：
   - 使用CSS网格布局技术，将页面分割成多个列和行。
   - 灵活且强大，适合复杂的页面设计。

5. 圣杯布局（Holy Grail Layout）：
   - 一种经典的三列布局，包括一个头部、一个尾部和三列内容区域。
   - 中间列（主内容）在两边列（侧边栏）之前加载，且三列高度相同。

6. 飞翼布局（Flexbox Layout）：
   - 使用CSS Flexbox技术，创建灵活的布局。
   - 适合创建响应式和多列布局。

7. 块布局（Block Layout）：
   - 将页面内容分成多个块状区域。
   - 每个块可以独立设置样式和布局。

8. 卡片布局（Card Layout）：
   - 将内容组织成一张张卡片，每张卡片包含不同的信息。
   - 适用于展示大量独立且相关的信息，如产品列表或新闻摘要。

1.3.2 网页色彩搭配

网页的色彩搭配是设计中的一个重要方面，它不仅影响美观，还关系到用户体验和品牌形象。以下是一些关于网页色彩搭配的基本原则和技巧：

色彩搭配基本原则：

1. 色彩理论：
   - 主色：页面的主要颜色，通常占据最大面积。
   - 辅助色：用来支持主色，通常有两个或三个。
   - 强调色：用于突出重要元素，如按钮或链接。

2. 对比与和谐：
   - 确保文本与背景有足够的对比度，以便于阅读。
   - 使用色轮上相邻的颜色来创造和谐感。

3. 色彩心理学：
   - 选择能够传达正确情绪和信息的颜色。

色彩搭配技巧：

1. 单色搭配：
   - 使用单一色彩的不同色调、明度和饱和度。
   - 适用于想要营造简洁、专业氛围的网页。

2. 相似色搭配：
   - 选择色轮上相邻的颜色。
   - 产生柔和、协调的视觉效果。

3. 互补色搭配：
   - 选择色轮上相对的颜色。
   - 可以创造出强烈的对比效果，适合需要突出重点的网页。

4. 拆分互补色搭配：
   - 选择一种颜色，再选择其互补色两侧的颜色。
   - 比互补色搭配更柔和。

5. 三角对立色搭配：
   - 在色轮上形成等边三角形的三种颜色。
   - 产生丰富、活泼的视觉效果。

具体应用：

1. 背景色：
   - 通常使用柔和或中性的颜色，以免分散用户对内容的注意力。

2. 文本颜色：
   - 使用高对比度的颜色，确保文本可读性。

3. 链接和按钮：
   - 使用强调色，使其突出并吸引点击。

4. 品牌色彩：
   - 如果有品牌色彩指南，应遵循其中的色彩搭配。

5. 色彩数量：
   - 限制使用颜色的数量，通常不超过三种。

#工具和资源：

- 色轮工具：可以帮助选择和测试色彩搭配。
- 配色网站：提供现成的配色方案，如Adobe Color、Coolors等。
- 色彩趋势：关注设计领域的色彩趋势，保持网页设计现代感。

实践建议：

- 测试在不同设备上的显示效果：确保色彩在不同屏幕和环境下表现一致。
- 考虑色盲用户：避免使用那些色盲用户难以区分的颜色组合。

良好的色彩搭配能够提升网页的整体美感和用户体验，因此，在设计网页时，应该仔细考虑并测试不同的色彩方案。

1.4    Web前端技术简介

1.4.1 初识WEB前端

初识Web前端，可以从以下几个基本概念和技能开始了解：

 1. 网页的基本结构

- HTML（HyperText Markup Language）：HTML是构建网页的基础，它定义了网页的内容结构。初学者需要了解以下基础标签：
  - <!DOCTYPE html>：声明文档类型。
  - <html>：根元素，包含整个页面的内容。
  - <head>：包含文档的元数据，如标题、字符编码、样式表链接和脚本链接。
  - <body>：包含可见的页面内容，如文本、图片、视频等。
  - <h1>- <h6>：标题标签，用于定义标题。
  - <p>：段落标签。
  - <a>：锚标签，用于创建超链接。
  - <img>：图像标签，用于嵌入图片。                                                                                              

2. 网页的样式设计

- CSS（Cascading Style Sheets）：CSS用于设置网页的外观和格式。初学者应该掌握以下基础概念：
  - 选择器：用于选择HTML元素并应用样式。
  - 属性：定义元素的具体样式，如颜色、字体大小、边框等。
  - 布局：了解如何使用CSS进行页面布局，包括盒模型、浮动、定位等。

3. 网页的交互性

- JavaScript：JavaScript是一种编程语言，用于创建动态网页效果和用户交互。初学者需要了解：
  - 变量和数据类型：存储和操作数据。
  - 操作DOM（Document Object Model）：通过JavaScript操作HTML文档。
  - 事件处理：响应用户操作，如点击、按键等。
  - 基础语法和概念：了解函数、条件语句、循环等编程基础。

 4. 开发工具

- 代码编辑器：如Visual Studio Code、Sublime Text、Atom等，用于编写代码。
- 浏览器：如Google Chrome、Firefox等，用于查看和测试网页。
- 开发者工具：大多数现代浏览器内置的开发者工具，用于调试和优化网页。

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

WEB前端开发的三大核心技术是HTML、CSS和JavaScript。以下是这三种技术的简要介绍：

1. HTML（HyperText Markup Language）

HTML是网页内容的骨架，它定义了网页的结构和内容。HTML文档由一系列的标签（tags）组成，这些标签告诉浏览器如何展示文档中的内容。

- 功能：
  - 定义网页的标题、段落、列表、链接、图片等元素。
  - 支持嵌入音频、视频和其他多媒体内容。
  - 提供表单元素，允许用户输入数据。

- 版本：
  - HTML有多个版本，目前广泛使用的是HTML5，它增加了许多新的特性，如语义标签、本地存储和绘图功能。

2. CSS（Cascading Style Sheets）

CSS用于设置网页的样式和布局，它允许开发者分离内容和表现层，使得网页的样式可以统一管理和修改。

- 功能：
  - 定义字体、颜色、间距、大小等视觉样式。
  - 实现响应式设计，使网页在不同设备和屏幕尺寸上都能良好显示。
  - 提供布局技术，如Flexbox和CSS Grid。

- 工作原理：
  - CSS规则由选择器和一组属性组成，选择器用于指定要样式化的HTML元素，属性则定义了具体的样式。

3. JavaScript

JavaScript是一种客户端脚本语言，它使得网页能够实现动态效果和用户交互。

- 功能：
  - 操作DOM（Document Object Model），动态修改网页内容。
  - 处理用户事件，如点击、键盘输入等。
  - 发送异步请求（AJAX），与服务器交互而不刷新页面。

- 特点：
  - JavaScript是一种解释型语言，可以在浏览器中直接运行。
  - 支持面向对象编程，拥有丰富的库和框架，如React、Vue.js和Angular。

这三种技术通常协同工作，HTML定义了网页的结构，CSS提供了样式，而JavaScript则负责交互性和动态功能。掌握这三大核心技术是成为一名前端开发者的基础。随着技术的发展，前端领域还不断涌现出新的工具和框架，但HTML、CSS和JavaScript始终是前端开发的基石。

1.4.3 前端开发工具

前端开发工具能够提高开发效率，帮助开发者更轻松地构建和维护Web应用。

代码编辑器

1. Visual Studio Code (VS Code)
   - 由微软开发，功能丰富，插件众多，是目前最受欢迎的代码编辑器之一。

2. Sublime Text
   - 轻量级，速度快，支持多种编程语言，插件也很丰富。

3. Atom
   - 由GitHub开发，界面美观，可定制性强，也是一个流行的代码编辑器。

4. WebStorm
   - 专为JavaScript开发设计，集成了许多前端开发所需的工具和功能。

版本控制系统

1. Git
   - 最流行的版本控制系统，用于跟踪代码变更和多人协作。

2. GitHub / GitLab / Bitbucket
   - 提供基于Git的在线代码托管和协作平台。

包管理器

1. npm (Node Package Manager)
   - Node.js的包管理器，用于管理项目依赖。

2. Yarn
   - 由Facebook开发，是npm的替代品，提供更快、更可靠的依赖管理。

构建工具

1. Webpack
   - 模块打包器，将各种资源如HTML、CSS、JavaScript等打包成一个或多个bundle。

2. Gulp
   - 基于流的自动化构建工具，用于优化前端工作流程。

3. Grunt
   - JavaScript任务运行器，用于自动化重复性任务。

预处理器

1. Sass / SCSS
   - CSS预处理器，提供了变量、嵌套、混合等功能。

2. Less
   - 另一个CSS预处理器，与Sass类似，但语法略有不同。

 测试工具

1. Jest
   - 由Facebook开发的JavaScript测试框架，用于单元测试。

2. Mocha
   - 灵活的JavaScript测试框架，可以与Chai、Sinon等断言库结合使用。

3. Jasmine
   - 行为驱动的JavaScript测试框架，不需要DOM。

调试工具

1. Chrome DevTools
   - 内置于Google Chrome的网页开发工具，用于调试HTML、CSS和JavaScript。

2. Firefox Developer Tools
   - Firefox浏览器提供的开发工具，功能与Chrome DevTools类似。

 其他实用工具

1. PostCSS
   - 用于转换CSS的工具，可以通过插件进行扩展。

2. Prettier
   - 代码格式化工具，支持多种编程语言，用于统一代码风格。

3. ESLint
   - JavaScript代码检查工具，帮助识别和修复代码中的问题。

1.4.3.1 浏览器

前端开发中，浏览器是一个核心工具，用于测试、调试和查看网页。以下是一些流行的浏览器及其开发者工具，这些工具对前端开发者特别有用：

1. Google Chrome

开发者工具：Chrome DevTools
功能：
检查和修改HTML和CSS。
调试JavaScript。
查看网络活动，包括请求和响应。
性能分析。
移动设备模拟。
存储管理（Cookies、LocalStorage、SessionStorage）。

1.4.3.2 网页编辑器

前端开发中，网页编辑器是核心工具之一，它提供了编写HTML、CSS和JavaScript代码的环境。以下是一些流行的网页编辑器及其特点：

 1. Visual Studio Code (VS Code)

- 特点：
  - 免费且开源。
  - 支持多种编程语言，包括HTML、CSS和JavaScript。
  - 拥有丰富的插件生态系统。
  - 内置Git支持。
  - 强大的代码智能提示和自动完成功能。
  - 跨平台，适用于Windows、macOS和Linux。

2. Sublime Text

- 特点：
  - 轻量级且快速。
  - 支持多种编程语言。
  - 插件系统也很丰富。
  - 高度可定制。
  - 适用于Windows、macOS和Linux。

3. Atom

- 特点：
  - 由GitHub开发，免费且开源。
  - 支持跨平台。
  - 内置包管理器，可以安装额外插件。
  - 丰富的主题和样式选项，高度可定制。
  - 集成了Git Control。

4. WebStorm

- 特点：
  - 专为零配置的Web开发设计。
  - 强大的JavaScript编辑支持。
  - 提供代码自动完成、重构、调试等功能。
  - 支持多种框架和技术，如React、Angular、Vue.js等。
  - 虽然不是免费的，但提供了试用期。

 5. Brackets

- 特点：
  - 专为前端开发设计，免费且开源。
  - 实时预览功能，可以在编辑代码时即时看到效果。
  - 与浏览器紧密集成，可以直接从浏览器中提取CSS类和ID。
  - 支持预处理语言，如Sass和Less。

6. Notepad++

- 特点：
  - 轻量级且免费的文本编辑器。
  - 支持多种编程语言。
  - 提供了插件支持。
  - 适用于Windows。

1.4.3.3 切图软件

在前端开发中，切图软件用于将设计稿（通常是来自Photoshop或Sketch等设计工具的文件）转换成HTML和CSS代码，或者用于提取设计稿中的图片资源。以下是一些流行的切图软件及其特点：

1. Adobe Photoshop

- 特点：
  - 最为著名和广泛使用的图像编辑软件。
  - 提供丰富的图像编辑功能，包括图层、滤镜、选择工具等。
  - 可以导出Web格式的图片，如JPEG、PNG、SVG等。
  - 有许多插件和扩展可以增强切图功能。

 2. Sketch

- 特点：
  - 专为Mac用户设计的矢量图形编辑器。
  - 易于使用，特别适合Web和UI设计。
  - 支持插件，可以扩展其功能，如自动切图。
  - 与Zeplin、InVision等协作工具紧密集成。

 3. Adobe XD

- 特点：
  - Adobe推出的用户体验设计工具。
  - 提供原型设计和交互功能。
  - 可以导出设计资产，如图片和CSS代码。
  - 支持插件，增强设计到开发的流程。

4. Figma

- 特点：
  - 在线协作设计工具。
  - 支持多人实时协作。
  - 可以直接在设计工具中分享链接，团队成员可以直接查看和评论。
  - 提供了丰富的插件，包括自动切图插件。

5. Avocode

- 特点：
  - 设计到代码的转换工具。
  - 支持Photoshop、Sketch、Adobe XD等设计文件。
  - 可以自动生成CSS、SVG、iOS和Android资源。
  - 提供团队协作功能。

6. Pixelmator

- 特点：
  - Mac上的图像编辑软件，类似于Photoshop但更轻量级。
  - 提供了基本的图像编辑功能，适合简单的设计任务。
  - 支持图层和多种文件格式。

 7. Affinity Designer

- 特点：
  - 一次性付费，无订阅费用。
  - 提供矢量图形设计和位图编辑功能。
  - 支持导出多种Web格式。
 

1.5 HTML语法基础

 
1.5.1 HTML概述

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页和网络应用的标记语言。它定义了网页的结构和内容，通过一系列的标签（tags）来描述文档中的各种元素。以下是HTML的一些基本概述：

### 1. 基本结构

HTML文档的基本结构包括以下几个部分：

- DOCTYPE声明：定义文档类型，告诉浏览器使用哪种HTML版本。
- `<html>`元素：HTML文档的根元素，包含所有其他元素。
  - `<head>`元素：包含文档的元数据，如标题、字符编码、样式表链接和脚本链接。
  - `<body>`元素：包含可见的页面内容，如文本、图片、视频等。

#2. 元素和标签

HTML使用标签来标记文档中的元素。每个标签由一对尖括号包围，如`<tag>`和`</tag>`。标签通常成对出现，但有些标签（如`<br>`）是自闭合的。

 3. 元素类型

HTML元素可以分为以下几类：

- 结构元素：如`<h1>`、`<p>`、`<ul>`、`<ol>`等，用于构建网页的结构。
- 表单元素：如`<input>`、`<select>`、`<textarea>`等，用于收集用户输入的数据。
- 多媒体元素：如`<img>`、`<video>`、`<audio>`等，用于嵌入图片、视频和音频内容。
- 链接元素：如`<a>`，用于创建超链接。
- 布局元素：如`<div>`、`<span>`、`<section>`等，用于页面布局。

 4. 属性

HTML标签可以包含属性，用于提供有关元素的额外信息。属性通常以`name="value"`的形式出现在标签中。

 5. 注释

HTML注释以`<!--`开始，以`-->`结束。注释不会在浏览器中显示，但可以在源代码中用于提供说明或临时禁用代码。

6. 版本

HTML有多个版本，目前广泛使用的是HTML5。HTML5增加了许多新的元素和功能，如语义标签、本地存储和绘图功能。

7. 浏览器支持

不同的HTML版本在不同浏览器中的支持情况可能有所不同。开发者需要确保他们的网页在目标浏览器中都能正常工作。

8. 语义化

HTML5鼓励使用语义化标签，如`<header>`、`<nav>`、`<footer>`等，以提高页面的可读性和可维护性。

9. 标准模式与怪异模式

某些浏览器（如IE）可能以怪异模式渲染页面，这可能导致页面在不同浏览器中的表现不一致。使用标准的HTML和CSS可以避免这个问题。
 

1.5.1.1 语言

HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统一的规则和标准。用HTML,编写的超文本文档称为 HTML 文档，它能独立于各种操作系统平台。自1990年以来 HTML就一直被用作wwW的信息表示语言，使用 HTML描述的文件需要通过 Web 浏览器 HTTP 显示出效果。

1.5.1.2 超文本

超文本（HyperText）是HTML的核心概念之一，它指的是通过链接在不同文档之间跳转的能力。在HTML中，超文本通常是通过超链接（Hyperlinks）实现的，超链接允许用户从一个页面跳转到另一个页面，或者访问同一页面上的不同部分。

超文本的概念最早由蒂姆·伯纳斯-李（Tim Berners-Lee）提出，他是万维网（World Wide Web）的发明者。超文本的概念使得信息不再是线性的，而是可以自由跳转和链接的，这种特性极大地丰富了网络内容的可访问性和互动性。

在HTML中，超链接是通过 <a> （anchor）标签来定义的，它允许你将文本、图片或其他元素与另一个文档或同一文档中的位置链接起来。

1.5.1.3 标记

在HTML中，标记（markup）指的是使用HTML标签来定义和描述文档中的内容。HTML标签是构成HTML文档的基本单位，它们用于标记文档中的各个部分，如标题、段落、列表、表格、链接等。每个HTML标签都有一个特定的作用和含义，它们告诉浏览器如何显示和处理文档中的内容。

HTML标签通常由一对尖括号包围，分为开始标签和结束标签。开始标签定义元素的起始点，而结束标签定义元素的结束点。有些标签是自闭合的，不需要结束标签，例如`<br>`标签用于创建换行。

以下是一些基本的HTML标签示例：

- 标题标签：`<h1>`到`<h6>`，用于定义文档的标题。
- 段落标签：`<p>`，用于定义文本段落。
- 列表标签：`<ul>`和`<ol>`用于定义无序列表和有序列表，`<li>`用于定义列表项。
- 表格标签：`<table>`用于定义表格，`<tr>`用于定义表格行，`<td>`用于定义表格单元格。
- 链接标签：`<a>`用于定义超链接，`href`属性用于指定链接的URL。
- 图像标签：`<img>`用于定义图像，`src`属性用于指定图像的URL。
-

换行标签：`<br>`，用于创建换行。

HTML标记的目的是为了提供结构化的文档，使得浏览器和搜索引擎能够理解文档的内容和结构。HTML标记是构建网页的基础，没有标记，网页将无法在浏览器中正确显示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<mata name="keywords" content="xxx/">
		</mata name="description"content="xxx/">
		<title>第一个网页项目</title>
		<link rel="stylesheet" href="css/index.css" type="text/css"/>
		<script src="js/index.js" type="text/javascript"></script>
	</head>
	<body>
		<!-- 注释内容 -->
		<p>这是我的第一个网页项目</p >
		<!-- 
		第一行注释内容
		 第一行注释内容
		 第一行注释内容
		 -->
		<p>级软件技术4班陈豫景 >
		百度一下
	</body>
</html>

1.5.2 HTML基本结构

HTML的基本结构包括文档类型声明（DOCTYPE）、根元素 <html> 、头部元素 <head> 和主体元素 <body> 。以下是一个简单的HTML文档结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p >
    < img src="image.jpg" alt="描述性文字">
</body>
</html>
 

下面是HTML基本结构的各个部分的解释：

1. DOCTYPE声明：
   - 用于指明文档遵循的HTML版本。
   - 通常以`<!DOCTYPE html>`开始，表示文档遵循HTML5标准。

2. `<html>`元素：
   - HTML文档的根元素。
   - 包含文档的所有其他元素。

3. *<head>`元素：
   - 包含文档的元数据，如标题、字符编码、样式表链接和脚本链接等。
   - 通常包含`<title>`、`<meta>`、`<link>`、`<script>`等标签。

4. <body>`元素：
   - 包含文档的主要内容，如文本、图片、视频等。
   - 所有可见的页面内容都应该放在`<body>`元素中。

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

在HTML文档中，`<html>...</html>标签是整个文档的根元素，它们包围着文档的所有其他内容。这些标签定义了HTML文档的开始和结束。以下是`<html>`标签的一些关键属性：

属性：

- *ang：用于指定文档内容的语言，例如`<html lang="zh-CN">`表示文档使用中文。

内容：

- `<html>`标签内部包含两个主要子元素：`<head>`和`<body>`。

  - `<head>`标签包含文档的元数据，如标题、字符编码、样式表链接、脚本链接等。
  - `<body>`标签包含文档的主要内容，如文本、图片、视频等，是用户在浏览器中看到的页面内容。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p >
    < img src="image.jpg" alt="描述性文字">
</body>
</html>

在这个示例中，`<html>`标签包围着整个文档，`<head>`和`<body>`标签分别位于`<html>`标签内，构成了HTML文档的基本结构。

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

在HTML文档中，`<head>...</head>`标签用于定义文档的头部（Header）部分，这一部分通常包含了关于文档的元数据（metadata），但不直接显示在网页上。`<head>`标签内的内容对网页的可见部分（即`<body>`标签内的内容）起着重要的影响。

以下是`<head>`标签中常见的元素和它们的作用：

1. `<meta>`标签：
   - 用于提供关于HTML文档的元数据，如字符集、描述、关键词等。
   - `<meta charset="UTF-8">`：指定文档的字符编码。
   - `<meta name="description" content="描述性文字">`：提供页面的描述性信息。
   - `<meta name="keywords" content="关键词1, 关键词2, ...">`：提供页面的关键词。

2. <title>`标签：
   - 定义了网页的标题，通常显示在浏览器的标题栏或标签页上。
   - `<title>网页标题</title>`：网页的标题。

3. <link>`标签：
   - 用于链接外部资源，如CSS样式表、JavaScript文件、图标等。
   - `<link rel="stylesheet" href="styles.css">`：链接一个CSS样式表。

4. `<script>`标签：
   - 用于包含JavaScript代码，可以在文档加载完成后执行。
   - `<script src="script.js"></script>`：链接一个外部JavaScript文件。

5. `<style>`标签：
   - 用于包含内联CSS样式，可以直接应用于HTML元素。
   - `<style>body { background-color: #f0f0f0; }</style>`：设置网页的背景颜色。

6. `<base>`标签：
   - 用于定义页面中所有链接的基础URL。
   - `<base href="https://www.example.com/">`：指定所有链接的基础URL。

7. <link>`和`<meta>`标签的其他用法**：
   - `<link rel="icon" href="favicon.ico">`：定义网页的图标（favicon）。
   - `<meta name="viewport" content="width=device-width, initial-scale=1.0">`：定义移动设备的视口（viewport）大小和缩放比例。

1.5.2.3 文档编码

在HTML文档的基础结构中，`<head>`标签内部通常会包含一个`<meta>`标签，该标签用于指定文档的编码格式，即文档的字符编码。这有助于确保浏览器正确地解析和显示网页内容。

以下是`<meta>`标签中用于指定文档编码的示例：

<meta charset="UTF-8">

在这个例子中，`charset`属性指定了文档的编码格式为UTF-8。UTF-8是一种广泛使用的字符编码，它可以表示几乎所有的字符，包括中文字符、特殊符号等。

UTF-8编码的特点是：

- 兼容ASCII编码，即ASCII字符使用一个字节表示。
- 非ASCII字符使用多个字节表示，每个字符的第一个字节的前几位标识字符集的范围，后面跟着的字节根据这个范围来确定具体的字符值。

指定UTF-8编码后，浏览器会使用UTF-8来解析网页内容，确保正确地显示中文字符和其他特殊字符。这是创建国际化网页时的重要步骤，因为UTF-8能够支持多种语言和字符集。

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

在HTML文档中，`<body>...</body>`标签用于定义文档的主体（Body）部分，这一部分包含了网页上所有可见的内容，包括文本、图片、视频、表单、链接等。`<body>`标签内的内容是用户在浏览器中直接看到的网页内容。

以下是`<body>`标签中常见的元素和它们的作用：

1. 文本内容：
   - 使用`<h1>`到`<h6>`标签定义标题。
   - 使用`<p>`标签定义段落。
   - 使用`<a>`标签定义链接。

2. 图像：
   - 使用`<img>`标签嵌入图片。
   - `src`属性指定图片的URL。
   - `alt`属性提供图片的替代文本，用于图像不可见时的描述。

3. 列表：
   - 使用`<ul>`和`<ol>`标签定义无序列表和有序列表。
   - 使用`<li>`标签定义列表项。

4. 表格：
   - 使用`<table>`标签定义表格。
   - 使用`<tr>`标签定义表格行。
   - 使用`<td>`和`<th>`标签定义表格单元格和表头。

5. 表单：
   - 使用`<form>`标签定义表单。
   - 使用`<input>`、`<select>`、`<textarea>`等标签定义表单元素。

6. 多媒体：
   - 使用`<video>`和`<audio>`标签嵌入视频和音频。
   - 使用`<source>`标签指定视频和音频的源文件。

7. 布局和结构：
   - 使用`<div>`和`<span>`标签定义布局块和内联元素。
   - 使用`<section>`、`<article>`、`<aside>`等标签定义文档的不同部分。

8. 导航：
   - 使用`<nav>`标签定义导航栏。
   - 使用`<ul>`和`<li>`标签定义导航菜单。

9. 注释：
   - 使用`<!--`开始，`-->`结束的注释，用于在源代码中添加说明或临时禁用代码。

`<body>`标签是HTML文档中最重要的部分，它包含了所有用户可以看到的内容。了解和掌握`<body>`标签及其内容对于前端开发至关重要。

1.6 创建HTML文档

创建HTML文档非常简单，只需要一个文本编辑器和一个HTML文件。以下是一个简单的HTML文档示例，以及如何创建它：

 示例HTML文档：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p >
</body>
</html>

 创建步骤：

1. 打开文本编辑器：你可以使用任何文本编辑器，如Notepad++、Visual Studio Code、Sublime Text等。

2. 编写HTML代码：将上面的HTML代码复制到文本编辑器中。

3. 保存文件：选择“保存”或“另存为”，并确保将文件保存为`.html`扩展名。例如，你可以将其保存为`index.html`。

4. 打开浏览器：在浏览器中，导航到保存HTML文件的文件夹。你可以通过拖动文件到浏览器窗口或使用“文件”>“打开文件”菜单来打开HTML文件。

5. 查看网页：网页将在浏览器中显示。你可以点击链接、查看图片、输入表单等，就像在正常的网页上一样。

1.7 网页头部标签

1.7.1 <title>标签

在HTML文档的`<head>`部分，`<title>`标签用于定义网页的标题，这个标题通常会显示在浏览器的标题栏或者当网页被添加到收藏夹时。`<title>`标签内的文本是网页的唯一标题，它对于搜索引擎优化（SEO）和用户体验（UX）都很重要。

以下是`<title>`标签的基本用法：
 

<title>网页标题</title>

 

在这个例子中，`网页标题`就是网页的标题，它将显示在浏览器标题栏中。

`<title>`标签的主要作用包括：

1. 用户体验：用户可以通过标题快速了解网页的主题或内容。
2. 搜索引擎优化：标题中的文本是搜索引擎在搜索结果中显示的主要内容，因此，一个好的标题可以提高网页在搜索结果中的排名。
3. 收藏夹和书签：当用户将网页添加到收藏夹或书签时，`<title>`标签中的文本将显示在收藏夹或书签的标题栏中。
 

1.7.2 <meta>标签

在HTML文档的`<head>`部分，`<meta>`标签用于提供关于HTML文档的元数据（metadata），这些数据不会直接显示在网页上，但对网页的性能、SEO（搜索引擎优化）和用户体验有重要影响。

以下是`<meta>`标签的一些常见用法：

1. 字符集设置：

 <meta charset="UTF-8">

这告诉浏览器使用UTF-8字符编码来解析网页内容，这是推荐的字符编码格式，可以支持多种语言和字符。

2. 页面描述：

<meta name="description" content="网页的简短描述">

 

这提供了一个简短的描述，通常用于搜索引擎结果页（SERP）中的搜索结果摘要。

3. 关键词：

   <meta name="keywords" content="关键词1, 关键词2, 关键词3">

 

4. 视口设置：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

   这告诉浏览器根据设备的宽度调整页面视口的大小，并初始缩放比例为100%。这有助于实现响应式设计。

5. 移动设备优化：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

   这进一步限制了用户缩放网页的能力，通常用于移动设备上的内容。

6. 重定向和刷新：

   <meta http-equiv="refresh" content="5; url=https://www.example.com">

   这告诉浏览器在5秒后重定向到指定的URL。

7. 文档类型：

   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

   这指定了文档的MIME类型和字符编码。

8. 其他元数据：
   `<meta>`标签可以包含各种其他元数据，如作者信息、页面创建时间、编辑次数等。

1.7.2.1 keywords

在HTML文档的`<head>`部分，`<meta name="keywords">`标签用于定义与网页内容相关的关键词或短语。这些关键词对于搜索引擎优化（SEO）非常重要，因为它们可以帮助搜索引擎确定网页的主题和内容。

以下是`<meta name="keywords">`标签的基本用法：

<meta name="keywords" content="关键词1, 关键词2, 关键词3">

在这个例子中，`关键词1, 关键词2, 关键词3`是网页内容的关键词或短语。

`<meta name="keywords">`标签的主要作用包括：

1. 搜索引擎优化：帮助搜索引擎确定网页的主题和内容，从而提高网页在相关搜索结果中的排名。
2. 提高可见性：通过包含与网页内容相关的关键词，可以帮助网页在搜索引擎结果中更容易被发现。

1.7.2.2 description

在HTML文档的`<head>`部分，`<meta name="description">`标签用于定义网页的描述性信息。这个描述通常会在搜索引擎结果页（SERP）中显示，用于向用户简要介绍网页的内容。

以下是`<meta name="description">`标签的基本用法：

<meta name="description" content="网页的简短描述">

在这个例子中，`网页的简短描述`就是网页的描述，它将显示在搜索引擎结果页中的搜索结果摘要中。

`<meta name="description">`标签的主要作用包括：

1. 搜索引擎优化：帮助搜索引擎确定网页的主题和内容，从而提高网页在相关搜索结果中的排名。
2. 提高可见性：通过提供与网页内容相关的描述，可以帮助网页在搜索引擎结果中更容易被发现。
3. 用户体验：用户可以通过描述快速了解网页的主题或内容，从而决定是否访问该网页。

1.7.3 <link>标签

在HTML文档的`<head>`部分，`<link>`标签用于定义文档与外部资源之间的关系，最常见的是链接到样式表（CSS文件）。`<link>`标签可以链接到多种类型的资源，包括样式表、图标、字体和JavaScript文件。

以下是`<link>`标签的基本用法：

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

 

在这个例子中，`styles.css`是外部样式表的文件名，浏览器会根据这个链接下载并应用样式表中的CSS规则。

`<link>`标签的主要作用包括：

1. 链接样式表：将CSS规则应用于网页，以定义网页的布局、颜色、字体等。
2. 链接图标和字体：用于定义网页的图标（favicon）和字体资源。
3. 链接JavaScript文件：虽然`<link>`标签主要用于样式表，但也可以链接到JavaScript文件，虽然这种方式不如`<script>`标签那么常见。

1.7.4 <script>标签

在HTML文档的`<head>`部分，`<script>`标签用于包含JavaScript代码或链接到JavaScript文件。这使得JavaScript代码能够在网页加载时执行，从而实现动态功能和交互性。

以下是`<script>`标签的基本用法：

1. 内联JavaScript代码：

   <script>
     // 这里可以写JavaScript代码
   </script>
    

   在这个例子中，`<script>`标签内的JavaScript代码将在网页加载时立即执行。

2. 链接外部JavaScript文件：

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

   在这个例子中，`script.js`是外部JavaScript文件的文件名，浏览器会根据这个链接下载并执行JavaScript文件中的代码。

`<script>`标签的主要作用包括：

1. 动态功能：通过JavaScript，可以创建动态的网页效果，如表单验证、轮播图、导航菜单等。
2. 交互性：允许用户与网页内容进行交互，如点击事件、输入事件等。
3. 数据处理：JavaScript可以处理网页上的数据，如从服务器获取数据、处理表单数据等。

1.8  HTML5文档注释和特殊符号

1.8.1 注释

在HTML5文档中，注释用于在源代码中添加说明或暂时禁用某些代码。注释不会在浏览器中显示，也不会被解析。HTML5文档中的注释遵循以下规则：

1. **注释的开始**：使用`<!--`开始注释。
2. **注释的结束**：使用`-->`结束注释。

注释内容可以是任何文本，包括HTML代码。注释可以跨越多行，也可以包含在HTML标签内。

示例：

<!-- 这是一个注释，不会在浏览器中显示 -->

<!-- 注释可以跨越多行 -->
<p>这是一个段落。</p >
<p>这是另一个段落。</p >

<!-- 注释可以包含在HTML标签内 -->
点击这里 <!-- 链接到示例网站 -->

在HTML5文档中，注释的作用包括：

1. 提供代码说明：帮助开发者理解代码的逻辑和功能。
2. 暂时禁用代码：在开发过程中，可以暂时注释掉某些代码，以测试其他部分的功能。
3. 避免冲突：在多开发者协作的项目中，注释可以避免不同开发者之间的代码冲突。

1.8.2 特殊符号

在HTML5文档中，特殊符号指的是那些在文本中具有特殊含义或需要转义的符号。为了确保这些符号在网页中正确显示，HTML5提供了一系列的实体（Entities）来表示这些特殊字符。以下是HTML5文档中常见的一些特殊符号及其对应的实体表示：

1. 小于号（<）：
   - 实体：`&lt;`
   - 示例：这是一个 `<` 标签

2. 大于号（>）：
   - 实体：`&gt;`
   - 示例：这是一个 `>` 标签

3. 双引号（"）：
   - 实体：`&quot;`
   - 示例：这是一个 " 字符

4. 单引号（'）：
   - 实体：`&#39;` 或 `&apos;`
   - 示例：这是一个 ' 字符

5. 与号（&）：
   - 实体：`&amp;`
   - 示例：这是一个 & 字符

6. 空格（Space）：
   - 实体：`&nbsp;`
   - 示例：这是一个空格

7. 非转义空格（No-Break Space）：
   - 实体：`&nbsp;`
   - 示例：这是一个非转义空格

8. 版权符号（©）：
   - 实体：`&copy;`
   - 示例：这是一个版权符号

9. 注册商标符号（®）：
   - 实体：`&reg;`
   - 示例：这是一个注册商标符号

10. 商标符号（™）：
    - 实体：`&trade;`
    - 示例：这是一个商标符号

11. 欧元符号（€）：
    - 实体：`&euro;`
    - 示例：这是一个欧元符号

12. 英镑符号（£）：
    - 实体：`&pound;`
    - 示例：这是一个英镑符号

13. 人民币符号（¥）：
    - 实体：`&yen;`
    - 示例：这是一个人民币符号

14. 倒置问号（¿）：
    - 实体：`&iquest;`
    - 示例：这是一个倒置问号

15. 倒置感叹号（¡）：
    - 实体：`&iexcl;`
    - 示例：这是一个倒置感叹号

在HTML5文档中，使用这些实体可以帮助避免特殊字符在网页中显示为乱码，确保文本的准确性和可读性。

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