语法汇总

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

HTML

注释

<!-- text -->

上标、下标

上标<sup>
下标<sub>

插入字、删除字

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

链接- id 属性

id属性可用于创建在一个HTML文档书签标记。
提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。
实例：
在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到”有用的提示部分(id=”tips”）”：
<a href="#tips">访问有用的提示部分</a>
或者，从另一个页面创建一个链接到”有用的提示部分(id=”tips”）”：
<a href="http://www.runoob.com/html/html-links.html#tips"> 访问有用的提示部分</a>

<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
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<base href="http://www.runoob.com/images/" target="_blank">
</head>```
www.aaa.com/bbb/ccc.html
./代表上当前路径 bbb/
../代表上一级路径 www.aaa.com/
/代表磁盘的根目录 `(e.g. c:\)`
用base控制新窗口打开的方式
`<base target=_blank>`

### 表格
表格由 `<table>` 标签来定义。每个表格均有若干行（由 `<tr>` 标签定义），每行被分割为若干单元格（由 `<td>` 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

```html
<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>```
<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>

### meta 元素
meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
`<meta>` 一般放置于`<head>`区域
`<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">`

### 表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：
Row 1, cell 1 Row 1, cell 2 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table border="1"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>

### 表格表头
表格的表头使用`<th>`标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
```html
<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>
Header 1Header 2
row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2

表格标签

标签描述
<table>定义表格
<th>定义表格的表头
<tr>定义表格的行
<td>定义表格单元
<caption>定义表格标题
<colgroup>定义表格列的组
<col>定义用于表格列的属性
<thead>定义表格的页眉
<tbody>定义表格的主体
<tfoot>定义表格的页脚

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用<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.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>

字符实体

http://www.runoob.com/html/html-entities.html

速查列表

http://www.runoob.com/html/html-quicklist.html






CSS

Id 和 Class

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

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=”para1”:

1
2
3
4
5
#para1
{
text-align:center;
color:red;
}

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”.”号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

1
2
3
4
5
.center {text-align:center;}
你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:
```css
p.center {text-align:center;}

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<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 属性定义了元素的背景颜色
页面的背景颜色使用在body的选择器中：

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 单位代替像素。
em的尺寸单位由W3C建议。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

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的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。
不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。

使用百分比和EM组合

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

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

我们的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

在一个声明中的所有字体属性

本例演示如何使用简写属性将字体属性设置在一个声明之内。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p.ex1
{
    font:15px arial,sans-serif;
}

p.ex2
{
    font:italic bold 12px/30px Georgia,serif;
}
</style>
</head>

<body>
<p class="ex1">This is a paragrphy.</p>
<p class="ex2">This is a paragrphy.</p>
</body>
</html>

链接

链接样式

链接的样式，可以用任何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设置列表项标志的类型。

    表格

    表格边框

    指定CSS表格边框，使用border属性。
    下面的例子指定了一个表格的Th和TD元素的黑色边框：

    1
    2
    3
    4
    5
    6
    <style>
    table, th, td
    {
    border: 1px solid black;
    }
    </style>

    请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。
    为了显示一个表的单个边框，使用 border-collapse属性。

    折叠边框

    border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
    table
    {
    border-collapse:collapse;
    }
    table,th, td
    {
    border: 1px solid black;
    }
    </style>

    表格宽度和高度

    Width和height属性定义表格的宽度和高度。
    下面的例子是设置100％的宽度，50像素的th元素的高度的表格：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
    table
    {
    width:100%;
    }
    th
    {
    height:50px;
    }
    </style>

    表格文字对齐

    表格中的文本对齐和垂直对齐属性。
    text-align属性设置水平对齐方式，像左，右，或中心：

    1
    2
    3
    4
    5
    6
    <style>
    td
    {
    text-align:right;
    }
    </style>

    垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

    1
    2
    3
    4
    5
    6
    7
    <style>
    td
    {
    height:50px;
    vertical-align:bottom;
    }
    </style>

    表格填充

    如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性：

    1
    2
    3
    4
    5
    6
    <style>
    td
    {
    padding:15px;
    }
    </style>

    表格颜色

    下面的例子指定边框的颜色，和th元素的文本和背景颜色：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
    table, td, th
    {
    border:1px solid green;
    }
    th
    {
    background-color:green;
    color:white;
    }
    </style>

    盒子模型

    所有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 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

    \   反斜线
`   反引号
*   星号
_   底线
{}  花括号
[]  方括号
()  括弧
#   井字号
+   加号
-   减号
.   英文句点
!   惊叹号
相关推荐