用HTML写一篇简单的日记

2020-07-08 10:49:51 浏览数 (1)

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

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

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

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

代码语言：javascript复制
<!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，它的中文翻译是文件的意思，你暂且就理解为这是默认的，你不改的话，网页的标题头就是这个名字，也就是下面的样子

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

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

代码语言：javascript复制
<title>我的日记</title>
修改完之后的网页标题修改完之后的网页标题

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

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

代码语言：javascript复制
<h1>你是谁</h1>
<h2>你是谁</h2>
<h3>你是谁</h3>
<h4>你是谁</h4>
<h5>你是谁</h5>
<h6>你是谁</h6>

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

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

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

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

代码语言：javascript复制
<i>这里的字是斜的</i>
i标签效果i标签效果

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

代码语言：javascript复制
<em>这里的字是斜的</em>
em标签的效果em标签的效果

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

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

代码语言：javascript复制
<h1>7月5日 记录美好的一天</h1>
  <i>2020年7月5日</i>
  <hr>
hr标签的效果hr标签的效果

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

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

代码语言：javascript复制
  <p>
    今天上班没迟到
  </p>
  <p>
    有点开心
  </p>
  <p>
    终于可以不用扣钱了,嘤嘤嘤
  </p>
p标签的效果p标签的效果

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

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

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

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

代码语言：javascript复制
<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标签的只是为了加粗而加粗，就是这么简单，上面吧啦吧啦说的这些话，有兴趣的小伙伴可以去了解了解。面试的时候，你就这么总结的说，就够了。

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

代码语言：javascript复制
 <h1>7月5日 记录美好的一天</h1>

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

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

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

代码语言：javascript复制
<h1>7月5日    记录美好的一天</h1>
按了四个空格的效果按了四个空格的效果

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

代码语言：javascript复制
<h1>7月5日&nbsp;&nbsp;&nbsp;&nbsp;记录美好的一天</h1>
&nbsp;的效果&nbsp;的效果

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

代码语言：javascript复制
<!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. 从零开始，勇往直前！

html seo html5

0 人点赞