【Web前端】怎样用记事本写一个简单的网页-html

这篇具有很好参考价值的文章主要介绍了【Web前端】怎样用记事本写一个简单的网页-html。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

出于对网站的一些突然的兴趣,我开始了解网页是如何被设计出来的
作者水平有限,如有问题,欢迎指出。



一. 对网页设计的基本了解

1. 网站

1)一个网站由若干个网页构成,这些网页是用超级链接有逻辑地联系起来的。
2)网站由网址来识别和存取。
3)网页需要上传到网络空间中,才能供浏览者访问网站中的内容。
即,一个网站需要有域名(网址)、网页网络空间三部分。

2. 网页编辑工具

1)语言

我们可以使用HTML来编写网页,HTML文件就是增加了标记普通文本文件
可以简单的使用记事本来编写一个网页,只需将文件后缀名该为html,然后用浏览器打开。

现在编写网页的语言其实由三部分构成:HTML,CSS,JavaScript
1)HTML:早期编写网站的语言
2)CSS:负责网站内容的表现形式。是在HTML原来的功能中分离出来的,这种分离可以使维护站点外观更容易,也让文档代码更简练,网页加载快
3)JavaScript:负责动态部分。 使网页更加生动活泼,增加和用户互动。

2)软件

前面已经讲到,可以简单地使用记事本来编辑网页。
这里在提出两款编辑软件:EditPlusDreamweaver。它们的能力是递增的。

EditPlus:
【Web前端】怎样用记事本写一个简单的网页-html

EditPlus相比记事本的优点是,可以带有html语言的语法高亮,而且可以在这个编辑页面中直接预览网页(点击左上角部分的小地球图标)。


二. 第一个网页

前面已经提到,html语言文件就是增加了标记普通文本
那么首先,我们就要了解标记的作用:
一些简单的标记,可以让文本在网页中以另一种形式呈现出来

1. 实操——用记事本写个朴素的网页

简单起见,接下来就使用记事本来编写我们的网页。
【Web前端】怎样用记事本写一个简单的网页-html

首先,新建一个文本文件(txt),给它起个随便的名字。

【Web前端】怎样用记事本写一个简单的网页-html

然后用记事本打开它,输入以上内容,记得保存

【Web前端】怎样用记事本写一个简单的网页-html

重命名文件,将文件后缀名改为html

【Web前端】怎样用记事本写一个简单的网页-html

接着选择打开方式为某个浏览器(系统默认的浏览器就可以),就可以显示出我们刚刚编写的网页啦!
是不是感觉朴素地有点过头了?没关系,第一次嘛。

2. 代码讲解

<html>
<body>
这是我们第一个网页的内容哈。
</body>
</html>

这里我们用到了两个基本的标签:<html><body>
其中<html>标志着我们html文件的开始,<body>则表示正文内容的开始。而</html><body>分别代表着对应部分的结束。<body></body>之间的一行文本,则是我们要展现的内容
(是不是有点明白为什么”html是增加了标记的普通文本了”?)

3. 更丰富一点

增加一些其它的标签,让我们的网页更加生动一点。

<!doctype html>
<html>
<title>第一个网页</title>
<body 
	background = "宇宙.jpeg"
	text = "#00ff33"
	leftmargin = "300">
<h1>这是我们的第一个网页!</h1>
<p>可以简单留作一个纪念。</p>
<p>但我们的征途,是星辰大海!</p>
</body>
</html>
标签 功能
< !doctype html > 标识文件的语言标准,这里指的是html5
< title > 网页的标题,即浏览器中页面的名字
< h1 > 一级标题
< p > 一个段落的开始

注意:标签的括号和字母之间是没有空格的,我这里是因为不加空格显示不出来。

<body>标记中,还可以控制一些全局的呈现效果:

标识符 控制内容
background 背景图片(需要在html文件相同目录下,加入相应的图片文件)
text 文本内容的颜色
leftmargin 两边间距大小

下面是新的网页:

【Web前端】怎样用记事本写一个简单的网页-html


总结

🌎我们的第一个网页讲到这里就讲完啦。
🌏那博主在这里求个三连不过分吧?文章来源地址https://www.toymoban.com/news/detail-423101.html

