HTML基本标记

目录:

设置页面关键字:

<meta name="keywords" content="输入关键字">

设置页面说明:

<meta name="description" content="对这个页面进行简单的描述一下吧!">

定义编辑工具:

<meta name="gernrator" content="输入编辑软件的名称吧!">

设置作者信息:

<meta name="author" content="作者的姓名">

设置网页文字以及语言:

<meta http-equiv="content-type" content="text/html charset=utf-8" >

设置页面的定时跳转:

<meta http-equiv="refresh" content="跳转的时间 url=跳转到的相应网址">

网页主体标记body:

<body bgcolor="背景颜色" >

<body background="图片地址">

<body text="文字颜色">

<body link="" alink="" vlink="链接文字属性link">

<body margin-top="上边距" margin=”下边距“>

页面注释标记<!---->


====================================================================================================================================

HTML,即HyperText Markup Language,其中文名即超级文本标记语言。

一个完整的HTML标记语言必须包含三部分:

1、一个由<html>元素定义的文档版本信息

2、一个由<head>定义各项声明的文档头部

3、一个由<body>定义的文档主体部分

其基本格式书写格式为:

<html>文件开始标记

<head>文件头部的开始标记

文件头部的内容在此书写

</head>文件头部的结束标记

<body>文件主体内容开始标记

文件主要需要显示的内容在此书写

</body>文件主体内容结束标记

</html>整个文件的结束标记

思路:对于这样一个书写格式,犹如我们生活中常常对于一个问题或者是一件事情的分析一样。

1、一个问题,即目的。标明整件事情的主要方向。即可以拿<html>标签表示,唯<html>标签涵盖了整个问题的主旨

2、一个问题或者一件事情在完成之前,我们必须完成两个步骤。

步骤一:思考。必须对这件事情先理清楚一个即时并行得通的思路来。其实这刚好就像上文HTML文件中的<head>部分,看不着,但是却为整件事情的实施作出了非常棒的铺垫。

步骤二:行动。俗话说:“光说不练假把式!”任何事情如果想要达到其该有的目的,我们必须行动,既然行动,则肯定会被周边的人发觉。刚好,HTML中的<body>正是拿给别人看的。

总结:思考、行动、目的是凑合一件事情的不二法则!

自此,既然一件事情我们有了大体的概述,那么,就让我们来一个 一一击破吧!

are you ready?

标题标记title

语法:

<title>看,我就是你们所有人无不为之倾倒的标题</title>

如果把它写在文件里面,我会这样:

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<title>come on,baby!还认识我吗?我就是你们要找的标题</title>

</head>

<body>

</body>

</html>

思路:我们为什么一个东西偏偏就要有标题呢?如果没有标题难道就不可以吗?当然可以,但是你不觉得标题在利己利人吗?就好比一台电脑,我们会把许许多多有用的东西存入这台电脑,而这些东西我们需要放进许许多多外观看上去毫无区别的文件夹中。如果这些文件夹都没有标题,那么,某一天,你突然想在其中去寻找自己需要的文件,那么,这时候你会不会感觉头都大了呢?反之,如果我们把每一种资料都作出详细的分类,这样会不会感觉事半功倍呢!

总结:其实生活很简单,只是我们平时不经意的忽略,从而把它变得复杂化咯!大笑

元素标记meta

噢,忘了!此刻我还不知道meta是个森马东东呢?--------------·唉,弄了半天,我也只知道meta就是meta。可能是因为在平时生活的网页中,我们看不到meta元素提供的信息吧!所以,我们常常不自觉的忽略了它的存在!其实,它在生活中还起到挺重要的作用!或许这 就是传说中的无形的力量吧!不知道我有木有说对疑问·····其作用一般是用来定义页面信息的说明、关键字、刷新等!其次,还需注意,meta不需要设置结束标记。

