猪八戒学做网站之HTML5篇(5):Hello HTML

news/2024/5/20 13:01:17/文章来源:https://blog.csdn.net/smallfools/article/details/4315700

    出了几天差,回来一看,猪八戒正在网上津津有味地看着什么呢。

    猪八戒看见我回来了,马上站了起来:“师父,你回来啦!”一边说还一边接过我的行李包。

    我把行李包递给猪八戒后问他:“我不在的这几天,你都学了些什么了?”

    “没学什么,嘿嘿。”猪八戒抓了抓后脑勺,不好意思地说道。

    “Hello HTML会做吗?”我问。

    “什么是Hello HTML?”

    我笑了笑:“你傻啊?学习任何一种语言的时候,第一个程序都是Hello World,那学HTML的时候,第一个网页应该也是Hello HTML嘛。”

    “哦,这个容易。”猪八戒说完,就跑到自己计算机前捣鼓了一会儿,说,“师父,好了,你看!”

    我伸头看了一眼,还不错,Hello HTML是出来了,如下图所示。

 

    看完之后,顺手查了一下源代码,嘿,这源代码可真够简单的啊,如下图所示。

 

    我回到自己的座位上,坐了下来,对猪八戒说:“小朱啊,首先一点的是要肯定,你的第一个网页基本上是成功的,因为,你的文件的扩展名是htm。扩散名是htm说明了这个文件是一个网页文件,可以使用浏览器打开该文件。”

    “另外,”我看见八戒点了点头,接着说,“网页的扩展名还可以是html,这两者都是可行的。”

    “为什么扩展名即可以是htm,又可以是html呢?”猪八戒问道。

    “这是历史问题了,从理论上来说,静态网页文件的扩展名应该是html,但是为了兼容以前老操作系统、老软件,所以静态网页的扩展名也可以是htm。”我回答道。

    “什么意思?我没有听懂。”猪八戒问。

    “你学过DOS没有?”我问。

    猪八戒点了点头。

    “在DOS中,对文件名的命名有什么要求?”我反问。

    猪八戒愰然大悟:“文件名最多8个字符,扩展名最多3个字符,所以,网页文件的扩展名只能是htm。”

    “是的,虽然说DOS现在已经很少用了,但是还有一些老软件还是只能识别这种DOS命名规则的文件,所以,在编写网页文件时,最好还是使用htm为扩展名。”

    “我明白了。”猪八戒回答道。

    “好,现在再说说你的这个文件的缺点。”我看了一眼猪八戒,他正俯听细听着,“你的这个文件里,只有一行文字,虽然现在的主流浏览器都能直接将这行文件输出,但是从严格意义上来说,你的这个文件还不算是一个完整的HTML文件。”

    “那完整的HTML文件是什么样的?”

    “首先,完整的HTML文件必须是以<html>开头,</html>结尾的。”我一边说,一边在记事本里输入了以下代码:

    输入完毕后接着说:“上次我已经告诉过你,HTML是一个标记性语言,而<html>可以告诉浏览器,这是个HTML文件的开始,而</html>则是告诉浏览器,这是HTML文件的结束。”

    “哦,那我把它们加上,这样行不行?”猪八戒输入以了下代码:

    “嗯……这个怎么说呢?”我想了想,“虽然你这个文件是说明了HTML文件的开始和结尾,但是在HTML文件中,还将整个HTML分成了两个部分,一个是head部分,一个是body部分。”说完,我输入了以下代码。

    写完之后,我接着对猪八戒说:“你看上面的代码,<html>和</html>之间加入了<head></head>和<body></body>两对标签,其中<head>和</head>之间是头信息,头信息是不在浏览器窗口中显示的;<body>和</body>之间的内容才会在浏览器窗口显示出来。”

    猪八戒点了点头:“所以要把Hello HTML放在<body>和</body>之间。那<head>和</head>之间应该放些什么内容呢?”

    “这里面可以放的内容就多了,比如说<tilte>和</tilte>,用于申请网页的标题,你看这段代码。”说完,我输入了以下代码。

    “你看,现在我在<head>和</head>之间加上了<title>和</title>,而<title>和</title>之间加入了文字,这些文字就是当前网页的标题,而标题一些会在浏览器的标题栏或标签页上显示出来,你看看运行结果。”说完,我双击刚才编好的网页,在浏览器中显示的结果如下所示。

 

    在上图中的左上角中可以看到<title>和</title>之间的文字,而这些文字并没有在浏览器窗口里显示出来。

    “这回看明白了吧?”我问猪八戒。

    猪八戒点了点头,又问道:“那在<head>和</head>之间除了可以放<title>标签之外,还可以放什么标签?”

    “可以放的标签很多,比如说<script>标签,用于声明脚本文件的;<link>标签,用于声明外部文件的;<style>标签,用于声明网页样式的;<meta>标签,用于描述网页文档属性的……”

    我还没有说完,猪八戒就打断我了:“师父师父,你别说这么快,我记不住。”

    “哦,这些,你先不用记住,你只要记住html、head、title、body四个标签就行了。”

    “哦,这几个还行,我能记住。”猪八戒看上去很有信心。

    “好,今天就到这,刚出差回来,我累了。”说完,我不再说话,心想,要是这几个你都记不住的话,那真是猪八戒了。

 

