Introduction to HTML hypertext markup language,

Last Update:2014-12-14 Source: Internet

Author: User

Tags comment tag

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Introduction to HTML hypertext markup language,
I. Concept 1. Definition

The Super Text Markup Language is an application under the standard General Markup Language and also a standard. It marks parts of the web page to be displayed through the markup symbol.

In short: a language that adds tags to certain words in a common file to achieve the expected display effect.

Explanation: HTML is a descriptive language defined in SGML, or HTML is an application of SGML. HTML is not a programming language, such as C ++ and Java, it is just a markup language. Basically, you only need to understand the usage of various tags, and you can understand HTML. The HTML format is very simple. It is just a combination of text and tags for editing, any text editor can save files in ASCII plain text format. Of course, it is better to use professional Web editing software.

Ii. features and working principles 1. Principles

A webpage file is a text file. By adding a tag to a text file, you can tell the browser how to display the content (such as how the text is processed and how the screen is arranged, ).

The browser reads the webpage file in sequence and then interprets and displays the marked content based on the tag. The mark indicating the writing error does not indicate its error and does not stop its interpretation and execution process, the compiler can only analyze the cause and location of an error by displaying the results.

It should be noted that different browsers may have different interpretations of the same token, and thus may have different display effects.

2. Features

HTML document creation is not complex and powerful. It supports file insertion in different data formats. This is also one of the reasons why WWW is prevalent. Its main features are as follows:

(1) Simplicity. The HTML Version Upgrade adopts the superset mode, making it more flexible and convenient.

(2) extensibility: the wide application of HTML brings about enhanced functions and requirements for Identifiers. HTML adopts subclass elements to ensure system expansion.

(3) platform independence. Although PC is widely used, there are a lot of people using MAC and other machines. HTML can be used on a wide range of platforms, which is another reason for the prevalence of WWW.

Iii. format specifications

A simple HTML file
<Html>
<Head>
<Title> page title </title>
</Head>
<Body>
 This is my first page. 
 This document is in bold. 
</Body>
</Html>
Simple paragraph
<Html>
<Body>
 This is a paragraph. 
 paragraph elements are defined by the p tag. 
</Body>
</Html>
Title
<H1> This is a heading HTML automatically adds an extra line before and after the title.
Section
The section is defined using the label.
 This is a paragraph

HTML automatically adds an extra blank line before and after a paragraph.
Line Break
When you want to end a row and do not want to start a new paragraph, the label will be used. No matter where you place it, the label will generate a forced line feed.
 This is a para graph with line breaks 
 A tag is a blank tag. Because closing a tag does not make any sense, it does not have a termination tag similar to .
 or 
You will more and more find that is similar to . Because there is no end tag, it violates one of the future HTML rules, that is, all elements must be disabled.
Writing this label as is a way to stand the test of the future. Both XHTML and XML accept the way to close the label inside the opened tag.
Note
The comment tag is used to insert comments in the HTML source code. The comment is ignored by the browser. You can use annotations to explain your code. This will help you edit your code in the future.
<! -- This is a comment -->
Note: You need to write an exclamation point after the left bracket, which is not required before the right bracket.
Element
Each HTML element has an element name (such as body, h1, p, br)
The start tag is the name of the element surrounded by parentheses.
The end tag is the slash and element name surrounded by parentheses.
The element content is located between the start tag and the end tag.
Some HTML elements have no content
Some HTML elements do not have end tags
Summary:

Iv. Expansion

The HTML functions are far more than that. Below we will list some other tags. Other functions will be studied in the future.

