10分钟|零基础用HTML打造自己的专属阅读器!

封面图

00 课前准备

00.01 索引

  1. 网页头部标签
  2. HTML常用的标签
  3. 引用样式的使用
  4. 课后作业

00.02 课前提问

  1. 我们应该怎样告诉计算机,文章的标题是什么呢?
  2. 我们如何为网页中的内容添加样式呢?

01 网页头部标签

上一节课程中,我们已经可以用HTML写出自己的第一个网页了!但是,我们的网页看起来还是很简陋,只是简单的几个文字而已!我们还希望可以实现更多的功能,比如:告诉别人我们网页的主题是什么?那我们应该怎么办呢?

01.01 标签

还记得,上一节课中我们强调标签是用来标记网页正文的吗?那么,当我们想要给网页添加一些信息,但却不显示在正文中的时候。我们就可以使用一个全新的标签:标签。

标签叫做网页头部标签,我们用它来标记一些有关于网页的额外信息,比如说:这个网页内容的语种,网页的标题...

01.02 网页标题

我们想要为网页添加标题,除了之外,还要用到标签。<title>标签要写在<head>和</head>中间,这很好理解,因为网页头部除了标题之外还要添加更具体的额外信息,所以我们也必须使用更加具体的标记标签,就像下方代码一样!</p> <pre><code><html> <head> <title>My First Page Hello,World!

HTML代码

title

执行代码

02 HTML常用的标签

02.01 编辑示例

我们今天要尝试使用HTML更加复杂的功能,来实现更加复杂耐看的网页。比如:实现一个自己的小说阅读器?

我们将学习一些新的标签,来逐步实现下方百度阅读器的阅读效果!

百度阅读

百度阅读器的浏览效果

02.01 标题

我们使用

....

标签来标记文章中的标题,

代表最高层的大标题,

代表最后层的小标题。被这些标签标记的文本都会相应的加粗和增加字体大小。

h1....h6



    专属小说阅读器


    

第一辑 从百草园到三味书屋

《朝花夕拾》小引

HTML代码

h1&h2

执行代码

02.02 段落

我们使用

标签来表示文章的段落,使用了

标签后,段落与段落之间会自动生成间距!


    

第一辑 从百草园到三味书屋

《朝花夕拾》小引

我常想在纷扰中寻出一点闲静来,....

广州的天气热得真早,夕阳从...

HTML代码

段落

执行代码

03 引用样式

为了课程方便,以及更好的展示网页效果。我们先来简单的介绍样式,之前实现的网页都是黑白没有颜色,但实际上我们接触的网页都是色彩斑斓的!这就是网页的样式在起着作用,我们可以使用别人已经写好的样式,来帮助我们实现好看的网页,未来我们也会学习自己编辑样式!

知了已经写好了一个样式分享给大家,大家只要在标签内添加一行代码就可以了!


    My First Page
    

HTML代码

专属阅读器实例

执行代码

04 课程作业

找到一本你喜欢的小说,将第一章内容用今天学习的标签进行标记,并引用样式代码!看看,最后的效果吧!

你可能感兴趣的:(10分钟|零基础用HTML打造自己的专属阅读器!)