第一个HTML页面如何写?——零基础自学网页制作
gaoyangw 2024-11-13 10:35 24 浏览 0 评论
把txt文件变成html网页文件
如果您看过《HTML是什么？——零基础自学网页制作》这篇教程，请按照其中说明创建一个txt文件。具体过程如下：
step1：在您方便的磁盘中建立一个文件夹，命名为"零基础自学网页制作"。例如我在D盘中建立了"零基础自学网页制作"文件夹。
step2：在文件夹中创建"HTML框架.txt"文件。鼠标移动到空白处点击右键选择"文本文档"。
命名为"html框架"，如下图所示。
如果您的电脑没有显示".txt"后缀的话，请做如下操作：点击"工具"，找到"文件夹选项"
菜单如下：点击"查看选项"。
下拉滑条，找到"隐藏已知文件类型的扩展名"选项，将前面的对勾去掉。
如果您使用的是win10的话请参考《边学边做网页篇------初识HTML》，这也是我做的教程，不过以后都使用这个账号来发了。
step3：把"HTML框架"复制粘贴到"html框架.txt"文件中。HTML框架代码如下：
<!DOCTYPE HTML> <html> <head> </head><body> </body> </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>标签中有<head></head>和<body></body>两个兄弟标签。
我们在页面中看到的所有的内容都是添加到<body></body>标签中间！
<head></head>标签中的内容并不会显示在页面中。
那么如何添加"标题"呢？
标题在HTML中用<h></h>标签表示。在<h></h>中间加入文字内容即可。如下所示：
<h>第一个页面</h>右键，使用"记事本"打开"第一个网页.html"文件。如图所示：如果您的"打开方式"中没有"记事本"请点击"选择默认程序"
在"其他程序"中找到"记事本"。点击"确定"。从此，"记事本"就一直存在于"打开方式"中了。
我们把这句代码粘贴到<body></body>之间。如下所示：保存后使用浏览器打开。
<!DOCTYPE HTML><html><head> </head> <body> <h>第一个页面</h> </body> </html>然后，使用浏览器打开，如图所示：标题出现在页面中了。
下面，我们来添加段落内容。
段落在HTML中使用<p></p>标签添加。代码如下
<p>千里之行始于足下</p>请各位自行将代码添加到"第一个网页.html"文件中吧！示例代码如下：
<!DOCTYPE HTML> <html> <head> </head> <body> <h>第一个网页</h><p>千里之行始于足下</p> </body> </html>结果如图所示：
通过这个练习，我们可以发现一个规律，在<body></body>中，子元素代码的上下顺序代表了它在页面中显示的排版顺序。
这也简单回答了代码结构与排版的关系，html的标签语句只是标记了它所承载的信息的属性和版面位置。
基于这个特性，html被称为超文本标记语言。
下一期我们具体讨论页面中文字编辑的技巧。
喜欢的小伙伴请加关注，有任何问题请给我留言，欢迎大家给与指正！感激不尽！
HTML完整学习目录
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
相关推荐
- 分众传媒新设广告公司 注册资本为5000万元
-
人民财讯6月9日电，企查查APP显示，近日，广西分众数媒广告有限公司成立，法定代表人为杨晓怡，注册资本为5000万元，经营范围包含：广告设计、代理；广告制作；广告发布；企业形象策划；会议及展览服务；摄...
- Krafton宣布斥资750亿日元收购日本顶级广告与动画公司ADK
-
IT之家6月25日消息，《绝地求生》《InzoI》开发商Krafton昨日宣布，计划以750亿日元（IT之家注：现汇率约合37.09亿元人民币）从美国贝恩资本旗下收购日本广告与动画...
- 木村拓哉传接任公司社长! 手握8广告…业界高层揭人气不坠原因
-
记者陈芊秀／综合报导日本国民男神木村拓哉近日传出将要接任公司社长大位？他活跃演艺圈多年，经历杰尼斯偶像天团「SMAP」解散、创办人强尼喜多川性丑闻风波，公司解散改名「星达拓娱乐」，从广告丢光到现在手上...
- WPP、宏盟、阳狮、埃培智、电通、汉威士等全球6大广告传播公司2024年全年财报汇总
-
来源：全球企业动态广告传播集团WPP公布2024年业绩。全年营收147.41亿英镑(约190亿美元)，上年为148.45亿英镑。全年营业利润13.25亿英镑，上年为5.31亿英镑，同比增长149.5%...
- 百付科技 SEO 优化软件:智慧搜索时代的拓客效率革命
-
在AI技术重塑搜索生态的背景下，百付科技以“SEO优化软件+智慧搜索”为核心，将传统搜索的技术积累升级为智能化工具，帮助企业实现从流量获取到截流获客的效率跃升。一、软件技术的三大突破...
- 搜狗快速收录之搜狗收录就应该这么做
-
最近很多做搜狗的站长咨询我，搜狗才能快速收录，别人的几十万的搜狗泛收录是怎么做的，有没有实用的搜狗快速收录方法，搜狗推送工具有用嘛。今天笔者针对这些疑问发表一下我个人的看法。...
- 搜狗微信搜索的“用户价值”，为用户提供优质内容
-
搜索引擎就像一部海量的大辞典一样，先吸纳海量的网站信息（前提是没有被Robots屏蔽），再通过索引、排序呈现给用户。早前我曾提到过，搜索引擎并不是空的搜索引擎，它是由N多内容组成的，这些内容可能来自于...
- 百度 谷歌 搜狗 搜索引擎/SEO靠谱?移动互联网咋办?
-
在PC时代，要说听到最多的，非搜索引擎营销（SEM）莫属了与它最有关系的又是SEO这货，什么关键词，长尾关键词、地域关键、行业关键词，SEO俨然成了一个行业，这就是SEM的产物。很多人或企业都在这货...
- 搜狗搜索优化就选成都云网客（云网互联搜狗河南运营中心）
-
搜狗搜索优化就选成都云网客。成都云网客是一家专注互联网搜索服务的服务性企业，公司主要从事互联网搜索信息技术服务与咨询。目前主力代理成都传媒集团旗下云网客搜索排名优化产品，整合PC建站SEO和移动互联网...
- 搜狗微信SEO搜索公众号排名规则解密
-
只要有搜索引擎，就有SEO。那么此次搜狗上线的微信搜索，就有微信SEO的诞生。那么搜狗微信SEO的排名规则是什么？如何通过微信SEO技巧快速提升公众号和推送文章的排名呢？今天就和大家分享微信SEO的技...
- 微信SEO:搜狗微信搜索公众号排名规则解密
-
今天推送的这篇文章，有微信公众号的朋友一定要看！虽然搜狗微信搜索并不是那么的完美，但是排名的规则也是需要我们注意的，早点做准备总是好的！只要有搜索引擎，就有SEO。那么此次搜狗上线的微信搜索，就有微信...
- 效率工具包:100 + 自媒体人必备工具(选题 / 剪辑 / 排版 / 数据)
-
一、效率工具包核心价值使用专业工具可使自媒体工作效率提升70%，覆盖选题策划、内容制作、数据分析全流程。100+工具分类推荐，适配不同平台与创作需求，帮助自媒体人实现降本增效，打造优质内容。二、...
- 48岁混混7年逆袭称帝!斩白蛇竟是史上最早人设营销?
-
本文是云间故事铺独家原创稿件，未经授权严禁转载48岁还在基层摸爬滚打，这个整天喝酒打架、欠一屁股债的中年逆袭典型，连老丈人都瞧不上眼。可谁能想到，就是这样一个社会混子，仅用7年就完成了从通缉犯到开国皇...
- 电商电销外包成功案例:精准营销带来业务新增长
-
在电商行业竞争白热化的当下，企业如何突破增长瓶颈、提升客户转化率成为关键课题。越来越多电商企业选择将电销业务外包，借助专业团队的力量实现精准营销。耀骁客服外包公司凭借其独特优势，助力众多企业实现业务新...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 分众传媒新设广告公司 注册资本为5000万元
- Krafton宣布斥资750亿日元收购日本顶级广告与动画公司ADK
- 木村拓哉传接任公司社长! 手握8广告…业界高层揭人气不坠原因
- WPP、阳狮、宏盟、电通、蓝色光标、分众传媒等全球8大广告传播公司2025年第一季度财报汇总
- WPP、宏盟、阳狮、埃培智、电通、汉威士等全球6大广告传播公司2024年全年财报汇总
- 百付科技 SEO 优化软件:智慧搜索时代的拓客效率革命
- 搜狗快速收录之搜狗收录就应该这么做
- 搜狗微信搜索的“用户价值”，为用户提供优质内容
- 百度 谷歌 搜狗 搜索引擎/SEO靠谱?移动互联网咋办?
- 搜狗搜索优化就选成都云网客（云网互联搜狗河南运营中心）
- 标签列表
-
- 网站建设 (107)
- 百度收录 (50)
- 搜索引擎排名优化 (49)
- 关键词优化工具 (51)
- 外贸网站建设 (56)
- seo整站优化吧 (50)
- 苏州网站建设 (59)
- 百度搜索推广 (61)
- 关键词优化公司 (51)
- 广州网站建设 (48)
- 电商网站建设 (49)
- 百度站长平台 (48)
- 网站模板 (51)
- 厦门网站建设 (52)
- 百度快照推广 (51)
- 免费网页在线客服系统 (53)
- 雷神代刷网站推广 (53)
- 手机网站建设 (53)
- 网站维护 (53)
- 网页制作教程 (66)
- 百度收录批量查询工具 (48)
- 网站服务器 (53)
- 学生个人网页制作html (56)
- 一键优化 (67)
- 网页制作软件 (49)