封面图
00 课前准备
00.01 索引
- 网页头部标签
- HTML常用的标签
- 引用样式的使用
- 课后作业
00.02 课前提问
- 我们应该怎样告诉计算机，文章的标题是什么呢？
- 我们如何为网页中的内容添加样式呢？
01 网页头部标签
上一节课程中，我们已经可以用HTML写出自己的第一个网页了！但是，我们的网页看起来还是很简陋，只是简单的几个文字而已！我们还希望可以实现更多的功能，比如：告诉别人我们网页的主题是什么？那我们应该怎么办呢？
01.01 <head>标签
还记得，上一节课中我们强调<body>标签是用来标记网页正文的吗？那么，当我们想要给网页添加一些信息，但却不显示在正文中的时候。我们就可以使用一个全新的标签：<head>标签。
<head>标签叫做网页头部标签，我们用它来标记一些有关于网页的额外信息，比如说：这个网页内容的语种，网页的标题...
01.02 网页标题
我们想要为网页添加标题，除了<head>之外，还要用到<title>标签。<title>标签要写在<head>和</head>中间，这很好理解，因为网页头部除了标题之外还要添加更具体的额外信息，所以我们也必须使用更加具体的标记标签，就像下方代码一样！
<html>
<head>
<title>My First Page</title>
</head>
<body>
Hello,World!
</body>
</html>
HTML代码
title
执行代码
02 HTML常用的标签
02.01 编辑示例
我们今天要尝试使用HTML更加复杂的功能，来实现更加复杂耐看的网页。比如：实现一个自己的小说阅读器？
我们将学习一些新的标签，来逐步实现下方百度阅读器的阅读效果！
百度阅读
百度阅读器的浏览效果
02.01 标题<h1>
我们使用<h1>、<h2>....<h6>标签来标记文章中的标题，<h1>代表最高层的大标题，<h6>代表最后层的小标题。被这些标签标记的文本都会相应的加粗和增加字体大小。
h1....h6
<!DOCTYPE html>
<html>
<head>
<title>专属小说阅读器</title>
</head>
<body>
<h1>第一辑 从百草园到三味书屋</h1>
<h2>《朝花夕拾》小引
</body>
</html>
HTML代码
h1&h2
执行代码
02.02 段落<p>
我们使用<p>标签来表示文章的段落，使用了<p>标签后，段落与段落之间会自动生成间距！
<body>
<h1>第一辑 从百草园到三味书屋</h1>
<h2>《朝花夕拾》小引</h2>
<p>我常想在纷扰中寻出一点闲静来，....</p>
<p>广州的天气热得真早，夕阳从...</p>
</body>
HTML代码
段落
执行代码
03 引用样式
为了课程方便，以及更好的展示网页效果。我们先来简单的介绍样式，之前实现的网页都是黑白没有颜色，但实际上我们接触的网页都是色彩斑斓的！这就是网页的样式在起着作用，我们可以使用别人已经写好的样式，来帮助我们实现好看的网页，未来我们也会学习自己编辑样式！
知了已经写好了一个样式分享给大家，大家只要在<head>标签内添加一行代码就可以了！
<head>
<title>My First Page</title>
<link rel="stylesheet" type="text/css" href="https://course.zhiliaoxuexi.com/02.css">
</head>
HTML代码
专属阅读器实例
执行代码
04 课程作业
找到一本你喜欢的小说，将第一章内容用今天学习的标签进行标记，并引用样式代码！看看，最后的效果吧！
网友评论