HTML: 内联框架超链接链接分类文本标签列表

106 阅读 0 评论 70 点赞

我是靠谱客的博主认真百合，最近开发中收集的这篇文章主要介绍HTML: 内联框架超链接链接分类文本标签列表，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

## 内联框架

##### 1. 作用：使用内联框架可以引入一个外部的页面

##### 2. 语法

使用iframe 来创建一个内联框架

```
<iframe src="02.html"><iframe> 像图片一样需要指定引入的页面
```

##### 3. 属性：

**src** : 指向一个外部页面的路径，可以使用相对路径

**width**: 定义iframe的宽度，单位px

**height**:定义iframe 的高度, 单位px

**name**: 定义iframe的名称,

```
<iframe src="02.html" name="tom" width="300" height="200"><iframe>
```

注意：在现实开发中不推荐使用，因为内联框架中的内容不会被搜索引擎所检索

## 超链接

在HTML 标签中，a标签用于定义超链接

##### 1. 作用

使用超链接可以让我们从一个页面跳到另一个页面

##### 2. 语法

使用a 标签来创建一个超链接单词：anchor 锚

```
<a>我是一个超链接</a>
```

```
<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像</a>
```

##### 3. 属性

**href**：指向链接跳转的目标地址（常说的url），可以写一个相对路径也可以写一个完整的地址

```
<a href="https://www.baidu.com">百度</a>
```

```
<a href="03.html">我是一个超链接</a>
```

没访问过的显示蓝色，访问过的显示紫色

```
<a href="https://www.baidu122343.com">我是一个超链接</a>
```

问题：点击链接是在当前页面打开别的页面了，如果我想开启新的标签页打开我们页面

**target**: 指定打开链接的位置

取值：_blank _self framename

0. _self : 表示在当前窗口打开（默认值）写不写都一样
0. _blank: 表示在新的窗口打开链接
0. 可以设置一个内联框架的name 属性值，链接将会在指定的内联框架中打开

```
<iframe name="me"><iframe>
```

```
<a href="03.html" target="me">我是一个超链接</a>
```

表示 href 跳转的页面即将在 name为 me 的内联框架中打开

##### 4. 链接分类

0. 外部链接

```
<a href="https://www.baidu.com">我是一个超链接</a>
```

0. 内部链接即网站内部页面之间的相互链接，直接链接内部页面的名称即可

```
<a href="03.html">我是一个超链接</a>
```

0. 空链接当不确定链接目标时使用

```
<a href="#">我是空的超链接</a>
```

注意：如果将链接地址设置为#，则点击超链接以后，滚动条会自动跳转到当前页面的顶部

例：返回顶部

0. 下载链接如果href 里面地址是一个文件或者压缩包，会直接下载这个文件

```
<a href="img.zip">

下载压缩包支持IE、谷歌、火狐
下载图片必须添加H5新属性 download 且仅支持火狐谷歌不支持ie
并且以服务器形式打开页面
```

0. 网页元素链接

在网页中的各种网页元素，如：文本、图像、表格等都可以添加超链接

0. 发送电子邮件的超链接

```
<a href="mailto:abc@qq.com">联系我们</a>
```

注意：当点击这个超链接时，会默认打开计算机的默认电子邮件客户端，如果没有电子邮件客户端，就不会打开了。

0. 锚点链接：当我们点击链接，可以快速定位到当前页面的某个位置

0. 在链接文本的href 属性中，设置属性值为#名字的形式

```
<a href="#top">去top</a>
```

0. 找到目标位置标签，里面添加一个id属性=“对应名字”，相当于身份证，确保唯一性

```
<h3 id="top">我是top</h3>
```

**关于id 属性**

html 中有一个属性，

每一个元素都可以设置，该属性可以作为标签的唯一标识，这个属性叫id。就像我们的身份证号一样它的值是唯一的，因此id 的值在同一个页面中只能有一个，不能重复，例如：设置 id="bottom" bottom 就不能再使用了

练习

##### 1. 一首歌

使用标签 h1 hr h2 p br a img center

center 标签中的内容，会默认在页面中显示，我们可以将要居中的元素全部放到center中

```
<center></center>
```

注意：文字居中或者左右侧显示其实是属于行为不属于结构，所以这个标签不推荐使用，去手册可以查看。

## 文本标签

0. em 和 strong 标签

em标签用于表示一段内容的着重点

strong 标签用来表示一个内容的重要性

这两个标签可以单独使用，也可以一起使用

通常 em 显示为斜体，strong 显示为粗体，strong 比em 更强烈

```
<p>
<strong>警告：禁止接近电缆！</strong> 
它们<em>看起来</em>没危险，实际上可能会发生漏电！
</p>
```

0. i 和 b 标签

```
<i>我是斜体</i>
<b>我是加粗显示</b>
```

注意：这两个标签没有任何语义，所表现出来的样式就是它标签本身的单词意思，应该不用。

但：H5 规范中规定，对于不需要着重的内容而是单纯的加粗或者是斜体，就可以使用b 和 i 标签

0. small 标签

说明：在H5 中使用small 标签来表示一些细则一类的内容

```
<p>2004-2021 <small>北京抖音有限科技公司</small></p>
```

0. cite 标签

说明：使用cite标签可以指明对某内容的引用或者参考

例子：有书名号的书名歌名电影名等

```
<p>四大名著之一 <cite>《三国演义》</cite></p>
```

5. q 标签

说明：表示短的引用（行内引用）

```
<p>子曰：<q>温故而知新</q></p>
```

6. blockquote 标签

表示长引用 (块级引用)