到了这里,关于【Web前端】怎样用记事本写一个简单的网页-html的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 简单的手机记事本app怎么查看提醒列表?

    很多人平时都有随手记事的习惯,在记录事情的时候使用手机上的记事本app是一个不错的选择。有的记事本功能比较完善,不但能记事还能设置提醒,当有多条提醒内容存在时,简单的手机记事本app怎么查看提醒列表呢?以iPhone手机端敬业签为例: 1、打开iPhone手机上的敬业

    2024年02月12日
    浏览(64)
  • 简单的手机记事本怎么把英文翻译成中文?

    手机记事本是人们常用的辅助工具之一,在使用手机记事本记录内容的时候,除了我们平时使用较多的中文之外,也有人会记录一些英文内容。想要将手机记事本中的英文内容翻译成中文内容应该如何操作呢?以iPhone手机端敬业签记事本软件为例: 1、打开iPhone手机上的敬业

    2024年02月16日
    浏览(60)
  • 简单的手机记事本怎么把内容标记为完成状态?

    很多人平时会在手机记事本上记录一些自己身边需要记住的事情,有的事情做完之后不想删除,又想要和未完成的内容区分开,那么这种情况下可以将它标记为已完成状态。简单的手机记事本怎么把内容标记为完成状态呢?以iPhone手机端敬业签记事本软件为例: 1、打开iPho

    2024年02月12日
    浏览(29)
  • 电脑记事本在哪里?电脑桌面显示记事本要怎么设置?

    绝大多数上班族在使用电脑办公时,都需要随手记录一些琐碎或重要的事情,例如工作注意事项、常用的文案、某项工作的具体要求、多个平台的账号和密码等。于是就有不少小伙伴想要使用电脑记事本软件来记录,那么电脑记事本在哪里呢?想要电脑桌面显示记事本怎么设

    2024年02月15日
    浏览(30)
  • WIN11右键打开方式没有记事本,记事本无法使用问题

    背景: 个人手欠把记事本卸载了,然后又安装了,结果记事本可以打开,但是应用里面没有,右击打开方式也没有!!(检索过程发现很多人人用不了是因为升级W11) 问题: 1.如题,右击打开方式里没有记事本选项! 2.右击更多打开方式,通过查找到notepad.exe打开,出现程序

    2024年02月04日
    浏览(94)
  • Android记事本

    1、项目需求分析 1.1、记事功能需求分析: 1.1.1、显示记事 用户打开记事本可以看到之前所写的所有记事内容,进入主页后,软件应该从数据库中搜索出该用户所写的全部记事,并将所有的数据进行显示。 1.1.2、添加记事 设置添加按钮,点击添加按钮之后可以编辑记事的标题

    2024年02月03日
    浏览(39)
  • Vue设计记事本

    项目描述 项目实现功能有:记录今天要完成的任务,勾选已经完成的任务,删除已经完成的全部任务。 界面展示: 代码展示 创建一个Myitem.vue文件夹 2.在components文件夹下创建 Myheader文件夹 3.在同一个文件夹下创建MyFooter.vue文件夹 4.在同个文件夹下创建MyList.vue文件 5.再创建

    2024年02月08日
    浏览(47)
  • Java小程序-记事本

    摘 要 为了使自己熟悉Java编译,了解更多的面向对象语言的编程策略。进而,深入了解Java语言的操作、及原理等。因此我开发了一个记事本,使自己可以巩固知识,加深记忆。设计一个简易记事本,能够记录使用者输入的信息,同时可以实现保存输入的信息,以方便后期查看

    2024年02月04日
    浏览(46)
  • 11 MFC 制作记事本

    选择Menu 点击新建 将内容写入\\\"_\\\"的用 符号 将菜单加入到窗口中 右键选择添加事件处理程序 点击确定 Edit设置多行显示 Edit设置按回车能够换行 Edit设置竖直方向滚动 打开文件代码 查找与替换对话框显示(非模态对话框) 对话框消息与对话框处理函数 对话框处理函数 //note

    2024年02月11日
    浏览(31)
  • java记事本源代码

    本文仿电脑自带记事本,实现的功能有新建、新窗口、打开、保存、另存为、退出、撤销、剪切、复制、粘贴、删除、查找、查找下一个、查找上一个、替换、转到、全选、时间/日期、自动换行、缩放(放大、缩小、恢复默认大小),未实现功能有页面设置、打印、字体、状

    2024年02月10日
    浏览(29)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包