HTML + CSS——千峰Ghost老师（第二部分）

视频链接：https://www.bilibili.com/video/BV1R4411J7tQ?p=111

认识XHTML

XHTML指 扩展 超文本 标签 语言（EXtensible HyperText Markup Language）
XHTML 的目标是取代 HTML。
XHTML 与 HTML 4.01 几乎是相同的。
XHTML 是更严格更纯净的 HTML 版本。
XHTML 是一个 W3C 标准。

HTML 与 XHTML 的区别

XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

b标签与i标签

strong 和 em 都是表示强调的标签，表现形态为文本加粗斜体。b 和 i 标签同样也表示文本加粗和斜体。
区别在于，strong 和 em 是具备语义化的，而 b 和 i 不具备语义化。

引用标签基本操作

1. blockquote：引用大段的段落解释
2. q：引用小段的短语解释
3. abbr：缩写或首字母缩略词
4. address：引用文档地址信息
5. cite：引用著作的标题
   
   

iframe嵌套页面

iframe 元素会创建包含另一个文档的内联框架（即行内框架），即可以引入其他的html到当前html中显示，主要是利用iframe的属性进行样式调节。

属性	含义
frameborder	规定是否显示框架周围的边框
width	定义iframe的宽度
height	定义iframe的高度
scrolling	规定是否在iframne中显示滚动条
src	规定在iframe中引入的URL
srcdoc	规定在iframe中显示的页面内容
应用场景：数据传输、共享代码、局部刷新、第三方介入等。（钓鱼网站、插入第三方广告等）

br标签与wbr标签

br标签表示换行操作，wbr标签表示软换行操作，都是单标签。
提示：如果单词太长，或者担心您浏览器会在错误的位置换行，那么您可以使用 wbr 元素添加 Word Break Opportunity（单词换行时机）

pre标签与code标签

pre 元素可定义预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行符。
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 code 标签。虽然 code 标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。
即这两个标签一般针对网页中程序代码的显示效果。

map标签与area标签

定义一个客户端图像映射。图像映射指带有可点击区域的一幅图像。area 元素永远嵌套在 map 元素内部。 area 元素可定义图像映射中的区域。
area 元素的 href 属性定义区域的 URL，shape 属性来定义区域的形状，coords属性定义热区的坐标。
即这两个标签用于给特殊图形添加链接，area 能添加的热区的形状：矩形、圆形、多边形。

 <img src=".img/pic.jpg" alt="" usemap="#star">
    <map name="star">
    <area shape="rect" coords="200 80 370 160 " href="https://www.taobao.com" alt="">  //热区为矩形，坐标只需要写左上和右下两个坐标
        <area shape="circ" coords="100 120 50" href="" alt="">  //热区为圆形，坐标只需要写圆心和半径
        <area shape="poly" coords="" href="" alt="">  //热区为多边形，每一个点的坐标都需要写
    </map>

embed标签与object标签

embed 和 object 都表示能够嵌入一些多媒体，如 flash 动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器而已。
object 元素需要配合 param 元素一起完成。
用得比较少，了解即可。而且移动端不支持flash。

video标签与audio标签

audio 标签表示嵌入音频文件，video 标签表示嵌入视频文件，属于H5的新功能。默认空间是不显示的，可通过 controls 属性来显示控件。

<audio src="" controls loop autoplay></audio>
<video src="" controls loop autoplay></video>

为了能支持多个备选文件的兼容支持，可以配合 source 标签。

<video>
	<source src=""></source>
    <source src=""></source>
</video>

文字注解与文字方法

1. ruby + rt
   ruby 标签定义 ruby 注释（中文注音或字符）， rt 标签定义字符（中文注音或字符）的解释或发音。

   <ruby>
   	踟<rt>chí</rt>蹰
   </ruby>
   

2. bdo标签可覆盖默认的文本方向。

link标签扩展学习

< link> 标签定义文档与外部资源的关系。
其 rel 属性规定当前文档与被链接文档之间的关系，不过只有 rel 属性的 “stylesheet” 值得到了所有浏览器的支持，其他值只得到了部分地支持。

meta 标签扩展学习

< meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
< meta> 标签位于文档的头部，不包含任何内容。

HTML5新语义化标签（部分）

标签	描述
header	页眉
footer	页脚
main	主体
hgroup	标题组合
nav	导航
article	独立的内容
aside	辅助信息的内容
section	区域
figure	描述图像或视频
figcaption	描述图像或视频的标题部分
datalist	选项列表
details/summary	文档细节/文档标题
progress/meter	定义进度条/定义度量范围
time	定义日期或时间
mark	带有记号的文本
【注】header、footer、main 在一个网页中只能出现一次。

表格扩展学习

属性	描述
添加单线	border-collapse: collapse
隐藏空单元	empty-cells: hide
斜线分类	border / rotate
列分组	colgroup / col

表单扩展学习

新的 input 控件

属性	描述
email	电子邮件地址输入框
url	网址输入框
number	数值输入框
range	滑动条
date / month / week	日期控件
search	搜索框
color	颜色控件（点击可以调出调色板）
tel	电话号码输入框（在移动端会默认调起数字键盘）
time	时间控件

新的表单属性

属性	描述
autocomplete	input 的属性autocomplete 默认为on，其含义代表是否让浏览器自动记录之前输入的值，取值：on（默认）/ off
autofocus	获取焦点
required	不能为空
pattern	正则验证

数据传输

1. methods：数据传输方式
2. enctype：数据传输类型
3. name / value：数据的键值对

扩展标签

标签	描述
fieldset	表单内元素分组
legend	为fieldset元素定义标题
optgroup	定义选项组

<fieldset>
    <legend>登录</legend>
    <p>
        用户名：<input type="text">
    </p>
    <p>
        密码：<input type="tpassword">
    </p>
</fieldset>

BFC规范

Formatting context（格式化上下文）是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
BFC即Block Formatting Contexts(块级格式化上下文)，它属于上述中的其中一种规范。具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通元素所没有的一些特性。
（触发BFC规范的元素，可以形成一个独立的容器，不受到外界的影响，从而解决一些布局问题）

触发BFC

1. 浮动元素：float 除 none 以外的值
2. 绝对定位元素：position（absolute、fixed）
3. dispaly 为 inline-block、table-cells、flex
4. overflow 除了 visible 以外的值（hidden、auto、scroll）

BFC特性以及应用：

1. 解决margin叠加问题
2. 解决margin传递问题
3. 解决浮动问题
4. 解决覆盖问题
   
   

浏览器前缀

浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。为此，当时有一些CSS3样式语法还在波动的时候，他们提出了针对浏览器的前缀。
CSS3去兼容不同的浏览器，针对旧的浏览器做兼容，新浏览器基本不需要添加前缀。

浏览器	内核	前缀
IE	Trident	-msm
Firefox	Gecko	-moz-
Opera	Presto	-o-
Chrome	Webkit	-webkit-
Safari	Webkit	-webkit-
Opera、Chrome	Blink