html自学教程,html5入门教程(八)history详解
html自学教程,html5入门教程(八)history详解详细介绍
本文目录一览: html5入门教程(八)history详解
HTML5的进步为网页历史管理带来了革命性的变化,极大地提升了用户体验。现在,用户可以在不离开当前页面的情况下,通过“前进”和“后退”按钮自由地在历史页面间切换。这一功能尤其对于那些以非新开页面方式呈现的新内容来说,显得尤为实用。
通过引入`history` API,我们得以在无需加载新页面的情况下,改变浏览器的URL。这得益于`history.pushState()`方法的引入,它使得我们能够细粒度地控制浏览历史。该方法接受三个参数:
1. **要存的内容**:这应当是初始化页面状态所需的各种信息,应尽可能详尽。
2. **标题**(通常可以写一个空字符串):虽然目前大多数浏览器尚未实现此功能,但预留了此参数的位置,未来可能会使用到。
3. **地址**(可选参数):这是新的相对URL,执行此方法后,它将被加入到历史状态栈,且浏览器地址栏也会相应更新。
值得一提的是,即使历史状态发生改变,`location.href`的返回值仍会与地址栏中的地址保持一致,而并不会向服务器发送请求。当用户点击“后退”或“前进”按钮时,会触发`popstate`事件,该事件的事件对象包含一个`state`属性,此属性正是当初以第一个参数传递给`pushState()`的状态对象。
然而,有时候开发者可能会遇到一个问题:第一次操作`history` API时,其效果可能不会立即显现,需要第二次操作才有效。这无疑给用户带来了不便。相比之下,使用URL的hash(即在URL后添加“#”及相应内容)来管理页面状态显得更为便捷和高效。hash的变化可以立即被`onpopstate`事件检测到,且无需复杂的操作即可实现状态的改变。
总结来说,HTML5对历史管理的增强为用户带来了更加流畅的体验,而合理利用hash则能进一步简化开发流程并提升用户体验。这两大特性共同为现代网页开发提供了强大的工具。
网页制作教程的本书目录
### 第1章 HTML基础
#### 1.1 什么是HTML
##### 1.1.1 网页的基本概念
HTML是用于创建网页的标准标记语言。通过HTML,我们可以构建网页的基本框架,定义内容,以及为内容设置各种样式和属性。
##### 1.1.2 HTML的工作原理
HTML的工作原理包括文档编辑和网页解析两部分。通过编写HTML代码,我们可以定义网页的结构和内容,然后浏览器通过解析这些代码来显示网页。
##### 1.1.3 创建和测试网页
在创建网页时,我们需要编写HTML代码来定义网页的各个部分,如标题、段落、图片等。然后通过浏览器来测试我们的网页是否按预期显示。
##### 1.1.4 网页制作工具
除了手动编写HTML代码外,还可以使用各种网页制作工具来帮助我们更高效地创建和管理网页。
#### 1.2 创建网页
详细介绍如何使用HTML标记符来创建网页,包括基本标记符、设置页面属性、添加注释以及显示特殊字符等。
### 练习题
完成基础HTML知识点的理解和应用练习。
### 第2章 文本格式
#### 2.1 文本分段
介绍如何使用HTML标记符来对文本进行分段,包括段落标记P和换行标记BR的使用方法。
#### 2.2 控制文本的显示效果
详细介绍如何使用字体控制标记符FONT、物理字符样式和逻辑字符样式等来控制文本的显示效果。
#### 练习题
掌握文本格式化的基本方法和技巧。
### 第3章 使用图像
#### 3.1 网页图像基础
介绍图像的基本概念,包括位图与矢量图、网页图像格式等。
#### 3.2 图像处理基本操作
介绍使用Fireworks等图像处理软件进行图像处理的基本操作,如修改图像大小、导出适当格式的图像等。
#### 3.3 图像标记符IMG
详细介绍如何使用IMG标记符来插入图像,并设置图像属性。
掌握使用图像标记符插入和设置图像属性的方法。
### 第4章 表格与框架
#### 4.1 创建表格
介绍如何使用HTML来创建表格,包括表格的基本构成和各种合并单元格的方法。
#### 4.2 表格的属性设置
详细介绍如何设置表格的边框、分隔线、单元格空白、对齐方式等属性。
#### 4.3 使用表格设计网页布局
介绍如何使用表格来设计网页的布局,包括控制表格和单元格大小、设置背景等。
掌握使用表格进行网页布局的方法和技巧。