Html 简明教程
HTML Cheat Sheet
-
HTML Cheat Sheet ** 是 HTML 教程的总结。每次，我们都可能无法分别修改每个主题或搜索任何特定内容。因此，我们带来了 HTML 备忘单。在此备忘单中，我们涵盖了从基本结构到高级元素的所有内容。立即增强您的 Web 开发技能。
Basic Tags
HTML 标签是 HTML 的基本元素，用于定义文档的结构。这些是字母或词语，用尖括号（< 和 >）括起来。每个标签都有不同的含义，浏览器会读取这些标签并据此显示包含在其中的内容。在此处，您将获得用于创建 HTML 文档的所有基本标签列表。
Tags |
Description |
Examples |
此标签用作 HTML 文档的根元素，其中包含其内的所有其他元素。 |
||
'head' 标签包括有关文档的元信息，这些元信息在页面上不会直接显示。 |
||
设置文档的可见部分。 |
||
将文档的名称放在标题栏中，为页面添加书签时，书签中的内容就是该名称，该名称还会在浏览器的选项卡上呈现。 |
Body Attributes
正文部分是我们所知道的主页面的主体。有几个属性可以应用于 <body> 标签。强烈建议不要将这些属性用于开发实际的网站，而仅将其用于电子邮件时事通讯。
Attributes |
Description |
Examples |
HTML bgcolor 使用颜色名称或十六进制值设置文档的背景颜色。 |
||
<body text=""> |
HTML 文本属性用于定义正文中文本的颜色，默认值为黑色。 |
|
<body link=""> |
用于设置正文中超链接的颜色，使用颜色名称或十六进制值。 |
|
<body vlink=""> |
用于指定已访问的超链接的颜色，使用颜色名称或十六进制值。 |
|
<body alink=""> |
定义活动链接的颜色（按鼠标时）。 |
Text Tags
文本是网站的重要组成部分。没有适当的文本内容，网站将难以理解。想象一下，只有一个图像或图形且没有文本的网站。这可能无法完全满足目的。我们有不同的文本标签，使文本看起来漂亮且易读。
Tags & Attributes |
Description |
Examples |
HTML pre 标签用于创建预格式化的文本。 |
||
创建可变大小的标题——H1=最大，H6=最小 |
||
b 标签用于创建加粗文本（应该使用 <strong> 代替）。 |
||
创建斜体文本（应该使用 <em> 代替）。 |
||
用于创建打字机风格的文本。 |
||
用于定义源代码，通常是等宽字体。 |
||
创建引用，通常以斜体处理。 |
||
创建地址部分，通常以斜体处理。 |
||
强调一个单词（通常以斜体处理）。 |
||
强调一个单词（通常以粗体处理）。 |
||
设置字体大小 - 1 到 7（建议使用 CSS 代替）。 |
||
用于定义字体颜色（应该使用 CSS 代替）。 |
||
定义所使用的字体（应该使用 CSS 代替）。 |
Links
HTML 链接，也称为超链接，是万维网的一项基本功能。它们允许用户在不同的网页、网站或同一文档的不同部分之间导航。
Attributes |
Description |
Examples |
创建到统一资源定位符的超链接。 |
||
创建指向指定电子邮件地址的链接。 |
||
<a name="NAME"> |
在文件中创建一个目标位置 |
|
<a href="#NAME">clickable text</a> |
创建指向该目标位置的链接。 |
Formatting
在 HTML 中格式化文本涉及使用各种标签来定义文本的结构、外观和语义意义。以下是用于文本格式的一些最常用的 HTML 标签。
Tags |
Description |
Examples |
P 标签用于在文档中定义一个新段落 |
||
br 标签用于在两行之间插入一个换行符（回车符）。 |
||
在引号中放置内容——从两侧缩进文本。 |
||
div 标签用于使用 CSS 格式化块内容。 |
||
span 标签用于使用 CSS 格式化内联内容和块内容。 |
Lists
在 HTML 中，列表用于对一组相关项进行分组。共有三种主要类型的列表 ordered lists 、 unordered lists 和 description lists 。每类服务一个不同的目的，并使用特定的 HTML 标记标记。
Tags |
Description |
Examples |
HTML 中的 ul 标签用于创建无序列表，即没有编号的列表。 |
||
HTML 中的 ol 标签用于创建有序列表（start=xx，其中 xx 是计数数字）。 |
||
HTML 中的 li 标签定义无序列表和有序列表中列表中的每一项。 |
||
HTML 中的 dl 标签用于创建定义列表，即带有其定义的标题。 |
||
HTML 中的 dt 标签定义定义列表的标题元素。 |
||
HTML 中的 dd 标签定义定义列表的定义元素。 |
Graphical Elements
HTML 提供了几个元素来嵌入图形内容，例如 <img>、<audio> 和 <video> 等多媒体。
Attributes |
Description |
Examples |
HTML 中的 <hr> 标签用于在文档中插入水平线。 |
||
HTML 中的 size 属性设置水平线的尺寸（高度）。 |
||
HTML 中的 width 属性定义规则的宽度（作为百分比或绝对像素长度）。 |
||
HTML 中的 noshade 属性创建一个没有阴影的水平线（此属性在 HTML5 中已弃用）。 |
||
HTML 中的 <img> 标签添加图像，它是位于 URL 中的独立文件。 |
||
HTML 中的 align 属性使图像左对齐/右对齐/居中/底部/顶部/中间（使用 CSS）。 |
||
HTML 中的 border 属性设置围绕图像的边框大小（使用 CSS）。 |
||
HTML 中的 height 属性设置图像的高度，以像素或屏幕宽度的百分比为单位。 |
||
HTML 中的 width 属性定义图像的宽度，以像素或屏幕宽度的百分比为单位。 |
||
../html/html_alt_attiribute.html[<img src="URL" alt="">] |
HTML 中的 alt 属性为无法处理图像的浏览器（ADA 要求）设置替代文本。 |
Forms
HTML 表单是 Web 开发中最重要的组件之一。您可能找不到未使用此组件的网站。要了解有关表单的所有内容，您必须了解表单的标记和属性。在面试中，问题主要基于表单来检查您的 HTML 知识。
Tags & Attributes |
Description |
Examples |
HTML 中的 form 标签用于定义用户可提交的应用程序表单。 |
||
创建可滚动选择菜单。大小是设置在用户需要滚动之前可见的菜单项的数量。 |
||
创建大小默认为 0 的下拉菜单。 |
||
Option 标签用于定义下拉列表中的每个项目。 |
||
创建一个文本框区域。列数设置宽度，行数设置高度。 |
||
带复选框的 input 类型用于创建复选框，允许用户从一组中选择一个或多个选项。 |
||
创建针对特定值预先选中的复选框。 |
||
../html/html_type_attribute.html[<input type="radio" name="" value="">] |
HTML 中的单选按钮是由带单选属性的输入类型创建的。 |
|
../html/html_type_attribute.html[<input type="radio" name="" value="" checked>] |
1.产生默认选中的单选按钮。 |
|
2.定义一行文本区域。大小以字符数设置长度。 |
||
3.在表单的最后添加一个提交按钮。值在提交按钮中设置文本。 |
||
4.使用图像创建提交按钮。它有助于将按钮隐藏在图像中。 |
||
5.复位按钮在表单中用于清除所有用户输入，并重置表单字段为默认值。 |
Tables
6.表格用于以结构化形式显示数据。使用表格布局数据，使用 CSS 布局页面。
Tags |
Description |
Examples |
7. HTML 中的表格用于以表格格式组织和显示数据，包括行和列。 |
||
8. 表格标签中的 tr 标签用于定义表格中的每一行。 |
||
表属性 |
||
* |
属性 |
|
描述 |
示例 |
Table Attributes
|---|---|---|
Attributes |
Description |
Examples |
border |
||
设置表格单元格周围的边框宽度。 |
<div>border="1"</div> |
|
<table cellspacing=""> |
||
cellpadding |
定义表格单元格之间的间距。 |
<div>cellpadding="10"</div> |
<table cellpadding=""> |
||
cellSpacing |
定义单元格边框与其内容之间的间距。 |
|
<div>cellSpacing="10"</div> |
||
../html/html_width_attribute.html[<table width="">] |
width |
|
以像素或百分比的形式指定表格宽度。 |
<div>width="50%"</div> |
|
align |
设置行内单元格的对齐方式（左/中/右）。 |
<div>align="center"</div> |
valign |
设置单元格的对齐方式（上/中/下）。 |
|
<div>valign="bottom"</div> |
||
<tr valign=""> |
rowspan |
|
定义单元格跨越的行数（默认值为 1）。 |
<div>rowspan="2"</div> |
|
<td valign=""> |
||
colspan |
设置单元格跨越的列数。 |
<div>colspan="2"</div> |
nowrap |
阻止单元格内的行被中断以适应宽度。 |
|
<div>nowrap</div> |
||
输入类型 |
||
<td nowrap> |
* |
类型 |
描述 |
示例 |
HTML5 input tag Attributes
|---|---|---|
Attributes |
Description |
Examples |
用于接受电子邮件地址格式的文本。 |
<input type="email"> |
|
url |
用于特定接受 URL 的文本。 |
<input type="url"> |
number |
用于接受单行数字的文本。 |
|
<input type="number"> |
||
range |
||
定义数字范围的单行文本框。 |
<input type="range"> |
|
9. 生成具有日历的单行文本框，该日历显示日期/月份/周/时间。 |
||
10. 设置用于搜索的单行文本框。 |
||
11. 定义用于选择颜色的单行文本框。 |
HTML Editor and Formatter
-
在任何随机编辑器上进行编码都可能导致混乱的 HTML 代码。若要格式化 HTML 代码，您可以使用我们的 * HTML Editor* 。HTML 格式化程序可以让您的代码易于阅读和维护。此外，请尝试在 HTML 代码中使用注释，以便其他编辑器知道代码的哪一部分在您的网站中呈示什么。
Conclusion
-
通过遵循这份 HTML 速查表，您可以为面试复习自己，或者您可以将这份速查表加书签，以便每当您需要某些信息而无法回忆时，它都会帮助您。您还可以查看我们的 HTML Quick Guide ，快速复习 HTML 主题。