HTML at the front

Source: Internet
Author: User
Tags closing tag

Html

HTML Explanation:

HTML is an abbreviation for the English Hyper Text mark-up Language ( Hypertext Markup Language ).

The equivalent of a uniform set of rules, everyone to abide by him, so that you can let the browser according to the rules of the markup language to explain it.

Hypertext: Refers to the page can contain pictures, links, and even music, programs and other non-text elements.

Markup Language: The language in which tags (tags) are composed.

The Hypertext Markup Language is an application under the standard Universal Markup Language and is a specification, a standard that marks individual parts of the page to be displayed by means of marker symbols. The Web page file itself is a text file, by adding a marker in a text file, you can tell the browser how to display the content (such as: How the text is handled, how the picture is arranged, how the image is displayed, etc.).
Page Composition:

Web pages are HTML documents that are parsed by the browser to show

The general Web page consists of two parts:

1) HTML (Hyper text mark-up Language (Hypertext Markup Language))

2) CSS (Cascade Style Sheets)

HTML is responsible for describing the structure and content of the Web page (such as title, navigation bar, etc.); CSS is responsible for Web page performance (appearance) (such as background color, font style, etc.)

There are two types of Web pages:

Static Web pages: static resources

Dynamic Web pages: HTML code is generated dynamically by a developing language based on user requests.

HTML DocumentHTML style:
<! DOCTYPE html>

The content between

The content between <body> and </body> is the page effect that the browser renders and the user sees. This means that this is the main body of the page. Which is the body's meaning.

The following two elements are included.

 

HTML document tree structure diagram

Label Explanation:
    • is made up of a pair of bracketed words. For example:

    • Labels are case-insensitive .

    • The label is divided into two parts: start tag <a> and end tag </a>. The part between the two tags we call the label body.

    • Some labeling functions are simple. Use a label. This label is called a self-closing tag. For example: <br/>

    • tags can be nested. But cannot cross-nest. <a><b></a></b>

Tag Properties:
    • Usually occurs as a key-value pair. Like Name= "Alex."

    • Attributes can only be present in the start tag or in the self-closing and label.

    • Attribute names are all lowercase. * Attribute values must be wrapped in double or single quotes such as name= "Alex"

    • If the property value is exactly the same as the property name. Write the property name directly. e.g. ReadOnly

<! DOCTYPE html> Label

Head Section 1,<meta> label

Provides meta-information about pages, such as page encodings, refreshes, jumps, descriptions and keywords for search engines and update frequency








  

1, the Name property is mainly used to describe the Web page, with the corresponding property value of content,content content is mainly for the search engine to find information and classification information.

<meta name= "keywords" content= "meta Summary, HTML Meta,meta properties, meta jump" >

<meta name= "description" content= "Old boy training institution was created by an old boy" >

2, http-equiv as the name implies, the equivalent of HTTP file header function, it can send back to the browser some useful information to help correct and accurate display of the content of the Web page,

The corresponding attribute value is content, which is actually the variable value of each parameter.

<meta http-equiv= "Refresh" content= "2; Url=https://www.baidu.com ">//(Note the following quotes, respectively, before the number of seconds and after the URL)

<meta http-equiv= "Content-type" content= "Text/html;charset=utf8" >

<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >

  2,title

Web header information

<title>Aiwen</title>

3,link

The icon for the page header

<link rel= "icon" href= "Http://www.jd.com/favicon.ico" >
4,style

1. Write CSS styles in the current file

2, in other files to write CSS style similar to Python module import CSS style imported into the current file using

<H1 style= "Background-color:aqua" >hello,word

  

5,script

1. Write JS in the current file

2, in other files write JS python-like module import method to import JS into the current file using

Body PartBase tag:

1,

    

The effect is as follows:

,

2,<P>: paragraph label. The contents of the package are wrapped. And there is a blank line between the contents.

<p>uuuuuuuuuuuuu </p>              <p>rrrrrrrrrrrrrrrrr</p>

The effect is as follows:

  

3,<b> and <strong>: denotes bold label.,

<b>miss you</b>

4,<strike>: Add a median line to the text.

<strike>i Miss You!</strike>

5,<em>: the text becomes italic.

<em> Hello </em>

6,<sup> and <SUB>: Upper corner and lower corner table.

3<sup>2</sup>h<sub>2</sub>o

  

7,<br>: line break.

A self-closing tag is a single

8,

A self-closing tag is a single

9,<div> and <span>

Use with CSS

block-level labels and inline labels

The body is divided into two categories: block-level labels and inline tags

Block-level labels occupy the entire row,

The actual size used by the inline tag

<H1 style= "Background-color:blueviolet" >hello

  

