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

少年维持着烦恼.

已于 2024-09-12 08:26:39 修改

阅读量1.9k

点赞数 43

文章标签： html5 css intellij-idea java 青少年编程

于 2024-09-09 11:10:35 首次发布

本文链接：https://blog.csdn.net/2301_81876587/article/details/142052559

版权

1.1 认识网页和网站

1.1.1 网页和网站

常用术语：

域名 (Domain Name)：用于识别互联网上网站的地址，如 example.com。
URL (Uniform Resource Locator)：统一资源定位符，是互联网上资源的地址，包括协议、域名和路径等信息，如 https://www.example.com/page.html。
HTTP (Hypertext Transfer Protocol)：超文本传输协议，是用于从服务器传输超文本到本地浏览器的传输协议。
HTTPS (Hypertext Transfer Protocol Secure)：安全的超文本传输协议，是HTTP的安全版本，通过SSL/TLS提供加密传输。
IP 地址 (Internet Protocol Address)：互联网协议地址，是设备在互联网上的数字标识。
DNS (Domain Name System)：域名系统，用于将域名转换为IP地址。
Web 服务器 (Web Server)：托管网站内容（如网页、图片、视频等）的服务器。
HTML (Hypertext Markup Language)：超文本标记语言，用于创建网页的标准标记语言。
CSS (Cascading Style Sheets)：层叠样式表，用于设置网页的视觉和版式。
JavaScript：一种脚本语言，用于网页的交互性和动态效果。
Web 浏览器 (Web Browser)：用于检索、呈现和浏览通过互联网传输的信息资源的应用程序。
搜索引擎 (Search Engine)：用于帮助用户在互联网上查找信息的系统。
SEO (Search Engine Optimization)：搜索引擎优化，通过优化网站内容和结构提高在搜索引擎中的排名。
CMS (Content Management System)：内容管理系统，用于创建和管理数字内容的平台。
Web 框架 (Web Framework)：用于开发Web应用程序的一套工具和库。
API (Application Programming Interface)：应用程序编程接口，允许不同软件间进行交互。
数据库 (Database)：存储和管理数据的系统，常用于网站的数据存储。
FTP (File Transfer Protocol)：文件传输协议，用于在网络上进行文件传输。
SSL/TLS (Secure Sockets Layer/Transport Layer Security)：用于在互联网通信中提供加密的安全协议。
Cookies：网站存储在用户浏览器上的小块数据，用于识别用户和存储用户偏好。

1.1.2静态网页和动态网页

静态网页 (Static Web Pages)

定义：静态网页是指内容固定不变的网页，通常由HTML、CSS和静态图像组成，不涉及服务器端的脚本处理。
内容：内容在创建时就已经确定，不会根据用户的行为或请求而改变。
存储：通常直接存储在服务器上，用户请求时直接发送相同的文件。
性能：加载速度快，因为不需要服务器处理，适合内容不经常更新的网站。
安全性：通常比动态网页更安全，因为不涉及服务器端脚本执行，减少了被攻击的风险。
开发：相对简单，不需要服务器端编程语言，如PHP、ASP.NET等。
SEO：对于搜索引擎优化来说，静态网页通常更易于被搜索引擎索引。

动态网页 (Dynamic Web Pages)

定义：动态网页是指内容可以根据不同用户、时间和请求而变化的网页，通常涉及到服务器端脚本和数据库。
内容：内容不是固定的，而是根据用户输入、数据库查询结果或程序逻辑动态生成。
存储：通常不直接存储为静态文件，而是在用户请求时由服务器端脚本动态生成。
性能：加载速度可能较慢，因为需要服务器处理和数据库查询。
安全性：由于涉及到服务器端脚本执行，可能面临更多的安全风险，如SQL注入、跨站脚本攻击等。
开发：相对复杂，需要服务器端编程语言和数据库知识。
用户体验：可以提供更加个性化和交互式的用户体验，如用户登录、表单提交、实时数据更新等。
SEO：动态网页的SEO可能更复杂，因为需要确保搜索引擎能够正确索引动态生成的内容。

