HTML 基础

HTML语义化

语义化可以总结为 根据内容选择标签，用最恰当的标签来标记内容。 例如网页中的标题使用<h1>~<h6>这样的标签，而不是使用<div>+css。

语义化好处

• 使HTML结构变得清晰，有利于维护代码和添加样式。
• 通常语义化HTML会使代码变的更少，使页面加载更快。
• 即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构。
• 便于团队开发和维护，语义化更具可读性，遵循W3C标准，可以减少差异化。
• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页。
• 提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，爬虫可以依赖于标签来确定上下文和各个关键字的权重。

注意语义化编写

• 尽可能少的使用无语义的标签<div>和<span>。
• 不要使用纯样式标签，如<b>是纯样式标签，而<strong>的语义为加粗。
• 在<lable>标签中设置for来让说明文本和相对应的<input>关联起来。
• 表单域要用<fieldset>标签包起来，并用<legend>标签说明表单的用途。
• 需要强调的文本，可以包含在strong或者em标签中，<strong>默认样式是加粗，<em>是斜体。
• 使用表格时，标题要用<caption>，表头用<thead>，主体部分用<tbody>包围，尾部用<tfoot>包围。表头和一般单元格要区分开，表头用<th>，单元格用<td>。

常用语义化标签

• <h1>~<h6> 定义页面的标题，<h1>-<h6>元素等级依次降低。
• <header> 页眉通常包括网站标志、主导航、全站链接以及搜索框。
• <nav> 提供当前文档内或其他文档的导航链接，导航部分的常见示例是菜单，目录和索引。
• <main> 主要内容区域由与文档的中心主题或应用程序的中心功能直接相关或扩展的内容组成。
• <article> 专注于单个主题的博客文章，报纸文章或网页文章。
• <address> 提供了一个或多个人员或组织的联系信息。
• <section> 定义文档中的节，表示HTML文档中包含的独立部分。
• <aside> 表示文档的一部分，其内容仅与文档的主要内容间接相关,通常显示为侧边栏。
• <footer> 定义文档的底部区域，通常包含文档的作者，著作权信息，联系信息等。
• <hgroup> 表示文档部分的多级标题，它对一组<h1>~<h6>元素进行分组。
• <ul> 表示项目的无序列表，通常呈现为项目符号列表。
• <ol> 表示项目的有序列表，通常呈现为编号列表。
• <li> 表示列表中的项目。
• <strong> 表示强调突出重点内容，浏览器通常以粗体显示内容。
• <em> 标记强调重点的文本，可以嵌套<em>元素，嵌套的每个级别都表示强调程度更高。
• <small> 代表旁注和小字体，例如版权和法律文本，独立于其样式表示。
• <abbr> 表示缩写或首字母缩写词。
• <cite> 用于描述对引用的创意作品的引用，并且必须包括该作品的标题。
• <figure> 表示独立的内容，可能带有可选的标题，该标题使用<figcaption>元素指定。
• <figcaption> 表示说明其父<figure>元素的其余内容的标题或图例。
• <blockquote> 定义块引用，可以使用<cite>元素提供文本表示
• <mark> 表示被标记或突出显示以供参考或标记目的的文本。
• <time> 表示特定的时间。
• <date> 表示特定的日期。
• <dfn> 用于表示在定义短语或句子的上下文中定义的术语。
• <code> 计算机代码的简短片段的方式显示其内容的样式。
• <samp> 输出的示例或引用的内联文本或样本文本。
• <kbd> 表示文本是从键盘上键入的，它经常用在与计算机相关的文档或手册中。
• <del> 表示已从文档中删除的文本范围。
• <ins> 表示已添加到文档中的文本范围。
• <menu> 表示用户可以执行或激活的一组命令，例如上下文菜单等。
• <dialog> 表示对话框或其他交互式组件，例如检查器或子窗口。
• <summary> 元素为<details>元素的显示框指定摘要，标题或图例。
• <details> 描述文档或文档某个部分的细节。
• <bdi>: 允许设置一段文本，使其脱离其父元素的文本方向设置。
• <progress>: 定义任何类型的任务的进度。
• <ruby>: 定义ruby注释（中文注音或字符）。
• <rt>: 定义字符（中文注音或字符）的解释或发音。
• <rp>: 在ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容。
• <wbr>: 规定在文本中的何处适合添加换行符。
• <meter>: 定义度量衡，仅用于已知最大和最小值的度量。

