HTML Common Elements Collection

Source: Internet
Author: User

Before explaining this lesson: Let's look at what the browser is:

The so-called browser is a tool that can interpret and execute HTML code. There is also a concept we need to figure out, browser! =ie,ie is just one of the browsers. In addition to IE and more than N browser, Google A, you can know. We will not dwell on it.

First of all, let's see what HTML is.

    1. What is HTML

HTML Full Name: Hyper text mark-up Language (Hypertext Markup Language). Text that describes the appearance of the Web page and the content of the page. HTML can show a variety of effects, is the function of the browser.

Supplemental content: Here we will expand some of the content, is the same HTML text, in the browser, the effect may not be the same. This is because a number of browsers appear before the corresponding standards. Given this situation, we can use IETester to test the compatibility of the same HTML code on different browsers.

2, static pages and dynamic pages

Another thing we need to know is the difference between a static page and a dynamic page.

First of all, the pages of the site are divided into static pages and dynamic pages two kinds.

Static page: The suffix is html or HTM is a static page, there is a fixed HTML page on the server

Dynamic page: There are no pages on the server that the user needs to browse, but the server can dynamically generate the HTML pages required by the customer and show them to the customer.

In a word to summarize the difference between the two: Dynamic page execution server-side code, static page does not execute server-side code (now everyone understand the next OK, after all, static page is the focus of our discussion today)

3. How do I write an HTML page?

There are a number of tools for writing HTML, and I believe Notepad knows that you can write HTML pages with Notepad. Of course, with Editplus/ultraedit and other advanced Notepad can also be written, but also with Dreamweaver and other tools.

is an HTML page basic structure

As can be seen, all content within the

Tip: If the end tag of the title tag is not closed, the entire page is not displayed.

Similarities and differences in 4.HTML and XML

The same point: both are markup languages, can be accessed through the DOM, can be changed by CSS to look

Different points:

    1. XML is more restrictive than HTML syntax: There is a start tag that needs to have an end tag, case consistency, attributes with double quotes, and so on.
    2. XML focuses on data storage, and HTML focuses on data display.

5.xhtml and DHTML

Xhtml: Extensible Markup Language, HTML that is more compliant with XML syntax specifications. The advent of XHTML is primarily to transition to XML. XHTML requirements: All lowercase, label pairs, attributes with double quotes.

The short name of dhtml:dynamic HTML is the Dynamic HTML. A combination of HTML, style sheets, and JavaScript

Supplement: A Web Standard is not a standard, but a collection of standards.

The Web page consists of three parts: structure, performance and behavior

Structure: text, pictures and other corresponding languages: xml,xhtml

Performance: Also known as style, such as text size and color, these are also implemented through the style. Css

Behavior: The dynamic effect of the client is usually done through JavaScript. Dom,ecmascript

Now let's get to the point: learn HTML tags for common use.

6.html Label

01,h tags (title), HTML defines

<br/> is just a carriage return, it's a closed label.

The <p> is segmented. <p> before and after there will be a larger gap, and <br/> is not.

<center> Center </center> Center display. (Not recommended)

<b>a</b> Bold, recommended <strong>. <i>b</i> Italic body. <u>c</u> underlined. <em> emphasis, italic </em>

, <font></font> font label, <font color= "Red" size= "7" face= "Script" > Red </font>

07,

7.html Special Characters

"&quot;

& &amp;

< &lt;

> &gt;

Spaces &nbsp;

? &copy;

? &reg;

2 &sup2;

¥&yen;

3 &sup3;

8. Image format Extension

9. Image tag:

Alt: Prompt text When a picture cannot be displayed.

10. Hyperlinks:

The href points to the target page to which the target is to be connected, and the destination window is the value

_blank: Open in new window

_self: Open in your own window

_parent: Open in parent window

_top: Indicates that the top-level window is open

Frame name: Opens in the specified frame. Know

Anchor Cable Connection: 01 Setting the anchor position

<a name= "showbigimg" ></a>

02. Call Anchor

<a href= "#showBigImg" > see beautiful pictures </a>

List in 11.Html:

Divided into unordered lists, list of sequences and definitions

Let's look at the display of various lists

Unordered list:

<ul>

<li></li>

<li></li>

</ul>

Ordered list

<ol>

<li></li>

<li></li>

</ol>

Definition list:

<dl>

<dt> China </dt>

<dd> Shanghai </dd>

<dd> Guangzhou </dd>

<dd> Beijing </dd>

</dl>

The value of type can be: 1, a, a, I, I, disc, Circle, Square.

12. Table: Displays structured data and is sometimes used for layout.

As can be seen, the table is composed of rows and columns, the line is expressed in TR, the column is expressed in TD. You can also use RowSpan (merge lines), colspan (and juxtaposition) to merge cells.

Exercise one: Output a table with HTML code

Exercise 2: Cross-row and cross-column tables

13. Forms

Action defaults to submitting data to this page

If you want to submit the data to the server, you need to put the form elements <input>, <textarea>, <select>, and so on into the form. The type of input is evaluated as follows:

The checked property is prepared for radio buttons and check boxes

Radio buttons are used for a set of mutually exclusive values, as follows

check box as follows

There are three main types of buttons: Submit button, reset button and normal button

Drop-down list box

Grammar:

14. Multiline text box:

<textarea> text </textarea>,cols= "50", rows= "15" attribute represents the number of rows and columns.

Use of common form elements:

Today we are going to discuss the HTML first here.

HTML Common Elements Collection

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.