Mark	Type	Translated name or meaning	For use	Remarks
File tag
<HTML>	●	File Declaration	Let the browser know that this is an HTML file
<HEAD>	●	Start	Provide overall File Information
<TITLE>	●	Title	Defines the file title, which will be displayed at the top of the browser
<BODY>	●	This article	Design file format and inner
Typographical mark
<! -- Annotation -->	○	Description mark	Add instructions to the file but not displayed
<P>	○	Section mark	Leave a blank line between words, paintings, tables, etc.
<BR>	○	Line feed mark	Display words, paintings, and tables in the next row
<HR>	○	Horizontal line	Insert a horizontal line
<CENTER>	●	Center	Display words, paintings, and tables in the middle	Objection
<PRE>	●	Default format	Display files according to the original code
<DIV>	●	Segmentation mark	Set placement of words, paintings, tables, etc.
<NOBR>	●	No discount	Make text not detour for too long
<WBR>	●	Suggested line breaks	Default line position
Font mark
<STRONG>	●	Aggravated tone	Generate Bold and Bold font Effects
<B>	●	Bold mark	Generate a bold font Effect
<EM>	●	Highlight	Italics appear in the font
<I>	●	Italic Markup	Italics appear in the font
<TT>	●	Typing font	Courier font with the same letter width
<U>	●	Bottom Line	Bottom Line	Objection
<H1>	●	Level 1 title mark	Thickening and widening; the degree is inversely proportional to the level
<H2>	●	Level 2 Title mark	Increase or widen the font size.
<H3>	●	Level 3 title mark	Increase or widen the font size.
<H4>	●	Level 4 title mark	Increase or widen the font size.
<H5>	●	Level 5 Title mark	Increase or widen the font size.
<H6>	●	Level 6 Title mark	Increase or widen the font size.
<FONT>	●	Font mark	Set the font, size, and color	Objection
<BASEFONT>	○	Base font mark	Set all fonts, sizes, and colors	Objection
<BIG>	●	Font increase	Increase the font size.
<SMALL>	●	Shrink the font size	Reduce the font size.
<STRIKE>	●	Draw line Deletion	Add a strikethrough to the font	Objection
<CODE>	●	Code	The font is slightly widened, as shown in <TT>
<KBD>	●	Keyboard character	The font is slightly widened, with a single blank
<SAMP>	●	Example	The font is slightly widened, as shown in <TT>
<VAR>	●	Variable	Italic Effect
<CITE>	●	Biography quotes	Italic Effect
<BLOCKQUOTE>	●	Quote text block	Shrink font
<DFN>	●	Definition	Italic Effect
<ADDRESS>	●	Address tag	Italic Effect
<SUB>	●	Subscript	Subscript
<SUP>	●	Superscript	Index (square, cubic, etc)
List tag
<OL>	●	Sequence List	The list items are listed in numbers and letters.
<UL>	●	Unordered list	Configuration items are arranged in dots
<LI>	○	LIST ITEMS	Each tag identifies a configuration item
<MENU>	●	Menu list	The configuration items are arranged in dots, as shown in <UL>	Objection
<DIR>	●	Directory List	The configuration items are arranged in dots, as shown in <UL>	Objection
<DL>	●	Definition list	The list is displayed in two layers.
<DT>	○	Define entries	Indicates the title of the definition.
<DD>	○	Definition content	Mark definition content
Table tag
<TABLE>	●	Table tag	Set parameters for the table
<CAPTION>	●	Table title	Create a column to enter the table title
<TR>	●	Table Column	Set columns in the table
<TD>	●	Table Column	Set the columns of the table
<TH>	●	Table Header	Equal to <TD>, but the font inside it will become rough
Form tag
<FORM>	●	Form tag	Determine the operating mode of a single form
<TEXTAREA>	●	Text block	Provide text box to input a large amount of text
<INPUT>	○	Input tag	Determines the input format
<SELECT>	●	Select tag	Create a pop-up volume list
<OPTION>	○	Option	Each tag indicates an option.
Graphic Markup
	○	Graphic Markup	Used to insert and set graphic attributes
Link tag
<A>	●	Link tag	Add Link
<BASE>	○	Benchmark mark	You can convert relative URLs to absolute URLs and specify link targets.
Frame tag
<FRAMESET>	●	Framework settings	Set framework
<FRAME>	○	Frame setting	Setting window
<IFRAME>	○	On-page framework	Insert a frame in the middle of a webpage	IE
<NOFRAMES>	●	Framework not supported	Set the prompt when the browser does not support the framework
Image Map
<MAP>	●	Image Map Name	Set Image Map Name
<AREA>	○	Link Area	Set connection Areas
Multimedia
<BGSOUND>	○	Background sound	Play Sound or music on the background	IE
<EMBED>	○	Multimedia	Add sound, music, or image
Other tags
<MARQUEE>	●	Move text	Move text around	IE
<BLINK>	●	Flashing Text	Flashing Text	NC
<ISINDEX>	○	In-page Finder	Enter a keyword to search for this page.	Objection
<META>	○	Definition	Let the browser know that this is an HTML file
<LINK>	○	Link Definition	Define the relationship between the file and other URLs
StyleSheet
<STYLE>	●	Style Sheet	Control webpage Layout
<Span>	●	Custom tag	Used independently or with style sheets

Note:

● Indicates that the mark is a blocking mark, that is, the mark needs to be closed, as shown in .
○ Indicates that the tag is an empty tag, that is, the tag does not need to be disabled.
IE indicates that this flag only applies to Internet Explorer.
NC indicates that the flag only applies to Netscape Communicator.
The objection indicates that this tag is not accepted by W3C. Generally, this tag is customized by IE or NC and is supported by the public, but there are other features or better options in the HTML standard.
Discarding indicates that the tag has been discarded by W3C and is outdated. However, HTML is backward compatible and does not support the old tag in new browsers.
The tag is added to HTML 4.0.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More