区别总结

内容更新：静态网页内容固定，动态网页内容可变。
服务器交互：静态网页不涉及服务器端交互，动态网页需要服务器端脚本处理。
用户体验：动态网页通常提供更丰富的用户体验，如个性化内容和实时交互。
性能：静态网页通常加载更快，动态网页可能需要更多服务器资源。
安全性：静态网页通常更安全，动态网页需要更多的安全措施。

随着技术的发展，现代网站往往结合了静态和动态网页的特点，例如使用静态站点生成器（如Jekyll、Hugo）来生成静态网页，同时通过API和JavaScript来提供动态功能。

1.2 网页的基本构成元素

网页的基本构成元素包括以下几个主要部分，它们共同工作以提供丰富的内容和交互体验：

HTML (HyperText Markup Language)：
网页的基础结构，由一系列元素（或称为标签）组成，用于定义网页的结构和内容。
CSS (Cascading Style Sheets)：
用于设置网页的视觉样式和布局，包括字体、颜色、间距、布局等。
JavaScript：
一种脚本语言，用于添加交互性和动态功能，如响应用户操作、动画效果、表单验证等。
多媒体内容：
包括图像、视频、音频等，用于丰富网页内容和提升用户体验。
表单：
用于收集用户输入，如文本、选择框、单选按钮、复选框等。
导航菜单：
帮助用户在网站的不同页面或部分之间进行导航。
链接：
允许用户从一个页面跳转到另一个页面，可以是内部链接（指向同一网站内的其他页面）或外部链接（指向其他网站的页面）。
元数据 (Meta Tags)：
包含关于网页的元信息，如页面描述、关键词、作者、页面编码等，通常用于搜索引擎优化（SEO）。
响应式设计：
确保网页在不同设备和屏幕尺寸上都能良好显示和工作。
Web字体：
用于在网页上显示特定的字体样式，可以是系统字体或通过Web字体服务加载的自定义字体。
APIs (Application Programming Interfaces)：
允许网页与服务器或第三方服务进行交互，如获取数据、提交信息等。
后端技术：
对于动态网站，后端技术如PHP、Python、Ruby、Node.js等用于处理服务器端的逻辑。
数据库：
用于存储、管理和检索网站数据，如用户信息、文章内容等。
会话管理：
用于跟踪用户的状态和活动，如登录状态、购物车内容等。
安全措施：
包括SSL/TLS加密、数据验证和清理、防止跨站脚本攻击（XSS）和SQL注入等，以保护网站和用户数据的安全。

这些元素共同构成了现代网页的复杂生态系统，使得网页不仅仅是静态的信息展示，还能提供动态、交互式和个性化的用户体验

1.3 页面布局结构

网页页面布局结构是指网页上各个元素的组织和排列方式，它决定了用户如何与网页内容互动以及内容的呈现方式。一个良好的布局结构通常包括以下几个关键部分：

页眉（Header）：通常位于页面顶部，包含网站的标志、导航菜单、搜索栏等。
导航栏（Navigation Bar）：提供链接到网站其他部分的导航链接，可以是顶部、侧边或底部。
内容区域（Content Area）：页面的主体部分，展示主要信息，如文章、图片、视频等。
侧边栏（Sidebar）：通常位于内容区域的一侧，提供额外信息、链接、广告或搜索功能。
页脚（Footer）：位于页面底部，包含版权信息、联系方式、隐私政策、网站地图等。
响应式设计：确保布局能够适应不同设备和屏幕尺寸，提供一致的用户体验。
栅格系统（Grid System）：使用行和列来组织内容，帮助创建一致和有序的布局。
空白（Whitespace）：合理利用空白区域，提高页面的可读性和美观性。
视觉层次（Visual Hierarchy）：通过大小、颜色、对比度等视觉元素，引导用户注意页面的重要部分。
交互元素（Interactive Elements）：如按钮、表单、弹窗等，允许用户与网页进行交互。
多媒体内容：合理嵌入图像、视频和音频，增强用户体验。
适应性布局：根据用户设备和浏览器特性调整布局，以提供最佳显示效果。

