跳到主要内容

WTF HTML极简教程: 2. Element

WTF HTML教程,帮助新人快速入门HTML。

推特@WTFAcademy_@0xAA_Science

WTF Academy社群: 官网 wtf.academy | WTF Solidity教程 | discord | 微信群申请

所有代码和教程开源在github: github.com/WTFAcademy/WTF-HTML


在我们了解了HTML的基础概念后,我们将深入讨论HTML的元素。

元素的属性

HTML 元素可以拥有属性(Attribute),它们提供了有关元素的更多信息,或者定义了元素的某些行为。属性总是在开始标签中定义,常常使用 "属性名=属性值" 的形式出现。例如,链接(a)元素可以使用 href 属性指定链接的目标地址:

<a href="https://www.example.com">Visit our website</a>

浏览器中效果:

Visit our website

在上述代码中,a 元素的 href 属性的值为 "https://www.example.com",这意味着当点击该链接时,浏览器将导航到该 URL。

属性应该包含:

  1. 在属性与元素名称(或上一个属性,如果有超过一个属性的话)之间的空格符。
  2. 属性的名称,并接上一个等号。
  3. 由引号所包围的属性值。

常用的属性:

  1. id:为元素提供一个唯一标识符。
  2. class:为元素提供一个或多个类名,不同的元素可以添加相同的类名。
  3. style:为元素提供内联样式。

嵌套元素

HTML 元素可以嵌套在其他元素中。这意味着你可以在一个元素内部放置另一个或多个元素,以创建更复杂的内容结构。例如,你可能会在一个段落元素内部包含一个或多个链接元素:

<p>My cat is <strong>very</strong> grumpy.</p>

浏览器中效果:

My cat is very grumpy.

必须保证元素嵌套次序正确:本例首先使用<p>标签,然后是<strong>标签,因此要先结束<strong>标签,最后再结束<p>标签。这样是不对的:

<p>My cat is <strong>very grumpy.</p></strong>

因此元素必须正确地开始和结束,才能清楚地显示出正确的嵌套层次。否则浏览器就得自己猜测,虽然它会竭尽全力,但很大程度不会给你期望的结果。所以一定要避免!

空元素

HTML 中有一些元素没有内容,也不需要结束标签,这些被称为空元素(Empty Elements)。比如 <br> 标签插入一个换行,<img> 标签用来插入图片。

<br>
<img src="image.jpg" alt="My Image">

块级元素

块级元素(Block-level Elements)在页面中以块的形式显示,常常用作结构元素。常见的块级元素有:<div><p><h1>-<h6><ul> 等。块级元素的特点是:

  1. 独占一行
  2. 元素的宽高可以设置
  3. 默认宽度是它父容器的100%
  4. 与其他块级元素上下堆叠
<div>我是div</div>
<div>我也是div</div>

浏览器中效果:

我是div
我也是div

行内元素

行内元素(Inline Elements)不会开始新的一行,它们在文本中流动,仅占据它们包含的内容所需要的宽度。常见的行内元素有:<span><a><img> 等。行内元素的特点是:

  1. 可以与相邻的行内元素排列在同一行
  2. 元素的宽高不可设置
  3. 元素宽度会被内容撑开
<span>我是span</span>
<span>我也是span</span>

浏览器中效果:

我是span我也是span

总结

这一讲我们具体分析了HTML中的元素,包括元素的属性、嵌套元素、空元素、块级元素和行内元素。