常用 HTML元素 - 1


先给大家介绍一些常见的 html 元素,先让大家对 不同的 html 元素有不同的作用, 先有个认识。

后面教程还有其它 常用 html 元素的介绍

标题 h1-h6

很多 html网页 是展示文章信息的。

既然是文章,往往就需要有各级标题。

html 可以指定6个级别的标题(heading)


<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

h1h6 级别依次递减,

h1 定义最大的标题, h6 定义最小的标题。

显示标题时,浏览器会在该标题上下空出一段距离。

段落 p

html中一段文字,比如一篇文章中的一个自然段,通常放在一个 <p> 标签 (Paragraph)中。

比如:


<p>

  目前市场上对API接口做性能测试工具有 Jmeter、LoadRunner、Locust等,
  我觉得都不太好用。

  它们要么性能不够强,要么不够灵活。

</p>


<p>
  所以我自己开发了这款性能测试工具:    HyLoad  ,
  中文名叫   黑羽压测  。

</p>

浏览器显示 段落 之间 会有一定的间隔

一块内容 span

在一个段落中,有时我们需要 对 一小段内容(比如一个名词、一个短语) 做特殊显示,比如特殊的颜色。

这时,可以使用 span 元素

比如


<p>
  所以我自己开发了这款性能测试工具: 
  <span style='color: blue; '>HyLoad</span>  ,
  中文名叫 <span style='color: green; font-weight: bold;'>黑羽压测</span>  。
</p>


span 里面的内容不会新开一行显示,而是显示在上级元素的所在行,这种特性称之为 inline ,后面会讲到。

所以,span 常见于 p 中, 有时也会出现在其它元素里面,用来保证这块内容 和前后内容在一行显示。

换行 br

html文档中的直接换行, 是不会在浏览器呈现结果页面中产生新行的。

如果需要换行,可以使用 br 元素,

写法可以是 <br /> 或者 <br>


br元素 的作用是:它后面的任何内容都从下一行开始

比如:


<p>

  目前市场上对API接口做性能测试工具有 Jmeter、LoadRunner、Locust等,
  我觉得都不太好用。<br>

  它们要么性能不够强,要么不够灵活。

</p>

<br><br>

<p>
  所以我自己开发了这款性能测试工具:    HyLoad  ,<br>
  中文名叫   黑羽压测  。
</p>

你可以尝试一下,去掉 <br> ,对比一下显示效果

专题切换 hr

当一个专题段落描述完毕,要进入下一个专题段落,可以使用 hr 元素,用来表示专题切换。

hr 通常会被浏览器显示为 一个水平横线, 分开前后的内容

比如


<p>

5 + 8 是一个加法表达式,被 Python解释器 执行后,会产生一个新的整数 对象 13。

加号前后 可以有些空格, 也可以没有空格,像这样 5+8

</p>

<hr>

<p>
 999 - 111 是一个减法表达式,被Python解释器执行后,会产生一个新的整数对象 888
</p>

超链接 a

html 网页最方便的功能之一就是:可以通过 超链接 方便的跳转到其它网页地址 或者本网页的其它地方。

超链接是通过 标签 a (anchor锚点)实现的,链接到哪里由 属性 href 指定

比如:

<p>
  <a href='heading.html'>第1章:标题</a>
  <br><br>

  <a href='prac/p1.html'>去做其它练习</a>
  <br><br>
  
  <a href='../python/intro.html'>Python教程</a>
  <br><br>
  
  <a href='/index.html'>返回首页</a>
  <br><br>

  <a href='https://www.bilibili.com/video/BV1GJ411q7io/' target='_blank'>点击这里</a>
  了解白月黑羽和学员的交流
  <br><br>

</p>

href 属性的值就是链接的目标路径,可以使用

  • 相对路径

    比如:

    heading.html , 就是当前html文档同一级目录下 的 heading.html

    prac/p1.html , 就是当前html文档同一级目录下 的 子目录 prac 里面的 p1.html

    ../python/intro.html , 就是当前html文档上级目录下 的 子目录 python 里面的 intro.html

  • 全路径

    比如:

    /heading.html ,就是网站根目录下面的 heading.html ,最前面的 斜杆 表示网站根目录

    再比如 /tut/python/intro.html

  • 带域名的全路径

    比如: https://www.bilibili.com/video/BV1GJ411q7io/

    这样就可以跳转到其它网站了


    如果其它网站和本网站使用同样的协议,可以简写为 //www.bilibili.com/video/BV1GJ411q7io/


