Content and understanding of HTML (Hypertext Markup Language)

Source: Internet
Author: User

Tags: div ram drop-down Font drop-down list Mark line wrap width section

Because hypertext can be used in the Description attribute (propery) mentioned in the previous article, a WebMethod article is recorded for reference, note: description= "HTML format";

Main content transferred from https://deerchao.net/tutorials/html/html.htm

1. What is HTML?

HTML is an abbreviation for the English Hyper Text mark-up Language (Hypertext Markup Language), which prescribes its own grammatical rules used to denote a richer meaning than "text", than slices, tables, links, etc. The browser (Ie,firefox, etc.) software knows the syntax of the HTML language and can be used to view HTML documents. The vast majority of web pages on the Internet are now written using HTML.

2. Simply put, the syntax of HTML is to give the text to indicate the meaning of the label (tag), so that users (people or programs) can be better understanding of the text.

Here is one of the simplest HTML documents:

<html>

<head>
<title> First HTML Document </title>
</head>
<body>
Welcome to the personal page of <a href= "Http://deerchao.net" >deerchao </a>!
</body>
</html>

All HTML documents should have a <html> tag,<html> tag can contain two parts:<head> and <body>.

<head> tags are used to contain general information about the entire document, such as the title of the document (the <title> tag is used to include the caption), the description of the entire document, the document's keywords, and so on. The specifics of the document will be placed in the <body> tab.

<a> tags are used to represent links, and when you view an HTML document in a browser (such as Ie,firefox, etc.), you usually jump to another page when you click the contents of the <a> tag. The address of the page to jump to is specified by the href attribute of the <a> tag. Above the <a href= "Http://deerchao.net" > , thevalue of the href attribute is http://deerchao.net.

3. What the HTML document can contain

With different tags, HTML documents can contain different content, such as text, links, images, lists, tables, forms, frames, etc.

Text
HTML support for text is the most abundant, you can set different levels of title, segmentation and wrapping, you can specify the semantics and appearance of text, you can describe the text is referenced from other places, and so on.
Link
Links are used to indicate that the content is related to another page or to a location on the current page.
Image
Images are used to make the page more aesthetically pleasing, or to provide more information.
List
Lists are used to describe a series of entries that are related to each other.
Form
A table is the form in which data is organized by rows and columns. There are also many people who use tables for page layouts.
Form
Forms are usually made up of text input boxes, buttons, multiple boxes, radio boxes, drop-down lists, and so on, making HTML pages more interactive.
Framework
The
framework enables pages to contain other pages.

4.

HTML Document Format detailed description

The basic format of the HTML document is described earlier, with a detailed explanation below.

HTML documents can be created and edited with any text editor (such as Notepad, UltraEdit, etc.), because its content is essentially just some text.

