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. 无序列表和自定义列表的写法

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

HTML-基本语法、常用标签、列表、超链接、超链接定义锚点、表格、表单和内联框架
HTML基本语法  <!DOCTYPE html> <!-- <h ...
day11学习前端HTML网页基本结构、标签及超链接的使用、内联框架
前端  前端:三大技术 HTML:负责显示页面内容(文字.按钮.输入框等) CSS:负责页面内容的布局和样式 JavaScript:负责实现功能. 前 ...
『HTMLCSS』内联框架和超链接
本片博客主要介绍内联框架和超链接相关的一些知识,最后有一个简单的练习. 内联框架内联框架,有点像图片标签:使用内联框架,可以在一个页面中引入一个外部页面,使用iframe标签来实现.简单属性如下: ...
HTML 基本元素2（图像、超链接、表格、列表、块div和span、字体、内联框架）
HTML的图像标签<IMG> 详解 <img> 即图像标签需要设置其属性 src指定图像的路径 1.同级目录图像如果是本地文件,只需把图片放在同一个目录下即可 src ...
前端学习 -- 内联框架iframe
内联框架iframe 可以向一个页面中引入其他的外部页面内联框架中的内容不会被搜索引擎所检索,所以开发中尽量不要使用内联框架 <iframe></iframe> 属性: sr ...
html中怎样播放本地视频教程,【Axure9基础教程】内联框架如何引入本地音频视频 HTML PDF等本地文件...
在[ 在讲解如何插入本地文件之前需要先讲两个概念,相对路径和绝对路径,了解了这两个概览后,才能顺利的插入本地文件并识别成功绝对路径和相对路径是什么? 相对路径:相对路径就是相对于当前文件的路径,以引 ...
结构化元素、网页结构和iframe内联框架
1.结构化元素 <header> //表示网页的头部 <footer> //表示网页的尾部 <section> //表示网页的独立区域 <article> ...
图片-标签、格式\内联框架\音视频播放——HTML
图片标签图片标签用于向当前页面中引入一个外部图片使用img标签来引入外部图片,img标签是一个自结束标签 img这种元素属于替换元素(块和行内元素之间,具有两种元素的特点) img 属性: src ...
HTNL5列表，表格，音频，视频，iframe内联框架
一.列表: 无序列表: <ul> 特性:没有顺序,每个<li>标签独占一行(块级元素) <li>内容</li> 默认每一个li标签前有一个实心小圆点 & ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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