Chendi Wu

Appearance

注：IE9之前的版本需要通过createElement创建HTML5新标签，然后引入html5shiv.js。

按默认分类 ​

  1. 块级元素（block）
  2. 行内元素（inline）
  3. 行内块元素（inline-block）

块级元素（block） ​

  1. 元素独占一行显示（块级元素有默认宽度）
  2. 可以设置宽度和高度
  3. 当两个块级元素发生嵌套关系时，子元素如果没有设置宽度，那么该子元素的宽度与父元素的宽度一致。
  4. 代表：div, h1, p, ul

行内元素（inline） ​

  1. 元素不会独占一行，与其他行内元素在同一行显示
  2. 不可以设置宽度和高度，其宽度由内容决定
  3. 当两个行内元素发生嵌套关系时，子元素的宽度会根据内容自动调整
  4. 代表：span, a, strong, em

行内块元素（inline-block） ​

  1. 元素不会独占一行，与其他行内块元素在同一行显示
  2. 可以设置宽度和高度
  3. 当两个行内块元素发生嵌套关系时，子元素的宽度会根据设置的宽度来调整
  4. 代表：img, input, button

以上是常见的块级元素、行内元素和行内块元素的特点和代表性标签，但实际上，可以通过CSS的display属性来修改元素的显示方式，使其从块级元素变为行内元素或行内块元素，或者反之。

除了默认的块级元素、行内元素和行内块元素，还存在其他特殊类型的元素：

  1. 表格相关元素：table、tr、th、td等，用于创建表格结构。
  2. 列表相关元素：ul（无序列表）、ol（有序列表）、li（列表项），用于创建列表。
  3. 表单相关元素：form、input、select、textarea等，用于创建表单并收集用户输入。
  4. 头部、段落和标题元素：header、nav、p、h1、h2等，用于组织文档结构和内容。
  5. 文本样式元素：strong、em、span等，用于对文本进行加粗、斜体等样式设置。
  6. 嵌入内容元素：img、video、audio等，用于嵌入图片、视频、音频等多媒体内容。
  7. 可替换元素：iframe、object等，用于嵌入外部资源或插件。

需要注意的是，这些元素的默认展示方式可能会根据浏览器的不同而有所差异，可以使用CSS来控制元素的样式和展示效果。此外，HTML5还引入了一些新的语义化元素，如article、section、footer等，用于更好地描述页面结构和内容。

除了常见的元素类型，HTML还有一些特殊的元素和属性：

  1. <div>元素：<div>元素是一个通用的容器元素，常用于组织和布局页面内容。

  2. <span>元素：<span>元素也是一个通用的容器元素，不会独占一行，常用于为文本或其他行内元素添加样式或处理。

  3. <iframe>元素：<iframe>元素用于在页面中嵌入另一个HTML文档或外部网页。它可以创建一个独立的浏览上下文，在其中显示其他网页的内容。

  4. <script>元素：<script>元素用于嵌入JavaScript代码或引入外部的JavaScript文件。它可以在页面中执行脚本。

  5. <style>元素：<style>元素用于嵌入CSS样式代码或引入外部的CSS文件。它用于定义页面的样式。

  6. <meta>元素：<meta>元素用于设置HTML文档的元数据，如字符集、页面描述、关键词等。它位于<head>标签中。

  7. id属性和class属性：id属性用于唯一标识一个元素，而class属性用于指定一个或多个元素的类别。这些属性通常用于JavaScript和CSS选择器。

这些是HTML中一些常见和特殊的元素和属性。它们提供了丰富的功能和灵活性，用于创建各种类型的网页和交互式内容。

