Html 简明教程
HTML Cheat Sheet
-
HTML Cheat Sheet ** 是 HTML 教程的总结。每次，我们都可能无法分别修改每个主题或搜索任何特定内容。因此，我们带来了 HTML 备忘单。在此备忘单中，我们涵盖了从基本结构到高级元素的所有内容。立即增强您的 Web 开发技能。
HTML Cheat Sheet is a summary of HTML tutorial. Each time, we might not be able to revise each topic individually or search for any specific content. So, we bring the HTML Cheat Sheet. In this sheet, we are covering everything from basic structure to advanced elements. Enhance your web development skills today.
Basic Tags
HTML 标签是 HTML 的基本元素，用于定义文档的结构。这些是字母或词语，用尖括号（< 和 >）括起来。每个标签都有不同的含义，浏览器会读取这些标签并据此显示包含在其中的内容。在此处，您将获得用于创建 HTML 文档的所有基本标签列表。
HTML tags are the fundamental elements of HTML, used for defining the structure of the document. These are letters or words enclosed by angle brackets (< and >). Each tag has a different meaning and the browser reads the tags and displays the contents enclosed by it accordingly. Here you will get all the basic tag list to create an HTML document.
Tags |
Description |
Examples |
This tag serves as the root element of an HTML document, encapsulating all other elements within it. |
||
The 'head' tag include meta-information about the document that isn’t directly displayed on the page. |
||
Sets off the visible portion of the document. |
||
Puts the name of the document in the title bar, when bookmarking pages, this is what is bookmarked and render on the browser’s tab. |
Body Attributes
正文部分是我们所知道的主页面的主体。有几个属性可以应用于 <body> 标签。强烈建议不要将这些属性用于开发实际的网站，而仅将其用于电子邮件时事通讯。
The body section is the main part of any website, as we all know. There are a few attributes that can be applied to the <body> tag. It is highly recommended that these attributes not be used to develop an actual website but only be used in email newsletters.
Attributes |
Description |
Examples |
HTML bgcolor set background color of the document, using color name or hex value. |
||
<body text=""> |
HTML text attribute is used to define color of text inside the body, default value is black. |
|
<body link=""> |
Used to set color of hyperlinks inside body, using color name or hex value. |
|
<body vlink=""> |
Used to specify color of visited hyperlinks, using color name or hex value. |
|
<body alink=""> |
Define color of active links (while mouse-clicking). |
Text Tags
文本是网站的重要组成部分。没有适当的文本内容，网站将难以理解。想象一下，只有一个图像或图形且没有文本的网站。这可能无法完全满足目的。我们有不同的文本标签，使文本看起来漂亮且易读。
Text is an important part of a website. Without proper textual content a website will be confusing. Just imagine a site where there are only images or graphics with no text. This might not serve the purpose entirely. We have different text tags to make the text look beautiful and readable.
Tags & Attributes |
Description |
Examples |
HTML pre tag used to create preformatted text. |
||
Creates headlines of variable size — H1=largest, H6=smallest |
||
The b tag is used create bold text (should use <strong> instead). |
||
Creates italic text (should use <em> instead). |
||
Used to create typewriter-style text. |
||
Used to define source code, usually monospace. |
||
Creates a citation, usually processed in italics. |
||
Creates address section, usually processed in italics. |
||
Emphasizes a word (usually processed in italics). |
||
Emphasizes a word (usually processed in bold) |
||
Sets size of font - 1 to 7 (Recommended to use CSS instead). |
||
Used to define color of font (should use CSS instead). |
||
Defines the font used (should use CSS instead). |
Links
HTML 链接，也称为超链接，是万维网的一项基本功能。它们允许用户在不同的网页、网站或同一文档的不同部分之间导航。
HTML links, also known as hyperlinks, are a fundamental feature of the World Wide Web. They allow users to navigate between different web pages, websites, or different sections of the same document.
Attributes |
Description |
Examples |
Creates a hyperlink to a Uniform Resource Locator. |
||
Creates a hyperlink to a specified email address. |
||
<a name="NAME"> |
Creates a target location within a document |
|
<a href="#NAME">clickable text</a> |
Creates a link to that target location. |
Formatting
在 HTML 中格式化文本涉及使用各种标签来定义文本的结构、外观和语义意义。以下是用于文本格式的一些最常用的 HTML 标签。
Formatting text in HTML involves using a variety of tags to define the structure, appearance, and semantic meaning of the text. Here are some of the most commonly used HTML tags for text formatting.
Tags |
Description |
Examples |
The P tag is used to define a new paragraph in a document |
||
The br tag is used to insert a line break (carriage return) between two lines. |
||
Puts content in a quote - indents text from both sides. |
||
The div tag is used to format block content with CSS. |
||
The span tag is used to format inline content and block content with CSS. |
Lists
在 HTML 中，列表用于对一组相关项进行分组。共有三种主要类型的列表 ordered lists 、 unordered lists 和 description lists 。每类服务一个不同的目的，并使用特定的 HTML 标记标记。
In HTML, lists are used to group a set of related items. There are three main types of lists ordered lists, unordered lists, and description lists. Each serves a different purpose and is marked up with specific HTML tags.
Tags |
Description |
Examples |
The ul tag in HTML is used for creating an unordered list, i.e, list without numbering. |
||
The ol tag is used to create an ordered list (start=xx, where xx is a counting number). |
||
The li tag defines each item in the list for both unordered list and ordered list. |
||
The dl tag is used to create a definition list, a heading with its definition. |
||
The dt tag defines heading element of the definition list. |
||
The dd tag defines definition element of the definition list. |
Graphical Elements
HTML 提供了几个元素来嵌入图形内容，例如 <img>、<audio> 和 <video> 等多媒体。
HTML provides several elements to embed graphical content, such as images, videos, and other multimedia.
Attributes |
Description |
Examples |
Hr tag is used to insert a horizontal rule in document. |
||
Sets size (height) of a horizontal rule. |
||
Defines width of rule (as a % or absolute pixel length). |
||
Creates a horizontal rule without a shadow (This attribute is deprecated in HTML5). |
||
Adds image, it is a separate file located at the URL. |
||
Aligns image left/right/center/bottom/top/middle (use CSS). |
||
Sets the size of the border surrounding the image (use CSS). |
||
Sets the height of the image, in pixels or percentage of screen width. |
||
Defines width of image, in pixels or percentage of screen width. |
||
../html/html_alt_attiribute.html[<img src="URL" alt="">] |
Sets the alternate text for browsers that can’t process images (required by the ADA). |
Forms
HTML 表单是 Web 开发中最重要的组件之一。您可能找不到未使用此组件的网站。要了解有关表单的所有内容，您必须了解表单的标记和属性。在面试中，问题主要基于表单来检查您的 HTML 知识。
This is one of the most important components of web development. You may not find a website where this component is not used. To know all about forms, you have to know the tags and attributes of forms. In interviews, questions are primarily based on forms to check your HTML knowledge.
Tags & Attributes |
Description |
Examples |
The form tag in HTML is used to define user submittable application form. |
||
Creates a scrollable selection menu. The Size sets the number of menu items visible before user needs to scroll. |
||
Creates a dropdown menu with default size as 0. |
||
Option tag is used to define each item in dropdown list. |
||
Creates a text box area. Columns set the width, rows set the height. |
||
The input type with checkbox is used to create a checkbox, which allows users to select one or more options from a set. |
||
Creates a checkbox which is pre-checked for certain values. |
||
../html/html_type_attribute.html[<input type="radio" name="" value="">] |
The input type with radio attribute is used to create radio buttons in HTML. |
|
../html/html_type_attribute.html[<input type="radio" name="" value="" checked>] |
Creates a radio button which is pre-checked. |
|
Defines a one-line text area. Size sets length, in characters. |
||
Used to add a submit button at the end of form. Value sets the text in the submit button. |
||
Creates a submit button using an image. It helps to hide a button in an image. |
||
A reset button is used within a form to clear all user inputs and reset the form fields to their default values. |
Tables
6.表格用于以结构化形式显示数据。使用表格布局数据，使用 CSS 布局页面。
Tables are used to render the data in a structured form. Use tables for data layout and CSS for page layout.
Tags |
Description |
Examples |
Tables in HTML are used to organize and display data in a tabular format, consisting of rows and columns. |
||
The tr tag inside table tag is used to define each row in a table. |
||
The td tag inside tr tag is used to define each cell in a row. |
||
Sets off the table header (a normal cell with bold, centered text). |
Table Attributes
|---|---|---|
As we know the importance of table, sometimes a normal table is not enough to represent the data we want to render. So, some attributes are required to use on table elements so that the table looks good. Use these attributes for email newsletters and to decorate a table use CSS for better results.
Attributes |
Description |
Examples |
Sets the width of the border around table cells. |
||
<table cellspacing=""> |
Defines amount of space between table cells. |
|
<table cellpadding=""> |
Sets amount of space between a cell’s border and its contents. |
|
../html/html_width_attribute.html[<table width="">] |
Specify width of the table in pixels or as a percentage. |
|
Sets alignment for cells within the row (left/center/right). |
||
Sets alignment for cells (left/center/right). |
||
<tr valign=""> |
Defines vertical alignment for cells within the row (top/middle/bottom). |
|
<td valign=""> |
Sets vertical alignment for cell (top/middle/bottom). |
|
Defines number of rows a cell should span (default=1). |
||
Sets number of columns a cell should span. |
||
<td nowrap> |
Prevents lines within a cell from being broken to fit. |
HTML5 input tag Attributes
|---|---|---|
These attributes are newly included after the release of HTML5, the input tag plays an important role. Not all browsers support these attributes. So, it is better to verify before using.
Attributes |
Description |
Examples |
The input type email is used to accept text which are in the format of email address. |
||
The input type with value url is used to specifically accept URLs. |
||
The input type number is used to accept single-line number. |
||
Defines single-line text box for a range of numbers. |
||
Generates single-line text box with a calendar showing the date/month/week/time. |
||
Sets a single-line text box for searching. |
||
Defines single-line text box for choosing a color. |
HTML Editor and Formatter
-
在任何随机编辑器上进行编码都可能导致混乱的 HTML 代码。若要格式化 HTML 代码，您可以使用我们的 * HTML Editor* 。HTML 格式化程序可以让您的代码易于阅读和维护。此外，请尝试在 HTML 代码中使用注释，以便其他编辑器知道代码的哪一部分在您的网站中呈示什么。
Coding on any random editor may result in unformatted HTML code. To format your HTML code, you can use our HTML Editor. HTML formatter will make your code easy to read and maintainable. Also, try Io use comments inside your HTML code so that the other editors know which part of your code is rendering what in your website.
Conclusion
-
通过遵循这份 HTML 速查表，您可以为面试复习自己，或者您可以将这份速查表加书签，以便每当您需要某些信息而无法回忆时，它都会帮助您。您还可以查看我们的 HTML Quick Guide ，快速复习 HTML 主题。
By following this HTML Cheat Sheet, you can revise yourself for an interview or you can keep this cheat sheet bookmarked so that whenever you need something that you can not recall, this will help you. You can also check our HTML Quick Guide for quick recap of HTML topics.