常用 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>
h1
到 h6
级别依次递减,
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.htmlprac/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>
类似用于吸引读者注意的元素还有 b
、 em
、 mark
,
浏览器通常把 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
前面学过的元素 p
、 span
, 它们 内部 的文本里面
-
包含的换行,展示时并不能显示下一行 。
-
包含连续的空格,只能显示为一个空格,
比如
<h1>今日
新 闻</h1>
<p>
大家 好
今天的 新闻有:
<span style='color:green'>白月黑羽 日活用户突破3万</span>
</p>
可以使用
强行换行, 空格可以使用
如下所示,
<h1>今日<br>
新 闻</h1>
<p>
大家 好<br>
今天的 新闻有: <br><br>
<span style='color:green'>白月黑羽 日活用户突破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>