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 页面的开发中使用会非常频繁。

相关推荐
m0_748247551 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255022 小时前
前端常用算法集合
前端·算法
真的很上进2 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203982 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2342 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1233 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~4 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语4 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport4 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg4 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全