当然，还有其他一些比较特殊的HTML元素和属性：

  1. <header>元素：<header>元素表示页面或者页面内某个区块的页眉，通常包含网站的标题、导航菜单、搜索框等内容。

  2. <nav>元素：<nav>元素用于定义页面的导航部分，通常包含一组导航链接或菜单。

  3. <footer>元素：<footer>元素表示页面或者页面内某个区块的页脚，通常包含版权信息、联系方式、相关链接等内容。

  4. <figure>元素和<figcaption>元素：<figure>元素用于将一组相关的媒体内容（如图片、图表、视频等）与其标题(<figcaption>)进行关联，并进行标注。

  5. <time>元素：<time>元素用于表示日期和时间。它可以帮助浏览器、搜索引擎和辅助技术正确地解读和展示时间相关的内容。

  6. data-*属性：data-*属性是自定义数据属性，可以用于存储与元素相关的自定义数据。这些属性可以供JavaScript访问，而不会影响到元素的样式和行为。

  7. <details>元素和<summary>元素：<details>元素用于创建一个可折叠的内容区域，而<summary>元素用于定义折叠区域的摘要或标题。

这些特殊的元素和属性提供了更多的语义化标记和功能，有助于开发人员更好地描述和组织页面的结构，提高可访问性并增强用户体验。

语义化的重要性 ​

  1. 使开发者更容易理解代码，减少差异化，方便团队开发和维护。
  2. 使机器更容易理解页面内容，方便搜索爬虫、读屏幕软件、盲人设备和移动设备等其他设备解析。

页面结构的注意事项 ​

  1. 尽可能减少使用没有语义的div和span元素。
  2. 块级元素和内联元素的嵌套必须符合web标准，例如内联元素不能嵌套块级元素。

HTML、XHTML和HTML5的关系 ​

  1. HTML属于SGML（标准通用标记语言）。
  2. XHTML属于XML（可扩展标记语言），是对HTML进行XML严格化的结果。
  3. HTML5可以简单理解为h5 ≈ HTML + CSS3 + JavaScript + API，它减少了对外部插件的需求（例如Flash），具有更优秀的错误处理能力，并提供更多可以替代脚本的标记。

HTML5的新特性 ​

  1. 新的语义化元素：article、footer、header、nav、section等。
  2. 增强的表单功能，包括新的表单控件：calendar、date、time、email、url、search等。
  3. 新的API：音频（用于媒体回放的video和audio元素）、图形（绘图canvas元素）等。
  4. 新的API：离线存储，可以通过创建cache manifest文件来创建应用程序缓存。
  5. 新的API：本地存储，包括localStorage（没有时间限制的数据存储）和sessionStorage（会话数据存储，关闭浏览器窗口数据将被删除）。
  6. 新的API：实时通信，提供设备能力。

Doctype ​

Doctype的作用是指明文档类型（DTD）并确保浏览器以标准模式解析页面。它位于HTML文档的最开始，用于告诉浏览器如何解析页面的元素和属性。

常见的Doctype声明包括：

  1. HTML 4.01 Strict：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 它定义了HTML 4.01的严格版本，不允许使用过时的元素和属性，并要求标签闭合、属性值加引号等。

  2. HTML 4.01 Transitional：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 它是HTML 4.01的过渡版本，允许使用过时的元素和属性，对于老旧网页的兼容性较好。

  3. XHTML 1.0 Strict：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 它是XHTML 1.0的严格版本，要求语法更加规范，必须使用小写标签名、属性值必须加引号等。

  4. HTML5：<!DOCTYPE html> HTML5中的Doctype声明非常简洁，只需一个简单的<!DOCTYPE html>即可，这是因为HTML5以标准模式解析，省略了DTD的引用。

选择合适的Doctype声明取决于页面开发者的需求和目标浏览器的支持情况。对于现代化的网页开发，推荐使用HTML5的Doctype声明。

盒模型 ​

  1. 盒模型由内向外分为content, padding, border, margin四层。

  2. 盒模型存在两种标准：标准模型和IE模型。

标准模型 ​

  1. 在标准模型中，盒模型的宽高仅包括内容（content）的宽高。

IE模型 ​

  1. 盒模型的宽高包括内容（content）、填充（padding）和边框（border）的总宽高。

如何设置两种模型 ​

  1. 标准模型：box-sizing: content-box;
  2. IE模型：box-sizing: border-box;