```
<div>子曰：<blockquote>有朋自远方来，乐呵乐呵</blockquote></div>
```

7. sup 标签

设置上标

例子：2的平方百度百科对人名的解释

```
<p>2<sup>3</sup></p>
<p>周杰伦<sup><a href="#">[1]</a></sup></p>
```

7. sub 标签

设置下标化学元素

```
<p>2<sub>3</sub></p>
```

速记法则：圈在上边上标圈在下标下标

9. del 标签

表示一个删除的内容，会自动添加删除线

例子：价格的删除淘宝京东

```
<p>原价：<del>3244.57</del> 现价：1000</p>
```

10. ins标签

表示插入一个内容，会自动添加下划线

```
<p>专业：<ins>计算机科学与技术</ins></p>
```

10. pre 标签和 code 标签

pre 标签是一个预格式标签，会将代码中的格式保存，不会忽略多个空格

code 标签专门用来表示代码，仅仅是有语义，样式上并无差

实际中，一般会使用pre 和 code 来表示一段代码

在页面中直接编写一段代码

```
<pre>
   <code>
    window.οnlοad=function(){
      console.log("pre")
    }
   </code>
</pre>
```

## 列表

小米官网

列表最大的特点就是整齐整洁有序，它作为布局会更加的自由和方便

0. 什么是列表

列表就相当于去超市购物的那个购物清单

0. 列表分类

（1）无序列表如：百度新闻热点要闻

（2）有序列表如：百度新闻热门点击

（3）自定义列表如：百度新闻体育话题

0. 无序列表

在HTML标签中，使用ul 标签来创建一个无序列表

使用li 在ul 中创建一个又一个的列表项，一个li 就是一个列表项

```
<h2>喜欢的食物</h2>
<ul>
    <li>榴莲</li>
    <li>臭豆腐</li>
    <li>芒果</li>
</ul>
```

注意：

（1）无序列表的各个列表项之间没有顺序级别之分，是并列的

（2）ul 标签中只能嵌套li 标签，直接在ul 标签中输入其他标签或者文字是不允许的

（3）li 标签之间相当于一个容器，可以容纳所有元素

（4）无序列表会带有自己的样式属性，但在实际使用时，我们会使用css 来设置。

属性：

type : 修改无序列表的项目符号

可选值：disc 默认值实心的圆点

square 实心的方块

circle 空心的圆

**注意**：默认的项目符号我们一般不用

原因：不同浏览器显示的效果不统一，为了页面在不同浏览器上显示效果一致，所以一般我们不用默认的点

问题：默认值不用怎么去掉

使用css 设置样式给ul 设置 list-style:none

如果需要设置项目符号，则可以采用为li 设置背景图片的方式来设置

图片在各个浏览器显示一样，所以实现了效果统一

**典型例子**：新闻列表导航条

**注意**：ul li 都是块元素

0. 有序列表

即有排列顺序的列表，其各个列表项会按照一定的顺序排列定义

在HTML标签中，使用ol 标签来创建一个有序列表，列表排序默认以数字来显示，并使用li 标签定义列表项

和无序列表相似，区别在于不是使用ul 而是使用 ol

```
<h2>粉丝排行榜</h2>
<ol>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
</ol>
```

注意事项和无序列表一致。

type 可指定序号的类型

可选值: 默认值使用阿拉伯数字

a/A 采用小写或者大写字母作为序号

i / I 采用小写的或者大写的罗马数字作为序号

**注意**：ol 也是块元素

总结：列表之间可互相嵌套

可以在无序列表中放有序列表，也可在有序列表中放一个无序列表

```
<h3>菜谱</h3>
<ul>
    <li>
    鱼香肉丝
        <ol>
           <li>鸡肉<li>
           <li>胡萝卜<li>
           <li>木耳<li>
        <ol>
    </li>
    <li>
    宫保鸡丁
        <ul>
            <li>花生米</li>
            <li>鸡肉</li>
            <li>黄瓜</li>
        </ul>
    </li>
    <li>尖椒鸡蛋</li>
</ul>
```

0. 自定义列表

小米底部一个大哥领着一群小弟

常用于对于术语或名词进行解释和描述，定于列表前没有任何项目符号

在HTML标签中，使用dl 标签来创建一个定义列表

dl 中有两个子标签 dt：被定义的内容 dd: 对定义内容的描述

```
<dl>
   <dt>柠檬精</dt>
   <dd>别人撒狗粮、分享爱情里的甜蜜的时候，" 我酸了 "</dd>
   <dd>炫耀某些别人没有或很难获取而自己已经拥有的东西时，都可以用" 我柠檬了 "来自嘲 </dd>
   <dt>真香</dt>
   <dd>简单来说就是打脸的意思，听说没有一个人能逃过真香定律喔。</dd>
</dl>

dd的内容是围绕dt的
```

注意:

(1) dl 标签里只能包含 dt 和 dd

(2) dt 和 dd 个数没有限制，一般是一个 dt 对应多个 dd

同样 dl , ul , ol 之间可互相嵌套

总结：

| 标签名 | 定义 | 说明 |
| --- | ----- | ---------------------------------- |
| ul | 无序列表 | 里面只能包含li ，没有顺序，使用较多。li 标签里可以放任何元素 |
| ol | 有序列表 | 里面只能包含li ，有顺序，使用相对较少。li 标签里可以放任何元素 |
| dl | 自定义列表 | 里面只能包含dt,dd ，dt 和dd 标签里可以放任何元素 |

学习目标：

0. 学会什么时候用无序列表，什么时候用自定义列表
0. 无序列表和自定义列表的写法