专栏首页all web technology用HTML写一篇简单的日记
原创

用HTML写一篇简单的日记

在这篇文章之前,已经初步的了解了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的标签就是从大到小的标签顺序,一般来说这个标签的选择,具体都是看需求的,可能你以后会有这个问题,那就是这个标签有没有用,现在的我只能告诉你,看实际情况而定。

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

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

可能有些人会说,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 />的区别只是加/符合W3C的标准,仅此而已。

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

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

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

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

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

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

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

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

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;的效果

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

<!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. 从零开始,勇往直前!

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

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

相关文章

  • 补充拓展基础标签

    通过前面的章节,我们学会了怎么写一个简单的日记,以及写日记需要用到的标签和转义字符,这里我稍作补充,用的较少的标签以及剩下的转义字符(有的说法是符号标签),我就...

    守护最温柔的金木
  • H5行业介绍

    HTML5是HTML网页标准的5.0版本,5.0版本相对于4.0版本新增了很多技术内容,这一次的变化是比较大的,甚至是革命性的,它的诞生带动了很多技术领域的发展...

    守护最温柔的金木
  • 模仿百度新闻的一部分

    我们先来复习一下前面的知识,一些常见的标签,和一些不太常用到的标签,以及img标签的一些知识点,都是很重要的基础,千万不能忘记。

    守护最温柔的金木
  • 【融职培训】Web前端学习 第2章 网页重构2 常用的html标签

    上一节我们已经了解了html和css的基本概念,本节通过上一节的一个例子来说说HTML的语法.

    学习猿地
  • 学术资讯 | 优Tech分享-To B业务中的图像多标签识别

    现实生活中,人们通常会使用手机记录生活,拍摄并保存自己的所见所闻。因此,对相册中的照片场景及相关进行识别分类,帮助人们更快速整理照片成了一种不可或缺的需求。

    优图实验室
  • 前端基础-HTML

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    cwl_java
  • HTML中的容器标签

    什么是容器标签?在HTML开发中我们常常会使用一类标签作为容器放置一些内容,我们把这类标签称之为容器标签,可以作为容器标签的包括列表标签、表格标签、框架标签、布...

    一墨编程学习
  • vim-tabe多标签切换

    原文链接:https://www.cnblogs.com/liqiu/archive/2013/03/26/29819...

    ccf19881030
  • 001.html常用的基础知识点

    主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

    qubianzhong
  • 如何有效推进百万标签库的治理?

    在大多数公司,成千上万的标签虽然在某种程度上是数据服务能力的象征,但到最后往往成为了一种负担,只管杀不管埋的现象太普遍了!

    木东居士

扫码关注云+社区

领取腾讯云代金券