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传递问题
- 解决浮动问题
- 解决覆盖问题