还记得前面的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/>…这一类的标签被称为自闭合标签。
现在你可以利用标题来做一个静态的网页页面了,醒目的标题,突出的内容。当然还可以更家丰富。别急,一步一步的来,欲速则不达!!下一篇我要写点什么呢?你有什么想法可以在评论区写出来。