HTML基础常识问答（一）

学习HTML

1.什么是HTML？

HTML并不是真正的程序语言，它是一种标记语言，用来结构化和含义话你想要放在Web网站上的内容。它是由一系列元素(Elements)组成，这些元素用来封装你写的内容，在内容当中担任不同工作的各个部分和各个角色。

2.行内元素和块级元素有哪些？空元素有哪些？区别有哪些？如何转换？

1. css 规定每个元素都有display属性，确认元素的类型，每个元素都有默认的display值，比如div默认的display属性值为"block"，成为了块级元素，span默认的display属性值为"inline-block",是行内元素。

2. 行内元素有：a, span, img,strong, input
3. 块级元素有：div, p, ul, ol, li, dl, dd, dt, h1,h2, h3…
4. 空元素有： br, hr, img, input, link, meta,还有一些鲜为人知的
   area, base, col , command, embed, keygen, param, source, track, wbr

5. 样式转换：
   display: block 行内元素转块级元素
   display: inlink 块级元素转行内元素
   display: inlink-block 转内联元素就是行内快元素

6. 块级元素的特点：
   元素总是独占一行，表现为另起一行，而且其后的元素也要另起一行显示。
   宽度(width),高度(height),内边距(padding),外边距(margin)都可以控制。
   行内元素的特点：和相邻的内联元素在同一行；
   宽度(width),高度(height),内边距top/bottom(padding-top/padding-bottom)和外边距的
   top/bottom(margin-top/margin-bottom)都不可以改变(也就是padding和margin的left和right是可以设置的)，就是里面内容或图片的大小。

3.什么是BFC？HTML语义化的理解？对web标准以及W3C的理解和认识？

1.BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的block-level Box 该如何布局，并且这个区域外部毫不相干。

• 布局规则：
  A: 内部的Box会在垂直方向，一个接一个地放置。
  B: Box 垂直方向的距离由margin决定，属于同一个Box的两个相邻Box，margin会发生重叠。
  C: 每个元素的margin box 的左边，与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此。
  D: BFC 区域不会与 float box重叠。
  E: BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也一样。
  F: 计算BFC的高度时，浮动元素也参与其中。
• 哪些元素会生成BFC：
  A: 根元素
  B: float 属性不为none
  C: position 为 absolute 或 fixed
  D: display 为 inline-block，table-cell， table-caption， flex， inline-flex
  E: overflow 不为 visible

HTML语义化有一下好处

1. 让页面结构更清晰，便于浏览器搜索引擎解析。
2. 在没有css样式的情况下，也能以一种文档的形式展示，并且容易阅读。
3. 搜索引擎的爬虫也是依赖HTML标记来确定上下文和关键字的权重，有力于SEO。
4. 使阅读代码的人更容易将网站分块，便于阅读，维护和理解。

web标准和W3c：

1. 标签闭合，标签小写，不乱嵌套，提高搜索机器人搜索几率，使用外联css 和 js脚本，结构表现行为分离。
2. 文件下载和页面速度更快，内容能被更多用户所访问，内容能被更广泛的设备所访问，更少的代码和组件。
   3.容易维护，改版方便，不需要变动页面内容，提供打印版本而不需要复制内容，提高网站易用性。