不推荐双击 .html 文件预览网页

简介: 不推荐双击 .html 文件预览网页

1、不推荐双击查看 .html 文件

html 中的 <a> 标签可以跳转到指定网页,或者当前页面的指定锚点位置,但是设置 <a> 标签的 href 属性时是有讲究的,首先来看一下 <a> 标签的使用场景。


如:<a href="/a/b/c.html">跳转</a> ,<a> 标签的 href 属性取值可以是网址,可以是文件路径,也可以是相对路径过绝对路径,如果是绝对路径的话,这里会有一个坑,当你双击打开有 href 取值为绝对路径的 html 页面时,该绝对路径会基于系统根目录去找,而不是基于你当前的项目去找,这要就会导致超链接跳转的地方和我们预期的不一致。


       解决方法:(1)绝对路径会出问题,可以写相对路径,这样双击打开 html 文件就不会有问题,但是不推荐这样做,因为如果是访问网址就会出现一些问题,推荐使用下面这种方式。


(2)不要双击打开 .html 文件,可以全局安装 yarn/npm global add http-server,然后通过 http-server . -c-1 命令起一个本地服务,注意在地址栏加上 html 的文件访问路径,即可访问(可以直接缩写成 hs 启动页面)。或者安装:yarn/npm global add parcel,然后通过 parcel src/index.html 的方式实现预览。

2、使用 parcel 起一个本地服务

这里主要说一下如何用 parcel 来预览 html 文件。引用 parcel 中文网 的一句话:" Parcel 是 Web 应用打包工具,适用于经验不同的开发者。它利用多核处理提供了极快的速度,并且不需要任何配置。"  安装步骤如下:

//Yarn:
yarn global add parcel-bundler
//npm
npm install -g parcel-bundler

Parcel 内置了一个当你改变文件时能够自动重新构建应用的开发服务器,而且为了实现快速开发,该开发服务器支持热模块替换。只需要在入口文件指出:

parcel index.html

现在在浏览器中打开 http://localhost:1234/。如果模块热重载没有生效,你可能需要配置你的编辑器。你也可以使用 -p <port number> 选项覆盖默认的端口。 如果没有自己的服务器可使用开发服务器,或者你的应用程序完全由客户端呈现。

目录
相关文章
|
26天前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
30 0
|
2月前
|
数据挖掘 Shell 测试技术
怎么用Python解析HTML轻松搞定网页数据
**Python解析HTML摘要** 本文介绍了使用Python处理HTML的常见需求,如数据提取、网络爬虫和分析,并讨论了三种解析方法。正则表达式适用于简单匹配,但对复杂HTML不理想;BeautifulSoup提供简单API,适合多数情况;lxml结合XPath,适合处理大型复杂文档。示例展示了如何用这些方法提取链接。
|
11天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
1月前
|
移动开发 HTML5
可达鸭举牌网页版本在线生成源码html5
可达鸭举牌网页版本,在线生成源码,点击分享即可制作DIY自己的举牌文字网页,需要GIF动图的自行用GIF图片录制工具录制下来。
39 1
可达鸭举牌网页版本在线生成源码html5
|
1月前
|
前端开发
HTML网页作业代码(仿写商城首页、学校官网网页等、源码可直接运行)
这篇文章提供了HTML网页作业的完整代码,包括仿写商城首页和学校官网网页的源码,以及如何运行和项目结构等详细信息。
HTML网页作业代码(仿写商城首页、学校官网网页等、源码可直接运行)
|
24天前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
33 4
|
23天前
|
数据安全/隐私保护
新年快乐鞭炮祝福html网页源码
新年快乐鞭炮祝福html网页源码,动态点燃鞭炮动画祝福新年快乐,带新年背景音乐,无加密完整可用,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面。
31 0
新年快乐鞭炮祝福html网页源码
|
25天前
写一个HTML文件
【8月更文挑战第27天】写一个HTML文件。
23 1
|
30天前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
41 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
1月前
|
移动开发 前端开发 JavaScript
惊爆!一键解锁HTML父页面神秘技能,子页面Dialog华丽登场,让你的网页交互瞬间高大上,用户体验飙升!
【8月更文挑战第4天】在Web开发中,常需从父页面弹出子页面或对话框(Dialog)进行互动。HTML5虽引入了&lt;dialog&gt;元素,但许多开发者偏好使用自定义方案以获得更好的兼容性和样式控制。本示例利用HTML、CSS及JavaScript创建一个可弹出子页面的模态框:首先,在父页面中定义一个按钮触发弹出效果;接着,设置隐藏的模态框容器,内含一个iframe用于加载子页面;然后,通过CSS设定模态框样式;最后,借助JavaScript控制模态框的显示与隐藏。此方案灵活且易于定制,适用于多种应用场景。
49 12