弃用的HTML元素

这些是旧的HTML元素，已弃用，不应继续使用。 不要在新项目中使用它们，应尽快在旧项目替换它们，即使它们现在依然可以使用。

<acronym>、<applet>、<basefont>、<bgsound>、<big>、<blink>、<center>、<command>、<content>、<dir>、<element>、<font>、<frame>、<frameset>、<image>、<isindex>、<keygen>、<listing>、<marquee>、<menuitem>、<multicol>、<nextid>、<nobr>、<noembed>、<noframes>、<plaintext>、<shadow>、<spacer>、<strike>、<tt>、<xmp>。

替换元素的概念及计算规则

替换元素（Replaced Element）是指在渲染过程中由外部资源决定其内容的元素。换句话说，替换元素的内容不受CSS样式的影响，而是由外部资源（如图像、视频、音频等）提供。

常见的替换元素包括<img>、<video>、<audio>、<object>、<iframe>等。

替换元素的计算规则如下：

1. 内容计算：替换元素的内容由其指定的外部资源提供，因此替换元素的内容不受CSS样式的影响。其内容通常是浏览器根据指定的资源进行解析和渲染。
2. 尺寸计算：替换元素的尺寸由其内容决定，一般是根据外部资源的实际尺寸来确定。如果未指定尺寸，浏览器可能会根据资源的默认尺寸或其他规则进行计算。
3. 替换元素的默认样式：浏览器会为替换元素提供一些默认的样式，以确保替换元素在没有外部资源或样式的情况下有合适的显示。不同浏览器的默认样式可能会有所不同。
4. 替换元素的替换规则：如果指定的外部资源无法加载或解析，浏览器会根据替换规则来选择替代内容进行显示。例如，对于无法加载的图像，浏览器可能会显示替代文本或占位符图像。

需要注意的是，替换元素是通过外部资源提供内容的，因此无法通过CSS样式来直接修改其内容。但可以通过一些特定的属性或样式来控制替换元素的显示方式，比如指定外部资源的URL、设置尺寸、设置媒体播放控制等。

总而言之，替换元素在渲染过程中不受CSS样式的影响，其内容由外部资源提供，而尺寸和默认样式等特性会根据外部资源的实际情况进行计算和显示。

替换元素类型分类

替换元素可以根据其内容的类型进行分类。以下是替换元素的主要分类：

1. 图像替换元素（Image Replaced Elements）：包括<img>元素，用于在页面上显示图像。图像元素的内容由src属性指定的外部图像资源提供。
2. 多媒体替换元素（Media Replaced Elements）：包括<video>、<audio>等元素，用于在页面上显示视频和音频。这些元素的内容由指定的外部媒体资源提供。
3. 表单替换元素（Form Replaced Elements）：包括<input type="file">、<input type="checkbox">等元素，用于创建表单元素，其外观和交互方式由浏览器自身决定。
4. 框架替换元素（Frame Replaced Elements）：包括<iframe>、<object>等元素，用于在页面中嵌入其他文档或多媒体内容。这些元素的内容由指定的外部资源提供。
5. 字体替换元素（Font Replaced Elements）：包括使用@font-face定义的自定义字体元素，如<span>、<h1>等。这些元素的字体样式由指定的字体资源提供。

需要注意的是，并非所有具有外部资源的元素都被视为替换元素。例如，<div>、<span>等元素不是替换元素，因为它们的内容由其内部文本或其他嵌套元素提供，而不依赖于外部资源。

替换元素的分类有助于理解其特性和渲染行为，以便正确使用和控制这些元素，并在需要时为其指定合适的属性和样式。

替换元素的尺寸从内而外分类

