Home > Developer > JavaScript
Front-end -- 1, HTML basics, -- 1, HTML Basics
Web Services
Data transmission and parsing under the http protocol at the application layer.
What is HTML?
On the upper layer of the socket, when using a socket to transmit http data, you must declare at the beginning of the message the http protocol/corresponding http Version status code meaning \ r \ n real string content.Hypertext Markup Language is a Markup Language used to mark each part of the webpage to be displayed. A set of rules recognized by browsers.
The browser renders the webpage code file in order and interprets and displays the content based on the tag. The labels of different browsers may have different interpretations.Static webpage File Extension:. html. htm. js ......
Structure of html code files
Use a tag to set the display of a webpage, as shown in figure<! DOCTYPE html> # Let the browser know which HTML is used to parse it. # Indicates the start and end of a tag. Tell the browser that it is an HTML document. Detail Html tag format
Tag Syntax:
- The keyword is enclosed by Angle brackets.
- It usually appears in pairs, such as the start tag and the end tag. Some simple functions can be labeled as self-closing and tag,
- Case Insensitive
- There can be several attributes, or no attribute is added.
- Labels can be nested but cannot be cross-nested.
<Tag Name attribute 1 = "attribute value 1" attribute 2 = "attribute value 2"……> Content </Tag Name>
Common tags <! DOCTYPE>
<Tag Name attribute = "attribute value 1" attribute 2 = "attribute value 2 "...... />At the beginning of the document, before the Purpose: declare the parsing Type of the document. Avoid the weird browser mode.
Resolution type
- Backcompat: Weird mode. The browser uses its own method for parsing and rendering.
- CSS1compat standard mode. The browser uses w3c standard for parsing and rendering
If not, the default value is backcompat.
<Head> <meta>Provides meta information about the page, which describes the search engine and update frequency and keywords.
It is in the document header and does not contain any content.
The provided information is invisible to users.Meta tag attributes
- The http-equiv attribute is equivalent to the http File Header. You want the browser to return some information to help correctly display the webpage content. The corresponding attribute value is content. Example:
<Meta http-equiv = "Refresh" content = "2; URL = https://www.oldboy.com"> // (note the quotation marks, before the second and after the URL, respectively) <meta http-equiv = "content-Type" charset = UTF8 "> <meta http-equiv =" X-UA-Compatible "content =" IE = EmulateIE7 "/>
- The name attribute describes the webpage, and the corresponding property value is content (to facilitate search engine searching and classification information)
<Title><Meta name = "keywords" content = "meta summary, html meta, meta attributes, meta jump "> <meta name =" description "content =" training institutions are created by a group of very people ">Webpage Tag Name
<Link>Link some images to tags.
<Script>???
<Body>The difference between block-level elements and intra-row elements is the so-called block element, which is rendered starting from another row. In-row elements do not need to start from another row. If these two elements are inserted separately in the webpage, the page will not be affected.
Block-level labels
These two elements are created specifically to define CSS styles.Inline label
- <Hn> n is 1 ~ 6, indicating the title size in the content.
Paragraph label. There is a space between the line break and the upper or lower part.
Line feed- Horizontal line
- Bold Text
Special characters
- <Strike> Add a midline to the text
- Marker and marker
<Div>< >；"；©®Block-level elements have no practical significance. It mainly uses CSS styles to give it different representations.
<Span>Inline rows (intra-row elements) have no practical significance. They are mainly presented with different expressions through CSS styles.
Image Tag
<A> </a>Src: Path of the image to be displayed. alt: prompt when the image is not loaded successfully. title: The prompt message when the mouse is suspended. width: The image width and height: The image height (the width and height attributes use only one to automatically proportional scaling .)Hyperlink tag
Link a webpage to a target. The target can be another webpage, different locations on the same webpage, or an image or email address, A file or even an applicationNote: a URL consists of four parts:
Part 1: Protocol: http: //, ftp: //, etc.
Part 1: site address: it can be a domain name or IP address
Part 1: The Directory of the page in the site: stu
Part 2: The Page name, for example, index.html
Each part is separated by a slash.List tag<A href = "" target = "_ blank"> click </a> the href attribute specifies the target webpage address. This address can be of several types: absolute URL-pointing to another site (such as href = "http://www.jd.com) Relative URL-pointing to the exact path in the current site (href =" index.htm ") anchor URL-pointing to an anchor in the page (href = "# top ")<Table><Ul>: unordered list [type attribute: disc (solid dot) (default), circle (hollow circle), square (solid square)] <ol>: ordered list <li>: each item in the list. <dl> definition list <dt> List title <dd> list itemsA table is a two-dimensional data space. A table consists of several rows, and a row contains several cells, cells can contain text, lists, patterns, forms, numeric symbols, preset text, and other tables.
Basic Structure
The most important purpose of a table is to display table-type data. Table data is the data that is most suitable for organizations in table format (by row and column.<Table> <tr> <th> title <th> # first column, th will bold the font <th> title <th> </tr> <td> content </td> </tr> </ table>Form tag <from><Tr>: table row <th>: table head cell <td>: table data cell attribute: border: table border. cellpadding: margins cellspacing: margins. width: pixel percentage. (It is best to use css to set the length and width.) rowspan: number of rows vertically across a cell colspan: Number of columns across a cell (that is, merge cells)It is used to transmit data to the server to realize the interaction between the user and the web server.
Can contain input series labels, such as text fields, check boxes, single quotes, and submit buttons.
It can also contain labels such as textarea, select, fieldset, and label.
Form attributesForm Element
- Action: the address to which the form is submitted. The program must have a corresponding mechanism for receiving form data and processing,
- Method: Form submission method. The default value of post/get is get.
HTML forms are complex parts of HTML elements. They are often combined with scripts, dynamic pages, and data processing functions. Therefore, HTML forms are important for creating dynamic websites.
Forms are generally used to collect user input information.
<Input> tag
How a form works: When a visitor browses a webpage with a form, the visitor can fill in the required information and then click a button to submit the information. The information is transmitted to the server over the Internet.
A special program on the server processes the data. If there is a mistake, the system returns the error message and requires that the error be corrected. When the data is complete, the server returns an input informationType
Type: text input box password Input box radio single ‑checkbox multiple selection box submit button (need to use with js.) What is the difference between button and submit? File: To submit a file, add the attribute enctype = "multipart/form-data" to the form to upload the file. Note: 1. The request method must be post 2 enctype = "multipart/form-data"Attribute
Select tagName: Key of the Form submission item. note: The name attribute is the name used to communicate with the server, and the id attribute is the name used by the browser. This attribute is mainly used to facilitate client programming, the value used in css and javascript: the value of the Form submission item. for different input types, the usage of the value attribute is also different: type = "button", "reset", "submit"-defines the text type = "text" displayed on the button ", "password", "hidden"-defines the initial value of the input field type = "checkbox", "radio", "image"-defines the value checked associated with the input: radio and checkbox are selected by default readonly: read-only. text and passworddisabled.<Textarea> multi-line text box<Select> select the label attribute name from the drop-down list: the Key of the Form submission item. size: Number of options. multiple: multiple <optgroup> adds a group to each item. <option> Each attribute selected in the drop-down list: value: the value of the Form submission item. selected: The selected drop-down list is selected by default.<Label> label<Form id = "form1" name = "form1" method = "post" action = ""> <textarea cols = "width" rows = "height" name = "name"> default content </textarea> </form>Definition: <label> label defines the annotation (TAG) for the input element ).
Note: The 1 label element does not present any special effects to users. 2 <label> The for Attribute Value of the label should be the same as the id attribute value of the related element.<Fieldset> label<Form method = "post" action = ""> <label for = "username"> User name </label> <input type = "text" name = "username" id =" username "size =" 20 "/> </form>Fieldset can group related elements in a form.
<Fieldset> the label packs a part of the Form Content and generates a set of related form fields.
When a group of form elements are placed in the <fieldset> label, the browser displays them in a special way. They may have special boundaries and 3D effects, or you can even create a subform to process these elements.
<Fieldset> the tag does not have a required or unique attribute. <Legend> the label defines the title for the fieldset element.
All global attributes contained
- If disabled HTML5 sets this bool value attribute, its child form control element also inherits this attribute, except for its first Optional legend element, for example, editing is prohibited. this element and its child element do not accept any browser events, such as click or focus events. Generally, the browser will display such elements in gray.
- Form HTML5 specifies the form to which fieldset belongs. The value of this attribute is the same as the ID of the form to which it belongs. The default value is the nearest form.
- Name of the HTML5 Control Element Group
<Fieldset> <legend> log on. </legend> enter the logon information ...... <Input type = "text"> </fieldset>
Front-end learning siteRecommendation：https://developer.mozilla.org/en-US/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
