V-HuangChunMing.github.io
WebSite
一、TIPS
问题:在网址中输入目标网址后,是404,不是该目录下的index.html.
解决:在package.json下指定main{ "main": "index.js"}<!DOCTYPE html>声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。<head></head>标签里面记录,用户的不可见内容,比如pagetitle,cssLink.<body></body>标签里面放大部分的内容和可见内容.保存自动刷新是
webpack的功能HTML 将连续的空格、制表符或换行符（统称为“空白”）压缩为一个空格
<br/>换行,<hr/>元素是一个“水平规则”，它代表了一个主题中断。所有空 HTML 元素中的尾部斜杠 ( /) 完全是可选的。Absolute、Relative、Root-Relative Links
四种主要的图像格式
- JPG: 图像设计用于处理大型调色板，而不会过度增加文件大小。这使得它们非常适合包含大量渐变的照片和图像。另一方面，JPG 不允许透明像素
- GIF: 是简单动画的首选，但要权衡的是它们在调色板方面有些限制——永远不要将它们用于照片。透明像素是 GIF 的二元选项，这意味着您不能使用半透明像素。这会使在透明背景上获得高层次的细节变得困难。因此，如果您不需要动画，通常最好使用 PNG 图像。
- PNG:非常适合任何不是照片或动画的东西。对于照片，相同质量（人眼感知）的 PNG 文件通常比等效的 JPG 文件大。但是，它们确实可以很好地处理不透明度，并且没有调色板限制。这使得它们非常适合图标、技术图表、徽标
- SVG: 是一种基于矢量的图形格式，这意味着它可以放大或缩小到任何尺寸而不会损失质量。此属性使 SVG 图像成为响应式设计的绝佳工具。它们适用于几乎所有与 PNG 相同的用例，您应该尽可能使用它们。
<img url='' alt='' height='' width=''><html lang='en'><meta charset='UTF-8'/>reserved characters
<link rel='' href='' />:只能在<head>中,rel属性定义了资源和html文档之间的关系,href与<a>中的表示一个链接,不过此处应当指向一个.csscss最常见的度量单位为
px和em:前者是你直观地称之为像素的东西，不管用户是否有视网膜显示器，后者是相关元素的当前字体大小。font-family:是另一个内置的 CSS 属性，它为您选择的任何元素定义字体。它接受多个值，因为并非所有用户都会安装相同的字体。使用上面的代码片段，浏览器尝试首先加载最左边的 ( )，如果用户没有它，则Helvetica回退到，最后选择系统的默认无衬线字体。Arial每个网页的 CSS 层次结构如下所示：
- 浏览器的默认样式表
- 用户定义的样式表
- 外部样式表（就是我们）
- 页面特定样式（这也是我们）
- 内联样式（可能是我们，但绝不应该是）
<link>可以向同一页面添加多个元素,css规则可以分布在多个外部样式表中,顺序很重要,后出现的会覆盖先出现的块和内联框:
- 块:总是出现在前一个块元素的下方。这是 HTML 文档在 Web 浏览器呈现时的“自然”或“静态”流程
- 块:的宽度是根据其父容器的宽度自动设置的。在这种情况下，我们的块总是浏览器窗口的宽度
- 块:的默认高度基于它包含的内容。当您缩小浏览器窗口时，它
<h1>会分成两行，并相应调整其高度 - 内联框:不影响垂直间距。它们不是用来确定布局的——它们是用来设计块内的东西的.
- 宽度取决于它包含的内容，而不是父元素的宽度。
<img/>和<a>都是内联框The “CSS box model” is a set of rules that determine the dimensions of every element in a web page. It gives each box (both inline and block) four properties:
- Content – The text, image, or other media content in the element.
- Padding – The space between the box’s content and its border.
- Border – The line between the box’s padding and margin.
- Margin – The space between the box and surrounding boxes.
padding速记格式:
border:
内联框:调整padding不会撑大block的padding
border垂直边距折叠,要防止边距折叠可以放一个不可见元素来处理
<div style='padding-top: 1px'></div>width和height属性仅定义框内容的大小
CSS选择器:类选择器、后代选择器、伪类和ID选择器
链接伪类
- link– 用户从未访问过的链接。
- visited– 用户之前访问过的链接。
- hover– 用户鼠标悬停的链接。
- active– 被鼠标（或手指）按下的链接。
- 选择起的特殊性从大到`小
- #button-2
- .button:link
- a:link和.synopsis em（他们是平等的）
- .button
- a
- sidebar layout, a fixed-width layout, a full-bleed layout
- flex containers、flex items
- 水平对齐、跨轴（垂直）对齐
- flex container order、flex item order、flex item alignment、flexble items、flex items and auto-margins
- Use display: flex; to create a flex container.
- Use justify-content to define the horizontal alignment of items.
- Use align-items to define the vertical alignment of items.
- Use flex-direction if you need columns instead of rows.
- Use the row-reverse or column-reverse values to flip item order.
- Use order to customize the order of individual elements.
- Use align-self to vertically align individual items.
- Use flex to create flexible boxes that can stretch and shrink.
- Use display: flex; to create a flex container.
