Brief HTML content, html

Brief HTML content, html

1. html Basics

Html is the markup language used to make web pages. It is directly executed by the browser without compilation. It is not case sensitive. We recommend that you use lower case letters. Html files must use html or htm as the filename suffix.

Html body structure:

(1) DTD header: Used to tell the browser what standard is used to parse the current page

(2) head section: Tell the browser some relevant information

(3) body section: displays data to users.

2. html syntax

2.1 html Tag

Tags are the most basic unit and the most important component in html. They are enclosed by Angle brackets.

Tags are closed in either of the following ways: <Tag Name> content <Tag Name>; <Tag Name/>

It consists of three parts: Tag Name, data to be displayed, and data attributes.

<Tag Name attribute name 1 = "attribute value "... Attribute name n = "attribute value"> </Tag Name>

2.2 html comment

<! -- Commented content -->

2.3 html code format

Carriage Return and space do not work in the source code. Therefore, when writing html code, you can use carriage return or space for formatting to clear the code and facilitate team collaboration. Strict indentation rules must be maintained. The "Tab" Key prevails.

Writing code beautifully is more important than writing the code correctly.

3. head Section

Indicates the header information of an html document, starting with

Contains information about the current document, such as the title information and meta information. Normally, the header information is not displayed in the html document.

Common labels:

Title Tag -- indicates the title of an html document

Base tag -- convert relative URLs to complete absolute URLs

Meta tag-used to define the name, content, and other information of the file information

Link tag -- this tag is used when external resources (such as CSS) are declared in the document.

Style label -- use this label when declaring a style in the document

Script tag-use JavaScript scripts in the document

4. common attributes in the body Tag (note the default value)

Text ------- set the color of the page text

Bgcolor --------- set the background color of the page

Background ------- set the background image of the page

Bgroperties ------- set the page background image to fixed and not scroll with the page

Link -------- set the default link color of the page

Alink ----------- set the color when the mouse is clicked

Vlink ----------- set the color of the link text after access

Topmargin ----------- set the top margin of the page

Leftmargin ------------- set the left margin of the page

5. Edit the text Layout

5.1 format tags

<Br> line feed label

<P> paragraph tags, including text, list, and table

<Center> align labels in center

<Pre> press the original text tab to display spaces, press enter, line feed, and tab key in the original file.

<Li> indicates an html list item. Each list item uses a pair of <li> </li>

<Ul> unordered html list

<Ol> html ordered list

<Hr> horizontal split line label, used for segmentation between paragraphs

5.2 text tag

<Hn> title word label, where n is 1-6, defines level 6 title, and inserts an empty line with a line feed.

<B> bold label

<I> italic label

<U> underline font label

<Sub> text font label

<Sup> text table font label

<Font> font Tag: Specifies the font attributes, such as the text size, color, and font.

<Tt> typewriter text

<Cite> used for citation and examples, usually in italics

<Em> emphasize, usually italics

<Strong> indicates emphasis, usually in bold

<Small> small font label

<Big> large font labels

6. insert an image

Img tag, which appears separately.

Common attributes:

Alt ------- represents the alternative text of the image

Src ------ image source (I .e. the image location)

Border ------- width of the image border

Height -------- Image height

Width --------- Image width

Commonly used image formats for Webpage Design: gif, jpeg, and png

7. Create an anchor and hyperlink

7.1 a tag ------- represents the html link, which appears in pairs <a>... </A>

Common attributes:

Href --------- indicates a url link source.

The url can be a webpage. Other files point to a location in the HTML file, which is an email address.

Target --------- indicates the Link Opening method.

Target = _ blank: opens the link content in a new window.

Target = _ parent: Use the link content as the previous picture of the file.

Target = _ self: display the link content in the current window

Target = _ top: display the entire screen as a link.

Link Syntax:

<A href = "url" target = "_ blank"> displayed text </a>

7.2 locate the Link Inside the webpage (anchor link)

Defined by <a name = "">, for example, <a name = "here1"> Part 1 </a>, you can use the <a href = "# here1"> to jump to the first part </a> of the page to locate the "first part" of the page.

7.3 hyperlink

Three Link paths:

Absolute path: http://www.sohu.com/index.html

Relative document path: adver/contents.html

Relative site root directory path:/support/app/customer.html

8. html table

8.1 common labels

<Table> indicates an html table, which appears in pairs.

Attribute: width ------ table width

Height ------ table height

Border ------ table border

Cellspacing ----- the distance between the table border and the table content filling. It is also the distance between content filling.

Cellpadding ------ content fill width

<Caption> defines the position of the table title, which can be set by the align and valign attributes.

<Tr> one row in the table

<Th> a column in the table

Tr and th attributes:

Width and height ------ indicate width and height

Colspan --------- a row spans multiple columns

Rowspan -------- a column spans multiple rows

Align ------------- horizontal alignment (left, center, right)