meta总是用它那庞大的身躯一只脚

 oooO ↘┏━┓ ↙ Oooo 
 ( 踩)→┃你┃ ←(死 ) 
  \ ( →┃√┃ ← ) / 
  \_)↗┗━┛ ↖(_/ 在水里,一只脚

 oooO ↘┏━┓ ↙ Oooo 
 ( 踩)→┃你┃ ←(死 ) 
  \ ( →┃√┃ ← ) / 
  \_)↗┗━┛ ↖(_/ 在陆地上               所以,

meta元素分为:

1、name                        用于描述网页,以便于搜索引擎查找、分类

2、http-equiv                 用于传达HTTP通信协议的标头

接下来,我们就来个一一了解吧!

设置页面关键字

在类似百度、Google类似的搜索引擎中,检索信息都是通过搜索关键字来得以实现的!所以不用多说其重要性了吧。

语法:

<meta name="keywords" content="哦就是关键字,你是吗?">

如果你硬是不知道我我是如何展开地下工作得,那我就来做一个示范吧!

<html>

<head>

<meta name="keywords" content="看见了吗?我是这样行动的!">

<title>每天都把我这个标题弄来弄去,把我头的搞大了!</title>

</head>

<body>

</body>

</html>

设置页面说明

在你不知道的时候,我只是想无形的帮助你一把!你可知道我的苦心?

语法:

<meta name="description" content="来给我作出一个很好的解释说明吧!">

哎呀!还是要身先立足体验一番:

<html>

<head>

<meta name="description" content="这下你总知道我的辛苦了吧!">

<title>我又来了</title>

</head>

<body>

</body>

</html>

定义编辑工具

还记得小时候那个总是渴望弄清楚十万个为什么的深邃表情吗?你似乎还记得你问爸妈:“我从哪里来的啊?”你是否还记得这个问题问得他们哑口无言的表情啊?反正我是不记得我是否问过这个问题咯!你呢?而定义编辑工具,其实就是想为我们解释我们从哪里来!-------------噢,我错了!是它从哪里来,接下来它要干什么?

语法:

<meta name="generator" content="把生你养你的那个它载入史册吧!">

好吧!那我试试,我看看你是怎么被我载入史册的,嘿嘿······

<html>

<head>

<meta name="generator" content="现在你小子知道了吧,我是这样载入史册的!">

<title>。。。。。</title>

</head>

<body>

</body>

</html>

设置作者信息

我不仅仅要知道我是从哪里来的!因为仅仅是这样,其并不属于我的作风!至少我还要知道是谁把我养大的吧。。。。。
语法:
<meta name="author" content="现在你知道了吧,就是我把你养大养肥的!">

“啊!还是不太确定诶。”

“忘恩负义的家伙,那就让我证明给你看呗!”

<html>

<head>

<meta name="现在你在不相信,我就去找棒棒咯!嘻嘻····">

<title>老太太,不是怕你打我!你真以为我会相信吗?这是赤裸裸的威胁。</title>

</head>

</html>

“我已经与观众特别熟悉了,看看别人吧!”

“OK,我只带你累啊!那我就委婉地接过接力棒了。”

设置网页文字及语言

其实我这样做就是想让大家能够正确的选择我,毕竟我也是一门门挺不错的语言组装而成的嘛!

语法:

<meta http-equiv="content-type" content="text/html;charset=字符集类型">

此语法中,http-equiv是用于传达HTTP通信协议的标头,而在content才是具体的属性值!

                                                                            可知否?

“那你要听实话还是虚话?如果你要听虚话,那我只能说很简单。如果要听实话,那我只能说,我只知道这概述,其实我并不知道其实质性的用处在哪里?”

“噢,原来如此!”

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=我就是字符集类型">

<title>噢,好吧!无语中····<title>

</head>

<body>

你无语,我无助!你可好了,但是大家都不知道我具体的力量到底有多具体!

<body>

</html>

设置网页的定时跳转

同学,以前在朋友生日或什么重要节日来临之际!你可曾有过这样的尝试。可能会因为在朋友生日或重要节日来临之际,自己会很忙,或者自己恰恰在路上。所以,你会提前写好电子邮件,然后对其时间进行一个设定。从而做到刚好在那一天来临之际,系统就自动把祝福发过去了。是不是这看上去很高大上啊?

好吧,现在就来看看这种语法格式吧!

语法:

<meta http-equiv="content-type" content="写下你需要等多久才看到换面的我把!;URL=说说你要把我转到哪里去吧。">

“嗯·····嗯····我想想·········”

噢·····噢······我总算想好了!你看我这样行不?

<html>

<head>

<meta http-equiv="refresh" content="你看我要等多久才跳转一次呢?;URL=请帮助我指明我要去的那个地方吧!">

<title>我知道你等的不耐烦了,接下来就看你的非常态发挥吧?</title>

</head>

<body>

OK,THANK YOU!那你就等着让我来亮瞎你的眼睛吧!再见

</body>

</html>


哼哼·····等着看吧!让你瞧瞧我是如何闪亮登场的········

网页的主体标记body

网页的主体标记有什么作用呢?为什么我们一定要有网页的主体标记body呢?-------------------用处那时必须得呢!因为其至少包含要在浏览器中显示处理所有的信息,其可以进行很多的属性设置。就好比如文字设置、颜色设置等!其重要性就好比如对于一个问题或者说是一件事情,如果我们只有目的与思考,却没有行动,那不就感觉是误国误名吗?其实,body就像行动的化身,至少可以看见它的一举一动,从而也让我知道这样一个过程以及起到一个监视的作用。

        总结:世间的一切事事物物都必有其因果关系,让我们好好静下心来去思考每一件事情的因果循环吧!

网页背景颜色bgcolor

当我们想要感叹世界的时候,为什么总是习惯的说“这真是一个五彩缤纷的世界啊!”,而很少说“这是一个世界啊!”这两个句子看似是在描述同一样东西,但它流露出来的气氛却是截然相同的。

 那现在就让我作出一个大体的对比吧!

面对“这是一个五彩缤纷的世界啊!”,首先,我们知道这是一个世界。其次,我们知道这是一个由颜色区别的世界。而对于有不同颜色区分的事物,其给我们的感觉也将是充满活力的,是朝气蓬勃的,是积极向上的!所以,其还有一层意思就是这是一个充满活力的世界。间接的透露这个世界或许是因为我们人每一个个体的存在,而变得五彩缤纷的。这会是多么有正能量的一句话啊!

面对“这是一个世界啊”的时候,的确,我们已经知道这是一个世界了。然后我知道这是一个没有色彩的世界。在然后,我会想,难道这个世界是因为我的存在而没有色彩吗?是因为我的存在而让这个世界变得死一样的寂寞吗?

好吧!算我多想咯。不过在认真思索,这背景颜色既然如此重要,看来我还是得好好思索思索咯··········

语法:

<body bgcolor="我就是颜色,将我写进来吧!">

嗯····我知道你是颜色,但是我还想知道你在生活中是怎么运用的!

好吧,那就容我教教你吧!!!

<html>

<head>

<meta http-equiv="content-equiv" content="text/html;charset=utf-8">

<title>看来我这个标题是无处不在啊!</title>

</head>

<body bgcolor="你需要什么样的背景颜色,写下来吧!">

</body>

</html>

如果说生活是五彩缤纷的,那么,我们可不可以把生活中的部分颜色固化在一座建筑上,让这种颜色永远停留在那里,永远没有变化呢?

这当然可以,对于这种永远不变颜色的建筑,我们可以说是一副图画,因此,图片这词也就跟着引申出来了。

网页背景图片background

语法:

<body background="插入我的保存路径吧!">

噢,搞得我都想跃跃欲试了·····

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<title>我在提醒一下,我是背景图片!可不要把我认错了啊。</title>

</head>

<body background="把我的保存路径写一下吧!,记住,我可是有后缀名的噢!就像'.jpg'这般">

</body>

</html>

在这个纷繁的世界里,既然是背景,那么,它必然相对而言属于次。因此,其背景之上必有主。所以,在接下来的一段旅程中,我们就尝试着把换上新装的文字作为背景之上的东道主的一段旅程吧·······

文字颜色text

语法:

<body text="你知道我穿的是什么颜色的外套吗?">

“我都没看见,我怎么知道啊!”

“好吧,既然如此就容我告诉你把!”

<html>

<head>

<meta http-equiv="content-type" content="text/html charset=utf-8">

<title>现在知道我是什么颜色了吧!</title>

</head>

<body text="#223335">

穿上了花衣裳,那就让生命活得更加的精彩吧!

</body>

</html>

精彩地生命需要用一段段生活方式来做渲染········而每一段生活方式自然给人的感觉也是各不相同的。就好比在生命中与另一个人的交集吧!认识之前可能是无比的想要去接近,认识中可能是小小的紧张以及刺激,认识之后可能是一段心的交流。这似乎与链接文字属性link如此如出一辙,对于一段文字我们也可以尝试变换访问前的文字颜色,访问中的文字颜色,访问后的文字颜色······

链接文字属性link

语法:

<body link="想把我设置成什么颜色啊?">

a.

<html>

<head>

<meta http-equiv="content-type" content="text/html charset=utf-8">

<title>你需要将链接文字变成什么颜色,自己看着办吧!</title>

</head>

<body link="#223344">

<center>

<a href="www.w3school.com">链接的文字</a>

</center>

</body>

</html>

既然有了相识前的心理标准,那么,你就不得不想哈相识中的心理变化了·······

语法结构:

<body alink="设置访问我时的颜色变化吧!">

<html>

<head>

<meta http-equiv="content-type" content="text/html charset=utf=8">

<title>这就是访问我时的颜色</title>

</head>

<body alink="#112233">

<center>

<a href="www.w3school.com">这就是我的颜色</a>

</center>

</body>

</html>

噢,原来如此,那么相识之后的心理变化一定就是这样的吧!!!

语法结构:

<body vlink="我就是相识之后的颜色变化!">

<html>

<head>

<meta http-equiv="content-type" content="text/html charset=utf-8">

<title>这就是访问后,我所成为的颜色!</title>

</head>

<body link="1233322" alink="#22232333" vlink="#445566">

<a href="www.w3school.com">这就是访问前中后我所变成的颜色</a>

</body>

</html>

 边框margin

语法:

<body margin-top=上边距的值 margin-left=走边距的值>

既然有了语法结构,那就牛刀小试一番吧!

<html>

<head>

<meta http-equiv="content-type" content="text/html charset=utf-8">

<title>看看我是如何弄的边距吧!</title>

</head>

<body margin-top="100" margin-left="23">

<p>设置页面的上边距</p>

<p>设置页面的左边距</p>

</body>

</html>

提示:一般页面的上左边距都设置为0

页面注释标记<!--写下相应的注释吧!-->




的提

d

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值