JS获取盒模型对应的宽高 ​

  1. 使用dom.style.width/height方法只能获取到dom元素内联样式所设置的宽高。换句话说，如果样式是在style标签或外部CSS文件中设置的，则无法通过这种方法获取dom的宽高。
  2. 使用dom.currentStyle.width/height方法可以获取页面渲染完成后的结果，无论是通过哪种方式设置的样式，都能获取到，但仅适用于IE浏览器。
  3. 使用window.getComputedStyle(dom).width/height方法原理与第二种方法相同，但兼容性更好，适用于更多的浏览器。
  4. 使用dom.getBoundingClientRect().width/height方法根据元素在视窗中的绝对位置来获取宽高。
  5. 使用dom.offsetWidth/offsetHeight方法获取元素的实际宽高，包括边框、填充和滚动条等。

边距重叠 ​

  1. 边距重叠是指两个或多个盒子（可能相邻也可能嵌套）的相邻边界（其间没有任何非空内容、填充、边框）重合在一起形成一个单一边界。

BFC ​

  1. BFC（块级格式化上下文）根据块级盒子布局。

BFC的原理 ​

  1. 内部的box会在垂直方向上依次排列。
  2. 每个元素的margin box的左边与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。
  3. 相邻box的垂直方向间距由margin决定，属于同一个BFC的相邻box的margin会发生重叠。
  4. BFC的区域不会与浮动区域的box重叠。
  5. BFC是一个页面上独立的容器，外部元素不会影响BFC内的元素，反之亦然。
  6. 计算BFC高度时，浮动元素也会参与计算。

如何创建BFC（边距重叠产生原因） ​

  1. float属性不为none（脱离文档流）。
  2. position为absolute或fixed。
  3. display为inline-block、table-cell、table-caption、flex、inline-flex。
  4. overflow不为visible。
  5. 根元素的垂直margin不会被重叠。

防止外边距重叠解决方案 ​

  1. 外层元素使用padding代替。
  2. 内层元素使用透明边框border: 1px solid transparent。
  3. 内层元素使用绝对定位position: absolute。
  4. 外层元素使用overflow: hidden。
  5. 内层元素使用float: left或display: inline-block。
  6. 内层元素使用padding: 1px。

BFC应用场景 ​

  1. 实现自适应两栏布局。
  2. 清除内部浮动。

浮动float的误解和误用 ​

  1. 浮动最初设计用于实现文字环绕效果，即在一段文字中间插入图片并让文字环绕图片。但是，后来大家发现结合float + div可以实现之前通过table实现的网页布局，因此就被“误用”于网页布局了

  2. 浮动元素脱离了正常的文档流，并且会影响周围元素的布局。浮动元素会向左或向右移动，并尽可能靠近其容器的左侧或右侧。

  3. 浮动元素会导致父元素的高度塌陷，即父元素的高度无法自适应包含浮动元素的内容。

  4. 浮动元素在某些情况下会出现重叠或遮挡的问题，需要通过清除浮动来解决。

  5. 最常用的清除浮动的方法是使用clearfix技巧，给父元素添加一个clearfix的类，其中包含以下CSS样式：

    .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

    这样可以清除浮动元素对父元素高度的影响。

  6. 浮动也可以用于创建多列布局，使元素像瀑布一样纵向排列。

  7. 由于浮动的一些问题和限制，现在更常用的布局方法是使用flexbox或grid布局。这些新的布局方式更加灵活、强大，并且能够解决浮动带来的一些问题。

总结：盒模型、BFC和浮动都是CSS中常见的概念和技术，了解它们的原理和应用场景，可以帮助我们更好地进行页面布局和设计。同时，需要注意正确使用浮动，并避免误解和误用带来的问题。

优化后的内容如下： ​