一个有效的网页布局结构能够提升用户体验，帮助用户快速找到所需信息，并促进网站的目标实现，如提高转化率、增加用户参与度等

图1-1 常见网页页面布局

1.4 Web前端技术简介

1.4.1 初始Web前端

Web前端开发是创建和维护网站用户界面的过程，它涉及到以下关键技术和概念：

HTML：定义网页的结构和内容。
CSS：设置网页的视觉样式和布局。
JavaScript：添加交互性和动态功能。
响应式设计：确保网站在不同设备上都能良好显示。
前端框架和库：如React、Angular、Vue.js，提高开发效率。
版本控制：使用Git管理代码变更和协作。
构建工具：如Webpack，自动化开发任务。
任务运行器：如npm scripts，自动化常见任务。
包管理器：如npm、Yarn，管理项目依赖。
浏览器开发者工具：用于调试和测试网页。
性能优化：提高网站加载速度和性能。
可访问性：确保网站对所有用户可访问。
跨浏览器兼容性：确保网站在不同浏览器上正常工作。
前端安全：保护网站免受安全威胁。
测试：确保代码质量和功能正确性。
APIs：与后端服务通信。
Web组件：可重用的自定义HTML元素。
CSS预处理器：如Sass、Less，提供高级CSS功能。
设计系统：保持界面一致性和可维护性。

前端开发是一个动态的领域，需要不断学习新技术和工具

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

Web前端开发的三大核心技术是 HTML、CSS 和 JavaScript，它们共同构成了网页开发的基础。

HTML (HyperText Markup Language)：
- 定义网页的结构和内容。
- 包含文本、链接、图片、表格、列表等元素。
- 用于创建网页的基本骨架。
CSS (Cascading Style Sheets)：
- 控制网页的布局和视觉表现。
- 包括颜色、字体、间距、对齐、动画等样式属性。
- 通过响应式设计确保网页在不同设备上都能良好显示。
JavaScript：
- 一种脚本语言，用于添加交互性和动态功能。
- 可以响应用户操作，如点击、滚动、输入等。
- 可以与服务器进行异步通信，如通过AJAX请求获取数据。

这三种技术相互补充，HTML 提供内容的结构，CSS 负责美化和布局，而 JavaScript 则赋予网页交互能力。现代Web开发中，这些技术通常与各种框架、库和工具结合使用，以提高开发效率和用户体验。

1.4.3 Web前端开发工具

Web前端开发涉及多种工具，这些工具帮助开发者提高效率、优化代码、测试功能和部署应用。以下是一些常用的Web前端开发工具：

