html页面当记事本

最新推荐文章于 2024-04-08 21:07:42 发布
最新推荐文章于 2024-04-08 21:07:42 发布
阅读量3.7k 收藏 1
点赞数 2
分类专栏： HTML 文章标签： HTML  contenteditable  记事本

将下面代码在浏览器(chrome)地址栏输入

data:text/html, <html contenteditable><head><meta charset="utf-8"><title>标题</title></head>

可以当作临时的记事本，粘贴一些文字之类，不用每次找记事本记录。
存成书签更方便。
在这里插入图片描述

转自：https://www.jianshu.com/p/31aa0e6a0f9e

树欲静而风不止丶
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用html记笔记,如何用前端的方式记笔记
weixin_42297705的博客
06-16 1388
直至今日才发觉记笔记的重要性，慌乱中开始选择笔记类的工具，其实之前也很用过不少记录笔记的工具或者方式，下面谈谈我的使用感受：Microsoft Office World:虽然已是业内标准，兼容性不用怀疑，但是其打开速度实在不敢恭维(虽然在我的安装了SSD的笔记本上表现尚可)。另外Office产品比较封闭，文本格式转换不方便。另外Word使用起来还得稍加练习相应使用技巧，有一定的学习成本(我是指写出...
data:text/html;c,html image -- data:image/png;base64
weixin_36122809的博客
06-20 1万+
1, data:image/png;base64 能够把上面 src 中的url 直接copy到浏览器地址栏中。Data URI scheme是在RFC2397中定义的。目的是将一些小的数据。直接嵌入到网页中，从而不用再从外部文件加载。比方上面那串字符，事实上是一张小图片。将这些字符复制黏贴到火狐的地址栏中并转到，就能看到它了，一张1X36的白灰png图片。在上面的Data URI中。data表...
HTML+CSS+JS 网页记事本【轮播切换】
最新发布
weixin_51831991的博客
04-08 2173
HTML+CSS+JS原生代码实现的网页简约记事本，创建的记事本内容可再编辑保存
Data URL
SeriousLose
05-24 1万+
Data URI 使用 data URI 来呈现一些较长的内容， 如一串二进制数据编码、图片等，采用 base64 编码可以让内容变得更加简短。 而对图片来说，在 gzip 压缩之后，base64 图片实际上比原图 gzip 压缩要大，体积增加大约为三分之一，所以使用的时候需要权衡。 data:[<mime type>][;charset=<charset>][;base64],<encoded data> data: 协议头，它标识这个内容为一个 data UR
html标签中 自定义属性data-text的妙用
逆风优雅的博客
04-21 3173
如下图代码： 通过动态的设置data的值，可以实现类似于tab切换的效果。 注：此处我们是在div标签中设置的data-year 这个值，当然，也可以在其他html标签中设置。 data-'自定义的名字'，data-后面的名字是可以自定义的。如：data-text、data-name、等等 效果如下： 获取标中data的值的方法： e.currentTarget.dataset.year或e.target.dataset.year 上面实现效果的代码如下： <d.
【Web前端】怎样用记事本写一个简单的网页-html
成长之路
07-05 2万+
EditPlus: 简单起见，接下来就使用记事本来编写我们的网页。 3. 更丰富一点 标签 功能 < !doctype html > 标识文件的语言标准，这里指的是html5 < title > 网页的标题，即浏览器中页面的名字 < h1 > 一级标题 < p > 一个段落的开始 下面是新的网页：🌎我们的第一个网页讲到这里就讲完啦。 🌏那博主在这里求个三连不过分吧？.........
data:text/html;charset=utf8,,iphone - Refused to connect to data:text/html;charset=utf8 in iOS Safar...
weixin_34663036的博客
06-16 5452
I am developing a web app in Angular, HTML and Bootstrap.When launching this web app in Chrome & android, it loads the elements like the modal, texts, select option.It works perfectly in chrome, b...
XML-WEB.rar_记事本HTML
09-19
其中，"记事本HTML"标签可能意味着这些示例代码是用最基本的文本编辑器——记事本——编写的，强调了即便是没有复杂的开发环境，也可以进行XML和Web开发。 "code 11.9.txt"这个文件名可能代表了一个特定的代码示例...
记事本
02-14
5. **调试和修改**：如果页面显示不正确，可以回到记事本，检查和修改HTML代码，然后再次保存和刷新浏览器查看效果。 虽然记事本提供了基本的编辑功能，但它缺乏一些高级特性，如代码高亮、自动完成和错误检查，...
PHPWind 记事本模板
08-25
"PHPWind 记事本模板" 指的可能是该系统中的一款特定设计模板，旨在为网站提供一个简洁、易于阅读的界面，类似于记事本的风格。这款模板可能侧重于清晰的布局和文字展示，适合那些希望创建内容为主、视觉效果简洁的...
记事本个人网页模板
01-22
5. **网页优化**：知道如何减小文件大小，提高页面加载速度，以及优化SEO（搜索引擎优化）。 6. **版本控制**：如使用Git等工具管理网页模板的修改和更新，保持代码整洁。 7. **Web安全**：了解基本的网络安全实践，...
个性记事本（可以让你的代码，更美观）
04-12
让你的记事本，，可以编辑 html ，java ，xml 等等。让你的记事本更具有独特性。下载之后只需 解压，双击即可，，，如果没有效果，，请尽快联系
Web开发之路：Web开发人员记事本
02-14
通往网络的发展 Web开发人员的记事本 :books: 包含指南，课程和注释，以了解程序员的网络知识
网页版记事本
11-03
简单的web实例，适合初学者，上传前稍有改动。希望对大家有所帮助。
【HTML】使用记事本和浏览器搭建简单div框架
qq_51677275的博客
02-01 2710
提示：仅设置框架使用html的div标签固定网页布局，可以用于静态网页设计，也可用于asp.net网页开发的母版页来统一网页风格。提示：以下是本篇文章正文内容在实际使用时我们可以结合表格和asp.net的母版页进行风格统一，内容为个人学习分享，有问题欢迎指正。
html在线记事本,5分钟教你制作漂亮的Html5本地记事本
weixin_39655085的博客
05-30 2145
今天给大家分享一个用H5 + localStorage开发的一个本地记事本应用，下面先看一下他精美的帅样子吧。主要实现的功能有：填写标题验证功能,标题不能为空可以选择分类:默认/生活/美食/代码添加成功后,立即显示可以搜索标题和分类笔记可以点击标题展开折叠多条数据第一条展开显示,其余折叠显示1.初始化数据var init = {title:'这是标题',date:newDate().toLoca...
【HTML】用记事本写一个页面
//try的博客
01-28 4668
用记事本写一个HTML页面新建HTML文件 新建HTML文件 在桌面新建文本文件，然后将后缀改成.html 然后右键编辑 手写一个HTML文件 &amp;lt;html &amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;我的第一个网页&amp;lt;/title &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;
【设计模式】策略模式
热门推荐
你若盛开，蜜蜂自来
08-08 2万+
博主声明： 转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主威威喵原创，请多支持与指教。 本文首发于此 博主：威威喵|博客主页：https://blog.csdn.net/smile_running 晚上的时候，抽了点时间看了一下设计模式相关书籍，毕竟有些东西还是得重温一下的，脑子不灵光，记住不啊。看着看着就看到了策略设计模式，关于这个策略模式，它书本...
HTML---用记事本写html
weixin_30421525的博客
12-18 429
<DOCTYPE HTML> <--DOCTYPE 文档类型，浏览器按照该类型解析--> <html> 　　<head> 　　　　<title>这个是html头</title> 　　</head> <body> 　 　<p>这里是html主体</p>...
用html和css写一个小米页面
05-24
好的，下面是一个简单的小米页面HTML和CSS代码： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>小米官网</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">小米手机</a></li> <li><a href="#">电视</a></li> <li><a href="#">笔记本</a></li> <li><a href="#">家电</a></li> <li><a href="#">智能硬件</a></li> </ul> </nav> </header> <section id="banner"> <h1>小米10 Pro</h1> <p>全球首款LPDDR5内存</p> <a href="#" class="button">了解更多</a> </section> <section id="products"> <h2>小米产品</h2> <div class="product"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bd9c9f9d2acfe3d3ce9d4eb9b4e0e060.jpg?thumb=1&w=400&h=400"> <h3>小米电视</h3> <p>从 32 至 75 英寸，满足各种需求</p> <a href="#">了解更多</a> </div> <div class="product"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3e9f5b09e7cbdc500c1d4bfa5ac1a0f5.jpg?thumb=1&w=400&h=400"> <h3>小米电脑</h3> <p>轻薄便携，助力高效办公和生活</p> <a href="#">了解更多</a> </div> <div class="product"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3ac9d9c9e6f8f4d71d6d2fd4a464150a.jpg?thumb=1&w=400&h=400"> <h3>小米手机</h3> <p>强大性能搭载最新技术</p> <a href="#">了解更多</a> </div> <div class="product"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1b779f3c9a2b84fb1de4709b2f9d57a8.jpg?thumb=1&w=400&h=400"> <h3>小米家电</h3> <p>智能可控，让生活更美好</p> <a href="#">了解更多</a> </div> </section> <footer> <p>© 2021 小米</p> </footer> </body> </html> ``` CSS代码： ``` /* Reset CSS */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Global Styles */ body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333; } a { text-decoration: none; color: #333; } ul { list-style: none; } /* Header Styles */ header { background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); position: fixed; top: 0; left: 0; width: 100%; z-index: 1; } nav { max-width: 1200px; margin: 0 auto; padding: 20px 0; } nav ul { display: flex; justify-content: space-between; align-items: center; } nav li { margin-right: 20px; } nav a { padding: 5px 10px; border-radius: 5px; transition: all 0.3s ease; } nav a:hover { background-color: #f5f5f5; } /* Banner Styles */ #banner { background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2cfdf03d7ae8b8c4b9eef46d3a53c54d.jpg?thumb=1&w=1920&h=408&f=webp&q=90); background-position: center; background-size: cover; height: 600px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; } #banner h1 { font-size: 60px; margin-bottom: 20px; } #banner p { font-size: 24px; margin-bottom: 30px; } .button { padding: 10px 30px; background-color: #ff6700; color: #fff; border-radius: 5px; transition: all 0.3s ease; } .button:hover { background-color: #ff5500; cursor: pointer; } /* Products Styles */ #products { max-width: 1200px; margin: 100px auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 50px; } .product img { width: 100%; height: auto; } .product h3 { font-size: 24px; margin: 20px 0; } .product p { font-size: 16px; margin-bottom: 20px; } .product a { padding: 10px 20px; background-color: #f5f5f5; color: #333; border-radius: 5px; transition: all 0.3s ease; } .product a:hover { background-color: #ddd; cursor: pointer; } /* Footer Styles */ footer { background-color: #f5f5f5; padding: 20px; text-align: center; } ``` 你可以将上述代码复制到一个HTML和CSS文件中，然后在浏览器中打开HTML文件，就可以看到一个简单的小米官网页面了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值