Home > Developer > Web Develop
What is =====================html =========================
-------------------------------------structure----------------------------------------
===================== format ================================
Syntax for Tags:
< Tag Name Property 1 = "Property value 1" Property 2 = "Property value 2" ......> content section </tag name >
< Tag Name Property 1 = "Property value 1" Property 2 = "Property value 2" .../>
<! The doctype> declaration is positioned at the front of the document, before the
Function: Declares the parsing type (document.compatmode) of the document, avoiding the bizarre mode of the browser.
Document.compatmode:
This property will be recognized and used by the browser, but if your page does not have a DOCTYPE declaration, the Compatmode default is Backcompat
Common tags in ========== --------<meta> TagsMeta Introduction
The <meta> element provides meta-information about the page (meta-information), a description of the search engine and the frequency of updates, and keywords.
The <meta> tag is located in the header of the document and does not contain any content.
The information provided by <meta> is not visible to the user
Meta tag composition: Meta tags have two attributes, which are the Http-equiv property and the Name property, and different properties have different parameter values, these different parameter values to achieve a different page function.
(1) Name attribute: Mainly used to describe the Web page, 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= " The old boy training institution was created by a very old boy ">
(2) Http-equiv property: equivalent to the file header of HTTP, it can send back some useful information to the browser to help correctly display the content of the Web page, the corresponding property value of Content,content is actually the variable value of each parameter.
--------------Non-META tags
Common tags------basic tags in ============<body> ( block-level labels and inline labels）<title>oldboy</title> <link rel= "icon" href= "Http://www.jd.com/favicon.ico" > <link Rel= "stylesheet" href= "Css.css" > <script src= "Hello.js" ></script>
‘‘‘
<P>: paragraph label. The contents of the package are wrapped. And there is a blank line between the contents.
<b> <strong>: Bold label.
<strike>: Add a median line to the text.
<em>: Text becomes italic.
<sup> and <SUB>: Upper corner and lower corner table.
<br>: line break.
Special characters:
< >"©®
‘‘‘
=========div
<div></div>: <div> is just a block-level element that has no practical meaning. It is mainly given a different performance by CSS styles.
<span></span>: <span> represents inline rows (inline elements) and has no practical meaning, and is mainly given a different representation by CSS styles.
The difference between a block-level element and an in-line element
The so-called block element is the element that begins to render on another line, and the inline element does not need another line. If you insert these two elements separately in a Web page, you will not have any effect on the page.
These two elements are specifically designed to define a CSS style.
‘‘‘
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> </a>What is a hyperlink? A hyperlink is a link from a Web page to a target, which can be another page, a different location on the same page, a picture, an e-mail address, a file, or even an application.
‘‘‘
<a href= "" target= "_blank" >click</a>
The href attribute specifies the destination Web page address. The address can have several types:
Absolute URL-point to another site (such as href= "http://www.jd.com)
Relative URL-refers to the exact path in the current site (href= "index.htm")
Anchor URL-point to Anchor in page (href= "#top")
‘‘‘
‘‘‘
<UL>: Unordered list [type attribute: disc (solid dot) (default), Circle (empty circle), square (solid square)]
<ol>: Ordered list
<LI>: Each item in the list.
<dl> definition List
<dt> List Title
<dd> list Items
‘‘‘
================== Form Tags: <form>
Features: forms are used to transfer data to the server, enabling users to interact with the Web server
The form can contain input series labels such as text fields, checkboxes, radio boxes, submit buttons, and so on.
Forms can also contain textarea, select, FieldSet, and label labels.
Form Properties
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
Form elements
Basic concepts:
HTML forms are a more complex part of HTML elements, and forms are often combined with features such as scripting, dynamic pages, and data processing, so it's important to make dynamic Web sites.
Forms are typically used to collect user input information
How the form works:
When a visitor browses a page with a form, they can fill in the necessary information and then press a button to submit it. This information is transmitted over the Internet to the server.
This data is processed by a specialized program on the server and returns an error message if there is an error and requires that the error be corrected. When the data is complete and correct, the server feeds back an input completion information
<input> Series Labels
‘‘‘
<1> form Types
Type:text Text Input Box
Password Password entry box
Radio Radio Box
CheckBox multiple Marquee
Submit button
button (need to use with JS.) What is the difference between button and submit?
File submission: Form form needs to add attribute enctype= "Multipart/form-data"
Note two points to upload the file:
The request must be in the form of post
Enctype= "Multipart/form-data"
<2> Form Properties
Name: The key of the form submission item.
Note the difference from the id attribute: The name attribute is the one used when communicating with the server;
The id attribute 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. The Value property is used differently 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.
‘‘‘
Select Label
‘‘‘
<select> drop-down tab properties
Name: The key of the form submission item.
Size: Number of options
Multiple:multiple
<optgroup> for each item plus grouping
<option> drop-down checked for each of the properties:
Value: The values of the form submission item.
Selected:selected drop-Down is selected by default
‘‘‘
<textarea> Multi-line text box
‘‘‘
<form id= "Form1" Name= "Form1" method= "Post" action= "" >
<textarea cols= "width" rows= "height" name= "name" >
Default content
</textarea>
</form>
‘‘‘
<label> tags
Define the:<label> label to define the callout (tag) for the INPUT element.
Description
1 The Label element does not present any special effects to the user.
2 The For property value of the <label> tag should be the same as the id attribute value of the related element.
‘‘‘
<form method= "POST" action= "" >
<label for= "username" > Username </label>
<input type= "text" name= "username" id= "username" size= "/>"
</form>
‘‘‘
day-12-Front-end HTML
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