代码编辑器：
- Visual Studio Code：功能强大的免费编辑器，支持扩展插件。
- Sublime Text：轻量级且快速的编辑器，具有丰富的插件系统。
- Atom：由GitHub开发的可自定义文本编辑器。
- WebStorm：JetBrains开发的IDE，专为JavaScript开发设计。
浏览器开发者工具：
- Chrome DevTools：Google Chrome内置的开发者工具，用于调试HTML、CSS和JavaScript。
- Firefox Developer Tools：Mozilla Firefox的开发者工具，功能类似Chrome DevTools。
版本控制系统：
- Git：分布式版本控制系统，用于代码版本管理。
- GitHub：基于Git的代码托管平台，支持代码审查、项目管理等。
- GitLab：另一基于Git的代码托管和协作平台。
- Bitbucket：支持Git和Mercurial的代码托管服务。
包管理器：
- npm：Node.js的包管理器，用于管理JavaScript项目的依赖。
- Yarn：由Facebook开发的替代npm的包管理器，提供更快的安装速度和更好的锁定机制。
构建工具和任务运行器：
- Webpack：模块打包器，用于优化和打包JavaScript、CSS和图片资源。
- Gulp：自动化构建工具，用于执行多种开发任务。
- Grunt：另一自动化构建工具，与Gulp类似。
CSS预处理器：
- Sass：CSS的预处理器，提供变量、嵌套、混合等高级功能。
- Less：另一种CSS预处理器，具有类似的功能。
JavaScript框架和库：
- React：由Facebook开发的用于构建用户界面的JavaScript库。
- Angular：由Google支持的全面前端框架。
- Vue.js：渐进式JavaScript框架，易于上手和集成。
测试工具：
- Jest：由Facebook开发的JavaScript测试框架。
- Mocha：功能丰富的JavaScript测试框架。
- Jasmine：简单而强大的JavaScript测试框架。
性能测试工具：
- Lighthouse：Google开发的开源工具，用于改善网页质量和性能。
- WebPageTest：在线工具，用于测试网页加载速度和性能。
代码格式化和linting工具：
- Prettier：代码格式化工具，支持多种语言。
- ESLint：JavaScript的linting工具，用于识别和报告代码中的问题。
API开发和测试工具：
- Postman：用于API开发和测试的工具，支持多种协议。
设计和原型工具：
- Figma：基于浏览器的界面设计工具，支持协作。
- Adobe XD：Adobe的界面设计和原型工具。

这些工具的选择取决于项目需求、团队偏好和个人习惯。随着Web开发领域的不断发展，新的工具和平台也在不断涌现

1.5 HTML语法基础

HTML（HyperText Markup Language，超文本标记语言）是构建网页和网上应用的基础语言。它由一系列的元素（称为标签）组成，这些标签告诉浏览器如何显示内容。以下是一些基础的HTML语法和概念：

文档结构：一个HTML文档通常以<!DOCTYPE html>声明开始，这告诉浏览器这是一个HTML5文档。
HTML元素：HTML文档由元素构成，元素由标签定义。例如：

html复制
```
<p>这是一个段落。</p>
```
这里<p>是开始标签，</p>是结束标签，它们之间的内容是元素的内容。
属性：HTML元素可以有属性，属性提供了有关HTML元素的额外信息。例如：

html
```
<img src="image.jpg" alt="描述性文字">
```
src属性指定了图像的URL，alt属性提供了图像的替代文本。
头部和主体：
- <head>元素包含了文档的元数据，如<title>、<link>（用于链接外部CSS）、<script>（用于嵌入JavaScript）等。
- <body>元素包含了可见的页面内容，如文本、图片、链接等。
文本格式化：
- <b>：加粗文本
- <i>：斜体文本
- <u>：下划线文本
- <sub>：下标文本
- <sup>：上标文本

链接：

html

<a href="https://www.example.com">访问示例网站</a>

href属性指定了链接的目标URL。

图片：

html
```
<img src="image.jpg" alt="描述性文字">
```
src属性指定了图像的路径，alt属性提供了图像的替代文本，用于图像无法显示时提供信息。
列表：
- 无序列表使用<ul>和<li>标签。
- 有序列表使用<ol>和<li>标签。
表格：
- <table>：定义表格
- <tr>：定义表格行
- <td>：定义表格单元格
- <th>：定义表头单元格
表单：
- <form>：定义表单，用于收集用户输入
- <input>：定义输入字段
- <button>：定义按钮
语义化标签：HTML5引入了一些新的语义化标签，如<header>、<footer>、<section>、<article>等，它们帮助定义页面的结构和内容。
注释：HTML中的注释不会显示在浏览器中，格式如下：

html
```

```

这些是HTML的一些基础概念，掌握它们是学习网页设计的第一步。随着学习的深入，你还会接触到更复杂的HTML特性和结构

1.5.1 HTML语法概述

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它由一系列元素组成，这些元素可以定义网页的结构和内容。以下是HTML语法的简要概述：

文档类型声明（DOCTYPE）： HTML文档以<!DOCTYPE html>声明开始，这告诉浏览器这是一个HTML5文档。