a元素的属性 target 的值 指定了在哪里打开新的链接

常见的是

  • _self (缺省)

就在当前窗口打开新的链接,原来显示的内容会被替代。

这是缺省情况,没有target属性就是指 _self

  • _blank

新打开一个窗口,显示链接网址的内容



如果链接 href 的值以 # 开头,是表示 链接到本网页的一个指定位置上,

如下所示

<body>
  <a href='#info'>查看学员就业信息</a>

  <a href='heading.html'>第1章:标题</a>

  <a href='prac/p1.html'>去做其它练习</a>
  
  <br><br>

  <a href='https://www.bilibili.com/video/BV1GJ411q7io/' target='_blank'>点击这里</a>
  了解白月黑羽和学员的交流

  <br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br>
  <p>中间的一些其它信息</p>
  <br><br>
  <br><br>
  <h3 id='info'>学员就业信息</h3>
  <p>张三: 跳槽自动化测试</p>
  <p>李四: 跳槽测试开发</p>
  <p>王五: 跳槽前端开发</p>
  
</body>

第一个链接 href 里面的 #info 表示链接到本网页 一个 id值为 info 的元素所在的位置。

点击这个链接,浏览器就会把这个 链接目标元素 显示在当前窗口的可见位置(尽量显示在开头)。

强调 strong b em mark

<strong> 元素用于“非常重要”的内容,表示重要性。

比如:警告语句,或者特别需要注意的部分。

通常,strong 元素使用粗体字重呈现。

比如:


<body>
 
  <p>
  最重要的规则,无论他怎么哭,无论他怎么乞求,你都不能忘记的规则:
  
  <strong>永远不要在午夜喂食</strong>

  </p>
  
</body>



类似用于吸引读者注意的元素还有 bemmark

浏览器通常把 b 也是展示为粗体, em展示为斜体, mark展示为高亮

都是为了突出它们和周边内容的不同,虽然官方文档描述它们各自有其不同的使用场景,我也不是很分得清,往往根据喜好挑选使用。


<body>

  <p>
  最重要的规则,<em>无论他怎么哭,无论他怎么乞求</em>,你都不能忘记的<mark>规则</mark>是:
  
  <b>永远不要在午夜喂食</b>

  </p>
  
</body>

图片 img

img 标签用于在网页中嵌入图片。

如下所示:


<img src="https://cdn2.byhy.net/imgs/logo01.png"
     alt="白月黑羽logo">


目前(2022年)主流浏览器支持的图片格式有:apng、avif、gif、jpeg、png、svg、webp


img标签 常见的属性有:

  • src

指定要嵌入的图像的url路径 ,可以使用相对路径、全路径、带域名的全路径。

路径概念和 a标签的 href属性 一致。

  • alt

指定图像的替代文本,如果指定图像不能显示出来(网络原因或者图像资源不存在), 显示alt属性指定的文本

  • width、height

width、height 分别指定显示图像的宽度和高度,单位是像素点。

如果 width、height 只指定其中一个,浏览器会自动进行宽度和高度的等比例缩放。

如果 width、height 全部指定, 则按要求进行宽度高度 各自 缩放。

比如:


<img src="https://cdn2.byhy.net/imgs/logo01.png"
     alt="白月黑羽logo" 
     width='40'>

预格式化 pre

前面学过的元素 pspan , 它们 内部 的文本里面

  • 包含的换行,展示时并不能显示下一行 。

  • 包含连续的空格,只能显示为一个空格,

比如


<h1>今日
新     闻</h1>

<p>  
   大家      好
   今天的   新闻有: 

    <span style='color:green'>白月黑羽   日活用户突破3万</span> 
  
</p>


可以使用
强行换行, 空格可以使用 &nbsp;

如下所示,


<h1>今日<br>
新&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;闻</h1>

<p>  
   大家&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好<br>
   今天的   新闻有: <br><br>

    <span style='color:green'>白月黑羽&nbsp;&nbsp;&nbsp;日活用户突破3万</span> 
 
</p>

但是这样毕竟还是太麻烦了



我们可以使用 pre 元素

pre 元素 完全按照 HTML 文件中所写的方式呈现的文本。


<pre>
  L          TE
    A       A
      C    V
       R A
       DOU
       LOU
      REUSE
      QUE TU
      PORTES
    ET QUI T'
    ORNE O CI
     VILISÉ
    OTE-  TU VEUX
     LA    BIEN
    SI      RESPI
            RER       - Apollinaire
</pre>