Skip to content

M
Mister Hope.Github.Io

前端资源 / Mister Hope.Github.Io

通知 1
Star 0
Fork 0
M
Mister Hope.Github.Io

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 625319a7 编写于 作者: M Mr.Hope
浏览文件
操作

chore: update deps

上级 f50264c0
展开全部 隐藏空白更改
内联 并排
Showing with 928 addition and 875 deletion
pnpm-lock.yaml
浏览文件 @ 625319a7
此差异已折叠。
src/code/website/css/guide/box.md
浏览文件 @ 625319a7
......@@ -39,7 +39,7 @@ div {
当您指定一个 CSS 元素的宽度和高度属性时，您只是设置内容区域(content box)的宽度和高度。`padding` 和 `border` 再加上设置的宽高一起决定整个盒子的大小。
::: demo 元素的宽度与高度
::: normal-demo 元素的宽度与高度
```html
<div class="box" />
......@@ -62,7 +62,7 @@ div.box {
试想一下，您只有 250px 的空间。让我们设置总宽度为 250px 的元素:
::: demo 总宽度 250px 的元素
::: normal-demo 总宽度 250px 的元素
```html
<div class="box" />
......
src/code/website/css/guide/cascade.md
浏览文件 @ 625319a7
......@@ -48,7 +48,7 @@ h1 {
- 一个元素选择器不是很具体 (它会选择页面上该类型的所有元素)，所以它的优先级就会低一些。
- 一个类选择器稍微具体点 (它会选择该页面中有特定 class 属性值的元素)，所以它的优先级就要高一点。
::: demo 案例
::: normal-demo 案例
上面的 `h1` 会显示红色 (类选择器有更高的优先级，即使元素选择器顺序在它后面)。
......@@ -93,7 +93,7 @@ body {
`color` 应用在直接子元素，也影响其他后代，如子元素 `<li>`，和第一个嵌套列表中的子项。然后添加了一个 `special` 类到第二个嵌套列表。该类声明了不同的颜色。然后通过它的子元素继承。
::: demo 继承案例
::: normal-demo 继承案例
```html
<ul class="main">
......@@ -158,7 +158,7 @@ CSS 为控制继承提供了四个特殊的通用属性值。每个 CSS 属性
CSS 的缩写属性 `all` 可以用于同时将这些继承值中的一个应用于(几乎)所有属性。它的值可以是其中任意一个(`inherit`, `initial`, `unset`, `revert`)。这是一种撤销对样式所做更改的简便方法，以便回到默认状态。
::: demo 重设所有属性值
::: normal-demo 重设所有属性值
```html
<blockquote>
......
src/code/website/css/guide/selector.md
浏览文件 @ 625319a7
......@@ -13,7 +13,7 @@ CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合
<!-- more -->
::: demo 案例
::: normal-demo 案例
```html
<img src="/logo.svg" alt="logo" style="max-width: 150px" />
......
src/code/website/css/intro/background-and-border.md
浏览文件 @ 625319a7
......@@ -11,7 +11,7 @@ category: CSS
`background-color` 属性定义了 CSS 中任何元素的背景颜色。属性接受任何有效的颜色值。背景色扩展到元素的内容和内边距的下面。
::: demo 为元素盒子添加背景颜色
::: normal-demo 为元素盒子添加背景颜色
```html
<div class="box">
......@@ -42,7 +42,7 @@ span {
默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。
::: demo 两个方框一个有方框大的背景图像、另一个有星星的小图像。
::: normal-demo 两个方框一个有方框大的背景图像、另一个有星星的小图像。
```html
<div class="wrapper">
......@@ -79,7 +79,7 @@ span {
- `repeat-y` —垂直重复。
- `repeat` — 在两个方向重复。
::: demo 请自行更改并尝试
::: normal-demo 请自行更改并尝试
```html
<div class="box" />
......@@ -107,7 +107,7 @@ span {
- `cover`: 浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外
- `contain`: 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。
::: demo 案例
::: normal-demo 案例
请自行更改并尝试:
......@@ -182,7 +182,7 @@ span {
}
```
::: demo 动手操作体会这些值
::: normal-demo 动手操作体会这些值
```html
<div class="box" />
......
src/code/website/css/intro/box.md
浏览文件 @ 625319a7
......@@ -93,7 +93,7 @@ margin 不计入实际大小，但它会影响盒子在页面所占空间，但
:::
::: demo 元素的宽度与高度
::: normal-demo 元素的宽度与高度
```html
<div class="box" />
......@@ -116,7 +116,7 @@ div.box {
试想一下，您只有 250px 的空间。让我们设置总宽度为 250px 的元素:
::: demo 总宽度 250px 的元素
::: normal-demo 总宽度 250px 的元素
```html
<div class="box" />
......@@ -197,7 +197,7 @@ html {
如果您有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。
::: demo 外边距折叠案例
::: normal-demo 外边距折叠案例
我们有两个段落。顶部段落 `margin-bottom` 为 `50px`。第二段的 `margin-top` 为 `30px`。因为外边距折叠的概念，所以框之间的实际外边距是 `50px`，而不是两个外边距的总和。
......@@ -264,7 +264,7 @@ html {
设置边框的颜色、样式或宽度，可以使用最细粒度的普通属性或者简写属性。
::: demo 边框案例
::: normal-demo 边框案例
```html
<div class="container">
......
src/code/website/css/intro/font.md
浏览文件 @ 625319a7
......@@ -32,7 +32,7 @@ category: CSS
color 也可以接受任何合法的 CSS 颜色单位。
::: demo 字体颜色
::: normal-demo 字体颜色
```html
<p>我是红色</p>
......@@ -107,7 +107,7 @@ p {
元素的 font-size 属性是从该元素的父元素继承的。所以这一切都是从整个文档的根元素 `<html>` 开始，浏览器的 font-size 标准设置的值为 16px。在根元素中的任何段落 (或者那些浏览器没有设置默认大小的元素)，会有一个最终的大小值: 16px。其他元素也许有默认的大小，比如 `<h1>` 元素有一个 2em 的默认值，所以它的最终大小值为 32px。
::: demo em 的计算
::: normal-demo em 的计算
```html
<!-- 文档 font-size 为 16px -->
......
src/code/website/css/intro/overflow.md
浏览文件 @ 625319a7
......@@ -15,7 +15,7 @@ category: CSS
在默认情况下，CSS 会将元素溢出的部分显示在和盒子外。
::: demo 例子
::: normal-demo 例子
```html
<div class="word">Overflow</div>
......
src/code/website/css/intro/replaced.md
浏览文件 @ 625319a7
......@@ -31,7 +31,7 @@ CSS 能对可替换元素产生的唯一影响在于，部分属性支持控制
- `contain` 会缩放图片到足以放到盒子里面的大小。如果它和盒子的比例不同，会在某侧留白。
- `fill` 可以让图像充满盒子，但是不会维持比例。
::: demo 调整图像大小
::: normal-demo 调整图像大小
```html
<div class="wrapper">
......@@ -70,7 +70,7 @@ img {
替换元素使用各式 CSS 布局技巧时，他们的展现略微与其他元素不同。
::: demo 布局中的替换元素
::: normal-demo 布局中的替换元素
在一个 flex 或者 grid 布局中，元素默认会把拉伸到充满整块区域。图像不会拉伸，而是会被对齐到网格区域或者弹性容器的起始处。
......
src/code/website/css/intro/selector.md
浏览文件 @ 625319a7
......@@ -13,7 +13,7 @@ CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合
<!-- more -->
::: demo 案例
::: normal-demo 案例
```html
<img src="/logo.svg" alt="logo" style="max-width: 150px" />
......
src/code/website/css/intro/sizing.md
浏览文件 @ 625319a7
......@@ -11,7 +11,7 @@ category: CSS
一个空的 `<div>` 是没有尺寸的。如果您在您的 HTML 文件中添加一个空 `<div>` 并给予其边框，您会在页面上看到一条线。
::: demo 案例
::: normal-demo 案例
```html
<img src="/assets/img/star.png" alt="star" />
......@@ -34,7 +34,7 @@ img {
当给元素指定尺寸时，我们将其称为**外部尺寸**。 我们可以给它一个具体的 `width` 和 `height` 值, 不论它的内容是什么，它将都是该尺寸。
::: demo 设置尺寸
::: normal-demo 设置尺寸
```html
<div class="wrapper">
......@@ -65,7 +65,7 @@ img {
当使用百分数时，您需要清楚，它是什么东西的百分数。对于一个处于另外一个容器当中的盒子，如果您给予了子盒子一个百分数作为宽度，那么它指的是父容器宽度的百分数。
::: demo 使用百分数
::: normal-demo 使用百分数
```html
<div class="box">我是百分比长度</div>
......@@ -90,7 +90,7 @@ img {
当您用百分数设定内外边距的时候，值是以**内联尺寸**进行计算的，也即对于左右书写的语言来说的宽度。在我们的例子里面，所有的内外边距是这一宽度的 10%，也就是说，您可以让盒子周围的内外边距大小相同。在您以这种方式使用百分数的时候，这是一个需要记住的事实。
::: demo 边距
::: normal-demo 边距
```html
<div class="box">所有方向的 margin and padding 都是 10%</div>
......@@ -113,7 +113,7 @@ img {
如果您有一个包含了变化容量的内容的盒子，而且您总是想让它至少有个确定的高度，您应该给它设置一个 `min-height` 属性。盒子就会一直保持大于这个最小高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。这在避免溢出的同时并处理变化容量的内容的时候是很有用的。
::: demo 最大最小尺寸
::: normal-demo 最大最小尺寸
```html
<div class="wrapper">
......@@ -142,7 +142,7 @@ img {
`max-width` 的常见用法为，在没有足够空间以原有宽度展示图像时，让图像缩小，同时确保它们不会比这一宽度大。这个技术是用来让图片可响应的，所以在更小的设备上浏览的时候，它们会合适地缩放。
::: demo 最大宽度与图像
::: normal-demo 最大宽度与图像
```html
<div class="wrapper">
......
src/code/website/css/intro/text-direction.md
浏览文件 @ 625319a7
......@@ -13,7 +13,7 @@ CSS 中的书写模式是指文本的排列方向是横向还是纵向的。`wri
竖向文本在平面设计中很常见，也可以为您的网页设计增添更加有趣的外观。
::: demo 竖向标题文本
::: normal-demo 竖向标题文本
```html
<h1>Play with writing modes</h1>
......@@ -65,7 +65,7 @@ CSS 的映射属性用逻辑(logical)和相对变化(flow relative)代替了像
横向书写模式下，映射到 width 的属性被称作内联尺寸(inline-size)——内联维度的尺寸。而映射 height 的属性被称为块级尺寸(block-size)，这是块级维度的尺寸。下面的例子展示了替换掉 width 的 inline-size 是如何生效的。
::: demo 映射属性
::: normal-demo 映射属性
```html
<div class="wrapper">
......
src/code/website/css/intro/value.md
浏览文件 @ 625319a7
......@@ -54,7 +54,7 @@ category: CSS
| vmin | 视窗较小尺寸的 1% |
| vmax | 视图大尺寸的 1% |
::: demo 长度单位
::: normal-demo 长度单位
```html
<div class="wrapper">
......@@ -93,7 +93,7 @@ em 和 rem 是您在从框到文本调整大小时最常遇到的两个相对长
也就是一个是相对于父元素，一个是相对于整个文档的默认字号。
::: demo em 与 rem 演示
::: normal-demo em 与 rem 演示
```html
<ul class="em">
......@@ -134,7 +134,7 @@ html {
在许多情况下，百分比与长度的处理方法是一样的。百分比的问题在于，它们总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。
::: demo 百分比与绝对长度
::: normal-demo 百分比与绝对长度
```html
<div class="box px">200px 宽</div>
......@@ -192,7 +192,7 @@ li {
有些值接受数字，不添加任何单位。
::: demo 数字值
::: normal-demo 数字值
```html
<div class="wrapper">
......@@ -225,7 +225,7 @@ CSS 预设了一些关键词，比如 `black` `white` `red` 等。
这种颜色值类型是十六进制代码。每个十六进制值由一个 `#` 和六个十六进制数字组成，每个十六进制数字都可以取 0 到 f(代表 15)之间的 16 个值中的一个。每对值表示一个通道。通道依次为: 红色、绿色和蓝色。每个通道可以指定 256 个可用值中的任意一个。
::: demo 十六进制颜色
::: normal-demo 十六进制颜色
```html
<div class="wrapper">
......@@ -255,7 +255,7 @@ CSS 预设了一些关键词，比如 `black` `white` `red` 等。
RGB 值是一个函数 `RGB()`。它有三个参数，表示颜色的红色、绿色和蓝色通道值，与十六进制值的方法非常相似。RGB 的不同之处在于，每个通道不是由两个十六进制数字表示的，而是由一个介于 0 到 255 之间的十进制数字表示的。
::: demo RGB 颜色
::: normal-demo RGB 颜色
```html
<div class="wrapper">
......@@ -283,7 +283,7 @@ RGB 值是一个函数 `RGB()`。它有三个参数，表示颜色的红色、
RGBA 的工作方式与 RGB 完全相同，但有第四个值表示颜色的 alpha 通道，它控制不透明度。如果将这个值设置为 0，它将使颜色完全透明，而设置为 1 将使颜色完全不透明。介于两者之间的值提供了不同级别的透明度。
::: demo RGBA 颜色
::: normal-demo RGBA 颜色
```html
<div class="wrapper">
......@@ -323,7 +323,7 @@ RGBA 的工作方式与 RGB 完全相同，但有第四个值表示颜色的 alp
- 饱和度: 值为 0 - 100%，其中 0 为无颜色(它将显示为灰色阴影)，100%为全色饱和度
- 亮度: 从 0 - 100%中获取一个值，其中 0 表示没有光(它将完全显示为黑色)，100%表示完全亮(它将完全显示为白色)
::: demo HSL 颜色
::: normal-demo HSL 颜色
```html
<div class="wrapper">
......@@ -351,7 +351,7 @@ RGBA 的工作方式与 RGB 完全相同，但有第四个值表示颜色的 alp
就像 RGB 和 RGBA，HSL 有 HSLA，它使您能够指定 alpha 通道值。
::: demo HSLA 颜色
::: normal-demo HSLA 颜色
```html
<div class="wrapper">
......@@ -381,7 +381,7 @@ RGBA 的工作方式与 RGB 完全相同，但有第四个值表示颜色的 alp
`<image>` 数据类型用于图像为有效值的任何地方。它可以是一个通过 `url()` 函数指向的实际图像文件，也可以是一个渐变。
::: demo 背景图片
::: normal-demo 背景图片
```html
<div class="box image" />
......@@ -415,7 +415,7 @@ RGBA 的工作方式与 RGB 完全相同，但有第四个值表示颜色的 alp
一个典型的位置值由两个值组成——第一个值水平地设置位置，第二个值垂直地设置位置。如果只指定一个轴的值，另一个轴将默认为 center。
::: demo 位置
::: normal-demo 位置
```html
<div class="box" />
......@@ -449,7 +449,7 @@ CSS 中的某些值接受字符串，字符串必须用引号包裹起来。
行为更类似于传统编程语言的值是 `calc()` 函数。这个函数使您能够在 CSS 中进行简单的计算。如果您希望计算出在为项目编写 CSS 时无法定义的值，并且需要浏览器在运行时为您计算出这些值，那么它特别有用。
::: demo calc() 计算
::: normal-demo calc() 计算
```html
<div class="wrapper">
......
src/code/website/css/layout/exercise.md
浏览文件 @ 625319a7
......@@ -25,7 +25,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
首先，只有左上角 1 个点的情况。Flex 布局默认就是首行左对齐，所以一行代码就够了。
::: demo 点位 1
::: normal-demo 点位 1
```html
<div class="dice-container">
......@@ -70,7 +70,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
设置项目的对齐方式，就能实现居中对齐和右对齐。
::: demo 点位 2
::: normal-demo 点位 2
```html
<div class="dice-container">
......@@ -114,7 +114,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
:::
::: demo 点位 3
::: normal-demo 点位 3
```html
<div class="dice-container">
......@@ -160,7 +160,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
设置交叉轴对齐方式，可以垂直移动主轴。
::: demo 点位 4
::: normal-demo 点位 4
```html
<div class="dice-container">
......@@ -204,7 +204,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
:::
::: demo 点位 5
::: normal-demo 点位 5
```html
<div class="dice-container">
......@@ -249,7 +249,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
:::
::: demo 点位 8
::: normal-demo 点位 8
```html
<div class="dice-container">
......@@ -294,7 +294,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
:::
::: demo 点位 9
::: normal-demo 点位 9
```html
<div class="dice-container">
......@@ -341,7 +341,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
### 双项目
::: demo 双点位 13
::: normal-demo 双点位 13
```html
<div class="dice-container">
......@@ -386,7 +386,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
:::
::: demo 双点位 17
::: normal-demo 双点位 17
```html
<div class="dice-container">
......@@ -432,7 +432,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
:::
::: demo 双点位 28
::: normal-demo 双点位 28
```html
<div class="dice-container">
......@@ -479,7 +479,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
:::
::: demo 双点位 39
::: normal-demo 双点位 39
```html
<div class="dice-container">
......@@ -526,7 +526,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
:::
::: demo 双点位 15
::: normal-demo 双点位 15
```html
<div class="dice-container">
......@@ -574,7 +574,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
:::
::: demo 双点位 19
::: normal-demo 双点位 19
```html
<div class="dice-container">
......@@ -625,7 +625,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
### 三项目
::: demo 三点
::: normal-demo 三点
```html
<div class="dice-container">
......@@ -680,7 +680,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
### 四项目
::: demo 四点
::: normal-demo 四点
```html
<div class="dice-container">
......@@ -740,7 +740,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
### 六项目
::: demo 六点
::: normal-demo 六点
```html
<div class="dice-container">
......@@ -791,7 +791,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
:::
::: demo 六点 2
::: normal-demo 六点 2
```html
<div class="dice-container">
......@@ -845,7 +845,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
您还可以使用高级选择器:
::: demo 一个图案
::: normal-demo 一个图案
```html
<div class="dice-container">
......@@ -919,7 +919,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。
::: demo 网格布局
::: normal-demo 网格布局
```html
<div class="grid-wrapper">
......@@ -972,7 +972,7 @@ CSS 代码如下。
某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。
::: demo 百分比布局
::: normal-demo 百分比布局
```html
<div class="grid-wrapper">
......
src/code/website/css/layout/flex.md
浏览文件 @ 625319a7
......@@ -109,7 +109,7 @@ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型
1. `nowrap`(默认): 不换行。
::: demo nowrap
::: normal-demo nowrap
```html
<div class="wrapper">
......@@ -146,7 +146,7 @@ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型
1. `wrap`: 换行，第一行在上方。
::: demo wrap
::: normal-demo wrap
```html
<div class="wrapper">
......@@ -183,7 +183,7 @@ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型
1. `wrap-reverse`: 换行，第一行在下方。
::: demo wrap-reverse
::: normal-demo wrap-reverse
```html
<div class="wrapper">
......@@ -238,7 +238,7 @@ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型
}
```
::: demo flex-start
::: normal-demo flex-start
```html
<div class="wrapper">
......@@ -275,7 +275,7 @@ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型
:::
::: demo flex-end
::: normal-demo flex-end
```html
<div class="wrapper">
......@@ -312,7 +312,7 @@ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型
:::
::: demo center
::: normal-demo center
```html
<div class="wrapper">
......@@ -349,7 +349,7 @@ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型
:::
::: demo space-between
::: normal-demo space-between
```html
<div class="wrapper">
......@@ -386,7 +386,7 @@ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型
:::
::: demo space-around
::: normal-demo space-around
```html
<div class="wrapper">
......@@ -423,7 +423,7 @@ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型
:::
::: demo space-evenly
::: normal-demo space-evenly
```html
<div class="wrapper">
......@@ -479,7 +479,7 @@ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型
}
```
::: demo flex-start
::: normal-demo flex-start
```html
<div class="wrapper">
......@@ -523,7 +523,7 @@ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型
:::
::: demo flex-end
::: normal-demo flex-end
```html
<div class="wrapper">
......@@ -567,7 +567,7 @@ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型
:::
::: demo center
::: normal-demo center
```html
<div class="wrapper">
......@@ -611,7 +611,7 @@ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型
:::
::: demo baseline
::: normal-demo baseline
```html
<div class="wrapper">
......@@ -657,7 +657,7 @@ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型
:::
::: demo stretch
::: normal-demo stretch
```html
<div class="wrapper">
......
src/code/website/css/layout/float.md
浏览文件 @ 625319a7
......@@ -18,7 +18,7 @@ category: CSS
- `right`: 将元素浮动到右侧。
- `none`: 默认值, 不浮动。
::: demo float 案例
::: normal-demo float 案例
```html
<h1>Simple float example</h1>
......@@ -53,7 +53,7 @@ category: CSS
## 首字下沉
::: demo 首字下沉
::: normal-demo 首字下沉
```html
<p>
......@@ -87,7 +87,7 @@ p::first-letter {
## 多列浮动布局
::: demo 多列浮动布局
::: normal-demo 多列浮动布局
```html
<div class="container">
......@@ -145,7 +145,7 @@ p::first-letter {
有些情况下，浮动元素内容过多会错乱排版。
::: demo 一个糟糕的浮动布局
::: normal-demo 一个糟糕的浮动布局
```html
<div class="container">
......@@ -233,7 +233,7 @@ clear 可以取三个值:
- `right`: 停止任何活动的右浮动
- `both`: 停止任何活动的左右浮动
::: demo 改进后的浮动布局
::: normal-demo 改进后的浮动布局
```html
<div class="container">
......@@ -388,7 +388,7 @@ footer {
}
```
::: demo 最终结果
::: normal-demo 最终结果
```html
<div class="container">
......
src/code/website/css/layout/flow.md
浏览文件 @ 625319a7
......@@ -23,7 +23,7 @@ category: CSS
如果两个相邻的元素都设置了 `margin` 并且两个 `margin` 有重叠，那么更大的设置会被保留，小的则会消失。这被称为外边距叠加。
::: demo 一个简单例子
::: normal-demo 一个简单例子
```html
<h1>Basic document flow</h1>
......
src/code/website/css/layout/grid.md
浏览文件 @ 625319a7
......@@ -11,7 +11,7 @@ copyright: 自由转载-非商用-非衍生-保持署名 (创意共享3.0许可
网格布局 (Grid) 是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
::: demo 网格布局案例
::: normal-demo 网格布局案例
```html
<div class="grid-demo">
......@@ -143,7 +143,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
`display: grid` 指定一个容器采用网格布局。
::: demo 网格布局
::: normal-demo 网格布局
```html
<span style="font-size: 22px">Mr.Hope</span>
......@@ -215,7 +215,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
默认情况下，容器元素都是块级元素，但也可以设成行内元素。
::: demo 行内网格布局
::: normal-demo 行内网格布局
```html
<span style="font-size: 22px">Mr.Hope</span>
......@@ -295,7 +295,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
容器指定了网格布局以后，接着就要划分行和列。`grid-template-columns` 属性定义每一列的列宽，`grid-template-rows` 属性定义每一行的行高。
::: demo 划分行和列
::: normal-demo 划分行和列
```html
<div class="grid-demo">
......@@ -367,7 +367,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
除了使用绝对单位，也可以使用百分比。
::: demo 百分比
::: normal-demo 百分比
```html
<div class="grid-demo">
......@@ -439,7 +439,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用 `repeat()` 函数，简化重复的值。
::: demo repeat()
::: normal-demo repeat()
上面的代码用 `repeat()` 改写如下。
......@@ -513,7 +513,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
`repeat()` 重复某种模式也是可以的。
::: demo 重复模式
::: normal-demo 重复模式
```html
<div class="grid-demo">
......@@ -588,7 +588,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行 (或每一列) 容纳尽可能多的单元格，这时可以使用 `auto-fill` 关键字表示自动填充。
::: demo 自动填充
::: normal-demo 自动填充
```html
<div class="grid-demo">
......@@ -665,7 +665,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
为了方便表示比例关系，网格布局提供了 `fr` 关键字 (fraction 的缩写，意为"片段") 。如果两列的宽度分别为 `1fr` 和 `2fr`，就表示后者是前者的两倍。
::: demo fr
::: normal-demo fr
下面代码表示两个相同宽度的列。
......@@ -740,7 +740,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
`fr` 可以与绝对长度的单位结合使用，这时会非常方便。
::: demo fr 的混用
::: normal-demo fr 的混用
下面代码表示，第一列的宽度为 150 像素，第二列的宽度是第三列的一半。
......@@ -817,7 +817,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
`minmax()` 函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
::: demo minmax()
::: normal-demo minmax()
下面代码中，`minmax(100px, 1fr)` 表示列宽不小于 `100px`，不大于 `1fr`。
......@@ -894,7 +894,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
`auto` 关键字表示由浏览器自己决定长度。
::: demo auto
::: normal-demo auto
下面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了 `min-width`，且这个值大于最大宽度。
......@@ -971,7 +971,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
`grid-template-columns` 属性和 `grid-template-rows` 属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。
::: demo 网格线的名称
::: normal-demo 网格线的名称
下面代码指定网格布局为 3 行 x 3 列，因此有 4 根垂直网格线和 4 根水平网格线。方括号里面依次是这八根线的名字。
......@@ -1075,7 +1075,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
}
```
::: demo 间距设置
::: normal-demo 间距设置
```html
<div class="grid-demo">
......@@ -1234,7 +1234,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下方数字的顺序。
::: demo 默认顺序“先行后列”
::: normal-demo 默认顺序“先行后列”
```html
<div class="grid-demo">
......@@ -1306,7 +1306,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
设置了 `column` 以后，放置顺序就变成了下图。
::: demo grid-auto-flow: column
::: normal-demo grid-auto-flow: column
```html
<div class="grid-demo">
......@@ -1379,7 +1379,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
下面的例子让 1 号项目和 2 号项目各占据两个单元格，然后在默认的 `grid-auto-flow: row` 情况下，会产生下面这样的布局。
::: demo 项目占据多个单元格下的 grid-auto-flow: row
::: normal-demo 项目占据多个单元格下的 grid-auto-flow: row
```html
<div class="grid-demo">
......@@ -1460,7 +1460,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
上面代码的效果如下。
::: demo grid-auto-flow: row dense
::: normal-demo grid-auto-flow: row dense
```html
<div class="grid-demo">
......@@ -1541,7 +1541,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
上面代码的效果如下。
::: demo grid-auto-flow: column dense
::: normal-demo grid-auto-flow: column dense
```html
<div class="grid-demo">
......@@ -1644,7 +1644,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
上面代码表示，单元格的内容左对齐，效果如下图。
::: demo justify-items: start
::: normal-demo justify-items: start
```html
<div class="grid-demo">
......@@ -1722,7 +1722,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
上面代码表示，单元格的内容头部对齐，效果如下图。
::: demo align-items: start
::: normal-demo align-items: start
```html
<div class="grid-demo">
......@@ -1802,7 +1802,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
下面是一个例子。
::: demo place-items: start end
::: normal-demo place-items: start end
```html
<div class="grid-demo">
......@@ -1890,7 +1890,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
这两个属性的写法完全相同，都可以取下面这些值。(下面的图都以 `justify-content` 属性为例，`align-content` 属性的图完全一样，只是将水平方向改成垂直方向。)
::: demo start - 对齐容器的起始边框。
::: normal-demo start - 对齐容器的起始边框。
```html
<div class="grid-demo">
......@@ -1962,7 +1962,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
:::
::: demo end - 对齐容器的结束边框
::: normal-demo end - 对齐容器的结束边框
```html
<div class="grid-demo">
......@@ -2034,7 +2034,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
:::
::: demo center - 容器内部居中
::: normal-demo center - 容器内部居中
```html
<div class="grid-demo">
......@@ -2106,7 +2106,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
:::
::: demo stretch - 项目大小没有指定时，拉伸占据整个网格容器
::: normal-demo stretch - 项目大小没有指定时，拉伸占据整个网格容器
```html
<div class="grid-demo">
......@@ -2178,7 +2178,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
:::
::: demo space-around - 每个项目两侧的间隔相等
::: normal-demo space-around - 每个项目两侧的间隔相等
这意味着项目之间的间隔比项目与容器边框的间隔大一倍。
......@@ -2252,7 +2252,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
:::
::: demo space-between - 项目与项目的间隔相等
::: normal-demo space-between - 项目与项目的间隔相等
这意味着项目与容器边框之间没有间隔。
......@@ -2326,7 +2326,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
:::
::: demo space-evenly - 项目与项目的间隔相等
::: normal-demo space-evenly - 项目与项目的间隔相等
这意味着项目与容器边框之间也是同样长度的间隔。
......@@ -2410,7 +2410,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
下面是一个例子。
::: demo place-content: space-around space-evenly
::: normal-demo place-content: space-around space-evenly
```html
<div class="grid-demo">
......@@ -2540,7 +2540,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
上面代码指定，1 号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。
::: demo 案例渲染结果
::: normal-demo 案例渲染结果
```html
<div class="grid-demo">
......@@ -2626,7 +2626,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
}
```
::: demo 案例渲染结果
::: normal-demo 案例渲染结果
```html
<div class="grid-demo">
......@@ -2720,7 +2720,7 @@ Grid 布局的属性分成两类。一类定义在容器上面，称为容器属
上面代码表示，1 号项目的左边框距离右边框跨越 2 个网格。
::: demo grid-column-start: span 2
::: normal-demo grid-column-start: span 2
```html
<div class="grid-demo">
......
src/code/website/css/layout/intro.md
浏览文件 @ 625319a7
......@@ -9,7 +9,7 @@ category: CSS
正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。HTML 元素完全按照源码中出现的先后次序显示。
::: demo 正常布局流
::: normal-demo 正常布局流
```html
<p>Mr.Hope 很帅</p>
......@@ -74,7 +74,7 @@ category: CSS
Flexbox 是 CSS 弹性盒子布局模块(Flexible Box Layout Module)的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。要使用 flexbox，您只需要在想要进行 flex 布局的父元素上应用 `display: flex` ，所有直接子元素都将会按照 flex 进行布局。
::: demo Flexbox
::: normal-demo Flexbox
当我们把 `display: flex` 添加到父元素时，三个元素就自动按列进行排列。这是由于它们变成了 flex 项(flex items)，按照 flex 容器(也就是它们的父元素)的一些 flex 相关的初值进行 flex 布局: 它们整整齐齐排成一行，是因为父元素上 flex-direction 的初值是 row。它们全都被拉伸至和最高的元素高度相同，是因为父元素上 `align-items` 属性的初值是 `stretch`。这就意味着所有的子元素都会被拉伸到它们的 flex 容器的高度，在这个案例里就是所有 flex 项中最高的一项。所有项目都从容器的开始位置进行排列，排列成一行后，在尾部留下一片空白。
......@@ -102,7 +102,7 @@ Flexbox 是 CSS 弹性盒子布局模块(Flexible Box Layout Module)的缩写，
很多属性可以被应用到 flex 项(flex items)上面。这些属性可以改变 flex 项在 flex 布局中占用宽/高的方式，允许它们通过伸缩来适应可用空间。
::: demo flex 属性
::: normal-demo flex 属性
作为一个简单的例子，我们可以在我们的所有子元素上添加 flex 属性，并赋值为 1，这会使得所有的子元素都伸展并填充容器，而不是在尾部留下空白，如果有更多空间，那么子元素们就会变得更宽，反之，他们就会变得更窄。除此之外，如果您在 HTML 标记中添加了一个新元素，那么它们也会变得更小，来为新元素创造空间——不管怎样，最终它们会调整自己直到占用相同宽度的空间。
......@@ -143,7 +143,7 @@ Flexbox 用于设计横向或纵向的布局，而 Grid 布局则被设计用于
使用 `grid-template-rows` 和 `grid-template-columns` 两个属性定义行和列的轨道。
::: demo Grid 布局
::: normal-demo Grid 布局
```html
<div class="wrapper">
......@@ -176,7 +176,7 @@ Flexbox 用于设计横向或纵向的布局，而 Grid 布局则被设计用于
利用 `grid-column` 和 `grid-row` 两个属性，您可以指定每一个子元素应该从哪一行/列开始，并在哪一行/列结束。这就能够让子元素在多个行/列上展开。
::: demo 显示指定元素摆放
::: normal-demo 显示指定元素摆放
```html
<div class="wrapper">
......@@ -237,7 +237,7 @@ Flexbox 用于设计横向或纵向的布局，而 Grid 布局则被设计用于
### 简单定位
::: demo 默认定位方式
::: normal-demo 默认定位方式
```html
<h1>定位</h1>
......@@ -280,7 +280,7 @@ p {
请注意，`top` 和 `left` 不能被理解成向上或向左，而是顶部与左侧与初始距离的位置。
::: demo 相对定位
::: normal-demo 相对定位
```html
<h1>相对定位</h1>
......@@ -324,7 +324,7 @@ p {
}
```
::: demo 绝对定位
::: normal-demo 绝对定位
```html
<h1>绝对定位</h1>
......@@ -360,7 +360,7 @@ p {
固定定位(fixed positioning)同绝对定位(absolute positioning)一样，将元素从文档流(document flow)当中移出了。但是，定位的坐标不会应用于"容器"边框来计算元素的位置，而是会应用于视口(viewport)边框。利用这一特性，我们可以轻松搞出一个固定位置的菜单，而不受底下的页面滚动的影响。
::: demo 固定定位
::: normal-demo 固定定位
```html
<h1>固定定位</h1>
......@@ -387,7 +387,7 @@ p {
粘性定位(sticky positioning)是最后一种我们能够使用的定位方式。它将默认的静态定位(static positioning)和固定定位(fixed positioning)相混合。当一个元素被指定了 `position: sticky` 时，它会在正常布局流中滚动，直到它出现在了我们给它设定的相对于容器的位置，这时候它就会停止随滚动移动，就像它被应用了 `position: fixed` 一样。
::: demo 粘性定位
::: normal-demo 粘性定位
```html
<h1>Sticky positioning</h1>
......@@ -446,7 +446,7 @@ p {
- `none`: 默认值, 不浮动。
- `inherit`: 继承父元素的浮动属性。
::: demo float 案例
::: normal-demo float 案例
```html
<h1>简单的 float 案例</h1>
......@@ -481,7 +481,7 @@ p {
要把一个块转变成多列容器(multicol container)，我们可以使用 `column-count` 属性来告诉浏览器我们需要多少列，也可以使用 `column-width` 来告诉浏览器以至少某个宽度的尽可能多的列来填充容器。
::: demo 多列布局
::: normal-demo 多列布局
```html
<h1>Multi-column layout</h1>
......
src/code/website/html/guide/README.md
浏览文件 @ 625319a7
......@@ -35,7 +35,7 @@ Mr.Hope is handsome.
HTML 可以将这行文字封装成一个段落(**p**aragraph)元素来使其在单独一行呈现:
::: demo HTML 段落
::: normal-demo HTML 段落
```html
<p>Mr.Hope is handsome.</p>
......@@ -71,7 +71,7 @@ An element is:
<tagname attribution1="value1" attribution2="value2">content</tagname>
```
::: demo 案例
::: normal-demo 案例
```html
<p>Mr.Hope is handsome.</p>
......@@ -141,7 +141,7 @@ An element is:
除了并列放置标签以外，标签的内容也可以放置其他标签，这就构成了标签的嵌套。比如您想强调 Mr.Hope 的帅:
::: demo 标签的嵌套
::: normal-demo 标签的嵌套
```html
<p>Mr.Hope is <strong>very</strong> handsome.</p>
......@@ -271,7 +271,7 @@ W3C 也将 UTF-8 标记为推荐的字符编码，所以建议在任何 HTML
您可能已经注意到了在代码中包含了很多的空格——这是没有必要的。
::: demo 两个完全等价的段落
::: normal-demo 两个完全等价的段落
```html
<p>狗 狗
......
src/code/website/html/guide/tag.md
浏览文件 @ 625319a7
......@@ -11,7 +11,7 @@ tag:
HTML 标题 (Heading) 是通过 `<h1>` - `<h6>` 标签来定义的。
::: demo HTML 标题
::: normal-demo HTML 标题
```html
<h1>这是一个标题</h1>
......@@ -25,7 +25,7 @@ HTML 标题 (Heading) 是通过 `<h1>` - `<h6>` 标签来定义的。
HTML 段落是通过标签 `<p>` 来定义的。
::: demo HTML 段落
::: normal-demo HTML 段落
```html
<p>这是一个段落。</p>
......@@ -43,7 +43,7 @@ HTML 段落是通过标签 `<p>` 来定义的。
列表的每个项目用一个列表项目 (List Item) 元素 `<li>` 包围。
::: demo HTML 列表
::: normal-demo HTML 列表
```html
<p>购物清单</p>
......@@ -67,7 +67,7 @@ HTML 段落是通过标签 `<p>` 来定义的。
HTML 链接是通过标签 `<a>` 来定义的。
::: demo HTML 链接
::: normal-demo HTML 链接
```html
<a href="https://mrhope.site">这是一个链接</a>
......@@ -85,7 +85,7 @@ href 属性指定链接的地址。
HTML 图像是通过标签 `<img>` 来定义的。
::: demo HTML 图像
::: normal-demo HTML 图像
```html
<img src="/logo.svg" width="60" height="60" />
......@@ -99,7 +99,7 @@ HTML 图像是通过标签 `<img>` 来定义的。
`hr` 元素可用于分隔内容。
::: demo HTML 水平线
::: normal-demo HTML 水平线
```html
<p>这是一个段落。</p>
......@@ -133,7 +133,7 @@ HTML 图像是通过标签 `<img>` 来定义的。
如果您希望在不产生一个新段落的情况下进行换行(新行)，请使用 `<br>` 标签:
::: demo HTML 折行
::: normal-demo HTML 折行
```html
<p>这个<br />段落<br />演示了分行的效果</p>
......@@ -147,7 +147,7 @@ HTML 图像是通过标签 `<img>` 来定义的。
在开发中，最常用的就是块标签(`<div />`)。
::: demo HTML 块
::: normal-demo HTML 块
```html
<div>这是一个没有任何样式的块</div>
......
src/code/website/html/intro/basic.md
浏览文件 @ 625319a7
......@@ -19,7 +19,7 @@ tag:
在 HTML 中，每个段落是通过 `<p>` 元素标签进行定义的, 比如下面这样:
::: demo 一个段落
::: normal-demo 一个段落
```html
<p>我是一个段落，千真万确。</p>
......@@ -29,7 +29,7 @@ tag:
每个标题(Heading)是通过“标题标签”进行定义的:
::: demo 一个标题
::: normal-demo 一个标题
```html
<h1>我是文章的标题</h1>
......@@ -74,7 +74,7 @@ tag:
在另一方面，您可以让任一元素看起来像一个顶级标题，如下:
::: demo 一个看起来很像顶级标题的 span
::: normal-demo 一个看起来很像顶级标题的 span
```html
<span style="font-size: 32px; margin: 21px 0;">这是顶级标题吗? </span>
......@@ -103,7 +103,7 @@ tag:
每份无序的清单从 `<ul>` 元素开始，它包裹所有列表项目，下一步就是用 `<li>` 元素把每个列出的项目分别包裹起来:
::: demo 无序列表
::: normal-demo 无序列表
```html
<ul>
......@@ -130,7 +130,7 @@ tag:
这个标记的结构和无序列表一样，唯一不同的是您需要用 `<ol>` 元素将所有项目包裹, 而不是用 `<ul>`:
::: demo 有序列表
::: normal-demo 有序列表
```html
<ol>
......@@ -152,7 +152,7 @@ tag:
请务必注意正确嵌套列表，不要忘记父元素 `<ul>`。
::: demo 一个嵌套列表
::: normal-demo 一个嵌套列表
```html
<ol>
......@@ -203,9 +203,9 @@ I am _glad_ you weren’t _late_.
为了强调重要的词，在口语方面我们往往用重音强调，在文字方面则是用粗体字来达到强调的效果。
在 HTML 中我们用 `<strong>` (strong importance) 元素来标记这样的请况。这样做既可以让文档更加地有用，也可以被屏幕阅读器识别出来，并以不同的语调发出。浏览器默认风格为粗体，但您不应该通过使用这个标签来获得粗体风格，而应该使用 `<span>` 元素和一些 CSS来实现，或者直接使用 `<b>` 元素 (见下文)。
在 HTML 中我们用 `<strong>` (strong importance) 元素来标记这样的请况。这样做既可以让文档更加地有用，也可以被屏幕阅读器识别出来，并以不同的语调发出。浏览器默认风格为粗体，但您不应该通过使用这个标签来获得粗体风格，而应该使用 `<span>` 元素和一些 CSS 来实现，或者直接使用 `<b>` 元素 (见下文)。
::: demo 强调
::: normal-demo 强调
```html
<p>This liquid is <strong>highly toxic</strong>.</p>
......@@ -217,7 +217,7 @@ I am _glad_ you weren’t _late_.
如有需要您可以将 strong 元素和 em 元素嵌套在其他的标签中:
::: demo 标签的嵌套
::: normal-demo 标签的嵌套
```html
<p>
......@@ -241,7 +241,7 @@ HTML5 用新的语义规则重新定义了 `<b>`,`<i>` 和 `<u>`,稍微有点混
- `<b>` 被用来传达传统上用粗体表达的意义: 关键字，产品名称，引导句……
- `<u>` 被用来传达传统上用下划线表达的意义: 专有名词，拼写错误……
::: demo 斜体字、粗体字、下划线
::: normal-demo 斜体字、粗体字、下划线
```html
<!-- 学名 -->
......
src/code/website/html/intro/format.md
浏览文件 @ 625319a7
......@@ -24,7 +24,7 @@ HTML 中有许多其他元素可以用于格式化文本。本文介绍标记引
描述列表使用与其他列表类型不同的闭合标签 `<dl>`; 此外，每一项都用 `<dt>` (description term) 元素闭合。每个描述都用 `<dd>` (description description) 元素闭合.
::: demo 描述列表
::: normal-demo 描述列表
```html
<dl>
......@@ -69,7 +69,7 @@ HTML 也有用于标记引用的特性，至于使用哪个元素标记，取决
`cite` 属性内容不会被浏览器显示、屏幕阅读器阅读，需使用 JavaScript 或 CSS，浏览器才会显示 `cite` 的内容。如果您想要确保引用的来源在页面上是可显示的，最好使用 `<cite>` 元素。
::: demo 引文案例
::: normal-demo 引文案例
```html
<p>
......@@ -109,7 +109,7 @@ HTML 也有用于标记引用的特性，至于使用哪个元素标记，取决
`<abbr>` 用来包裹一个缩略语或缩写，并且提供缩写的解释(包含在 `title` 属性中)。
::: demo 缩略语
::: normal-demo 缩略语
```html
<p>
......@@ -130,7 +130,7 @@ HTML 也有用于标记引用的特性，至于使用哪个元素标记，取决
`<address>` 用于标记联系方式，它仅仅包含您的联系方式。
::: demo 标记联系方式
::: normal-demo 标记联系方式
```html
<address>
......@@ -150,7 +150,7 @@ HTML 也有用于标记引用的特性，至于使用哪个元素标记，取决
当您使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标。`<sup>` 和 `<sub>` 元素可以解决这样的问题。
::: demo 上标和下标
::: normal-demo 上标和下标
```html
<p>
......@@ -194,7 +194,7 @@ HTML 还支持将时间和日期标记为可供机器识别的格式的 `<time>`
上述基本的例子仅仅提供了一种简单的可被机器识别的日期格式，这里还有许多其他支持的格式。
::: demo 标记时间
::: normal-demo 标记时间
```html
<!-- 标准简单日期 -->
......
src/code/website/html/intro/image.md
浏览文件 @ 625319a7
......@@ -57,7 +57,7 @@ category: HTML
`alt` 的值应该是对图片的文字描述，用于在图片无法显示或不能被看到的情况。
::: demo 案例
::: normal-demo 案例
```html
<img
......@@ -102,7 +102,7 @@ category: HTML
您可以用宽度和高度属性来指定您的图片的高度和宽度。
::: demo 设置宽度和高度
::: normal-demo 设置宽度和高度
```html
<img
......@@ -133,7 +133,7 @@ category: HTML
类似于超链接，您可以给图片增加 `title` 属性来提供需要更进一步的支持信息。
::: demo 图片标题
::: normal-demo 图片标题
```html
<img
......@@ -163,7 +163,7 @@ category: HTML
HTML5 的 `<figure>` 和 `<figcaption>` 元素为图片提供一个语义容器，在标题和图片之间建立清晰的关联。
::: demo HTML5 语义容器
::: normal-demo HTML5 语义容器
```html
<figure>
......
src/code/website/html/intro/layout.md
浏览文件 @ 625319a7
......@@ -148,7 +148,7 @@ HTML 代码中可根据功能来为区段添加标记。可使用元素来无歧
`<span>` 是一个内联的 (inline) 无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。
::: demo 无语义元素 span
::: normal-demo 无语义元素 span
```html
<p>
......@@ -194,7 +194,7 @@ HTML 代码中可根据功能来为区段添加标记。可使用元素来无歧
`<br>` 可在段落中进行换行；`<br>` 是唯一能够生成多个短行结构(例如邮寄地址或诗歌)的元素。比如:
::: demo 换行
::: normal-demo 换行
```html
<p>
......@@ -209,7 +209,7 @@ HTML 代码中可根据功能来为区段添加标记。可使用元素来无歧
`<hr>` 元素在文档中生成一条水平分割线，表示文本中主题的变化(例如话题或场景的改变)。一般就是一条水平的直线。例如:
::: demo 水平分割线
::: normal-demo 水平分割线
```html
<p>
......
src/code/website/html/intro/link.md
浏览文件 @ 625319a7
......@@ -21,7 +21,7 @@ URL 可以指向 HTML 文件、文本文件、图像、文本文档、视频和
通过将文本(或其他内容，见块级链接)转换为 `<a>` 元素内的链接来创建基本链接， 给它一个 `href` 属性(也称为目标)，它将包含您希望链接指向的网址。
::: demo 链接 Demo
::: normal-demo 链接 Demo
```html
<p>我正在创建<a href="https://baidu.com">一个指向百度主页的链接</a>.</p>
......@@ -33,7 +33,7 @@ URL 可以指向 HTML 文件、文本文件、图像、文本文档、视频和
title 属性旨在包含关于链接的补充有用信息，例如页面包含什么样的信息或需要注意的事情。
::: demo Title 属性
::: normal-demo Title 属性
```html
<p>
......@@ -149,7 +149,7 @@ URL 使用路径查找文件。路径指定文件系统中您感兴趣的文件
- 搜索引擎使用链接文本来索引目标文件，所以在链接文本中包含关键词是一个很好的主意，以有效地描述与之相关的信息。
- 读者往往会浏览页面而不是阅读每一个字，他们的眼睛会被页面的特征所吸引，比如链接。他们会找到描述性的链接。
::: demo 清晰的链接
::: normal-demo 清晰的链接
```html
<p>
......@@ -186,7 +186,7 @@ URL 使用路径查找文件。路径指定文件系统中您感兴趣的文件
- 如果您是在低带宽连接，点击一个链接，然后就开始下载大文件。
- 如果您没有安装 Flash 播放器，点击一个链接，然后突然被带到一个需要 Flash 的页面。
::: demo 为链接留下提示
::: normal-demo 为链接留下提示
```html
<p>
......@@ -212,7 +212,7 @@ URL 使用路径查找文件。路径指定文件系统中您感兴趣的文件
当您链接到要下载的资源而不是在浏览器中打开时，您可以使用 `download` 属性来提供一个默认的保存文件名 (此属性仅适用于同源 URL)。下面是一个下载链接到 Firefox 的 Windows 最新版本的示例:
::: demo download 属性
::: normal-demo download 属性
```html
<a
......@@ -229,7 +229,7 @@ URL 使用路径查找文件。路径指定文件系统中您感兴趣的文件
当点击一个链接或按钮时，打开一个新的电子邮件发送信息而不是连接到一个资源或页面，这种情况是可能做到的。这样做是使用 `<a>` 元素和 `mailto:` URL 的方案。其最基本和最常用的使用形式为一个 `mailto:link`，链接简单说明收件人的电子邮件地址。
::: demo 电子邮箱链接
::: normal-demo 电子邮箱链接
```html
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
......@@ -245,7 +245,7 @@ URL 使用路径查找文件。路径指定文件系统中您感兴趣的文件
除了电子邮件地址，您还可以提供其他信息。事实上，任何标准的邮件头字段可以被添加到您提供的邮件 URL。其中最常用的是主题(subject)、抄送(cc)和主体(body) (这不是一个真正的头字段，但允许您为新邮件指定一个短内容消息)。每个字段及其值被指定为查询项。
::: demo 在链接中提供信息
::: normal-demo 在链接中提供信息
```html
<a
......
src/code/website/html/intro/svg.md
浏览文件 @ 625319a7
......@@ -27,7 +27,7 @@ category: HTML
SVG 是用于描述矢量图像的 XML 语言。它基本上是像 HTML 一样的标记，只是您有许多不同的元素来定义要显示在图像中的形状，以及要应用于这些形状的效果。 SVG 用于标记图形，而不是内容。您可以使用一些元素来创建简单图形，如 `<circle>` 和 `<rect>`。更高级的 SVG 功能包括 `<feColorMatrix>`(使用变换矩阵转换颜色)`<animate>` (矢量图形的动画部分)和 `<mask>`(在图像顶部应用模板)。
::: demo 一个简单的 SVG
::: normal-demo 一个简单的 SVG
```html
<svg
......@@ -67,7 +67,7 @@ SVG 也确实有一些缺点:
要通过 `<img>` 元素嵌入 SVG，您只需要按照预期的方式在 `src` 属性中引用它。您将需要一个 `height` 或 `width` 属性。
::: demo 使用 img 插入 SVG
::: normal-demo 使用 img 插入 SVG
```html
<img
......@@ -95,7 +95,7 @@ SVG 也确实有一些缺点:
对于不支持 SVG (IE 8 及更低版本，Android 2.3 及更低版本) 的浏览器，您可以从 `src` 属性引用 PNG 或 JPG，并使用 `srcset` 属性来引用 SVG。 在这种情况下，支持的浏览器将加载 SVG，而较旧的浏览器将加载 PNG:
::: demo 兼容上古浏览器
::: normal-demo 兼容上古浏览器
```html
<img
......@@ -124,7 +124,7 @@ SVG 也确实有一些缺点:
您可以直接将 SVG 代码插入 HTML 文档中，这称为内联 SVG。确保您的 SVG 代码在 `<svg></svg>` 标签中(不要在外面添加任何内容)。
::: demo 案例
::: normal-demo 案例
```html
<svg width="300" height="200">
......
src/code/website/html/intro/table.md
浏览文件 @ 625319a7
......@@ -49,7 +49,7 @@ HTML 有一种方法可以定义整列数据的样式信息: 就是 `<col>` 和
如果您想让一列中的每个数据的样式都一样，那么您就要为每个数据都添加一个样式，这样的做法是令人厌烦和低效的。您通常需要在列中的每个 `<td>` 或 `<th>` 上定义样式，或者使用一个复杂的选择器，比如 `:nth-child()`。为了舍弃这种做法，我们可以只定义一次，在 `<col>` 元素中。`<col>` 元素被规定包含在 `<colgroup>` 容器中，而 `<colgroup>` 就在 `<table>` 标签的下方。
::: demo 样式化表格
::: normal-demo 样式化表格
```html
<table>
......@@ -86,7 +86,7 @@ HTML 有一种方法可以定义整列数据的样式信息: 就是 `<col>` 和
`rowspan` 就像 `colspan`, `span` 需要一个无单位的数字值，用来制定您想要让这个样式应用到表格中多少列
::: demo 样式化表格
::: normal-demo 样式化表格
```html
<table>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或