html
```
<!DOCTYPE html>
```
HTML元素： HTML文档由元素组成，元素由开始标签、内容和结束标签组成。例如：

html
```
<p>这是一个段落。</p>
```
属性： HTML元素可以包含属性，属性提供了关于元素的额外信息。属性通常在开始标签中指定。

html
```
<a href="https://www.example.com">访问示例网站</a>
```
在这个例子中，href是<a>元素的属性，它指定了链接的目标URL。

头部（Head）： <head>元素包含了文档的元数据，如标题、样式表链接、脚本等。

html

<head>
  <title>页面标题</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>

主体（Body）： <body>元素包含了网页的可见内容，如文本、图片、链接、列表、表格等。

html
```
<body>
  <h1>欢迎来到我的网站</h1>
  <p>这是一个段落。</p>
</body>
```
文本格式化： HTML提供了多种标签来格式化文本，如加粗（<b>）、斜体（<i>）、下划线（<u>）等。

html
```
<b>加粗文本</b>
<i>斜体文本</i>
<u>下划线文本</u>
```
链接（Links）：使用<a>标签创建链接，href属性指定链接的目标地址。

html
```
<a href="https://www.example.com">访问示例网站</a>
```
图片（Images）：使用<img>标签插入图片，src属性指定图片的路径，alt属性提供图片的替代文本。

html
```
<img src="image.jpg" alt="描述性文字">
```
列表（Lists）：
- 无序列表使用<ul>和<li>标签。
- 有序列表使用<ol>和<li>标签。
html
```
<ul>
  <li>项目1</li>
  <li>项目2</li>
</ul>
<ol>
  <li>项目1</li>
  <li>项目2</li>
</ol>
```

表格（Tables）：使用<table>、<tr>、<td>和<th>标签创建表格。

html

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

表单（Forms）：使用<form>标签创建表单，<input>和<button>标签用于收集用户输入。

html

<form action="/submit-form" method="post">
  <input type="text" name="username">
  <button type="submit">提交</button>
</form>

注释（Comments）： HTML中的注释不会显示在浏览器中，格式如下：

html
```

```
语义化标签（Semantic Tags）： HTML5引入了一些新的语义化标签，如<header>、<footer>、<section>、<article>等，它们帮助定义页面的结构和内容。

html
```
<header>
  <h1>网站标题</h1>
</header>
<footer>
  <p>版权信息</p>
</footer>
```

这些是HTML的基本组成部分和语法规则，它们构成了网页的基础结构。随着你对HTML的进一步学习，你将能够创建更复杂和功能丰富的网页

1.5.2 HTML基本结构

HTML文档的基本结构包括几个关键部分，这些部分共同构成了一个完整的HTML页面。下面是一个典型的HTML5文档的基本结构：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
    <!-- 这里可以包含CSS样式表链接、JavaScript脚本链接等 -->
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>
<body>
    <!-- 页面的可见内容 -->
    <header>
        <!-- 页眉内容 -->
    </header>
    <nav>
        <!-- 导航链接 -->
    </nav>
    <main>
        <!-- 主要内容 -->
        <section>
            <!-- 内容区块 -->
        </section>
        <article>
            <!-- 文章内容 -->
        </article>
        <aside>
            <!-- 侧边栏内容 -->
        </aside>
    </main>
    <footer>
        <!-- 页脚内容 -->
    </footer>
</body>
</html>

<!DOCTYPE html>：文档类型声明，告诉浏览器这是一个HTML5文档。
<html>：根元素，所有其他HTML元素都包含在其中。lang属性定义了页面内容的主要语言。
<head>：包含了文档的元数据，如：
- <meta charset="UTF-8">：指定字符编码为UTF-8。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：为移动设备优化页面显示。
- <title>：定义了浏览器标签的标题。
- <link>：链接外部CSS样式表。
- <script>：链接外部JavaScript文件。
<body>：包含了网页的可见内容，如文本、图片、链接等。
- <header>：通常包含导航链接、logo、搜索框等。
- <nav>：定义导航链接的部分。
- <main>：定义文档的主要内容区域。
  - <section>：定义文档中的一个区段或部分。
  - <article>：定义独立的内容区块，如博客文章、新闻故事等。
  - <aside>：定义与页面主要内容稍微相关的部分，如侧边栏。
