首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >用HTML写一篇简单的日记

用HTML写一篇简单的日记

原创
作者头像
守护最温柔的金木
修改2020-07-08 10:49:51
1.3K0
修改2020-07-08 10:49:51
举报
文章被收录于专栏:all web technologyall web technology

在这篇文章之前,已经初步的了解了HTML是怎么创建了,接下来,我们要用创建的文件去写我们进入前端的第一个demo,当然了,如果你忘记了,我之前的文章里也有详细的步骤。

HTML里面最基础的就是标签的认知,很多标签的含义是不同的,标签分为单标签和双标签,像是之前文章里说道的<body></body>这种有开始和闭合的形式的标签,就是双标签。而像<hr>这种的就是单标签,不难看出来因为它就只有一个,至于<hr>代表着什么,我们下面再说,先了解一下标签的种类。

正因为标签有很多,本文我就先说说最简单的,也是最基础的标签的使用,当然了,是我觉得比较基础的,也是我们写的这个demo里能用的到的标签。

一个完整的html网页,有网页的头部,有网页的身体,<title></title>标签,字面意思上理解就是标题,我们可以看下面的代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>

此时title标签的里面包裹着Doucment,它的中文翻译是文件的意思,你暂且就理解为这是默认的,你不改的话,网页的标题头就是这个名字,也就是下面的样子

默认的网页标题
默认的网页标题

那么,真的做网页的话,那肯定是要改的,不然都不知道这个网页叫什么,中文英文都是无所谓的,你想哪国语言都可以,所以这里我们就改为:

<title>我的日记</title>
修改完之后的网页标题
修改完之后的网页标题

可以明显的看到,修改完之后的网页的标题变为了我们刚刚改成的“日记”,所以总结下来就是title标签的作用就是对网页的整体说明。

接下来,我们思考一下,写一篇日记,我们需要哪些部分来构成,首先肯定要去写个文章的标题吧,所以这里我们就要用到所谓的标题标签,有意思的是标题标签严格意义上来说有六个,分别是<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>。这个标签里面也是可以写东西的,任意语言都可,我们直接举个例子来看下效果:

<h1>你是谁</h1>
<h2>你是谁</h2>
<h3>你是谁</h3>
<h4>你是谁</h4>
<h5>你是谁</h5>
<h6>你是谁</h6>

我们先不运行代码分析一下,区别就在与数字,由小到大排列的,我们不妨猜测一下,是不是等会这个展示出来的标题的大小是不是也是由大到小呢?请看下面的页面展示

h1到h6的标签展示
h1到h6的标签展示

结果显而易见了,和我们之前的猜想是一样的,所以我们可以总结出这个h1到h6的标签就是从大到小的标签顺序,一般来说这个标签的选择,具体都是看需求的,可能你以后会有这个问题,那就是这个标签有没有用,现在的我只能告诉你,看实际情况而定。

解决完标题,下面就是我们会写上我们是哪一天写的日记,也就是时间,那么这里我想让时间显得不这么单调,来个斜体倾斜的效果,可以怎么实现呢?这里就要用到i标签了,请看下面代码,i标签里同样可以放入任意的语言。

<i>这里的字是斜的</i>
i标签效果
i标签效果

可能有些人会说,em标签不是也可以使文字倾斜吗,我们同样来看下em标签的代码:

<em>这里的字是斜的</em>
em标签的效果
em标签的效果

不难看出来,em标签和i标签都能使文字倾斜,那它们就是一样的吗,严格意义上来说肯定是不一样的,但是就我们来说看不出来的,如果是写SEO的浏览器引擎的人是可以发现的,这个更有利于写SEO的人。有些面试题里会问你em标签和i标签的区别是什么?i标签的作用:仅仅是为了让字体显示斜体,对于SEO没什么作用。em标签的作用:不仅可以让字体显示斜体,而且可以加强语气,告诉搜索引擎这里是重要的。

写完时间之后,就要进入日记的正文部分了,此时我想用一根线分割正文和标题,这里我们就要用到hr标签,我们称之为水平分割线,注意hr标签是个单标签,请看下面的代码:

<h1>7月5日 记录美好的一天</h1>
  <i>2020年7月5日</i>
  <hr>
hr标签的效果
hr标签的效果

我们可以看到在时间的下面有一根水平的分割线,这就是hr标签所展示的效果,你写成<hr />也可以,<hr>和<hr />的区别只是加/符合W3C的标准,仅此而已。

终于,我们要进入正文了,这里我们就要用到段落标签,也就是p标签,不难理解,你平时写小作文,也要分段落,差不多字面理解就是这个意思,请看下面的代码:

  <p>
    今天上班没迟到
  </p>
  <p>
    有点开心
  </p>
  <p>
    终于可以不用扣钱了,嘤嘤嘤
  </p>
p标签的效果
p标签的效果

我们会发现,我们写了三次p标签,但是并没有说是连在一起的形式,而是进行了分段,这就是段落标签的作用了。

那么,如果我想在p标签的里面进行换行,该怎么办呢?这里就要用到我们的换行标签br了,注意br是单标签,请看下面的代码:

 <p>
    今天上班没迟到
  </p>
  <p>
    有点开心
  </p>
  <p>
    终于可以不用扣钱了,<br>嘤嘤嘤
  </p>
br标签的效果
br标签的效果

段落写到这里就结束了吗,并没有,我想让最后一行的字有加粗的效果,该如何实现?b标签就很完美的解决了我们的这个需求,请看代码:

