基础HTML和HTML5*

***一：标签与元素***
1

大部分 HTML 元素都有一个开始标签和一个结束标签。
开始标签像这样：

结束标签像这样：

开始标签和结束标签的唯一区别就是结束标签多了一个斜杠。

h1 元素通常被用作主标题，h2 元素通常被用作副标题， 还有 h3、h4、h5、h6 元素，它们分别用作不同级别的标题。

p 元素是网站上段落文本的首选元素。 p 是“paragraph（段落）”的缩写。

你可以像这样创建一个段落：

二：注释

注释的作用是给代码添加一些说明，方便团队合作或日后自己查看，但又不影响代码本身。

注释的另一个用途就是在不删除代码的前提下，让代码不起作用。

在 HTML 中，注释的开始标签是 。
列如：
三：元素
HTML5 引入了很多更具描述性的 HTML 元素， 包括 main、header、footer、nav、video、article、section 等等。

这些元素让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。 main 元素让搜索引擎和开发者能很快地找到网页的主要内容。

举个例子，下面的 main 元素嵌套了两个子元素：

四：用img添加图片
你可以使用 img 元素来为你的网站添加图片，其中 src 属性指向图片的地址。

例如：

<img src=图片地址">
注意：img 元素是没有结束标签的。

所有的 img 元素 必须 有 alt 属性。 alt 的属性值有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本。

注意： 如果图片是纯装饰性的，把 alt 的属性值设置为空是最佳实践。

理想情况下，alt 属性不应该包含特殊字符，除非有特殊需要。
五：用实现网页的跳转
你可以用 a（Anchor，简写为 a）来实现网页间的跳转。

a 需要一个 href 属性指向跳转的目的地。 同时，它还应有内容。 例如：

浏览器将显示文本 this links to freecodecamp.org，这是一个可点击的链接。 你可以通过这个链接访问 目标网址。

a（anchor）元素也可以用于创建内部链接，跳转到网页内的各个不同部分。

要创建内部链接，你需要将链接的 href 属性值设置为一个哈希符号 # 加上你想内部链接到的元素的 id，通常是在网页下方的元素。 然后你需要将相同的 id 属性添加到你链接到的元素中。 id 是描述网页元素的一个属性，它的值在整个页面中唯一。

当用户点击了 Contacts 链接，页面就会跳转到网页的 Contacts 区域。

当用户点击 Contacts 链接时，他们将被带到带有 Contacts 标题元素的网页部分。
六：无序列表

HTML 有一个特定的元素用于创建无序列表。

无序列表以

• 开始，中间包含一个或多个
• 元素， 最后以

结束。

例如:

会创建一个要点列表，包括 milk 和 cheese。
有序列表以

1. 开始，中间包含一个或多个
2. 元素。 最后以

结束。

例如:

将创建一个包含 Garfield 和 Sylvester 的编号列表。

七：用input创建输入框

input 输入框可以让你轻松获得用户的输入。

你可以像这样创建一个文本输入框：

注意 input 输入框是没有结束标签的。
八：用form创建表单

我们可以只通过 HTML 来实现发送数据给服务器的表单， 只需要给 form 元素添加 action 属性即可。

例如：

当你设计表单时，你可以指定某些字段为必填项（required），只有当用户填写了该字段后，才可以提交表单。

如果你想把文本输入框设置为必填项，在 input 元素中加上 required 属性就可以了，例如：

九：创建按钮

单选按钮是 input 选择框的一种类型。
radio buttons（单选按钮）就好比单项选择题，正确答案只有一个。

每一个单选按钮都应该嵌套在它自己的 label（标签）元素中。 这样，我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。

所有关联的单选按钮应该拥有相同的 name 属性。 创建一组单选按钮，选中其中一个按钮，其他按钮即显示为未选中，以确保用户只提供一个答案。

下面是一个单选按钮的例子：

最佳实践是在 label 元素上设置 for 属性，让其值与相关联的 input 单选按钮的 id 属性值相同。 这使得辅助技术能够在标签和相关的 input 元素之间建立关联关系。 例如：

我们也可以在 label 标签中嵌入 input 元素：

复选框也是 input 选择框的一种类型。
checkboxes（复选框）就好比多项选择题，正确答案有多个。

每一个复选框都应该嵌套在它自己的 label（标签）元素中。 这样，我们相当于给 input 元素和包裹它的 label 元素建立起了对应关系。

所有关联的复选框应该拥有相同的 name 属性。

使得 input 与 label 关联的最佳实践是在 label 元素上设置 for 属性，让其值与相关联的 input 复选框的 id 属性值相同。

下面是一个复选框的例子：

十：给单选按钮和复选框添加默认选中项

用 checked 属性把第一个复选框和单选按钮都设置为默认选中。

为此，只需将单词 checked 添加到 input 元素的内部。 例如:

十一：元素嵌套

div 元素也叫内容划分元素，是一个包裹其他元素的通用容器。

它也是 HTML 中出现频率最高的元素。

和其他普通元素一样，你可以用

来标记一个 div 元素的结束。
十二：声明 HTML 的文档类型

有些元素为页面提供了整体结构，每个 HTML 文档中都应该有这些元素。

在文档的顶部，我们需要告诉浏览器网页所使用的 HTML 的版本。 HTML 是一个在不停发展的语言，大部分浏览器都支持 HTML 的最新标准，也就是 HTML5。 大部分主流浏览器都支持最新的 HTML5 规范。 但是一些陈旧的网页可能使用的是老版本的 HTML。

你可以通过 来告诉浏览器页面上使用的 HTML 版本，“…” 部分就是版本号。 对应的就是 HTML5。

! 和大写的 DOCTYPE 是很重要的，尤其是对那些老的浏览器。 但 html 无论大写小写都可以。

所有的 HTML 代码都必须位于 html 标签中。 其中 位于 之后， 位于网页的结尾。

这是一个网页结构的列子。 你的 HTML 代码会在两个 html 标签之间。

十二：定义 HTML 文档的 head 和 body

html 的结构主要分为两大部分：head 和 body。 网页的描述应放入 head 标签， 网页的内容（向用户展示的）则应放入 body 标签。

比如 link、meta、title 和 style 都应放入 head 标签。

这是网页布局的一个例子：

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';
1
2

生成一个适合你的列表

• 项目
  • 项目
    • 项目

1. 项目1
2. 项目2
3. 项目3

• 计划任务
• 完成任务

创建一个表格

一个简单的表格是这么创建的：

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

创建一个自定义列表

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。¹

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma (n)=(n-1)!\forall n\in \mathbb{N}$ 是通过欧拉积分

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

• 关于 甘特图 语法，参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：

这将产生一个流程图。:

• 关于 Mermaid 语法，参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

• 关于 Flowchart流程图 语法，参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

---

1. 注脚的解释 ↩︎