- <footer>：通常包含版权信息、作者信息、联系方式等。

这个结构提供了一个清晰、语义化的框架，有助于开发者组织和维护网页内容，同时也有助于搜索引擎优化（SEO）和无障碍访问（Accessibility）。

1.6 创建HTML文档

步骤1: 准备文本编辑器

首先，你需要一个文本编辑器来编写HTML代码。有许多文本编辑器可供选择，包括但不限于：

Notepad（Windows自带）
TextEdit（macOS自带）
Visual Studio Code
Sublime Text
Atom

这些编辑器中，Visual Studio Code和Sublime Text等现代编辑器提供了语法高亮、代码自动完成等高级功能，非常适合编写代码。

步骤2: 编写HTML代码

打开你的文本编辑器，然后按照以下结构输入HTML代码：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
    <!-- 在这里可以添加CSS样式或JavaScript -->
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于我们</a></li>
            <li><a href="#services">服务</a></li>
            <li><a href="#contact">联系方式</a></li>
        </ul>
    </nav>
    <main>
        <section id="home">
            <h2>首页</h2>
            <p>这里是首页的内容。</p>
        </section>
        <section id="about">
            <h2>关于我们</h2>
            <p>这里是关于我们的内容。</p>
        </section>
        <section id="services">
            <h2>我们的服务</h2>
            <p>这里是服务内容。</p>
        </section>
        <section id="contact">
            <h2>联系方式</h2>
            <p>这里是联系方式的内容。</p>
        </section>
    </main>
    <footer>
        <p>版权所有 &copy; 2024</p>
    </footer>
</body>
</html>

步骤3: 保存HTML文件

在文本编辑器中，找到“文件”菜单，选择“保存”或“另存为”。
在保存对话框中，选择你希望保存文件的位置。
在“文件名”字段中，输入文件名，确保文件名以 .html 或 .htm 结尾，例如 my_first_webpage.html。
确保“编码”选项设置为“UTF-8”，这可以确保文件正确处理特殊字符。
点击“保存”。

步骤4: 打开HTML文档

在文件浏览器中找到你保存的HTML文件。
双击文件，它应该会在你的默认网页浏览器中打开。

详细解释HTML结构

<!DOCTYPE html>：这行声明了文档类型，告诉浏览器这是一个HTML5文档。
<html>：这是HTML文档的根元素，所有其他元素都包含在其中。lang="zh-CN"属性指定了页面内容的主要语言是简体中文。
<head>：这个部分包含了文档的元数据，如字符集定义、视口设置、页面标题和链接到外部资源（如CSS和JavaScript文件）。
<meta charset="UTF-8">：指定字符编码为UTF-8，这是现代网页的标准编码，支持多种语言和特殊字符。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：这个元标签用于控制视口的大小和比例，确保网页在移动设备上正确显示。
<title>：定义了浏览器标签的标题，也是搜索引擎结果页面（SERP）上显示的标题。
<body>：这个部分包含了网页的可见内容，如文本、图片、链接等。
<header>、<nav>、<main>、<section>、<article>、<aside>、<footer>：这些是HTML5的语义化标签，帮助定义页面的结构和内容，使页面更易于理解和维护。

通过这个基本的HTML文档结构，你可以开始创建自己的网页，并根据需要添加更多的内容和功能。

1.7 网页头部标签

在HTML中，网页的头部（head）部分包含了文档的元数据，这些数据不会直接显示在网页上，但对于网页的描述、样式、脚本和搜索引擎优化（SEO）等方面非常重要。以下是一些常用的头部标签及其用途：

