HTML元素（三）

HTML元素（三）

在本篇笔记中将继续记录HTML的剩余元素（不一定会全部记录，学到哪记录到哪）

i 元素

表示一种在页面阅读时要用特殊的音调来读；同时，他也偶尔会被表示一个商标（icon）。

该元素的默认CSS样式为斜体。

<i>默认为斜体</i>

strong 元素

该元素在页面中表示的是重要的、不能忽略的元素（给浏览器看的），其默认的样式是加粗。

<strong></strong>

em 元素

该元素表示的是强调的内容，但是并不是很重要（同样是给浏览器看的），默认的样式是斜体。

<em></em>

del 元素

表示该元素中包括的数据是错误的。默认样式是在文字中间有一条横线。

<del></del>

s 元素

表示该元素中包括的数据是过期的。默认样式是在文字中间有一条横线。

<s></s>

一般用于商店打折

nav元素

在HTML5中，nav元素表示导航菜单。——没有什么特别的，主要为了语义化。

<nav>
	<a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
</nav>

iframe元素

该元素为可替换元素

• 通常为行盒
• 通常先是的内容取决于元素的属性
• CSS不能完全控制其中的样式
• 具有行块盒的特点

<!-- 百度拒绝了我的请求，嗯，这波很百度 -->
<a href="https://www.baidu.com" target="myframe">百度</a>
<a href="https://douyu.com" target="myframe">斗鱼</a>
<a href="https://www.taobao.com" target="myframe">淘宝</a>

<!-- 这种方式属于把其他网站的某个页面嵌入到自己的页面中（该视频为B站自己的视频，啊哈哈哈哈） -->
<iframe name="myframe" src="//player.bilibili.com/player.html?aid=207003971&bvid=BV1Uh411z7Ng&cid=381528708&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

---

特性

• iframe在本页面嵌入其他网页的时候可以使用name属性来设置我们的超链接内容在嵌入的部分展示，做匹配的是超链接中的target。

• 例如在嵌入B站分享的视频时，我们可以看到复制的源代码中有很多属性，下面一一说明：

  1. scrolling：页面显示不下的时候是否显示滚动条；

  2. border：一个过时的属性，不建议使用（也就是边框）；

  3. frameborder：frame的边框；

  4. framespacing：这个属性也是边框，但是他与border有一些小小的关系，（主要是内部空隙）

     1. 如果framespacing属性的值不变，而改变borer属性值的大小，显示的效果不变。
     2. 如果border属性的值不变，而改变framespacing属性值的大小，显示的效果则以framespacing的大小为准。

  5. allowfullscreen：全屏兼容。

总结

本篇笔记没有记录太多的东西，不过HTML的相关元素的记录以及解释说明将会持续发布。接下来总结本篇笔记的内容：

• 本篇笔记中iframe元素之前记录的相关元素比较简单不做赘述，唯一强调说明的依旧是：语义化，一定牢记与异化的相关概念。

  上述元素所显示的样式基本可以通过CSS属性实现，那么这些元素依旧没被HTML5放弃的原因是为了让浏览器更好地了解我们的页面，以便于更好地解析浏览器（最终都和所谓的搜索排名有关）。既然元素代表含义，样式代表效果，那么我们应该能区分在某些特定时候应该选择什么样的元素配合什么样的样式来实现页面。——就像CSS（十三）以及CSS（十四）中反复强调的background-image和img的使用区别。

• iframe元素可以较为简单地在页面中嵌入一个站外资源的视频等相关资源，使用范围在某种程度上较广，可以自行领会。——在页面实现中，一种页面效果不是只有一种方式来实现。

• 最后补充一句，百度搜索引擎页无法嵌入自己的网页，可以通过设置跨域等相关操作来解决，后续会有讲解。