一步步完善你的Hello World!

还记得前面的HTML文件吗?你是不是觉得这样就算编写代码了吗?功能是不是太简单了,万丈高楼平地起,不要着急,一步步的来。

这样看着是不太美观,那我们就给页面来美化一下。

在Hello World!的两端添加<h1>和</h1>像下边这样:

<html>
<head>
<title>My First Html</title>
</head>
<body>
<h1>
Hello World!
</h1>
</body>
</html>

再从浏览器中看看现在的样子。

有没有发现在不同?是的,Hello World!字号变大了,这是为什么呢?

因为html定义了<h1> ~ <h6>6种不同级别的标签。

为了更清晰的看出他们的区别,我们来把代码改写一下。

<html>
<head>
<title>My First Html</title>
</head>
<body>
<h1>
Hello World!
</h1>

<h1>这是一个h1标题</h1>

<h2>这是一个h2标题</h2>

<h3>这是一个h3标题</h3>

<h4>这是一个h4标题</h4>

<h5>这是一个h5标题</h5>

<h6>这是一个h6标题</h6>

</body>
</html>

现在看到变化了吧。是不是层次更突出了,标题标签的做用就和报纸,杂志和书籍的标题一样,突出页面的主题和主要内容。

大家有没有发现,现在所有尖括号'<>'里面的内容都有一个内部加了一个'/'的内容与之对应。

这些尖括号包围的称为标签,标签有开始标签和结束标签,结束标签比开始标签多一个'/'。同时开始标签和结束标签一般都是成对出现的。开始标签和结束标签连同它们之间的内容构成了网页页面的元素。

有一般就有特殊。有一些标签是开始标签和结束标签合二为一的,比如:<br/><hr/>…这一类的标签被称为自闭合标签。

现在你可以利用标题来做一个静态的网页页面了,醒目的标题,突出的内容。当然还可以更家丰富。别急,一步一步的来,欲速则不达!!下一篇我要写点什么呢?你有什么想法可以在评论区写出来。

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值