<!DOCTYPE html>：
- 声明文档类型，告诉浏览器这是一个HTML5文档。
<html>：
- 根元素，所有其他HTML元素都包含在其中。可以包含lang属性来指定页面内容的主要语言。
<head>：
- 包含了文档的元数据，如字符集、视口设置、页面标题、样式表链接、脚本链接等。
<meta charset="UTF-8">：
- 指定字符编码为UTF-8，这是现代网页的标准编码，支持多种语言和特殊字符。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：
- 控制视口的大小和比例，确保网页在移动设备上正确显示。
<title>：
- 定义了浏览器标签的标题，也是搜索引擎结果页面（SERP）上显示的标题。

<link>：

用于链接外部资源，通常是CSS样式表。也可以用于图标链接。

html

<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">

<script>：
- 用于嵌入或引用JavaScript代码。
html
```
<script src="script.js"></script>
```
<style>：
- 用于在HTML文档内部定义CSS样式。
html
```
<style>
body { background-color: #f0f0f0; }
</style>
```
<meta name="description" content="页面描述">：
- 提供页面内容的简短描述，通常用于搜索引擎结果页面的摘要。
<meta name="keywords" content="关键词1, 关键词2, 关键词3">：
- 定义页面的关键词，虽然现在搜索引擎可能不再重视这个标签，但它仍然可以用于描述页面内容。
<meta http-equiv="X-UA-Compatible" content="IE=edge">：
- 用于指定文档应该在IE浏览器中以最新的IE版本模式渲染。
<meta name="author" content="作者名">：
- 指定页面的作者。
<meta name="robots" content="index, follow">：
- 指示搜索引擎是否应该索引页面（index）以及是否应该跟踪页面上的链接（follow）。
<meta property="og:title" content="页面标题"> 和 <meta property="og:description" content="页面描述">：
- 用于社交媒体分享时的开放图谱（Open Graph）数据，定义分享到社交媒体时的标题和描述。

这些头部标签对于网页的功能性和可访问性至关重要，同时也有助于提高网页在搜索引擎中的排名

1.8 HTML5文档注释和特殊符号

1.8.1 注释

HTML5文档注释

注释语法： HTML中的注释不会显示在浏览器中，它们用于提供代码的说明或临时移除代码段。注释的语法如下：

html
```

```

多行注释：你可以在注释中包含多行文本：

html

<!-- 这是一个多行注释
    它可以包含多行文本
    并且不会在浏览器中显示 -->

注释中的注意事项：
- 不要在注释中使用--，因为这可能会导致注释被提前关闭。
- 避免在注释中使用</，因为这可能会导致混淆或错误

1.8.2 特殊符号

HTML中有一些特殊符号需要使用字符实体（character entities）来表示，因为它们在HTML中有特殊的意义。以下是一些常见的特殊符号及其对应的字符实体：

小于号（<）：
- 实体：<
- 用途：在文本中显示小于号，而不是被浏览器解释为标签的开始。
大于号（>）：
- 实体：>
- 用途：在文本中显示大于号。
和号（&）：
- 实体：&
- 用途：在文本中显示和号，而不是被浏览器解释为实体的开始。
双引号（"）：
- 实体："
- 用途：在属性值中使用，确保属性值被正确解析。
非断空格（）：
- 实体： 
- 用途：在文本中添加一个空格。
注册商标符号（®）：
- 实体：®
- 用途：表示注册商标。
商标符号（™）：
- 实体：™
- 用途：表示商标。
省略号（…）：
- 实体：…
- 用途：表示文本的省略。
货币符号（例如：欧元、英镑、日元）：
- 欧元：€
- 英镑：£
- 日元：¥

示例

html

<p>这是一个小于号 &lt; 和一个大于号 &gt;。</p>
<p>版权所有 &copy; 2024</p>
<p>这是一个非断空格 &nbsp; 和一个双引号 &quot;。</p>

使用这些特殊符号和注释可以帮助你创建更清晰、更易于维护的HTML代码。

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

