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