语法备忘

发表于 更新于 分类于 阅读次数 评论数

HTML

注释

<!-- text -->

上标、下标

上标<sup>
下标<sub>

插入字、删除字

插入字<ins>
删除字<del>

链接- ID属性

ID属性允许在网页中设置一个标记，类似于书签，以便能够快速跳转到页面上的特定位置。

示例：

1
<a id="tips">有用的提示部分</a>

如果您想要创建一个链接，以便跳转到这个标记为“有用的提示部分”的地方，您可以这样做：

1
<a href="#tips">访问有用的提示部分</a>

如果您希望从另一个页面链接到这个标记的位置，您可以按照以下方式编写链接：

1
<a href="http://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>

这样，点击这些链接时，浏览器就会自动滚动到具有相应ID的元素位置。

<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

style 元素

示范

1
2
<p style="color:blue">妾发初覆额，折花门前剧。</p>
<a style="color:#3a87ad;font-weight:600" href="http://qianling.pw/js/instantclick.min.js";base target="_blank">instantclick.min.js</a>

base 元素

<base> 标签描述了HTML文档中所有链接标签的默认链接:

1
2
3
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

在这个例子中， 标签设置了两个属性：

href 属性定义了所有相对链接的基础URL。这意味着，如果在页面中有一个链接指向 ./example.jpg，那么浏览器实际上会请求 http://www.runoob.com/images/example.jpg。
target 属性设置了所有链接的默认打开窗口或框架。在这里，_blank 值意味着所有的链接都会在新窗口或标签页中打开。
接下来，解释一下路径相关的术语：

./ 表示当前目录。例如，如果当前URL是 www.aaa.com/bbb/ccc.html，那么 ./ 就是指 bbb/ 目录。
../ 表示上级目录。继续上面的例子，../ 将指向 www.aaa.com/ 目录。
/ 表示服务器的根目录。这可能是指代服务器的最顶层目录，例如在Windows系统中可能是 c:\。
关于使用 标签来控制链接在新窗口打开的方式：

当 标签中设置了 target=”_blank” 时，页面上所有的链接都将默认在新窗口或新标签页中打开，除非链接中明确指定了其他 target 值。
这样，通过 标签，您可以简化链接的编写，同时统一管理链接的打开行为。

meta 元素

标签提供元数据。元数据不显示在页面上，但会被浏览器解析。 META 元素通常用于指定网页的描述、关键词、文件的最后修改时间、作者。 `` 放置于``区域

使用实例
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="Runoob">
每30秒刷新当前页面:
<meta http-equiv="refresh" content="30">

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用<ul>标签

1
2
3
4
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下：

  • Coffee
  • Milk

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。
列表项项使用数字来标记。

1
2
3
4
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器中显示如下：

  1. Coffee
  2. Milk

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

1
2
3
4
5
6
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

浏览器显示如下：

Coffee
- black hot drink
Milk
- white cold drink
提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
iframe语法:
<iframe src="URL"></iframe>
该URL指向不同的网页。
Iframe - 设置高度与宽度
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如：”80%”)。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
Iframe - 移除边框
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 “0” 移除iframe的边框:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
使用iframe来显示目标链接页面

1
2
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

颜色

相对于使用 rgb(255,255,0)，使用 rgba(255,255,0,0.5)可以设置颜色透明度，透明度范围 0~1。

通过 rbg 值设置背景颜色 

1
2
3
4
5
6
7
8
9
10
11
12
<p style="background-color:rgba(255,255,0,0.25)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.5)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.75)">
通过 rbg 值设置背景颜色
</p>
<p style="color:rgba(255,255,0,0.75)">
通过 rbg 值设置字体颜色
</p>

颜色名

浏览器支持以下颜色名：
颜色名

脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。
HTML <script> 标签
<script> 标签用于定义客户端脚本，比如 JavaScript。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出”Hello World!”：

1
2
3
<script>
document.write("Hello World!");
</script>

字符实体