为什么float会导致父元素塌陷？ ​

  1. float的破坏性：float破坏了父标签的原本结构，使得父标签出现了坍塌现象。
  2. 导致这一现象的最根本原因在于：被设置了float的元素会脱离文档流，我们的浮动是左右浮动，所以我们的块级元素都是左右排列。其根本原因在于float的设计初衷是解决文字环绕图片的问题。
  3. 包裹性也是float的一个非常重要的特性。普通的div如果没有设置宽度，它会撑满整个屏幕，在之前的盒子模型那一节也讲到过。而如果给div增加float:left之后，它突然变得紧凑了，宽度发生了变化，把内容中的三个字包裹了——这就是包裹性。为div设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器，对于高度不同的容器，float排版出来的网页严丝合缝。

清除浮动（clear） ​

  1. 额外添加标签，在最后一个浮动的盒子的后面添加一个新标签，然后该标签可以清除浮动。
  2. 使用overflow清除浮动，在浮动的大盒子（父级标签）的样式中添加overflow:hidden。常用于ul li，给ul添加overflow:hidden。
  3. 使用伪类:after清除浮动。
  4. 编写一个通用的clearfix类，在需要清除浮动的地方直接添加该样式。
css
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  /*照顾ie6*/
  zoom: 1;
}

使用方法：

html
<div class="box clearfix"></div>

定位position ​

position用于网页元素的定位，可设置static/relative/absolute/fixed/inherit。

  1. static：默认值。
  2. relative：会导致自身位置的相对变化，而不会影响其他元素的位置和大小。
  3. absolute：元素脱离了文档结构，导致父元素塌陷，元素具有“包裹性”，元素会悬浮在页面上方，会遮挡住下方的页面内容。设置top、left值时，元素是相对于最近的定位上下文来定位的，而不是相对于浏览器定位。
  4. fixed：元素脱离了文档结构，根据窗口（或iframe）确定位置。

URL、src、href ​

  1. src是指向资源的来源。
  2. href是指向需要连接的目标位置。
  3. URL是通用的“连接”的专业术语，在HTML语法中几乎不会使用。
  4. URL不是属性，src和href是属性。src用于替换当前元素，href用于在当前文档和引用资源之间建立联系，也就是说src引用的路径是图片自身的路径，href引用的路径是需要跳转到的位置。

本质上，这两种方式都是为了加载CSS文件，但还是存在一些细微的差别。

  1. 老旧标准的差别：link属于XHTML标签，而@import是CSS提供的一种方式。link标签除了加载CSS外，还可以做很多其他的事情，比如定义RSS、定义rel连接属性等，@import只能加载CSS。
  2. 加载顺序的差别：当一个页面被加载时（浏览者浏览页面时），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。因此，在使用@import加载CSS的页面上，开始时可能没有样式（闪烁），特别是在网速较慢时更明显。
  3. 兼容性的差别：由于@import是CSS2.1提出的，所以旧的浏览器不支持，只有IE5以上的浏览器可以识别，而link标签没有这个问题。
  4. 使用DOM控制样式时的差别：当使用JavaScript控制DOM改变样式时，只能使用link标签，因为@import不是DOM可以控制的。

px ​

PX实际上是像素，用于设置字体大小时比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中缩放页面时，会破坏我们的Web页面布局。这对于那些关心网站可用性的用户来说是一个大问题。因此，提出了使用"em"来定义Web页面的字体大小。

em ​

EM根据基准值来缩放字体大小。EM实质上是一个相对值，而不是具体的数值。这种技术需要一个参考点，通常是以"font-size"作为基准。例如，WordPress官方主题Twentytwelve的基准是14px=1em。

rem ​

REM是相对于根元素来设置字体大小的，这样就避免了需要了解父元素大小的问题。使用REM时，只需在根元素确定一个参考值即可。

px、em和rem的浏览器兼容性 ​

除了IE6-IE8之外，其他浏览器都支持em和rem属性，而px是所有浏览器都支持的。所以，为了浏览器的兼容性，可以同时使用"px"和"rem"，用"px"实现IE6-8下的效果，然后用"rem"实现其他浏览器的效果。

form的作用 ​

  1. 直接提交表单。
  2. 使用submit/reset按钮。
  3. 便于浏览器保存表单数据。
  4. 第三方库可以整体提取值。
  5. 第三方库可以进行表单验证。