HTML +CSS 学习④

• ​​1 HTML 与 XHTML区别 ？​​
• ​​2 strong与b、em与i？​​
• ​​3 引用标签？​​
• ​​4 iframe标签？​​
• ​​5 br 与 wbr ?​​
• ​​6 pre 与 code ?​​
• ​​7 map 与 area ?​​
• ​​8 embed 与 object ?​​
• ​​9 audio 与 video ？​​
• ​​10 文字注解？​​
• ​​11 link扩展学习？​​
• ​​12 meta扩展学习？​​
• ​​14 表格扩展学习？​​
• ​​15 表单扩展学习？​​
• ​​16 BFC规范？​​

1 HTML 与 XHTML区别 ？

DOCTYPE文档及编码
元素大小写
属性布尔值
属性引号
图片的alt属性
单标签写法
双标签闭合

2 strong与b、em与i？

表现形态都是 文本加粗 和 文本斜体

区别：是否具备语义化

3 引用标签？

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

4 iframe标签？

可以引入其他的html到当前html中显示。

主要是利用iframe的属性进行样式的调节。

5 br 与 wbr ?

br 就是换行、 wbr 就是软换行（在指定时机进行换行）

6 pre 与 code ?

针对网页中的程序代码的显示效果。

7 map 与 area ?

给特殊图形添加链接，area能添加的热区的形状：矩形、圆形、多边形。

8 embed 与 object ?

给flash和一些插件进行渲染操作的标签。

9 audio 与 video ？

引入音频与视频的标签。属于H5的功能。

10 文字注解？

ruby 、 rt 这样一个组合

11 link扩展学习？

添加网址标题栏前的小图标：

DNS预解析：

12 meta扩展学习？

meta添加一些辅助信息。

##13 HTML5新的语义化标签？

header : 页眉
footer : 页脚
main : 主体
hgroup : 标题组合
nav : 导航

注：header、footer、main 在一个网页中只能出现一次。

article : 独立的内容
aside : 辅助信息的内容
section : 区域
figure : 描述图像或视频
figcaption : 描述图像或视频的标题部分

datalist : 选项列表
details / summary : 文档细节 / 文档标题
progress / meter : 定义进度条 / 定义度量范围
time : 定义日期或时间
mark : 带有记号的文本

14 表格扩展学习？

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

15 表单扩展学习？

美化表单控件： 1. label + :checked 2. position + opacity

新的input控件
email : 电子邮件地址输入框
url : 网址输入框
number : 数值输入框
range : 滑动条
date / month / week : 日期控件
search : 搜索框
color : 颜色控件
tel : 电话号码输入框 ( 在移动端会默认调起数字键盘 )
time : 时间控件

表单属性：
autocomplete : 自动完成 默认 on / off
autofocus : 获取焦点
required : 不能为空
pattern : 正则验证

method : 数据传输方式
enctype : 数据传输类型
name / value : 数据的键值对

扩展标签 :
fieldset : 表单内元素分组
legend : 为fieldset元素定义标题
optgroup : 定义选项组

16 BFC规范？

触发BFC规范的元素，可以形成一个独立的容器。不受到外界的影响，从而解决一些布局问题。

触发的样式：
float、display、position、overflow