block-level label :<p>

Inline Tags : <a><input><sub><sup><textarea><span>

Features of block (blocks) elements
① always start on a new line;
② height, row height, margin and inner margin can be controlled;
The ③ width defaults to 100% of its container unless a width is set.
④ it can accommodate inline elements and other block elements

Features of the inline element
① and other elements are on one line;
The ② is high, the row height and the margin and the inner margin cannot be changed;
The width of the ③ is the width of its text or picture, and cannot be changed.
④ inline elements can only hold text or other inline elements

For inline elements, be aware of the following
Setting width is not valid.
Setting height is invalid and can be set by Line-height.
Setting margin is only valid for margin, upper and lower invalid.
Set padding only left and right padding valid, upper and lower is invalid. Note that the element range is increased, but the content around the element is not affected.

Special characters:

&lt; &gt;&quot;&copy;&reg;

<  > "©®

graphic label:

SRC: The path of the picture to display.

ALT: The picture does not load successfully when prompted.

Title: The message when hovering the mouse.

Width: The width of the picture

Height: The height of the picture (width height Two attributes only one will be automatically equal to zoom.)

Hyperlink tags (anchor label) <a>   

HREF: The resource path format to be connected is as follows: href= "http://www.baidu.com"

Target: _blank: Opens the hyperlink in a new window. Frame name: Opens the connected content in the specified frame.

<a href= "http://baidu.com" target= "_blank" > Point him </a>

Name: Defines a bookmark for a page.

For jumping href: #书签名称.

<!--jump to the location of the bookmark--



</body>

List Label

<ul>: Unordered list

<ol>: Ordered list

<LI>: Each item in the list.

<dl> definition List

<dt> List Title

<dd> list Items

<! DOCTYPE html>

Table Labels <table>  

Border: Table border.

cellpadding: Inner margin

cellspacing: Margin.

Width: Percentage of pixels. (preferably with CSS to set the length width)

<tr>: Table row

<th>: Table Head cell

<td>: Table Data cell

RowSpan: How many rows the cell spans vertically

colspan: How many columns the cell spans (that is, merged cells)

<th>: Table header <tbody> (infrequently used): partitioning the table.

#合并表格 #
<! DOCTYPE html>

 

Form Labels

Forms are used to transfer data to the server.

A form can contain input elements such as text fields, checkboxes, radio boxes, submit buttons, and so on.

Forms can also contain textarea, select, FieldSet, and label elements.

1. Form Properties

HTML forms are used to receive different types of user input, which transmits data to the server when the user submits the form, thus enabling the user to interact with the Web server.

Form label, all content to be submitted should be in that tag.

  

Action: Where the form is submitted. Generally point to the server side of a program, the program receives the form submitted by the data (that is, the form element value) for the corresponding processing, such as Https://www.sogou.com/web

  

Method: How the form is submitted post/get default value is get (envelope)

Get/post is a common two-way request.

Get:1. Committed key-value pairs. Put it in the address bar after the URL. 2. The security is relatively poor. 3. There is a limit to the length of submissions.

Post:1. Committed key-value pairs are not in the address bar. 2. Security is relatively high. 3. The length of the submission is theoretically unlimited.

2, table cell element

1) <input> Type:

Text input Box

Password Password entry box

Radio Radio Box

CheckBox multiple Marquee

Submit button

button (required with JS).

File submission: Form form needs to add attribute enctype= "Multipart/form-data"

2) Name:

The key of the form submission item. Note the difference from the id attribute:

The 1,name property is the name used when communicating with the server;

The 2,id property is the name used by the browser side, which is primarily designed to facilitate client programming, and is used in CSS and JavaScript.

Value: The values of the form submission item.

The use of the Value property differs for different input types:

Type= "button", "Reset", "submit"-defines the displayed text on the button

Type= "text", "Password", "hidden"-defines the initial value of the input field

Type= "checkbox", "Radio", "image"-defines the value associated with the input

Checked:radio and checkbox are selected by default

ReadOnly: Read only. Text and password

Disabled: It works for the input you use.

3) <select> drop-down tab properties:

 Name: The key of the form submission item.

Size: Number of options

Multiple:multiple

4) <option> drop-down each of the selected properties:

Value: The values of the form submission item.

Selected:selected drop-Down is selected by default

5) <optgroup> for each item plus group

6) <textarea> Text field

Name: The key of the form submission item.

COLS: How many columns default to a text field

Rows: The default number of lines for a text field

Instance:

<! DOCTYPE html>

  

Detailed reference: http://www.cnblogs.com/yuanchenqi/articles/5603871.html

Http://www.cnblogs.com/luotianshuai/p/5159449.html

HTML at the front

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.

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.