Overview of HTML Basics for front end series

Source: Internet
Author: User
Tags button type html form

1. What is HTML

Html:hyper Text Markup Language: Hypertext Markup Language.

Hypertext: Features are more powerful than normal text.

Markup Language: A language that describes content using a set of tags, which is not a programming language.

2. What can HTML do

HTML is used to write Web pages, and most of the pages we see on the Internet through the browser are written in HTML. When you visit a Web page in your browser, you can see the specific HTML code through the right/view page source code.

Web content includes: HTML code, CSS code, JavaScript code, and so on.

HTML code: Used to show the data that needs to be displayed.

CSS code: Make the displayed data look better.

JavaScript code: Animate the data that is displayed throughout the page.

The webpage is divided into: static page, dynamic page according to content change

Static pages: Pages that are not changed after the browser is written. HTML is used to write static Web pages. Dynamic Pages: Different content is displayed depending on the situation. For example, the user name appears in the upper-right corner after successful login.
3. HTML syntax and specifications

HTML files end in. html or. htm. We recommend using the. HTML end.

The HTML file is divided into the header (head) and body parts (body).

HTML tags are made up of start and end tags.

HTML tags are case-insensitive and lowercase are recommended.

4. HTML language Features

HTML files do not need to compile, directly to use the browser to read the HTML file extension is *. Htm.

The signature is pre-defined, and we just need to know its capabilities. Typically, labels consist of a start tag and an end tag. For example, label names are not case sensitive.

If there is no end tag, it is recommended to/end. The HTML structure consists of two parts: heads head and Body Body

5. HTML Text Tags
(1), title tag: from 
6. HTML form (1), form label:<form>

<form> form labels, create a form on an HTML page, and the form label does not appear on the browser. If the data needs to be submitted to the server, the label responsible for collecting the data must be stored in the form tag body content.

(1), Action property: Request path, determine the address (path) (2), Method property: Request method that the form submits to the server. Common values: GET, POST
GET: Default value 1), the submitted data is appended on the request path. For example:/1.html?username=jack&password=1234, data Format k/v, append is used? Connection, after each pair of data using & Connection 2), because the request path length is limited, all get requests submit data limited.
POST:1), the submitted data is no longer requested on the path (and not displayed on the address bar) 2), the submitted data size is not displayed
(3), Data submission:
<body><form action= "" method= "" ><! --the content here may be submitted to the server--></form><! --The content here is outside of the <form> tag, where the data cannot be submitted to the form--></body>
(2), input domain label:<input>

<input> tags are used to obtain user input information, the type attribute value is different, the collection method is different. The most commonly used label.

(1), type attribute 1), text: textbox, input field of a single line, where the user can enter text. The default width is 20 characters 2), Password: Password box, password field. The characters in this field are displayed in black circles. 3), Radio: a radio box that represents one of a set of mutually exclusive option buttons. When a button is selected, the previously selected button becomes unchecked. 4), Submit: Submit button. The Submit button sends the form data to the server. The name attribute is generally not written, otherwise the "commit" two words are committed to the server. Because different project registration requires different fields, the need to complete the case does not cover all the form elements, the following tags used also need to be mastered. 5), CheckBox: check box 6), File: Upload components, provide "Browse" press can choose to upload files 7), Hidden: hidden fields • The data is sent to the server, but the browser does not display 8), Reset: Reset button. Restore form to default 9), Image: Graphics submit button, set picture by src button (10), Button: Normal button, commonly used in conjunction with JavaScript
(2), Name: element name, if you need to submit the form data to the server, you must provide the Name property value, the server obtains the submitted data through the property value.
(3), Value property: Sets the default value of the input label. Submit and reset display data for the button
(4), Size: Sizes
(5), checked properties: The Radio box or check box is selected
(6), ReadOnly: set to readable only
(7), disabled: is available
(8), Maxiength: Maximum allowable length of input
(3), drop-down list label:<select>

<select> drop-down list. You can make a single or multiple selection. Need to specify list items using sub-label ' <option> '

(1), Name property: The name sent to the server (2), the Multiple property: Do not write the default radio, the value of "multiple" for multi-Select (3), Size property: Multi-Select, the number of visible options (4), <option> Sub-label: One option (one entry) in drop-down list    1), selected: Tick current list item    2), Value: Option value sent to server
(4), Text field label:<textarea>

<textarea> text fields. Multiple lines of text input control.

(1), cols Properties: Number of columns in a text field (2), rows property: Number of lines in a text field
(5), button label:<button>

Button labels are rarely used and provide a "normal | reset | submit" feature, with different browser defaults.

<button type= "" Button|reset|submit ">
Scan Code Follow the public number, learn more

Overview of HTML Basics for front end series

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.