1. 内部尺寸（Intrinsic Dimensions）：内部尺寸是指替换元素内容自身固有的尺寸。对于图像替换元素，内部尺寸是指图像的实际宽度和高度。对于视频、音频等多媒体替换元素，内部尺寸是指媒体资源的实际宽度和高度。内部尺寸由替换元素的内容决定，不受CSS样式的影响。
2. 指定尺寸（Specified Dimensions）：指定尺寸是指通过CSS样式或属性显式指定给替换元素的宽度和高度。通过设置width和height属性，可以手动指定替换元素的尺寸。指定尺寸会覆盖替换元素的内部尺寸，因此可以通过CSS样式来控制替换元素的显示大小。
3. 计算尺寸（Computed Dimensions）：计算尺寸是指最终在文档中实际渲染时的尺寸。计算尺寸是根据内部尺寸和指定尺寸进行计算得到的结果。当内部尺寸和指定尺寸都存在时，浏览器会根据一定的规则（如保持纵横比、限制最大宽度或最大高度等）来计算最终的替换元素尺寸。

需要注意的是，替换元素的尺寸计算规则可能因具体的替换元素类型和浏览器的实现而有所不同。一些替换元素可能具有固定的宽高比，而其他替换元素可能根据可用空间自动调整尺寸。在使用替换元素时，可以通过指定尺寸或者使用适当的CSS样式来控制其显示大小。

综上所述，替换元素的尺寸可以从内部尺寸、指定尺寸和计算尺寸进行分类，并根据实际需求来设置和控制替换元素的尺寸。

对 CSSSprites 的理解

CSSSprites（精灵图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。

优点：

• 利用CSS Sprites能很好地减少网页的http请求，从而大大提高了页面的性能，这是CSS Sprites最大的优点；
• CSS Sprites能减少图片的字节，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

缺点：

• 在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；
• CSSSprites在开发的时候相对来说有点麻烦，需要借助photoshop或其他工具来对每个背景单元测量其准确的位置。
• 维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。

BFC

先来看两个相关的概念：

• Box: Box 是 CSS 布局的对象和基本单位，⼀个⻚⾯是由很多个 Box 组成的，这个Box就是我们所说的盒模型。
• Formatting context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦元素将如何定位，以及和其他元素的关系和相互作⽤。

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗来讲：BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

创建BFC的条件：

• 根元素：body；
• 元素设置浮动：float 除 none 以外的值；
• 元素设置绝对定位：position (absolute、fixed)；
• display 值为：inline-block、table-cell、table-caption、flex等；
• overflow 值为：hidden、auto、scroll；

BFC的特点：

• 垂直方向上，自上而下排列，和文档流的排列方式一致。
• 在BFC中上下相邻的两个容器的margin会重叠
• 计算BFC的高度时，需要计算浮动元素的高度
• BFC区域不会与浮动的容器发生重叠
• BFC是独立的容器，容器内部元素不会影响外部元素
• 每个元素的左margin值和容器的左border相接触

BFC的作用：

• 解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
• 解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。
• 创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。

.left{
     width: 100px;
     height: 200px;
     background: red;
     float: left;
 }
 .right{
     height: 300px;
     background: blue;
     overflow: hidden;
 }
 
<div class="left"></div>
<div class="right"></div>

左侧设置float:left，右侧设置overflow: hidden。这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局。

margin重叠

问题描述： 两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。

计算原则：

折叠合并后外边距的计算原则如下：

• 如果两者都是正数，那么就去最大者
• 如果是一正一负，就会正值减去负值的绝对值
• 两个都是负值时，用0减去两个中绝对值大的那个

解决办法：

对于折叠的情况，主要有两种：兄弟之间重叠和父子之间重叠

（1）兄弟之间重叠

• 底部元素变为行内盒子：display: inline-block
• 底部元素设置浮动：float
• 底部元素的position的值为absolute/fixed

（2）父子之间重叠

• 父元素加入：overflow: hidden
• 父元素添加透明边框：border:1px solid transparent
• 子元素变为行内盒子：display: inline-block
• 子元素加入浮动属性或定位