实体名称 实体字符 描述
&lt; < 小于号
&gt; > 大于号
&amp; & 和号（Ampersand）
&quot; " 双引号
&apos; ' 单引号
&copy; © 版权符号
&reg; ® 注册商标
&trade; ™ 商标
&lsquo; ‘ 左单引号
&rsquo; ’ 右单引号
&ldquo; “ 左双引号
&rdquo; ” 右双引号
&ndash; – 短横线（En dash）
&mdash; — 长横线（Em dash）
&hellip; … 省略号
&nbsp;   不间断空格
&ensp;   半角空格（En space）
&emsp;   全角空格（Em space）
&thinsp;   细空格（Thin space）
&zwj; ‍ 零宽连接符
&zwnj; ‌ 零宽非连接符
&lrm; ‌ 左至右标记
&rlm; ‍ 右至左标记

CSS

选择器

如果要设置HTML元素的CSS样式，需要在元素中设置”id” 和 “class”选择器。

CSS 选择器参考手册

HTML元素选择器

  • 描述：直接通过HTML元素名称选择。
  • 实例：
    • HTML元素：<input type="text">
    • 选择器：input

类选择器

  • 描述：使用点.加类名选择具有特定类的元素。
  • 实例：
    • HTML元素：<div class="example-class"></div>
    • 选择器：.example-class

ID选择器

  • 描述：使用井号#加ID选择具有特定ID的元素。
  • 实例：
    • HTML元素：<p id="example-id"></p>
    • 选择器：#example-id

属性选择器

  • 描述：根据元素的属性及其值来选择元素。
  • 实例：
    • HTML元素：<input type="checkbox" name="example">
    • 选择器：input[name='example']、img[src="http://example.com/image.jpg"]

后代选择器（Descendant Selector）

  • 描述：选择所有嵌套在另一元素内的特定元素。
  • 实例：
    • HTML结构：<div><p>段落</p></div>
    • 选择器：div p
    • 作用：选择<div>元素内的所有<p>元素。

子代选择器（Child Selector）

  • 描述：只选择直接嵌套在另一元素内的特定元素。
  • 实例：
    • HTML结构：<div><p>段落</p><span><p>另一个段落</p></span></div>
    • 选择器：div > p
    • 作用：只选择直接位于<div>元素内的<p>元素，不选择孙元素。

相邻兄弟选择器（Adjacent Sibling Selector）

  • 描述：选择紧随另一元素之后的元素。
  • 实例：
    • HTML结构：<h2>标题</h2><p>段落</p>
    • 选择器：h2 + p
    • 作用：选择紧接在<h2>元素后的第一个<p>元素。

通用兄弟选择器（General Sibling Selector）

  • 描述：选择与特定元素同级的所有元素。
  • 实例：
    • HTML结构：<h2>标题</h2><p>段落</p><p>另一个段落</p>
    • 选择器：h2 ~ p
    • 作用：选择所有与<h2>元素同级的<p>元素。

分组选择器（Grouping Selector）

  • 描述：将多个选择器合并在一起，以相同的样式规则应用到多个不同的元素。
  • 实例：
    • HTML结构：<h1>标题</h1><p>段落</p>
    • 选择器：h1, p
    • 作用：同时选择<h1>和<p>元素。

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部：

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的html标签。样式表应该以.css扩展名进行保存。下面是一个样式表文件的例子：

1
2
3
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

不要在属性值与单位之间留有空格（如：”margin-left: 20 px” ），正确的写法是 “margin-left: 20px” 。

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表，就像这样：

1
2
3
4
5
6
7
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

1
<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：

1
2
3
4
5
6
h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

而内部样式表拥有针对 h3 选择器的两个属性：

1
2
3
4
5
h3
{
    text-align:right;
    font-size:20pt;
}

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

1
2
3
color:red;
text-align:right;
font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下，优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- 设置：h3{color:blue;} -->
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
</head>
<body>
    <h3>测试！</h3>
</body>

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

背景

背景颜色

background-color 属性定义了元素的背景颜色

