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

相关推荐
大道归简1 小时前
案例:自动化获取Web页面小说(没钱修什么仙)——selenium
前端·selenium·自动化
Deepsleep.6 小时前
东田数码科技前端面经
前端·科技·面试
涵信8 小时前
第十八节:开放性问题-Vue生态未来趋势
前端·vue.js·devops
牧杉-惊蛰8 小时前
css 数字从0开始增加的动画效果
前端·javascript·css
孤灯淡茶8 小时前
Fiori学习专题十五:Nested Views
前端·javascript·学习
green_pine_8 小时前
CSS学习笔记14——移动端相关知识(rem,媒体查询,less)
前端·css·笔记·学习·less
Monly218 小时前
Vue:el-table-tree懒加载数据
前端·javascript·vue.js
进取星辰9 小时前
16、路由守卫:设置魔法结界——React 19 React Router
前端·javascript·react.js
清羽_ls9 小时前
cURL 入门:10 分钟学会用命令行发 HTTP 请求
前端·curl·命令行工具
jjw_zyfx9 小时前
vue3 css模拟语音通话不同语音、正在加载等的效果
前端·css