记录编码过程中常用且易忘的知识点。

HTML

<main> 和 <section>

HTML5 有些元素能够指明不同的内容区域。 这些元素能让你的 HTML 易于阅读，并有助于搜索引擎优化（SEO）和无障碍访问。

<main> 标签来标识此页面的主要部分
<section> 标签用于将不同部分的内容分割，使代码整洁，规范，有层次，无实际意义。

合理，准确的使用标签有利于 SEO

<a>

链接标签

添加属性：target="_blank"，可以在新标签打开链接

<pre>

表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)

标签包含的内容会原样输出

<figure> 和 <figcaption>

<figure>：可附标题内容元素。
代表一段独立的内容，可能包含 <figcaption> 元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元。

  • <figure> 的内容为图像、插图、图表、代码片段等，在文档的主内容流中引用，但可以移动到文档的另一部分或附录而不影响主内容流
  • 插入 <figcaption>（作为第一个或最后一个子元素），可以将标题与 <figure> 元素相关联。图中找到的第一个 <figcaption> 元素显示为图的标题
小案例

<em> 和 <i>

在默认情况下，它们的视觉效果是一样的 (都是斜体)。但语义是不同的

  • <em> 标签表示其内容的着重强调
  • <i> 标签表示从正常散文中区分出的文本，例如外来词，虚构人物的思想，或者当文本指的是一个词语的定义，而不是其语义含义
一个 <em> 的例子可能是："Just <em>do</em> it already!"，或："We <em>had</em> to do something about it"。人或软件在阅读文本时，会对斜体字的发音使用重读强调

一个 <i> 的例子可能是："The <i>Queen Mary</i> sailed last night"。在这里，没有对 "Queen Mary" 这个词添加强调或重要性。它只是表明，谈论的对象不是一个名叫玛丽的女王，而是一艘名字叫玛丽的船。
另一个 <i> 的例子可能是："The word <i>the</i> is an article"

<form>

表单元素，用于提交数据

  • action 属性，表示数据提交的位置
  • 表单一般内嵌 <input> 元素，必须要有 name 属性，才能将值与 form 表单绑定。
  • 提交按钮：<input> 元素，type 为 submit 即可提交

<label>

表示用户界面中某个元素的说明
一般会将 <label> 和 <input> 关联在一起

将一个 <label> 和一个 <input> 元素匹配在一起，你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。

<label for="username">Click me</label> 
<input type="text" id="username" />

另外，你也可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，因为关联已隐含存在

<label>
  Do you like peas?
  <input type="checkbox" name="peas" />
</label>

<fieldset> 和 legend

fieldset 元素用于在 Web 表单中将相关的输入和标签组合在一起。
fieldset 元素是块级元素，这意味着它们出现在新的一行上。

legend 元素充当 fieldset 元素中内容的标题。它为用户提供了有关他们应该在表单的该部分中输入什么的上下文。

<article>

元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

自闭和标签

大多数标签都是成对出现的，少数自闭和如下：

  • <img> ，常见属性：
    • alt：文本（值）有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本
    • src：图片路径
  • **<input>**，常见属性：
    • name，必须要有 name 属性，才能将值与 form 表单绑定。
    • required，表示该项必填。
    • checked，默认选中（单选或复选框时）
    • type，类型
      • text 文本
      • button 按钮，默认为空，显示 value 属性的值
      • password 密码
      • number 数字
      • radio 单选框, name 属性相同的是一组单选框
      • checkbox 复选框
  • <meta> , 常见属性：
    • charset，字符集声明
  • <link> ，外部资源链接元素，常见属性：
    • href 设置外部资源的路径
    • rel 属性的值为“stylesheet”(样式表)，rel 表示 “关系 (relationship) ”

块级元素与行内级元素

  • 块级元素：默认占据整行
  • 行内级元素：默认占据实际内容长度
/* 变成行内级元素 */
display: inline-block;

/* 变成块级元素 */
display: block

CSS

元素居中

  margin-left: auto;
  margin-right: auto;

绝对长度单位

它们与其他任何东西都没有关系，通常被认为总是相同的大小

单位名称等价换算
cm厘米1cm = 37.8px = 25.2/64in
mm毫米1mm = 1/10th of 1cm
Q四分之一毫米1Q = 1/40th of 1cm
in英寸1in = 2.54cm = 96px
pc派卡1pc = 1/6th of 1in
pt点1pt = 1/72th of 1in
px像素1px = 1/96th of 1in

这些值中的大多数在用于打印时比用于屏幕输出时更有用。
例如，我们通常不会在屏幕上使用 cm（厘米）。惟一一个你经常使用的值，估计就是 px（像素）

相对长度单位

相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，你可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了 web 开发中一些最有用的单位。

单位相对于
em在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width。
ex字符“x”的高度。
ch数字“0”的宽度。
rem根元素的字体大小。
lh元素的行高。
rlh根元素的行高。当用于根元素的 font-size 或 line-height 属性时，它指的是这些属性的初始值。
vw视口宽度的 1%。
vh视口高度的 1%。
vmin视口较小尺寸的 1%。
vmax视口大尺寸的 1%。
vb在根元素的块向上，初始包含块的尺寸的 1%。
vi在根元素的行向上，初始包含块的尺寸的 1%。
svw、svh分别为视口较小尺寸的宽度和高度的 1%。
lvw、lvh分别为视口大尺寸 的宽度和高度的 1%。
dvw、dvh分别为动态视口 的宽度和高度的 1%。

box-sizing

定义了 user agent 应该如何计算一个元素的总宽度和总高度

在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人

  • content-box 是默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
  • border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高