A_HTML_进阶篇

1_html 标签拓展（进阶篇）

1.1_strong和b 与 em和i的区别？

都是用于定义 文本加粗 和 文本斜体

区别：是否具备语义化

标签	描述
strong	文本加粗 / 具备语义化 / 推荐使用
b	文本加粗 / 不具备语义化
em	斜体/ 具备语义化 / 推荐使用
i	斜体/ 不具备语义化

1.2_iframe嵌套页面

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

应用场景：数据传输、共享代码，局部刷新、第三方介入等。

常用属性	描述
frameborder	规定是否显示框架周围的边框 / 注意：HTML5 不支持
width	规定 的宽度
height	规定 的高度
src	规定在 中显示的文档的 URL
name	规定 的名称
sandbox	规定在 中显示的文档的 URL / 新属性
seamless	规定在 中显示的文档的 URL / 一个布尔属性 / 新属性
srcdoc	规定页面中的 HTML 内容显示在 中 / 新属性

<iframe src="demo_iframe.htm" width="200" height="200" align="right" seamless sandbox="">
	<p>您的浏览器不支持  iframe 标签。</p>
</iframe>

1.3_map 与 area 制作图片热区

定义一个客户端图像映射。
定义一个热区

area 元素永远嵌套在 map 元素内部。
area 元素可定义图像映射中的区域。

area 元素属性	描述
href	定义区域的URL
shape	定义区域的形状
coords	定义热区的坐标

 <img src="" alt="" usemap="#star">
 <map name="star">
	<area shape="rect" coords="205 83 386 173" href="" alt=""> <!-- 定于矩形热区 -->
	<area shape="circ" coords="300 130 50" href="" alt=""> <!-- 定于圆形热区 -->
    <area shape="poly" coords="305 99 233 156 256 250 172 197" href="" alt=""><!-- 定于多边形热区 -->
 </map>

1.4_br 与 wbr

定义换行

br 标签表示换行操作，而 wbr 标签表示软换行操作。

area 元素属性	描述
br	标签插入一个简单的换行符
wbr	规定在文本中的何处适合添加换行符

 <p> 使用 br 元素<br>在文本中<br>换行。 </p>
 <p> 学习 AJAX,您必须熟悉 <wbr>Http<wbr>Request 对象。</p>

1.5_ruby 与 rt、bdo

文字注解与文字方向

元素	描述
ruby	定义 ruby 注释（中文注音或字符）
rt	字符（中文注音或字符）的解释或发音
bdo	覆盖默认的文本方向

  <ruby>
  	寒<rt>hán</rt>冬
  </ruby>
  <p>
     该段落文字<span>从左到右</span>显示。
  </p>
  <p> 
  	该段落文字<bdo dir="rtl">从右到左</bdo>显示。
  </p>

2.1_BFC规范

FC规范：Formatting context(格式化上下文)
BFC规范：Block Formatting Contexts (块级格式化上下文) ，属于上述FC规范中的其中一种规范

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

这里有几种常见的方式，除了这些还有很多：

• display：inline-block
• float: left | right
• position: absolute | fixed
• overflow: hidden

BFC特性及实际应用：

• 解决margin叠加问题
• 解决margin传递问题
• 解决浮动问题
• 解决覆盖问题

未完待续…