如何用html制作一个网页(怎么做html网页)

news2024/9/20 13:37:26

把txt文件变成html网页文件

如果您看过《HTML是什么?——零基础自学网页制作》这篇教程,请按照其中说明创建一个txt文件。具体过程如下:

step1:在您方便的磁盘中建立一个文件夹,命名为"零基础自学网页制作"。例如我在D盘中建立了"零基础自学网页制作"文件夹。

step2:在文件夹中创建"HTML框架.txt"文件。鼠标移动到空白处点击右键选择"文本文档"。

命名为"html框架",如下图所示。

如果您的电脑没有显示".txt"后缀的话,请做如下操作:点击"工具",找到"文件夹选项"

菜单如下:点击"查看选项"。

下拉滑条,找到"隐藏已知文件类型的扩展名"选项,将前面的对勾去掉。

如果您使用的是win10的话请参考《边学边做网页篇------初识HTML》,这也是我做的教程,不过以后都使用这个账号来发了。

step3:把"HTML框架"复制粘贴到"html框架.txt"文件中。HTML框架代码如下:


代码讲解请参照《HTML是什么?——零基础自学网页制作》这篇教程中的讲解。

粘贴后效果如下:使用CTRL s组合键保存文件。

step4:复制"html框架.txt"文件,更名为"第一个网页.txt"。原始的"html框架.txt"文件为以后备用。

如图所示:

step5:把"第一个网页.txt"的后缀名".txt"改为".html"。

首先将光标放在"第一个网页.txt"文件上,点击右键,选择"重命名"。如图:

选择".txt"

更改为".html",敲击回车键。这时会弹出一个对话框,如图:

大胆的点击"是"即可。

修改后文件是这样的,如图:因为我的默认浏览器是360,所以,".html"文件图标显示为360浏览器的图标,显示其他浏览器的图标也没有问题。

step6:将鼠标移动到"第一个网页.html"文件上,单击右键,选择打开方式,如图:

选择任何一个浏览器打开即可,我使用的是火狐浏览器(Firefox),打开后如图所示:空白一片。

点击键盘F12键,看一下控制台,如图:查看器中已经显示我们的代码框架了。成功!

如果网页是一道菜,那么,html框架我们可以理解为装菜的白盘子,所以我们打开框架时,浏览器显示一片白。下面我们为盘子中加些简单的"菜"。

为html页面添加标题与段落

首先我们为页面添加"标题"

在添加标题前,我们来看一下html框架代码中的内容,在标签中有和两个兄弟标签。

我们在页面中看到的所有的内容都是添加到标签中间!

标签中的内容并不会显示在页面中。

那么如何添加"标题"呢?

标题在HTML中用标签表示。在中间加入文字内容即可。如下所示:

第一个页面

右键,使用"记事本"打开"第一个网页.html"文件。如图所示:如果您的"打开方式"中没有"记事本"请点击"选择默认程序"

在"其他程序"中找到"记事本"。点击"确定"。从此,"记事本"就一直存在于"打开方式"中了。

我们把这句代码粘贴到之间。如下所示:保存后使用浏览器打开。

第一个页面

然后,使用浏览器打开,如图所示:标题出现在页面中了。

下面,我们来添加段落内容。

段落在HTML中使用

标签添加。代码如下

千里之行始于足下

请各位自行将代码添加到"第一个网页.html"文件中吧!示例代码如下:

第一个网页千里之行始于足下

结果如图所示:

通过这个练习,我们可以发现一个规律,在中,子元素代码的上下顺序代表了它在页面中显示的排版顺序。

这也简单回答了代码结构与排版的关系,html的标签语句只是标记了它所承载的信息的属性和版面位置。

基于这个特性,html被称为超文本标记语言。

下一期我们具体讨论页面中文字编辑的技巧。

喜欢的小伙伴请加关注,有任何问题请给我留言,欢迎大家给与指正!感激不尽!

HTML完整学习目录

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

HTML是什么?——零基础自学网页制作

HTML页面中head标签有啥用?——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2(路径详解)——零基础自学网页制作

使用HTML添加表格1(基本元素)——零基础自学网页制作

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的

块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作