1
body {background-color:#b0c4de;}

背景图像

background-image 属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
实例：

1
body {background-image:url('paper.gif');}
背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调
如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些

1
2
3
4
5
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
背景图像 - 设置定位与不平铺

让背景图像不影响文本的排版
如果你不想让图像平铺，你可以使用 background-repeat 属性:

1
2
3
4
5
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。
可以利用 background-position 属性改变图像在背景中的位置：

1
2
3
4
5
6
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

可以利用 background-attachment 属性固定图像在背景中的位置：

1
2
3
4
5
6
body
{
    background-image:url(http://i.loli.net/2017/07/21/59713b03d970f.webp);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

背景 - 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 “background”：

1
body {background:#ffffff url('img_tree.png') no-repeat right top;}

当使用简写属性时，属性值的顺序为：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

文本格式

文本颜色

CSS 颜色值

1
2
3
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为”justify“，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸），仅IE有效。

文本修饰

text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

1
a {text-decoration:none;}

也可以这样装饰文字：

1
2
3
h1 {text-decoration:overline;}  上划线
h2 {text-decoration:line-through;}  删除线
h3 {text-decoration:underline;}  下划线

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

1
2
3
p.uppercase {text-transform:uppercase;}  全部大写
p.lowercase {text-transform:lowercase;}  单词首字母大写
p.capitalize {text-transform:capitalize;}  全部小写

文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

1
p {text-indent:50px}

所有CSS文本属性

属性 描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

字体

CSS字体属性定义字体，加粗，大小，文字样式。

CSS字型

在CSS中，有两种类型的字体系列名称：

  • 通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
  • 特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）
    Generic family字体系列说明
    SerifTimes New Roman
    Georgia    		Serif字体中字符在行的末端拥有额外的装饰
    Sans-serifArial
    Verdana    		"Sans"是指无 - 这些字体在末端没有额外的装饰
    MonospaceCourier New
    Lucida Console    		所有的等宽字符具有相同的宽度

字体系列

font-family 属性设置文本的字体系列。
font-family 属性应该设置几个字体名称作为一种”后备”机制，如果浏览器不支持第一种字体，将尝试下一种字体。
如果字体系列的名称超过一个字，它必须用引号，如Font Family：”宋体”。
多个字体系列是用一个逗号分隔指明：

1
p{font-family:"Times New Roman", Times, serif;}

对于较常用的字体组合，看看我们的Web安全字体组合。

字体样式

主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：

1
2
3
p.normal {font-style:normal;}  正常 - 正常显示文本
p.italic {font-style:italic;}  斜体 - 以斜体字显示的文字
p.oblique {font-style:oblique;}  倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

字体大小

绝对大小：

  • 设置一个指定大小的文本
  • 不允许用户在所有浏览器中改变文本大小
  • 确定了输出的物理尺寸时绝对大小很有用

相对大小：

  • 相对于周围的元素来设置大小
  • 允许用户在浏览器中改变文字大小

如果不指定，默认大小和普通文本段落一样，是16像素（16px=1em）。

设置字体大小像素
1
2
3
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
用em来设置字体大小

为了避免 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
1 em 在浏览器中默认的文字大小是 16 px。

1
2
3
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
使用百分比和EM组合

在所有浏览器的解决方案中，设置 元素的默认字体大小的是百分比：

1
2
3
4
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

链接

链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

当设置为若干链路状态的样式，也有一些顺序规则：

  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面

text-decoration 属性主要用于删除链接中的下划线：

1
2
3
4
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

链接框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a:link,a:visited
{
  display:block;
  font-weight: bold;
  color:#ffffff;
  background-color: #98bf21;
  width: 120px;
  text-align: center;
  padding: 4px;
  text-decoration: none;
}
a:hover,a:active
{
  background-color: #7a991a;
}

背景颜色

背景颜色属性指定链接背景色：

1
2
3
4
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

列表

使用CSS，可以列出进一步的样式，并可用图像作列表项标记。

不同的列表项标记

list-style-type属性指定列表项标记的类型是：

1
2
3
4
5
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
1
2
3
4
5
<style>ol.a {list-style-type: lower-alpha;}</style>
<ol class="a">
    <li>coffee</li>
    <li>tea</li>
</ul>
  1. coffee
  2. tea

    3. 缩写属性

    1
    2
    3
    4
    5
    6
    <style>
    ul
    {
        list-style:square url("url");
    }
    </style>

    使用缩写属性值的顺序是：
    list-style-type
    list-style-position (有关说明，请参见下面的CSS属性表)
    list-style-image

    属性描述
    list-style简写属性。用于把所有用于列表的属性设置于一个声明中
    list-style-image将图象设置为列表项标志。
    list-style-position设置列表中列表项标志的位置。
    list-style-type设置列表项标志的类型。

    盒子模型

    所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。
    CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
    盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
    下面的图片说明了盒子模型(Box Model)：
    盒子模型
    不同部分的说明：
    Margin(外边距) - 清除边框外的区域，外边距是透明的。
    Border(边框) - 围绕在内边距和内容外的边框。
    Padding(内边距) - 清除内容周围的区域，内边距是透明的。
    Content(内容) - 盒子的内容，显示文本和图像。
    为了在所有浏览器中的元素的宽度和高度设置正确的话，你需要知道的盒模型是如何工作的。

    元素的宽度和高度

    当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。
    下面的例子中的元素的总宽度为300px：

    1
    2
    3
    4
    5
    6
    div {
        width: 300px;
        border: 25px solid green;
        padding: 25px;
        margin: 25px;
    }

    让我们自己算算：
    300px (宽)

    • 50px (左 + 右填充)
    • 50px (左 + 右边框)
    • 50px (左 + 右边距)
      = 450px
      试想一下，你只有250像素的空间。让我们设置总宽度为250像素的元素：
      1
      2
      3
      4
      5
      6
      div {
          width: 220px;
          padding: 10px;
          border: 5px solid gray;
          margin: 0; 
      }
      最终元素的总宽度计算公式是这样的：
      总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
      元素的总高度最终计算公式是这样的：
      总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

    下划线

    <style>code{ text-decoration: underline;}</style>

    对齐方式

    1
    2
    3
    text-align:right;
    text-align:center;
    text-align:left;

    字体

    font-family:Microsoft YaHei

    字体大小

    默认14px
    font-size:12px;

    加粗

    100-900 normal：400 lighter bold：700
    font-weight:900;

    颜色

    background-color:#f17c67;

    背景颜色

    background:#000;

    不换行

    • display:inline;
    • float:left;

    资源预加载

    元素的 rel 属性的属性值preload能够让你在你的HTML页面中 元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。 标签最常见的应用情形就是被用来加载CSS文件，进而装饰你的页面： ``

    但是在这里，我们将使用preload作为rel属性的属性值。这种做法将把 元素塞入一个预加载器中，这个预加载器也将用于其他我们所需要的，各种各样的，任意类型的资源。为了完成基本的配置，你还需要通过 href和as 属性指定需要被预加载资源的资源路径及其类型。

    一个简单的例子可能看起来像下面这样

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <head>
      <meta charset="utf-8">
      <title>JS and CSS preload example</title>

      <link rel="preload" href="style.css" as="style">
      <link rel="preload" href="main.js" as="script">

      <link rel="stylesheet" href="style.css">
    </head>

    <body>
      <h1>bouncing balls</h1>
      <canvas></canvas>

      <script src="main.js"></script>
    </body>

    在这里，我们预加载了CSS和JavaScript文件，所以在随后的页面渲染中，一旦需要使用它们，它们就会立即可用。这个例子本身可能有些平淡，但预加载的好处可以更清晰直观的得到展示，在随后的渲染过程中，这些资源得到有效使用。对于更大的文件来说，也是如此。 例如那些在CSS文件中指向的资源，比如字体或是图片；再比如更大的图片和视频文件。

    preload 还有许多其他好处。使用 as 来指定将要预加载的内容的类型，将使得浏览器能够：

    更精确地优化资源加载优先级。
    匹配未来的加载需求，在适当的情况下，重复利用同一资源。
    为资源应用正确的内容安全策略。
    为资源设置正确的 Accept 请求头。

    许多不同类型的内容都可以被预加载，一些主要可用的as 属性值列举如下：

    audio: 音频文件。
    document: 一个将要被嵌入到<frame>或<iframe>内部的HTML文档。
    embed: 一个将要被嵌入到<embed>元素内部的资源。
    fetch: 那些将要通过fetch和XHR请求来获取的资源，比如一个ArrayBuffer或JSON文件。
    font: 字体文件。
    image: 图片文件。
    object: 一个将会被嵌入到<embed>元素内的文件。
    script: JavaScript文件。
    style: 样式表。
    track: WebVTT文件。
    worker: 一个JavaScript的web worker或shared worker。
    video: 视频文件。

    移动端适配

    1
    2
    3
    4
    5
    @media all and (orientation : portrait){
        p {
            font-size:24px!important;
            }
      }

    禁用鼠标事件

    pointer-events: none;
    属性值：auto、none


    MarkDown

    快速键入

    1
    2
    3
    4
    mdi + tab键：插入图片，即![]()
    mdl + tab键: 插入链接，即[]()
    mdc + tab键：插入代码
    mdh1 + tab键：插入一级标题，2就是二级标题……

    换行

    方法1：连续两个以上空格+回车
    方法2：使用html语言换行标签

    表格

    a b
    c d 
    1
    2
    3
    a | b
    :-: | :-:
    c | d

    |、-、:之间的多余空格会被忽略，不影响布局。
    默认标题栏居中对齐，内容居左对齐。
    -:表示内容和标题栏居右对齐
    :-表示内容和标题栏居左对齐
    :-:表示内容和标题栏居中对齐。
    内容和|之间的多余空格会被忽略，每行第一个|和最后一个|可以省略，-的数量至少有一个。

    分割线

    你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：

    1
    2
    3
    4
    5
    * * *
    ***
    *****
    - - -
    ---------------------------------------

    强调

    Markdown 使用星号 * 和底线 _ 作为标记强调字词的符号，被 * 或 _ 包围的字词会被转成用 <em> 标签包围，用两个 * 或 _ 包起来的话，则会被转成 <strong>

    代码

    如果要标记一小段行内代码，可以用反引号把它包起来（`）
    如果要在代码区段内插入反引号，你可以用多个反引号来开启和结束代码区段

    图片

    ![avatar](url)

    进阶技巧参见 Markdown 插入图片代码

    列表

    Markdown 支持有序列表和无序列表
    无序列表使用星号、加号或是减号作为列表标记：
    * Red
    * Green
    * Blue
    等同于：
    + Red
    + Green
    + Blue
    也等同于：
    - Red
    - Green
    - Blue
    有序列表则使用数字接着一个英文句点：
    1. Bird
    2. McHale
    3. Parish
    列表项目可以包含多个段落，每个项目下的段落都必须缩进 4 个空格或是 1 个制表符
    如果要在列表项目内放进引用，那 > 就需要缩进
    如果要放代码区块的话，该区块就需要缩进两次，也就是 8 个空格或是 2 个制表符

    删除线

    使用 ~~ 表示删除线， ~~ 和 要添加删除线的文字之间不能有空格。
    ~~这是一条删除线~~

    页内跳转

    定义一个锚(ID)：<span id="jump">跳转到的地方</span>
    然后使用Markdown语法：[点击跳转](#jump)

    代码区块

    要在 Markdown 中建立代码区块很简单，只要简单地缩进 4 个空格或是 1 个制表符就可以
    一个代码区块会一直持续到没有缩进的那一行（或是文件结尾）

    区块引用

    Markdown 标记区块引用是使用类似 email 中用 > 的引用方式。
    Markdown 也允许你偷懒只在整个段落的第一行最前面加上 >
    区块引用可以嵌套（例如：引用内的引用），只要根据层次加上不同数量的 >
    引用的区块内也可以使用其他的 Markdown 语法，包括标题、列表、代码区块等

    这是一个标题。

    1. 这是第一行列表项。
    2. 这是第二行列表项。

    给出一些例子代码：

    return shell_exec("echo $input | $markdown_script");

    标题

    在行首插入 1 到 6 个 # ，对应到标题 1 到 6 阶

    首行缩进

    把输入法由半角改为全角。两次空格之后就能够有两个汉字的缩进。
    在开头的时候，先输入下面的代码，然后紧跟着输入文本即可。
    半方大的空白&ensp;或&#8194;
    全方大的空白&emsp;或&#8195;
    不断行的空白格&nbsp;或&#160;

    普通符号

    反斜杠
    Markdown 可以利用反斜杠来插入一些在语法中有其它意义的符号，例如：如果你想要用星号加在文字旁边的方式来做出强调效果（但不用 <em> 标签），你可以在星号的前面加上反斜杠
    Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    \   反斜线
    `   反引号
    *   星号
    _   底线
    {}  花括号
    []  方括号
    ()  括弧
    #   井字号
    +   加号
    -   减号
    .   英文句点
    !   惊叹号
相关推荐