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

news/2024/5/20 13:20:18/文章来源:https://blog.csdn.net/smallfools/article/details/4316792

    “师父,你在看什么呢?”

    “《南京!南京!》。”我头也不回地回答道。

    “那我应该看什么呢?”猪八戒又问。

    “标签!标签!”我还是头也没回地回答道。

    “啥?”猪八戒一下子没有明白过来。

    我按了一下暂停键,回过头来说:“HTML是什么语言?”

    “标记性语言。”

    “标记性语言的特点是什么?”我追问。

    “这个嘛……”八戒想了想说,“应该是把内容标记下来吧。”

    “嗯,这么说也对。”我继续问,“那么,用什么可以把内容标记下来?”

    “用什么?”八戒问道。

    “当然是用标签啦!”我有点生气,“昨天是怎么和你说的?”

    “哦,原来你昨天说的<html>、<head>、<body>、<title>都是标签啊?”

    “不是标签是什么?”没等猪八戒回答,我接着说,“HTML就是靠标签来签记文本的。而HTML中的标签都是由尖括号(<>)括起来的,尖括号里面是HTML元素。”

    “哦,这样我就明白了。”猪八戒说道,“那么昨天说的html、head、body、title都是HTML元素,而这些元素放在尖括号里就是HTML标签了。”

    我点了点头,说:“对的。在HTML,大多数标签都是成对出现的,就像我们昨天说过的那几个标签一个,<html>标签对应着有一个</html>标签,<body>标签对应着有一个</body>标签。<html>标签、<body>标签都是起始标签,</html>标签、</body>标签都是结束标签。起始标签和结束标签之间就是标签标记的内容,也叫元素的内容。”

    “这我就知道了。”八戒一边说一边打开了昨天的HTML文件,如下所示。

    “<title>标签是标题的起始标签、</title>标签是标题的结束标签,所以‘这是我的第一个网页’这几个字的内容就是标签所标识的内容,这就是告诉浏览器这几个字是标题,应该显示在浏览器的标题栏中,而不是显示在窗口里,对吧?”猪八戒问道。

    我赞赏地点了点头,看来猪八戒的领悟能力还行。

    “是的。”我接着补充,“因为HTML语言是标记语言,所以,学习HTML的过程事实上就是学习标签的过程,所以,我看《南京!南京!》,你就看标签标签吧。嘿嘿。”

    八戒把嘴巴伸得老长:“好吧,那我就去看标签吧。对了,标签大小写没关系吧?”

    “嗯,HTML对大小写是不敏感的,大写的<HTML>和小写的<html>事实上是一样的,不过呢,在HTML 4时W3C就建议使用小写的HTML标签,而在XHTML中应该使用小写的标签,所以,你在学习HTML的时候,最好养成小写的习惯。”

    “好的,我会注意的。”八戒点了点头。

    “别外,HTML中的元素可以拥有属性,这一点你要注意一下。”我补充道。

    “什么是属性?”八戒问道。

    “这样吧,你看这段代码。”说完,我把源代码改了一下,修改结果如下所示:

    “你在,我在<body>标签里添加了一个bgcolor,这个bgcolor就是body元素的属性,代表网页的背景颜色,而等于号后面的内容是属性值,用于说明背景颜色为红色。你可以看看运行结果。”说完,我打开修改后的网页,如下图所示。

 

    “哇,背景果然变成红色了耶。”猪八戒叹道,“那我可不可以将背景改成黑色?”

    “可以啊,只要将bgcolor属性值改成black就行了,你试试吧。”

    “好的!”猪八戒说完后就动手改了起来,他的源代码如下所示:

    改完后,八戒问道:“师父,我这样改行不行?”

    我笑笑:“行不行运行一下就知道了,实践出真理嘛。”

    “好的。”猪八戒应了一声,然后打开自己修改过的网页,结果如下图所示。

 

    “哇!好黑啊!”八戒又叫道,“可是我的字一个也看不见了。”

    “那是当然,因为你犯了两个错误。”我说道。

    “不是吧?我就改了一个地方,怎么犯了两个错误?”

    “首先,你的bgcolor属性值没有用引号括起来,这是你的第一个错误。”我说。

    八戒看了看他的代码,又看了看我的代码,说:“嗯,还真是的,你的有引号,我的没引号——但是,我的运行结果是成功的,这说明我的代码没有错。”

    “是的,你的代码是没有错,但是你的代码不适合标准。HTML要求属性值必须使用成对引号括起来,可以是单引号,也可以使用双引号。”我解释道。

    “可是不加引号运行也正常啊。”猪八戒还在那里嘴硬。

    “你呀,煮熟的鸭子就剩嘴硬了。”我一边说,一边写下了这么一些代码。

     “这个<a>标签是什么意思?”猪八戒看了我的代码后问。

    “这是一个锚,你现在不用管它的具体意思,不过我可以告诉你,a元素的title标签的作用是:当你把鼠标放在上面的时候,浏览器会显示出title属性值,你看一下运行结果。”说完,我运行了以上代码,并将鼠标放在“Hello HTML”文字上。运行结果如下图所示。

 

    “嗯,真的出现了文字。”猪八戒点点头,“那你把引号去点看看。”

    “好的。”说完,我把代码修改如下:

    “你自己运行看看结果。”修改完毕之后,我对猪八戒说道。

    猪八戒将网页打开,并将鼠标放在“Hello HTML”文字上,结果如下图所示。

 

    “这是为什么?怎么出现的不是Hello HTML,而是Hello?”猪八戒好奇地问道。

    “这就是引号的作用了。”我回答道,“在有引号的时候,浏览器会将引用中的内容看成是一个整体,而这个整体都是title的属性值,而在没有引号的情况下,因为Hello后面有一个空格,浏览器就会认为Hello是title的属性值,而HTML是<a>标签中的别一个属性了。”

    猪八戒点了点头,似懂非懂地说:“原来是这样啊。”

    “就是这样啊,所以,一定要养成使用引号的良好习惯。”

    “嗯,我会的。”猪八戒说道,“那我的第二个错误是什么?”

    “你的第二个错误就是,将网页的背景颜色设成了黑色,而你的文字颜色恰恰也是黑色,所以,你看不到你的文字了。”

    “哦,那应该怎么办?”

    “你可以将文字颜色设成其它颜色啊。”

    “怎么设?”

    “方法有很多,你看一下这段代码啊。”说完,我又把源代码改了,如下所示。

    “您这是在<body>标签中又加了一个属性吧?”猪八戒问道。

    “是的,”我点了点头,“在HTML中,一个元素可以拥有多个属性,而属性和属性之间、属性和元素之间都是使用空格进行分隔的,在这个例子中,text和bgcolor都是body元素的属性,text属性的作用是设置网页中的文字的颜色,你看一下运行结果。”

    猪八戒运行了一下上面的代码,运行结果如下所示:

 

    “嗯,这回我明白了。”猪八戒点点头。

    “你明白了什么?”我反问。

    “明白了很多,”八戒说道,“第一、学习HTML的过程也就是学习标签的过程。第二、标签的作用是用于标记文本。第三、标签有开始标签和结束标签两种,一般都是成对出现。第四、虽然HTML对大小写不敏感,但是最好使用小写。第五、标签中的内容称为HTML的元素,元素可以拥有多个属性。第六、属性要使用引号括起来。”

    “总结得不错。”我点头赞许,“但有一点要修正一下,标签并不都是成对出现的,有些标签只有开始标签没有结束标签。”

    “什么标签只有开始标签没有结束标签?”八戒又追问道。

    “比如说用于换行的<br>标签、用于输出水平线的<hr>标签等等,这些以后再说吧。”

    “好的。”猪八戒说,“没想到我就这么改改代码都会出现两个错误,唉。”

    “哈哈!”我乐了,“那是和你开玩笑的啦,那算不上错误,顶多说是经验不足而已。别这么不开心,我请你看《南京!南京!》吧!”

    “去电影院看?”

    “美吧,你!我这里有下载版的,看不看?”

    “看!”

 

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

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

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

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

相关文章

在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;她发现曾交往…

微信每日早安推送,快来给你女友做爱心提醒吧,自定义推送名称,企业号通知非订阅号测试号,后台python,精简无第三方网站注册、无第三方接口,无基础快速上不了手

每日定时推送给女友&#xff0c;微信消息推送后&#xff0c;锁屏可提醒&#xff0c;聊天界面可顶置&#xff0c;可自定义聊天框名称&#xff0c;聊天头像可修改&#xff0c;内容可增加图片~每日推送python源码自取 手把手教你微信每日推送早安&#xff0c;目前为止效果最好版本…