## 内联框架
##### 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="">百度</a>
```
```
<a href="03.html">我是一个超链接</a>
```
没访问过的显示蓝色 ，访问过的显示紫色
```
<a href="">我是一个超链接</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="">我是一个超链接</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@">联系我们</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 标签来表示一些细则一类的内容
比如：合同中的小字，网站版权声明都可以放到small
```
<p>- <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. 无序列表和自定义列表的写法