要创建一个展示苏轼的《临江仙·送钱穆父》的网页，你可以使用HTML、CSS和JavaScript。下面是一个简单的示例代码，它将创建一个包含诗词内容、注释和赏析的基本网页。

以下是代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>临江仙·送钱穆父 - 苏轼</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }
        .poem {
            background-color: #fff;
            padding: 20px;
            margin-top: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .title {
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
        }
        .poem-text {
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 30px;
        }
        .poem-text p {
            text-indent: 2em;
        }
        .notes,
        .appreciation {
            margin-bottom: 20px;
            padding: 15px;
            background-color: #e9e9e9;
            border-radius: 5px;
        }
        .appreciation {
            background-color: #dff0d8;
            border-left: 5px solid #d6e9c6;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="poem">
            <div class="title">临江仙·送钱穆父</div>
            <div class="poem-text">
                <p>一别都门三改火，天涯踏尽红尘。</p>
                <p>依然一笑作春温。</p>
                <p>无波真古井，有节是秋筠。</p>
                <p>惆怅孤帆连夜发，送行淡月微云。</p>
                <p>尊前不用翠眉颦。</p>
                <p>人生如逆旅，我亦是行人。</p>
            </div>
            <div class="notes">
                <h3>注释：</h3>
                <p>都门：指汴京。改火：古代钻木取火，四季换用不同木材，称为“改火”，这里指年度的更替。</p>
                <p>红尘：飞扬的尘土，后指人世间。</p>
                <p>古井：枯井。比喻内心恬静，情感不为外界事物所动。</p>
                <p>筠（yún）：竹子的青皮，借指竹子。</p>
                <p>尊：同“樽”，古代的盛酒器具。翠眉：古代妇女的眉饰，即画绿眉，也专指女子的眉毛，此指送别的官妓。</p>
                <p>逆旅：旅舍，旅店。行人：旅行者。</p>
            </div>
            <div class="appreciation">
                <h3>赏析：</h3>
                <p>这是一首赠别词。全词一改以往送别诗词缠绵感伤、哀怨愁苦或慷慨悲凉的格调，创新意于法度之中，寄妙理于豪放之外，议论风生，直抒性情，写得既有情韵，又富理趣，充分体现了作者旷达洒脱的个性风貌。</p>
            </div>
        </div>
    </div>
</body>
</html>

这段代码创建了一个包含标题、诗词内容、注释和赏析的简单网页。你可以将这段代码保存为.html文件，并用网页浏览器打开来查看效果。如果你想添加更多的功能或样式，可以继续编辑HTML、CSS和JavaScript代码

自己写的案例

<!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: large;
    }
    .green-text {
      color: green;
      font-family: 'KaiTi', '楷体', sans-serif;
    }
  </style>
  
</head>
<body bgcolor="antiquewhite" text="#33333">
  <h2 align="center">静夜思</h2>
  <p>唐 李白</p>
  <p>床前明月光，疑是地上霜。<br />
    举头望明月，低头思故乡。<br />
    <span class="green-text">太难了，，，，不想学了，想中彩票1000万</span></p>
  
  <img src="img/静夜思.jpg"/>
  
  <!--水平线-->
  <hr size="2" color="red" width="100%"/>
  <p align="center">好好学习，天天向上&copy;彭于晏</p>
</body>
</html>

下面是运行图片

少年维持着烦恼.

关注

43
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
第一章网页制作的基础知识

HTML：定义网页的结构和内容。CSS：设置网页的视觉样式和布局。JavaScript：添加交互性和动态功能。响应式设计：确保网站在不同设备上都能良好显示。前端框架和库：如React、Angular、Vue.js，提高开发效率。版本控制：使用Git管理代码变更和协作。构建工具：如Webpack，自动化开发任务。任务运行器：如npm scripts，自动化常见任务。包管理器：如npm、Yarn，管理项目依赖。浏览器开发者工具：用于调试和测试网页。性能优化：提高网站加载速度和性能。
复制链接

扫一扫