HTML学习归纳1

原创已于 2024-04-01 22:38:37 修改 · 624 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #html #前端

于 2024-03-27 22:10:01 首次发布

本文介绍了HTML初学者的基本知识点，包括注释、标题标签（H1-H6）、段落标签（p）、转行标签（br）、div和span的区别、插入图片的标签、链接标签以及锚点链接的使用。作者通过实例展示了如何在实践中应用这些HTML基础知识。

想通过这样的方式，记录自己的学习过程。将近期学习到的一些内容，不定期的做一些总结，方便有相同经历的人一起学习交流。

首先，在初步了解学习了HTML以后，先明白这是一门标签语言，逻辑架构上应该说是十分清晰的，我们需要的是掌握不同标签的用法。

一、注释

这里可以人为去设置一些快捷键，方便自己的开发。

二、标题标签

一般用于文字的排版 <h1> - <h6>，1最高，6最低。标题的内容会单独占一行。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

三、段落标签

顾名思义，用于放一段内容的标签。因为需要盛放一段内容，所以可以把这个想象成一个容器。实现最基本的显示文本的功能。

<p>《西游记》是中国古代一部浪漫主义长篇神魔小说，主要描写了唐僧、孙悟空、猪八戒猪悟能、沙僧沙悟净师徒四人去西天取经，历经九九八十一难最后终于取得真经的故事。《西游记》内容分为三大部分：第一部分（一到七回）介绍孙悟空的神通广大，大闹天宫；第二部分（八到十二回）叙三藏取经的缘由；第三部分（十三到一百回）是全书故事的主体，写悟空等降伏妖魔，最终到达西天取回真经。《西游记》书中孙悟空这个形象，以其鲜明的个性特征，在中国文学史上立起了一座不朽的艺术丰碑。</p>

在VS运行后，可以看到显示出一个片段的内容。

四、转行标签

HTML代码中你虽然写了回车，但是不会转到下一行。而是需要我们在需要换行的位置加<br>标签。

<p>《西游记》是中国古代一部浪漫主义长篇神魔小说，主要描写了唐僧、孙悟空、猪八戒猪悟能、沙僧沙悟净师徒四人去西天取经，历经九九八十一难最后终于取得真经的故事。<br>《西游记》内容分为三大部分：第一部分（一到七回）介绍孙悟空的神通广大，大闹天宫；第二部分（八到十二回）叙三藏取经的缘由；第三部分（十三到一百回）是全书故事的主体，写悟空等降伏妖魔，最终到达西天取回真经。《西游记》书中孙悟空这个形象，以其鲜明的个性特征，在中国文学史上立起了一座不朽的艺术丰碑。</p>

用刚才段落符号的内容加以更改。即使你的文中没有回车，这里也依旧实现了换行。

五、div和span标签

div是一个大盒子，独占一行。而span是一个个小的盒子，可以用来布置div。

  <div>请选择你的英雄：
    <span>
      张飞
    </span>
    <span>
      关羽
    </span>
    <span>
      夏侯惇
    </span>
    <span>
      貂蝉
    </span>
  </div>

这里div是一个大盒子，用于盛放所有的英雄。

六、插入图片的标签

<img src="路径">这是使用方法，这里需要注意的是路径的表示方法，/代表下一层，../代表上一层。或者给一个网络地址下的图片信息。

七、链接标签

链接使用<a herf="">的形式呈现。

<a href="#">这是空连接</a><br>
<a href="ttps://www.baidu.com/" target="_blank">百度一下</a>

#代表空连接，用于预留一个链接位置。target 用于设置重新打开一个界面，还是在当前页面打开。

使用链接还可以实现定位功能。一般称之为锚点链接。

<h3 id="top">锚点链接,点击跳转同一个页面的某个位置</h3>
  <a href="#one">定位第1季</a>
  <a href="#two">定位第2季</a>
  <a href="#three">定位第3季</a>
  <a href="#our">定位第4季</a>
  <a href="#five">定位第5季</a>
  <a href="#six">定位第6季</a>

  <h4 id="one">第一季</h4>
  1111111111111111111111111111111111111111
  <h4 id="two">第二季</h4>
  222222222222222222222222222222222
  <h4 id="three">第三季</h4>
  3333333333333333333333333333333
  <h4 id="four">第四季</h4>
  444444444444444444444444444444
  <h4 id="five">第五季</h4>
  555555555555555555555555555555
  <h4 id="six">第六季</h4>
  6666666666666666666666666666666666<br />

  <a href="#top"> 返回顶部</a><br />