HTML + CSS 连载 | 02 - HTML 常用元素

一、HTML 常见元素

a 元素

在网页中我们经常需要点击链接跳转到另外一个网站上,这个链接一般都是通过 a 元素来表示的。在 HTML 中 <a> 元素可以自定义超链接,用户打开新的 URL。

<a> 标签有两个常见的属性,分别是 href Hypertext Reference 的简称,用于指定打开的 URL 地址,也可以是一个本地的地址。

另外一个属性是 target 属性,该属性指定如何显示连接的资源,该属性的值是固定的,常用得值有:

  • _self:默认值,在当前的窗口中打开新的页面
  • _blank:在一个新的窗口中打开 URL
  • _top:在整个窗口打开
  • _parent:在父窗口打开

点击第一个超链接:

会在当前的窗口中打开 URL 地址;

点击第二个超链接会弹出一个新的窗口打开 URL 地址;

点击第三个超链接会打开一个本地的 HTML 文件;

<a> 元素中的 href 的值除了可以为一个具体的 URL 地址,还可以是一个锚点连接,可以跳转到页面中指定的位置。

定义锚点链接首先需要在要跳转的元素上定义一个 id 属性,然后在锚点链接上也就是 <a> 元素上将 href 指定跳转元素的 id 值。

点击超链接就可以跳转到对应的位置上;

其实就是让指定位置的内容显示在窗口中;

当然除了将可以将文字作为一个超链接,也可以将一个图片作为超链接,即使用 <a> 标签来包裹一个 <img> 标签;

点击这个图片就可以跳转到稀土掘金主页

前面使用的 href 都是用来跳转网页的,但其实 href 还可以用作文件下载以及自动打开邮件发送窗口的功能;

打开页面:

点击下载超链接会自动下载链接指定的 ZIP 压缩包;

点击发送右键超链接会自动打开邮件发送界面;

iframe 元素

利用 iframe 元素可以在 HTML 文档中嵌入其他的 HTML,iframe 元素有一个 frameborder 属性用于规定是否显示边框,该属性只有两个值,1 表示显示边框;0 便是不显示边框;

打开页面会出现一个内嵌的窗口显示 src 属性的 URL 页面;

也可以通过添加 width 和 height 属性来设置窗口的大小;

重新打开,可以看到窗口的大小发生了变化;

iframe 与 a 元素 href 属性的 _parent 和 _top

前面 a 元素中我们只讲到了 href 属性的 _blank 值和默认的 _self 值,这里我们可以结合 iframe 来演示 a 元素 href 属性的 _parent 值和 _top 值。

首先在 01_HTML 常见元素 文件夹中创建一个 others 文件夹,在该文件夹中创建两个 HTML 文件,具体代码如下:

设置 a 元素的 target 属性为 _top

设置 iframe 元素的 frameborder 属性为 1:

再在 others 同级目录下创建一个 HTML 文件,并设置 iframe 元素的 frameborder 值为 1:

在浏览器中打开这个文件:

该文件包含两个边框,是一个多级嵌套文件,此时点击超链接可以看到在整个窗口中打开了 URL;

接着将 others 文件夹下文件中的 a 元素的 target 属性设置为 _parent,即只在父窗口中打开,点击超链接

div 元素和 span 元素

不管是 h 元素还是 a 元素或者 p 元素,这些元素都具有很强的语义性,即当我们需要一个标题时,就会想到使用 a 元素,当需要展示一个段落时就会想到使用 p 元素。

在最初没有 CSS 的时候,是通过添加各种各样的包含样式的 HTML 元素来实现网页的,比如 a 元素、p 元素等,随着这种包含样式的元素越来越多,导致无法搞清楚哪些是搭建 HTML 的基本元素,哪些是用于添加样式的元素。

在 HTML 中有两个特殊的元素 div 元素和 span 元素,这两个元素是不包含任何样式的,所以这两个元素可以用在任何地方,因此使用 div/span 的方式可以用来搭建 HTML 结构,使用 CSS 专门用来处理样式。

div 元素和 span 元素都是纯粹的 容器 元素,我们可以把他们理解成一个 盒子,专门用来包裹内容的,区别如下:

  • div 元素:多个 div 元素包裹的内容会在不同的行显示,也就是一块一块的,一个 div 元素就是一个整体,可以用于把网页分成几个独立的部分
  • span 元素:多个 span 元素包裹的内容会在同一行显示,与普通文本无差别,可以通过添加样式用来区别或者显示一些关键字

创建一个新的 HTML 文件,分别使用 div 元素、span 元素以及 p 元素搭建 HTML 结构,具体代码如下:

在浏览器中打开页面,可以看到 div 元素包裹的内容都是独立的一块内容,而 span 元素包裹的元素都是在一行显示的,并且与 p 元素一段一段的内容是不一样的

span 元素常用于强调内容,因此我们可以给第一个 span 元素添加一个 class 属性,并通过 CSS 选择器给这个 class 添加一些样式,用于强调或者区别文字内容,具体代码如下:

在浏览器中打开该页面,可以看到第一部分 span 内容明显与其他内容样式不一样,这就实现了关键内容的区分或者强调。

div 元素和 span 元素在以后 HTML 页面的开发中使用会非常频繁。

相关推荐
子兮曰9 小时前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰9 小时前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万9 小时前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝9 小时前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋10 小时前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁10 小时前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王952712 小时前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大12 小时前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师12 小时前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学13 小时前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端