HTML表单4(form的action、method属性)——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用标签实现文本内链接——零基础自学网页制作

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://bk.xjx100.cn/news/189747.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

怎么开通哔哩哔哩UP主版权保护计划

哔哩哔哩是现在非常流行的一款视频软件,有些新用户不知道怎么开通UP主版权保护计划,接下来小编就给大家介绍一下具体的操作步骤。具体如下:1. 首先第一步打开手机中的【哔哩哔哩】App,先点击右下角【我】,接着根据下图箭头所指,点击【创作首页】图标。2. 第二步在跳转的页…

如何将Steam账号设置家庭共享

Steam是现在十分流行的一款游戏平台,有些新用户不知道如何将Steam账号设置家庭共享,接下来小编就给大家介绍一下具体的操作步骤。具体如下:1. 首先第一步打开电脑中的Steam软件,先点击左上角【Steam】选项,接着在展开的下拉列表中根据下图箭头所指,点击【设置】。2. 第二…

Pr怎么在视频中显示安全边距

Pr是现在十分常用的一款视频编辑软件,有些新用户不知道该软件怎么在视频中显示安全边距,接下来小编就给大家介绍一下具体的操作步骤。具体如下:1. 首先第一步先打开电脑中的Pr软件,接着导入需要编辑的视频,然后根据下图箭头所指,双击视频预览窗口。2. 第二步根据下图箭头…

WPS的绘图工具在哪里

wps的绘图工具的位置为:点击“插入”选项卡,然后在“插图”选项组中选择“形状”按钮当你在使用wps软件插入一个形状时,在选项卡上就会出现绘图工具和效果设置两个选项按钮,里面有很多画图使用的画图工具供你选择:

Excel怎么快速选中不连续单元格

Excel是现在十分常用的一款办公软件,有些新用户不知道怎么快速选中不连续单元格,接下来小编就给大家介绍一下具体的操作步骤。具体如下:1. 首先第一步先打开电脑中的Excel软件,接着根据下图所示,点击【空白工作簿】图标。2. 第二步先按照需求输入数据,接着根据下图所示,…

王者荣耀视野提示程度有什么用(王者荣耀视野范围提示什么意思)

王者荣耀视野范围提示是新版本的一个功能,这个功能出现之后,大家对视野范围提示的开启方法也很感兴趣,想要知道在哪里可以开启视野范围提示?下面就让小编来告诉大家视野范围提示究竟是一个什么功能吧。王者荣耀视野范围提示开启方法介绍视野博弈是在峡谷中对抗的主要信息对…

华为手机如何配对连接蓝牙耳机

现在有很多人在使用华为手机,有些新用户不知道如何配对连接蓝牙耳机,接下来小编就给大家介绍一下具体的操作步骤。具体如下:1. 首先第一步先打开【设置】窗口,接着根据下图箭头所指,点击【蓝牙】选项。2. 第二步先打开蓝牙,接着根据下图箭头所指,点击【?】图标。3. 第三…

小红书怎么解除限流(小红书笔记被限流如何恢复)

运营小红书平台,必须要了解小红书平台的规则,然后根据账号持续输出相关定位内容以及最后的引流转化。但是运营过程中,总会因为各种各样的原因被限流,只有了解限流原因,才能对症下药,解决难题。今天,聚卓就和大家说说小红书笔记违规限流的一些解决办法。一、寻找笔记的曝…

小红书笔记审核需要多久通过(怎么看小红书笔记有没有审核通过)

618这几天,我们零克Club里的小伙伴们经常在群里询问,为什么笔记审核3个多小时还没通过?不断地去查看笔记的最新状态也一直都还在审核当中。大家都说被小红书给PUA了。而小红书官方对近期笔记审核时间延长给出的回复是目前正在对笔记审核通道进行优化,预计到下周三(6月24日…

ps图层混合模式的应用技巧(ps中图层混合模式有几种)

学后期一定会接触到PS的图层混合模式,特别是风光题材后期,接触得特别多。毕竟通过调整图层的不透明度以及使用蒙版都有一定的局限性,还是要学会使用各种图层混合模式才行。今天简单的把PS的图层模式做个分享,希望对大家有帮助。一、PS图层混合模式分类PS的图层混合模式大致…

ps画中画图片怎么做(pr制作画中画效果)

画中画效果现在很多手机软件上拍照的时候都会有,对一些以前拍好的照片怎么制作画中画效果?也很简单,就是用一些基本的工具和图层直接操作就可以了。这次是用一个宝宝的照片为例:在PS中打开你的素材,ctrl j复制一层,在背景图层和复制得到的图层中间新建一个空白图层,如下图…

台式机如何增加一块硬盘(台式机如何增加一个硬盘)

我实验室的小伙伴,最近好多都买了组装的电脑了,原本配置的是一个固态硬盘,但是后来发现很多东西需要更新,一个大的软件,竟然需要那么多的存储,做程序员还有工程人员竟然需要安装那么多的软件,这下子,固态硬盘不够用了,那么只好增加一个普通硬盘了,多一点安装咯。所以…

将图片中的文字转换成文本(如何将图片文字转换成word文字)

图片文字如何转换成文本?很多小伙伴在开会的时候或者在学习的时候,碰到重要的笔记都不会立即去记录,首先想到的方法就是先拍下来,等回去了有时间在去整理,这种方法非常的好而且高效,但是在我们后期整理的时候就会比较麻烦,如果这时候我们可以直接的识别图片上的文字,整…

将图片中的文字转换成文本(怎样使图片上的文字变成文本)

怎么把图片上的文字转成文本?我们经常会需要用到某些图片文件上的文字信息,如果图片不多倒也好办,直接手动输入就可以了,但是一旦图片比较多或者是图片里的文字信息比较多的话,手动输入的方法就行不通了,这个时候可以用一些文字识别工具来帮我们快速识别并提取文字,今天…

将图片中的文字转换成文本(怎样将图片中的文字转换为文本)

如何将图片中的文字转换成文本内容呢?大家在日常是工作和学习中,经常会使用照片来记录重要内容,这样虽然可以快速记录,但后期整理却比较麻烦,我们可以将图片中的文字直接转换成可以编辑的文本内容,这样一来就会帮我们节约大量时间,该如何转换呢?今天给大家分享两种可以…

新主播怎样做才能快速火起来(新人主播如何快速涨粉)

进入直播这一行两年有余,混迹各大网络直播平台算不上精通,但是至少略懂一二,最近看贴吧里的一些帖子,我觉得自己有必要说一下自己的见解。算是送个那些准备踏入或已经踏入直播行业的兄弟姐妹们!首先,所谓网络主播,我觉得并不是说你想要做,你就能做,而是你要适合做,考…

快手增加粉丝的技巧(新人主播如何快速涨粉)

小艺将主播大致分成了三类。一类是主播在展示才艺的同时,还有各种各样的互动,可以让在直播间里的人都玩的高兴,粉丝增长速度很快。二类是主播主要靠才艺吸引人,但是并不善言辞,和粉丝互动少,粉丝们往往是因为主播的才艺才留下,粉丝增长不是很快。三类主播有才艺,但是不…

手机垃圾太多了怎么清理(如何彻底清理手机垃圾释放大量内存)

手机进入智能手机时代,各种APP种类繁多,但是APP是多,手机内存却并不能满足大家使用需求,要不内存太少不够用,要不就是手机内存够用但价格又太高。而许多小伙伴会说,手机上的APP很多都是不常用的,那么内存不足的时候,我选择一些不常用的APP卸载后,在安装目前需要使用的…

华为移动路由器怎么样(华为移动路由器怎么用)

无线网络已经成了办公、娱乐最基本的需求,而面对短租合租、团队移动办公、临时展会等特殊人群,因为环境不具备固定性,他们对网络需求就不可能像固定用户那么样通过一条宽带就可以实现。可能有人会说临时需求通过手机热点不就可以了吗?其实手机热点在网络速度、稳定性、连接…

怎么删除视频原声

视频是现在十分常用的文件类型,有些新用户不知道怎么删除视频原声,接下来小编就给大家介绍一下具体的操作步骤。具体如下:1. 首先第一步先打开电脑中的Pr软件,接着导入需要编辑的视频,然后根据下图箭头所指,将它拖动到右侧时间轴。2. 第二步先右键单击音频轨道,接着在弹…