当前位置: 首页 > news >正文

html零基础自学,第一个HTML页面如何写?——零基础自学网页制作

把txt文件变成html网页文件

cb1a5ae92085

如果您看过《HTML是什么?——零基础自学网页制作》(结尾处找“零基础自学网页制作”看全部目录)这篇教程,请按照其中说明创建一个txt文件。具体过程如下:

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

cb1a5ae92085

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

cb1a5ae92085

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

cb1a5ae92085

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

cb1a5ae92085

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

cb1a5ae92085

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

cb1a5ae92085

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

代码讲解请参照《HTML是什么?——零基础自学网页制作》(结尾处找“零基础自学网页制作”看全部目录)这篇教程中的讲解。

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

cb1a5ae92085

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

如图所示:

cb1a5ae92085

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

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

cb1a5ae92085

选择".txt"

cb1a5ae92085

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

cb1a5ae92085

大胆的点击"是"即可。

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

cb1a5ae92085

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

cb1a5ae92085

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

cb1a5ae92085

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

cb1a5ae92085

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

为html页面添加标题与段落

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

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

和两个兄弟标签。

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

标签中间!

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

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

第一个页面

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

cb1a5ae92085

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

cb1a5ae92085

我们把这句代码粘贴到

之间。如下所示:保存后使用浏览器打开。第一个页面

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

cb1a5ae92085

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

段落在HTML中使用

千里之行始于足下

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

第一个网页

千里之行始于足下

结果如图所示:

cb1a5ae92085

通过这个练习,我们可以发现一个规律,在

中,子元素代码的上下顺序代表了它在页面中显示的排版顺序。

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

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

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

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

相关文章:

  • CentOS+Nginx+PHP+Mysql+安全指南全环境搭建笔记
  • html怎么转换docx,html2word html转换为word 使用docx4j
  • html5网页中加入播放器,6 个 HTML5 的多媒体播放器
  • 在CentOs 5.1中使用rpm安装NGINX+php+mysql
  • android go更新机型,诺基亚1 Plus喜提Android 10 GO系统更新
  • HTML聊天框特效,利用jQuery实现响应式聊天窗口界面特效
  • 鼠标闲置一段时间后自动隐藏
  • html购物倒计时,基于javascript实现的购物商城商品倒计时实例
  • LWUIT + ChartComponent 之一实现饼图(PieChart)
  • win10n网页如何保存为html,win10浏览器如何保存网页_win10浏览器怎么保存网页
  • 牛人(笑来)VS牛人(阿朱):惺惺相惜 - [读书,这么好的事儿]
  • 2021年湖南高考音体美成绩查询方式,2021年湖南高考成绩什么时候出来 公布时间...
  • itmo大学计算机专业,【俄罗斯圣光机大学访学】计算机学院ITMO交流访学团
  • LWUIT + ChartComponent 之二实现线形图(LineChart)
  • qt怎么添加html样式,Qt中插入html样式
  • [分享]iOS开发 - 实现UITableView Plain SectionView和table不停留一起滑动
  • 【译】理解JavaScript:new 关键字
  • Angular 响应式表单之下拉框
  • CSS魔法堂:Absolute Positioning就这个样
  • docker-consul
  • Java应用性能调优
  • JS基础之数据类型、对象、原型、原型链、继承
  • js中forEach回调同异步问题
  • Python进阶细节
  • Spring思维导图,让Spring不再难懂(mvc篇)
  • 阿里云容器服务区块链解决方案全新升级 支持Hyperledger Fabric v1.1
  • 给初学者:JavaScript 中数组操作注意点
  • 工程优化暨babel升级小记
  • 关于List、List?、ListObject的区别
  • 海量大数据大屏分析展示一步到位:DataWorks数据服务+MaxCompute Lightning对接DataV最佳实践...
  • 机器学习 vs. 深度学习
  • 每个JavaScript开发人员应阅读的书【1】 - JavaScript: The Good Parts
  • 强力优化Rancher k8s中国区的使用体验
  • 让你成为前端,后端或全栈开发程序员的进阶指南,一门学到老的技术
  • 数据仓库的几种建模方法
  • 小程序button引导用户授权
  • 新手搭建网站的主要流程
  • ​​快速排序(四)——挖坑法,前后指针法与非递归
  • ​LeetCode解法汇总1410. HTML 实体解析器
  • ​LeetCode解法汇总2670. 找出不同元素数目差数组
  • # .NET Framework中使用命名管道进行进程间通信
  • ###C语言程序设计-----C语言学习(6)#
  • #ubuntu# #git# repository git config --global --add safe.directory
  • $(function(){})与(function($){....})(jQuery)的区别
  • ( )的作用是将计算机中的信息传送给用户,计算机应用基础 吉大15春学期《计算机应用基础》在线作业二及答案...
  • (全部习题答案)研究生英语读写教程基础级教师用书PDF|| 研究生英语读写教程提高级教师用书PDF
  • ***通过什么方式***网吧
  • .Net Winform开发笔记(一)
  • [ vulhub漏洞复现篇 ] JBOSS AS 4.x以下反序列化远程代码执行漏洞CVE-2017-7504
  • [Android]一个简单使用Handler做Timer的例子
  • [bzoj1324]Exca王者之剑_最小割
  • [C#]C# winform部署yolov8目标检测的openvino模型
  • [codevs] 1029 遍历问题
  • [jQuery]div滚动条回到最底部
  • [LeetBook]【学习日记】数组内乘积