Valign ---------- vertical alignment (top, middle, bottom)

<Td> A cell in the table, used to store specific data content

For more information about align and valign, see the preceding section.

9. html Framework Structure

9.1 Brief Introduction

A browser form can be displayed by combining several pages. You can use the framework (frames. Can be divided into several rows and columns.

Advantage: you do not need to reload the entire page when you reload the page. It is convenient to create a navigation bar.

Disadvantages: many pages are generated, which are not easy to manage; not easy to print; the back button of the browser is invalid; the Code is complicated and cannot be indexed by some search engines; most small mobile devices (PDA mobile phones) the framework cannot be fully displayed. The multi-framework page will add http requests to the server.

Due to these many shortcomings, the design of standard web pages has been abandoned by the design of standard web pages.

9.2 html frame tag

<Frameset> tag -- instead of the body Tag, the Framework page is defined and the number of rows and columns that the framework will be divided into are defined.

Common attributes:

Cols --- Number of columns and column size contained in the Framework

Rows ---- number of rows and the size of rows in the framework

Border-whether the frame page has a border

Framespacing-distance between frames

<Noframes> label -- displays text for browsers that do not support the framework. It is used in combination with <body>

<Iframe> tag-create an restrained framework containing another document. The content in the iframe tag can be displayed as a browser that does not support the iframe tag.

Frame tag --- define the content of each frame page in the frameset tag

Appear separately, <frame/>

Common attributes:

Frameborder ---- defines the border of the content page. The value is (1 | 0) and the default value is 1.

1 -- display the border between each page 0 ---- do not display the border

Name ----- link to another frame page on one frame page is used (another frame page can use target to define the link page)

Noresize ---- defines whether the viewer can change the size of the frame page by dragging it. The value is (noresize)

Scrolling ---- defines whether a scroll bar exists. The value is (yes | no | auto) and the default value is auto.

Yes --- display the scroll bar no ---- do not display the scroll bar auto ---- display the scroll bar if necessary

Src ---- defines the content bar URL

Border --- set the border Width

10. html form settings

10.1 form tag

How does a webpage interact with users? The answer is: use an html form (form)

Form tag ----- represents an html form

Common attributes:

Action --- the place where the data input by the viewer is sent, such as a jsp page

Method ---- data transmission method, commonly used post

10.2 input tag ----- single-row input field of the html form

Appear separately, <input/>

Attribute:

Type ---- display mode of an input field (input type, choice type, and click type)

Valid value:

Text --- text input field (input type)

Password ---- text input field, but the entered text is displayed with the password symbol * (input type)

File ---- You can enter a file path (input type)

Checkbox ---- check box, which can be zero or multiple (select type)

Radio ---- single choice, only one and only one (choice type)

Hidden --- indicates a hidden domain, which can transmit some hidden information to the server.

Button ---- button (click type) (with the submit function, all forms will be submitted together)

Image ---- use the image to display the button, and use the src attribute to specify the image position (click type)

Submit --- submit button. You can use the value attribute to display the text (click type) on the button)

Reset ---- reset button to clear the information in the form (click type)

Name ----- name of this form item

Value ---- value of the input field

Size ---- length of the input field

Maxlength ----- maximum length (number of characters) of input fields)

Checked ----- if it is a select-type input field, it indicates that it has been selected and the value is checked.

Readonly ----- the input field can be selected, but cannot be modified. The value is readonly.

Disabled ----- the input field cannot obtain the focus and cannot be selected. It is displayed in gray and does not play any role in the form.

Accesskey ----- the form's shortcut key access method. If the value is h, press Alt + h.

Tabindex ----- input field tab key traversal order

Src ---- when an image is used to represent a button, it indicates the position (URI) of the image)

Alt ---- Replace the image prompt information of the submit button

10.3 textarea tag ----- indicates multiple input fields of a form

Appear in pairs, <textarea> </textarea>

Attribute:

Cols ---- Number of columns in multiple input fields

Rows ---- number of rows in multiple input fields

Name ---- name of this form item

Accesskey ----- form shortcut key access method

Disabled ----- unable to obtain the focus and cannot be selected

Readonly ---- the input field can be selected but cannot be modified

Tabindex ----- enter the field and use the "tab" key to traverse the order

10.4 select tag

Select tag ---- Select list tag

Appear in pairs <select> </select>

Each option label in this tag represents a selection item

Attribute:

Name --- form Item name

Size --- Select the height of the domain

Multiple --- multiple options

Disabled --- it is displayed in gray and does not play any role in the form.

Tabindex -- use the "tab" key to traverse the order

Option tag --- indicates an option in the selection list.

Appear in pairs <option> </option>

Attribute:

Label ---- description

Value ---- indicates the value of the selected item

Selected --- this selection item has been selected

Disabled ---- the input box cannot get the focus, which is displayed in gray and disabled in the form.

Tabindex ---- The traversal order using the "tab" Key