In HTML text, the section enclosed in angle brackets is called a label. If you want to use angle brackets in the body (or large and small numbers, in short, the same thing), you must use character escapes, that is, convert the original meaning of the character. < should use &lt; instead of,> to use &GT, and as for the & symbol itself, you should use &amp; overrides (it must be said that there are many HTML documents that do not follow this rule, Common browsers can also analyze whether & is an escaped start or a symbol, but this is not recommended.

A tag is essentially a description of what it contains, and there may be attributes to give more information. For example, the <img> (picture) tag has the SRC attribute (used to indicate the address of the picture), the width and Height properties (used to describe the width and altitude of the picture). What tags can be used in HTML, which attributes are available to each of these tags, all of which are prescribed, after knowing the basics here, learning HTML is actually learning these tags. A brief introduction to commonly used HTML tags is made later in this article.

Labels usually have a starting and ending section (also known as the start and end tags), which together define what the tag contains. Properties can be specified only in the start tag, and the attribute values may be enclosed in single or double quotation marks. The end tag is represented by the/plus tag name. Sometimes, some tags do not contain other content (including only their own properties, even the properties are not), in this case, can be written like this: <img src= "logo.gif"/>. Note the last space and a backslash, which indicates that the label has ended and does not require a separate end tag.

Some tags contain content that can also have new tags, and the new tag name may even be the same as the name of the label that contains it (which tags can contain tags and which tags are also specified). Like what:

Click to view Effects

<div>
<div> Category Catalogue ...</div>
<div> Current categorized Content list ...</div>
</div>

In this case, the last label that appears should end first.

All whitespace characters in the HTML document (space, Tab, line feed, carriage return) will be ignored by the browser, the only exception is the space, the space is treated as a space, regardless of whether there is a, or two, or 100. The reason for this rule is that ignoring whitespace allows the author of HTML to arrange content in the format he feels most convenient, such as adding indents after each label starts, and reducing indentation after the end of the label. Because the English text hollow lattice is used very commonly (used to separate words), so the space has made such special treatment. If you want to display contiguous spaces (for example, to indent), you should use &nbsp; to represent spaces.

5. Common Label Introduction text

The most commonly used label may be <font>, which is used to change the font, size, text color.

Click to view Effects

<font size= "6" >6</font>
<font size= "4" >4</font>
<font color= "Red" size= "5" > Red 5</font>
<font face= "Bold" > Bold words </font>

Bold, underlined, italics are also commonly used text effects, which are represented by <b>,<u>,<i>:

Click to view Effects

<b>Bold</b>
<i>italic</i>
<u>underline</u>

There are also tags to indicate that the contained text has a special meaning, such as <abbr> (for abbreviation),<em> (for the emphasis),<strong> (for stronger emphasis),<cite> (meaning a reference),< Address> (means address) and so on. These tags do not exist to define the display effect, so they may not have any effect from the browser, or the different browsers may have a different display effect on these labels.

A very long article, if there is a suitable small title, you can quickly to the content of the general understanding. In HTML, the tags used to denote headings are: <h1>,<h2>,<h3>,<h4>,<h5>,<h6> they represent a first-level title, a level two heading, a level three title ...

<h1>html 30-minute tutorial </h1>

<h2> What is html</h2>
...
What is the <h2>html </h2>
... Image

The <hr> tab is used to add horizontal lines to the page. You can control the length and color of a horizontal line by specifying the width and color properties.

<hr width= "90%" color= "Red"/>

<img> tags are used to add a picture to a page, the SRC attribute specifies the address of the image, and if the image specified by SRC cannot be opened, the browser typically displays the text of the ALT attribute definition where the image needs to be displayed on the page.

<img src= "Http://www.w3.org/Icons/valid-xhtml10" alt= "Picture profile"/>

Link

Hyperlinks with <a> tags indicate that the href attribute specifies the address to which the link is linked. <a> tags can contain text, or they can contain pictures.

<a href= "Http://deerchao.net" >deerchao's personal website </a>

<a href= "http://validator.w3.org" ><img src= "Http://www.w3.org/Icons/valid-xhtml10" alt= "Validate HTML"/>< /a> segments and line breaks

Because the HTML document ignores whitespace characters, it is important to indicate which text belongs to the same paragraph if you want to ensure normal segment wrapping, which uses the label <p>.

<p> This is the first paragraph. </p>

<p> This is the second paragraph. </p>

Some people do not need to <p>, but use <br>. <br> is a line break only, does not represent the beginning or end of a paragraph, so there is usually no end tag.

This is the first paragraph. <br>

This is the second paragraph. <br/>
This is the third paragraph.

Sometimes, to think of a document as a combination of different parts, such as a typical page may consist of three parts: header, body, footer. <div> labels are specifically designed to indicate different parts:

<div> Page Header Content </div>

<div> Subject Content </div>
<div> Footer Content </div> tables

HTML documents are usually left-to-right in the browser, displayed from top to bottom, and automatically wrapped to the right of the window. In order to achieve the effect of the column, many people use the table (<table>) for page layout (although the HTML is not intended to provide a table for typesetting).

The <table> tag usually contains a few lines of the <tr> tag,<tr> representative table. <tr> tags also contain <td> tags, each <td> represents a cell.

Click to view Effects <table>
<tr>
<td>2000</td><td> Sydney </td>
</tr>
<tr>
<td>2004</td><td> Athens </td>
</tr>
<tr>
<td>2008</td><td> Beijing </td>
</tr>
</table>

<tr> tags can also be included in <table> <thead> or <tbody> or <tfoot>. They represent the table header, the table body, and the table feet, respectively. When printing a Web page, if the table is large,,<thead> and <tfoot> will appear on each page.

<th> and <td> are very similar, but also used in <tr>, the difference is that the <th> represents this cell is the title of the row or column in which it is located.

<table> <thead>
<tr><th> Time </th><th> Location </th></tr>
</thead>
<tbody>
<tr><td>2000</td><td> Sydney </td></tr>
<tr><td>2004</td><td> Athens </td></tr>
<tr><td>2000</td><td> Beijing </td></tr>
</tbody>
</table> List

Tables are used to represent two-dimensional data (rows, columns), and one-dimensional data is represented by a list. Lists can be divided into unordered lists (<ul>), sequential lists (<ol>), and definition listings (<dl>). The first two lists are more common and include list items with the <li> tag.

An unordered list represents a series of similar items, with no precedence between them.

<ul>
<li> Apple </li>
<li> oranges </li>
<li> Peach </li>
</ul>

It is important to have the order of the items in the sequence list, which is usually automatically numbered by the browser.

<ol>
<li> Open the refrigerator door </li>
<li> drive the elephant in </li>
<li> close the refrigerator door </li>
</ol> Framework

Finally talk about the framework, once very popular technology, the framework enables a window to display multiple documents simultaneously. There is no <body> tag in the main frame page, instead it is <frameset>.

The properties of the <frameset> tag rows and cols are used to specify how many rows (columns) are in the frameset (frameset), and the height (width) of each row (column).

<frameset> tags can contain <frame> tags, each <frame> tag represents a document (the SRC attribute specifies the address of the document).

If you feel that the page is not complex enough, you can also include <frameset> tags in the <frameset> tab.

<frameset rows= "15%,*" >
<frame src= "top.html" Name=title scrolling=no>
<frameset cols= "20%,*" >
<frame src= "left.html" name=sidebar>
<frame src= "right.html" name=recipes>
</frameset>
</frameset>

Content and understanding of HTML (Hypertext Markup Language)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: