HTML specification, someone summarizes

Source: Internet
Author: User

Html Content

  1. HTML is shorthand for Hypertext Markup Language, which is the most basic web language.
  2. HTML is a language defined by tags, and the code is made up of tags.
  3. HTML code is not case sensitive.
  4. The HTML code starts with
  5. The first part is to add some auxiliary or attribute information to the HTML page, the content of which will be loaded first.
  6. The body part is where the page data is actually stored.

L Most tags have start and end tags, with individual labels because only a single function, or no content to be decorated, can end within the tag.

L want to enrich the contents of the tagged content, use the attributes in the tag, and increase the effect selection by changing the value of the property.

The "=" connection between the property and the attribute value can be used in double quotation marks or single or no quotation marks, usually with double quotes. or the company stipulates written specifications.

L format:< Tag Name Property name = ' attribute value ' > data content </tag name >

< Tag Name Property name = ' attribute value '/>

L Operation Idea:

In order to manipulate the data, it is necessary to encapsulate the data in different labels and manipulate the encapsulated data through the attributes in the tag.

The label is equivalent to a container. Manipulating the data in a container is a constant change in the container's property values.

Use of commonly used tags

Word Body

    1. Font label :<font>

Example: <font size=5 color=red> Font label Example </font>

Note: simple color but directly write the corresponding English, complex color with 16 binary representation, the expression form #ff0000 two numbers for a group, according to Red, green, blue arrangement, such as: #00FF00表示绿色. It is recommended to use tools to select.

    1. Title label :

Because headings are commonly used in text, they are defined for ease of operation. is actually a combination of a font size and a bold body.

    1. 3. Special characters:

If you want to display some special symbols on the Web page, such as < > &. Because these symbols are recognized and interpreted by the browser in the code, they are represented in a special way.

&lt;

<

&gt;

>

&amp;

&

&quot;

&reg;

®

&copy;

©

&trade;

&nbsp;

Space

Note: There is a Lenovo function in Dreamweaver8.

column Table

  1. List Tags:<dl>

<DT>: Upper Project

<DD>: Lower-level project

Cases:

<dl>

<dt> Game Name </dt>

<dd> StarCraft </dd>

<dd> Red Alert </dd>

<dt> Department Name </dt>

<dd> Technology Dept. </dd>

<dd> Training Department </dd>

</dl>

Effect:

Labels for bullets in the list

<OL>: Digital Label (a a 1 I i)

<ul>: Symbol tags (0)

<LI>: Specific item content label. This tab is only valid in <ol> <ul>.

Using the Type property to change bullets, if you want to make a better list, such as: black dots are represented by a picture, use CSS.

Figure like

  1. Image Label :

Example:

Align: property defines how the picture is arranged, and border is used to set the border of the image. SRC Connect a file

  1. image Map :<map>

Apply: When you want to select a part of the image as a connection. Such as: the region of each province of China map.

The map tag should be used in conjunction with the IMG tag. HREF is hyper-connected

<map >

<area shape= "rect" coords= "50,59,116,104" href= "1.html"/>

<area shape= "Circle" coords= "118,203,40" href= "2.html"/>

</map>

Table Lattice

    1. 7. Table Label :<table>

Composition: Title tag: <caption>, give the table a title.

Header tags: <th> generally formatting the first or first column of a table is displayed in bold. Not used.

Row Label:<tr>

Cell Label: <TD>, loads the inside of the row label. It can be simply understood that there are rows first, and cells are added to the row.

Format:

<table border= "1" width= "40%" ><!-width value as a percentage allows the width of the table to vary with the size of the browser window-

<caption> Table title </caption>

<tr><!--First line--

<th> name </th>

<th> Age </th>

</tr>

<TR algin= "center" ><!--second line--

<td> Zhang San </td>

<td>23</td>

</tr>

</table>

Effect:

<table border= "1" width= "40%" >

<tr>

<tr>

<th colspan= "2" > <!--colspan:th label two--

Personal information

</th>

</tr>

<TR align= "center" >

<td> Zhang San </td>

<td>23</td>

</tr>

</tr>

</table>

Effect:

Each table can have a header, a footer, and one or more table bodies (that is, the body), represented by THEAD, TFOOT, and tbody elements, respectively.

THEAD, TFOOT contains information about the table columns.

The Tbody function is: You can control the table branch download, thereby increasing the download speed. (The opening of the Web page is the first form of the contents of all downloaded, it is displayed, branch download can show some of the content, which will reduce the user wait time.) )

The purpose of using tbody is to make the included code appear without parsing the entire table, meaning that if you have more than one row, you can display a row first if you get a tbody row.

Tbody This tab can control the table branch download, when the table content is very useful, in the need to branch download place <tbody> and </tbody>.

Super chain Connection

  1. Hyperlink Tags:<a>

Two ways to use:

One, Hyperlink <a href= "" >

Cases:

<a href= "http://www.sina.com.cn" target= "_blank" > Sina </a>

<!--the href attribute value can be a URL, or it can be a local file. The target property is the specified window or frame in which to open. -

Second, the positioning Mark <a name= "" >

Generally used in this page, when the page content is too long, the anchor is more convenient than dragging the scroll bar.

Note: The anchor tag is valid for use with hyperlinks.

Cases:

<a name= "marker" > Marker location </a>

<p>.......<!--A lot of empty lines to make Web pages too long to effect--

<a href= "#标记" > Return marker location </a>

Note: You must add the # tag name at the beginning of the HREF value when using the anchor tag.

Box Racks

  1. Framework Tags: <frameset>

Note: Frame labels cannot be placed in <bod Y>, generally for the readability of the code, will go between

Example:

<frameset rows= "10%,*",

    <frame src= "1.html" name= "top"/>

    <frameset cols= "30%,*";

        <frame src= "2.html" name= "left"/>

        <frame src= "3.html" name= "right"/>

    </frameset>

</frameset>

This code will require 3 HTML pages that already exist, namely: 1.html,2,html,3.html

Effect:

 

Note: When the frame size does not want to be dragged by the mouse to change, you can add the Noresize property in the frame tag, which has no attribute value, called the tag attribute, plus is fixed. In the XHTML specification, all attributes have attribute values, so the attribute value of the tag attribute is itself, such as: noresize= "noresize"

. pip tag: <iframe>

<iframe src= "1.html";

Unfortunately, Pip you didn't see it because your browser doesn't support IFRAME tags.

</iframe>

Frame labels are not very common now, and layouts are div+css+table. Frames are seldom used.

Ø Table single Ø

One . Form Tags:<form>

Form labels are the most commonly used labels for interacting with the server side.

<input>: Input tag: Receive user input information.

The type attribute in the specified input label.

L textbox text. The text information you enter is displayed directly in the box.

L Password box password. The text you enter is displayed in the form of an origin or an asterisk.

L Radio box Radio such as: Gender selection.

L check box checkbox like: Interest selection.

The hidden fields hidden not appear on the page, but are submitted with other content when submitted.

Submit button Submit for submitting the contents of the form.

Reset button Reset sets the contents of the form to the initial value.

L button buttons can customize events for them.

L Files upload file post-extension content, automatically generates a text box, and a browse button.

L image It can replace the submit button.

<select>: Select the label to provide user selection. Such as: The Provinces and cities where the user resides. The Size property displays the number of items.

<OPTION>: The subkey Label property selected has no attribute value, plus on the subkey, on one of the subkeys, the subkey becomes the default option.

<textarea>: Multiline text box. such as: Personal information description.

<label>: Used to define shortcut keys for each element.

For property: Specifies the form element that the shortcut key acts on. Must be the same as the ID value of the form element you want to work with.

accesskey Property: Specifies a shortcut key that needs to be combined with the ALT key.

Cases:

<label for= "User" accesskey= "U" > Username (u) </label>

<input type= "text" id= "user"/>

Form submission:

1. Define the Action property value in the Form form to specify the destination of the form data submission (server side).

2. Explicitly submitted by specifying the method property value. If not defined, then the value of method is default to get.

The difference between the two most common ways to submit a Get and post:

1. Get commits display data in the address bar and are not secure for sensitive information.

Post submission is not displayed in the address bar, for sensitive information security

2. The data stored in the Address bar is limited, so the Get method has a limit on the volume of data submitted.

Post can submit large volumes of data.

3. There are different ways to encapsulate the submission data:

Get: Encapsulates the commit data into the first line of the HTTP message header, in the request line.

Post: Encapsulates the submitted data into the message header, in the request data body.

Note: Usually the form is submitted using post because it is easy to encode.

For the Tomcat server side, the default decoding method is Iso8859-1, then the Chinese will appear garbled.

With post submission, you can use Request.setcharacterencoding ("GBK") to solve the garbled problem, which is only valid for the data body.

If it is a get commit, request.setcharacterencoding ("GBK") This method to garbled can not solve, must first iso8859-1 encoding, and then in the GBK decoding. This way although the garbled for post submission is also common, but troublesome. So create a form submission using post.

Head Mark sign

The head labels are placed between the

<title>.: Specifies what the browser's title bar displays.

<base>:

HREF attribute: Specifies the directory for all hyperlinks in the Web page. Can be either a local directory or a network directory. Note the list must be used/represented at the end. A hyperlink file that is used only for relative paths.

Target property: Specifies how hyperlinks are opened. For example, _blank indicates that all hyperlinks are opened with a new window.

<meta>:

Name property: A description of the Web page. When keywords is taken, the contents of the content attribute are searched as search engine keywords.

Http-equiv property: Simulates the response message header of the HTTP protocol.

Cases:

<meta http-equiv= "Refresh" content= "3;url=http://www.sina.com.cn"/>

Indicates that 3 seconds after opening this page automatically goes to the Sina page.

<link>:

REL attribute: Describes the relationship of the target document to the current document.

Type property: Document type.

Media: Specifies the device on which the target document works.

Cases:

<link rel= "stylesheet" type= "Text/css" media= "Screen,print" href= "A.css"/>

Other

<marquee> let the content get moving.

Direction property: Left-right-up

Behavior properties: Scroll Alternate slide

<pre>.: You can display text content on the page as it appears in the code area.

XHTML XML

XHTML is an extensible Hypertext Markup Language (extensible Hypertext Markup Language).

L XHTML is the world of organizations in the 2000 to enhance the introduction of HTML, originally wanted to replace HTML, but found that the Internet on the HTML to write too many pages, attempted! It can be understood that it is an upgraded version of HTML (HTML4.01).

The code structure of XHTML is more rigorous and is an application based on XML.

XML is Extensible Markup Language (extensible Markup Language)

L XML is a description of the data information. HTML is a description of the data display.

The XML code is more restrictive, such as: The label does not end up being treated as an error.

The XML specification can be interpreted by more applications and becomes a common data exchange language.

L each server, the framework takes XML as a configuration file.

HTML specification, someone summarizes

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.