*******************************************************************

小结:

1、静态网页的扩展名是htm或html。

2、网页代码应该以<html>开头,以</html>结束。

3、网页可以分为头部分和内容部分两个部分,其中头部分以<head>和</head>为标记,内容部分以<body>和</body>为标记。头部分的内容不会在网页中显示。

4、<title>和</title>之间的内容为网页的标题,可以显示在浏览器窗口的标题栏上,也可以显示在标签栏上。

*******************************************************************

 

原创不容易,转载请注明出处。(http://blog.csdn.net/smallfools)

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

猪八戒学做网站之HTML5篇(6):标签!标签!

“师父&#xff0c;你在看什么呢&#xff1f;” “《南京&#xff01;南京&#xff01;》。”我头也不回地回答道。 “那我应该看什么呢&#xff1f;”猪八戒又问。 “标签&#xff01;标签&#xff01;”我还是头也没回地回答道。 “啥&#xff1f;”猪八戒一下子没有明白过来…

在VS2008中创建自定义控件(一)创建网站项目和自定义控件项目

本文目的&#xff1a; 1、创建一个创建网站项目。 2、创建一个自定义控件项目。 下文目的&#xff1a; 1、创建一个自定义控件。 2、将自定义控件添加到工具箱中&#xff0c;以便调用。 这两篇博文的最终结果如下图所示。 首先声明&#xff0c;用户控件和自定义控件是不同…

python从网站抓取特定内容

背景 测试需要模拟浏览器的userAgent&#xff0c;从网站上找到一批 http://www.fynas.com/ua 分析 非常普通的table元素维护 约有8K多条&#xff0c;为防止中途中断导致数据丢失选择读取一页写一页&#xff0c;单个文件可能吃力&#xff0c;选择100页数据放入一个文件的方式…

网站集成第三方登录--QQ

网站平台集成第三方登录--QQ 注&#xff1a;仅适用于线上测试&#xff0c;不提供本地测试&#xff08;供新手参考&#xff09;第一步&#xff1a;1、 登陆QQ互联开放平台首页 http://connect.qq.com/ &#xff0c;注册开发者信息2、 选择菜单栏“管理中心”创建应用-网站3、 填…

网站集成第三方登录--sina

网站平台集成第三方登录--sina 注&#xff1a;仅适用于线上测试&#xff0c;不提供本地测试&#xff08;供新手参考&#xff09;第一步&#xff1a;1、 登陆新浪微博开放平台首页 http://open.weibo.com/ &#xff0c;登录后编辑开发者信息 及身份认证2、 开始创建应用 并将<…

iframe引入的网站不能全屏宽度有滚动条_程序猿进阶不能错过的最全前端性能优化秘籍(一)!...

很多人通常在完成了产品之后才会去考虑性能。把与性能相关的事情拖到项目的最后来做&#xff0c;所做的也不过是对服务器上的config文件进行一些微调、串联、优化以及部分特别小的调整。而现在&#xff0c;技术已经有了翻天覆地的变化。一个项目的性能是非常重要的&#xff0c;…

linux网络方面命令大全,网络操作命令 - Linux常用命令大全_Linux教程_Linux公社-Linux系统门户网站...

网络操作命令命令功能命令功能ftp传送文件telnet远端登陆bye结束连线并结束程序rlogin远端登入ping检测主机netstat显示网络状态8.1 ftp命令ftp命令用来传输文件&#xff0c;非常重要。如果在网络上看到一个很重要的文件&#xff0c;就可以用这个命令把那个文件传到自己的机器上…

如何将静态网站挂在github上

github.page是一个免费的静态托管服务&#xff0c;我们可以将静态网站托管在github上。具体的方法如下&#xff1a; 在github中新建一个username.github.io的公开仓库。&#xff08;username必须和你的github账户名完全一致。&#xff09;如果有静态网站的制作经验&#xff0c…

利用Lucene.net搭建站内搜索(4)---数据检索

前面的文章&#xff0c;我们已经对要检索的数据创建了索引&#xff0c;现在要做的就是为用户提供全文搜索的功能。通过Lucene我们还可以简单而高效地对搜索结果进行访问。此文和大家简单的说说利用Lucene.net进行数据的搜索。当我们查询Lucene的一个索引时&#xff0c;Lucene会…

50佳精美的单页网站设计作品欣赏(上篇)

单页网站是指只有一个页面的网站&#xff0c;这种形式的网站曾经非常流行&#xff0c;现在依然有很多人喜欢。不过&#xff0c;并不是每个网站都适合做成单页&#xff0c;一般都是内容比较少而且将来内容也不怎么增加的情况才适合这样做。如果你打算做一个这样的网站&#xff0…

Web 应用程序项目与网站项目比较分析

在 Visual Studio 中&#xff0c;我们可以创建“Web 应用程序项目”或“网站项目”。每种项目类型各有优缺点&#xff0c;所以我们要选择可以满足需要的最佳项目类型&#xff0c;应了解各项目类型之间的差异。今天将深入的学习这两种项目之间的异同。 项目文件结构 Web 应用…

旅游类建站要求

旅游建站要求&#xff0c; 第一大类&#xff1a;系统的建设&#xff0c;竟然你是技术员&#xff0c;我就不多说 1、系统采用松散构架&#xff0c;方便后期处理&#xff0c;管理员可自动修改、调整模版的设计或者模版中的图片文字等 2、后期修改模版网站要便于操作&#xff0c;…

php修改根目录,phpStudy如何修改端口或WWW目录(网站根目录)

方法1&#xff1a;phpStudy修改端口或WWW目录(网站根目录)非常简单&#xff1a;点击『其他选项菜单』-『phpStudy设置』-『端口常规设置』。打开Apache的配置文件httpd-conf文件&#xff1a;打开phpstudy界面 ->点击“其他选项菜单” -> 点击“打开配置文件” -> …

某网站安全检测之数据库手工注入

某网站安全检测之数据库手工注入 一、引子 长夜慢慢&#xff0c;无心睡眠…… 无意中翻到几年前听的一首名为《祖先的阴影》的摇滚&#xff0c;这么长久的历史&#xff0c;混合着许多的罪恶与功绩&#xff1b;这么“灿烂的文化”&#xff0c;夹杂着太多的愚昧与文明。美…

网站检测工具

2019独角兽企业重金招聘Python工程师标准>>> 15个在线网站检测工具 1. HTML Validator validator.w3.org/ 网页结构检测工具&#xff0c;支持HTML, XHTML, SMIL, MathML……. 2. CSS Validator jigsaw.w3.org/css-validator/ CSS验证。 3. Links Validator …

java写代码难吗_为什么这么多Java开发者会觉得用Java写网站很难?

原标题&#xff1a;为什么这么多Java开发者会觉得用Java写网站很难&#xff1f;用Java写个网站&#xff1f;这对于不少初学者来说&#xff0c;感觉难于上青天&#xff0c;许多的工作要做&#xff0c;许多知识没掌握......感觉所有东西都无从下手&#xff0c;是不是&#xff1f;…

关于建站和域名的杂谈

来谈谈关于建站的事&#xff0c;网上的教程很多&#xff0c;而且也都很详细&#xff0c;本人也是通过网上别人分享的经验一步一步走过来的&#xff0c;所以本着开源的思想&#xff0c;分享我建站以来遇到的各种问题&#xff08;本来不想写的&#xff0c;因为双休&#xff0c;想…

nodejs 使用express开发获取其他网站引用本站点js文件的参数

nodejs进行站点的开发其性能是很好的&#xff0c;在js 大行其道的天下&#xff0c;使用js基本上可以干好多只要我们能想到的东西&#xff0c;我们可以使用js文件进行用户验证等等。 这次我们就使用express 进行获取其他站点引用我们js 文件的处理&#xff08;其中js文件是带参数…

最好最牛的网站

2019独角兽企业重金招聘Python工程师标准>>> 1&#xff0c; 煎蛋网http://jandan.net/ 各种奇怪资讯&#xff0c;让你看到不一样的新闻    2&#xff0c;几分钟 http://www.jifenzhong.com/ 好看的生活百科。“几分钟”用视频帮助您搞定所感兴趣的事情。 4&a…

【Machine Learning in Action --2】K-近邻算法改进约会网站的配对效果

摘自&#xff1a;《机器学习实战》&#xff0c;用python编写的&#xff08;需要matplotlib和numpy库&#xff09; 海伦一直使用在线约会网站寻找合适自己的约会对象。尽管约会网站会推荐不同的人选&#xff0c;但她没有从中找到喜欢的人。经过一番总结&#xff0c;她发现曾交往…