网站制作,第一课,一分钟学会做网页

网站制作,第一课,一分钟学会做网页

技术教程gslnedu2025-04-08 12:20:0511A+A-

有兴趣的朋友,看过来,用手机一分钟做出属于自己的网页。

1.下载一个文本编辑器软件,比如“超卓文本编辑器”。当然,如果你手机已经有文本编辑器,那就不用再下载了。

2.打开手机文件管理中的手机存储,新建文件夹,名字写“HTML”;这个文件夹一会用来保存你的网页。

3.打开编辑器,复制粘贴以下代码:

</p><p data-track="94">这是我的网页</p><p data-track="95" class="syl-line-pure-english">

这是我做的第一个网页,真开心!

保存文件到刚刚建的“HTML”文件夹里,文件名字取“index.html”。

4.去手机存储里,找到并打开“HTML”文件夹,点击里面的“index.html”文件,你就能看到以下效果

5.接下来,我们讲解一下上面的代码:

<我是标签>,被<>这个符号包起来的叫做标签,把网页比作一堵墙的话,那这标签就是一块块的砖。

上面的标签都是成对的,有开始就有结束,比如。当然,也存在单个体的标签,它们从一出生就被定义孤独终老。

标签代表着整个网页,所有内容都写在它里面。

标签代表着头部,用来声明一些代码。

标签代表这个页面的标题,就是浏览器显示网址的那个位置。</p><p data-track="160"><body> 标签代表着身体,网页的所有正文内容,都被它容纳。</p><p data-track="208"><strong><em>6.</em></strong>为什么该文件取名为“index.html”呢?</p><p data-track="186">其实,取什么名字都可以(强调用英文)。</p><p data-track="187">不过,后缀一定要写成“htm”或“html”,只有这样,浏览器才能识别得出这是一个网页文件。</p><p data-track="209"><strong><em>7.</em></strong>堂课总结:</p><p>① 下载安装文本编辑器</p><p data-track="196">② 新建文件夹,名字随意取(英文名)</p><p data-track="199">③ 复制粘贴代码并保存,后缀写成“html”</p><p data-track="201" class="syl-page-br" style><br></p><p style="text-align: center;" data-track="200"><strong><em><span style="color: #FF7528; --tt-darkmode-color: #A43B00;" class="data-color--tt-darkmode-a43b00"><span style="background-color: #FCF1B8; --tt-darkmode-bgcolor: #C9C193;" class="data-bgcolor--tt-darkmode-c9c193">期待下节课还能见到你们!</span></span></em></strong></p> </div> <div class="imoney logbot"> </div> <fieldset class="ainfo"> <legend align="center">点击这里复制本文地址</legend> <div class="social-share" data-disabled="diandian"></div> <input type="text" value="http://www.gslnedu.com/post/3652.html" id="aurl"> <i class="fa fa-thumb-tack"></i>以上内容由<a href="http://www.gslnedu.com/" class="mlight">朽木教程网</a>整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢! </fieldset> <link rel="stylesheet" href="http://www.gslnedu.com/zb_users/theme/CmsDown/css/share.min.css"> <script src="http://www.gslnedu.com/zb_users/theme/CmsDown/script/jquery.share.min.js"></script> <div class="tags"><a href="http://www.gslnedu.com/tags-238.html" target="_blank">html编辑器下载</a></div> <div class="nextlog"> <div class="prev"><span>上一篇:</span><a href="http://www.gslnedu.com/post/3651.html">刷单轻松赚佣金?这样的坑别再跳了</a></div> <div class="next"><span>下一篇:</span><a href="http://www.gslnedu.com/post/3653.html">Adobe Dreamweaver 2020 安装教程(附安装包下载)</a></div> </div> <div class="link-box"> <h3>相关文章</h3> <ul class="rexlist"> <li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/5601.html" title="小程序实现图片上显示文字,半透明的效果,浮动在图片上">小程序实现图片上显示文字,半透明的效果,浮动在图片上</a></li> <li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/5600.html" title="Deepseek生成图片的几个方法,示例模板附上">Deepseek生成图片的几个方法,示例模板附上</a></li> <li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/5599.html" title="开源炫酷相册系统,在网页展示你的照片PicHome">开源炫酷相册系统,在网页展示你的照片PicHome</a></li> <li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/5598.html" title="图片懒加载的现代 JavaScript 实现,仅需 10 行代码">图片懒加载的现代 JavaScript 实现,仅需 10 行代码</a></li> <li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/5597.html" title="windows照片查看器提示无法显示图片内存不足">windows照片查看器提示无法显示图片内存不足</a></li> <li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/5596.html" title="基于bootstrap拖拽创建web页面">基于bootstrap拖拽创建web页面</a></li> <li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/5595.html" title="「前端开发工具分享·建议收藏」JavaScript 随机生成唯一ID">「前端开发工具分享·建议收藏」JavaScript 随机生成唯一ID</a></li> <li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/5594.html" title="如何零基础学习VBA—HTMLDocument对象">如何零基础学习VBA—HTMLDocument对象</a></li> <li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/5593.html" title="get css中的clamp()函数,好用到起飞">get css中的clamp()函数,好用到起飞</a></li> <li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/5592.html" title="CSS中:nth-child的用法">CSS中:nth-child的用法</a></li> </ul> </div> </div> </div> </div> </div> </div> <div id="footerbar"> <div class="wrap"> <img src="http://www.gslnedu.com/zb_users/theme/CmsDown/images/qrcode.png" class="ft-qrcode" alt="qrcode"> <p class="ftp"><a href="http://www.gslnedu.com/">朽木教程网</a> ©<script>document.write(new Date().getFullYear());</script> All Rights Reserved.  <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2024111239号-8 </a><br /><span class="fta"></span></p> </div> </div> <link rel="stylesheet" href="http://www.gslnedu.com/zb_users/theme/CmsDown/css/lightgallery.min.css"> <script src="http://www.gslnedu.com/zb_users/theme/CmsDown/script/lightgallery-all.min.js"></script> <script> $(function(){ $(".logcon img:not([src*='.php'])").each(function(){ var path = $(this).attr("src"), width = $(this).width(); if(width >= 200 && !$(this).parent("a").length){ $(this).wrap('<a href="'+path+'" class="lightgallery"></a>'); } }); setTimeout(function () { $(".logcon").lightGallery({ thumbnail: false, selector: '.lightgallery' }); }, 800); }); </script> <div class="backtop"><span class="fa fa-angle-up"></span></div> </body> </html><!--66.32 ms , 11 queries , 2914kb memory , 0 error-->