<p>
    <b>给个赞吧</b><br>谢谢大家的支持
</p>
b标签的效果
b标签的效果

这里的话,或许也有人会问strong标签效果不是和b标签是一样的吗,同样是加粗呀,我们先来比较一下,请看代码:

strong标签的效果
strong标签的效果

strong标签的效果和b标签的效果都是让文字变粗,那么肯定是我上面说的em标签和i标签一样,肯定是不一样的,区别是什么呢?注意这也是一道面试题。b标签是一个实体标签,它所包围的字符将被设为bold(粗体), 而strong标签是一个逻辑标签,它的作用是加强字符的语气,一般来说,加强字符的语气是通过将字符变为bold(粗体)来实现的。“强调”可以用加粗来强调,也可以用其它方式来强调,比如下划线,比如字体加大,比如红色,等等,可以通过css来改变 strong的具体表现。(css具体是什么,不明白的小伙伴没事,我们还没讲到这个概念,知道一下就好了。)但是b标签本身不具备HTML语义,如果精通HTML的人很快就会知道这个标签在HTML代码里面只有加粗的意思。Strong标签在HTML语义为强调,表示语气上的强调、加重。从web标准上来说,不提倡使用B标签,不过Google的matt曾经说b标签更具有微小的优势,虽然后来修正为和strong标签优势一样。HTML标签的定义,并不是随心所欲的,本身具有一定的语义。从这方面来看, H1等标签主要是在标题上的使用,而Strong更注重于内容上的应用,比如关键词的标明等。当然这也不一定是固定的,如有些网站在小标题上也用strong标签来强调,也未尝不可。但应该注意的是:过度使用strong标签也同样有搜索引擎处罚的可能。strong与b标签两者的定义、语义及使用情况来看,strong已经慢慢替代了b标签。从web标准来看,这也是正常现象。谷歌也慢慢加大了strong的权重。我想搜索引擎更有可能赋予strong标签较大的权重,大家完全可以做下SEO实验,做两个内容一样的页面,通过B标签和strong标签来对标题或者关键词进行强调,等待收录之后,在各大搜索引擎搜索这个关键词,看那个标签包裹的页面排名更具有优先级别。 也确实有可能两个标签的权重完全一样。

本来想简单的介绍一下strong标签和b标签的区别的,结果说了一大堆拓展的内容,反正目前的你只需要知道,strong标签和b标签都是使文字加粗,不同的是strong标签的加粗用来强调,而b标签的只是为了加粗而加粗,就是这么简单,上面吧啦吧啦说的这些话,有兴趣的小伙伴可以去了解了解。面试的时候,你就这么总结的说,就够了。

那么最后,我再补充一个,如果我们想要空格怎么办?肯定会有人说,空格还不简单,直接写成下面这样的不就好了:

 <h1>7月5日 记录美好的一天</h1>

是的,如果这里我们空一格,代码运行出来的效果,确实是空了一个字的空间,没毛病。

按了一个空格的效果
按了一个空格的效果

但是,如果我想空好几个字,我一直按空格还会是这个效果吗?举个例子,我想控四个字的空间:

<h1>7月5日    记录美好的一天</h1>
按了四个空格的效果
按了四个空格的效果

很明显,四个空格的效果和一个空格的效果是一样的,我们再按八个,十个效果都是一样的,所以这里我们就要用到&nbsp;,在前端中被称为是转义字符,注意啊不是标签了,每一个&nbsp;就代表着一个空格,所以,我们要达到之前我要的四个空格的效果,我们只需要写上四个&nbsp;就可以了,提醒一下,后面的分号不要忘了,有很多粗心的小伙伴会忘记。

<h1>7月5日&nbsp;&nbsp;&nbsp;&nbsp;记录美好的一天</h1>
&nbsp;的效果
&nbsp;的效果

那么到这里,本章该介绍的基础的标签和转义字符都讲完了,我们来看看成品的日记代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>日记</title>
</head>

<body>
  <h1>7月5日 记录美好的一天</h1>
  <i>2020年7月5日</i>
  <hr />
  <p>
    今天上班没迟到
  </p>
  <p>
    有点开心
  </p>
  <p>
    终于可以不用扣钱了,<br>嘤嘤嘤
  </p>
  <p>
    <b>给个赞吧</b>谢谢大家的支持
  </p>

</body>

</html>
完成的日记效果
完成的日记效果

如果你觉得我这个例子写的还不够完美,自己可以动手练习一下,就用到我讲的这些非常常见的标签和转义字符,刚学的时候,多多练习是最重要的。

我们来总结一下,本章我们说的这些知识点:

  1. <h1>...</h1> 1级标签
  2. <h2>...</h2> 2级标签
  3. <h3>...</h3> 3级标签
  4. <h4>...</h4> 4级标签
  5. <h5>...</h5> 5级标签
  6. <h6>...</h6> 6级标签
  7. <p>...</p> 段落标签,文字会独占一行
  8. <i>...</i> 使文字倾斜
  9. <b>...</b> 使文字加粗
  10. <br> 换行
  11. <hr> 水平线
  12. &nbsp; 空格

那么本文的最后,感谢大家看到最后,送大家一句话,Zero in your target,and go for it. 从零开始,勇往直前!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
作者已关闭评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
腾讯云代码分析
腾讯云代码分析(内部代号CodeDog)是集众多代码分析工具的云原生、分布式、高性能的代码综合分析跟踪管理平台,其主要功能是持续跟踪分析代码,观测项目代码质量,支撑团队传承代码文化。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档