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>版权所有 © 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
属性来指定页面内容的主要语言。
- 根元素,所有其他HTML元素都包含在其中。可以包含
-
<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>这是一个小于号 < 和一个大于号 >。</p>
<p>版权所有 © 2024</p>
<p>这是一个非断空格 和一个双引号 "。</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">好好学习,天天向上©彭于晏</p>
</body>
</html>
下面是运行图片