HTML5知识点

19:48 2021/8/2

1. HTML 与 XHTML区别 ？

DOCTYPE文档及编码
元素大小写
属性布尔值
属性引号
图片的alt属性 html5中checked=“checked”可以省略写成checked xhtml不可以
单标签写法 HTML5中单标签可以不写/ xhtml中必须要写
双标签闭合

2. strong与b、em与i？

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

区别：是否具备语义化

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

3. 引用标签？
blockquote : 引用大段的段落解释
--<blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。
提示：如果标记是不需要段落分隔的短引用，请使用 <q>。
q : 引用小段的短语解释
abbr : 缩写或首字母缩略词
address : 引用文档地址信息,链接地址信息
cite : 引用著作的标题
---<cite> 标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。
注释：人名不属于作品的标题。

4. iframe标签？

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

主要是利用iframe的属性进行样式的调节。
<!-- frameborder 规定是否显示框架周围的边框
width 定义iframe的宽度
height 定义iframe的高度
scrolling 规定是否在iframe中显示滚动条
src 规定在iframe中引入的URL
srcdoc 规定在iframe中显示的页面内容

应用场景：跨域操作，（跨平台）数据传输、共享代码，局部刷新、第三方介入等。
-->

5. br 与 wbr ?

br 就是换行、 wbr 就是软换行（在指定时机进行换行）
提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 wbr 元素来添加 Word Break Opportunity（单词换行时机）

6. pre 与 code ?

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

7. map 与 area ?

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

8. embed 与 object ?

给flash和一些插件进行渲染操作的标签。如flash动画 插件等。
object 元素需要配合param 元 素一起完成。

9. audio 与 video ？

引入音频与视频的标签。属于H5的功能。
audio标签表示嵌入音频文件，video标签表示嵌入视频文件。默认控件是不显示的，可通过controls属性来显示控件。
为了能够支持多个备选文件的兼容支持，可以配合source标签。。

10. 文字注解？

ruby 、 rt 这样一个组合
ruby 标签定义 ruby 注释（中文注音或字符），rt 标签定义字符（中文注音或字符）的解释或发音。
bdo 标签可覆盖默认的文本方向。

11. link扩展学习？

添加网址标题栏前的小图标：
<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
DNS预解析：
<link rel="dns-prefetch" href="//static.360buyimg.com">

12. meta扩展学习？

meta添加一些辅助信息。

<meta name="description" content="大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,大连团购信息,您可查询商家评价店铺信息。大连生活,下载美团官方APP ,吃喝玩乐1折起。">
<meta name="keywords" content="大连美食,大连酒店,大连团购">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="ie=edge">针对IE浏览器渲染更高的版本
<meta http-equiv="refresh" content="3" url="">刷新 3秒 进行跳转
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT">

13. HTML5新的语义化标签？

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

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

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

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

Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC 即 Block Formatting Contexts (块级格式化上下文) ，它属于上述中的其中一种规范。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
触发BFC:
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
BFC特性及作用？
解决margin叠加问题
解决margin传递问题
解决浮动问题
解决覆盖问题