Home > Developer > Web Develop
First, the introduction of HTML
1. Definition
HTML: Hypertext Markup , a markup language used to create Web pages, is not a programming language.
HTML uses tags to describe web pages .
2.HTML Basic Structure
<! DOCTYPE html> "zh-cn">" UTF-8 "> <title></title> <meta http-equiv="x-ua-compatible "content="ie=edge">Row by line explanation:
Second, the common HTML tags
Commonly used labels in 1.head
The tags commonly used in head can be divided into two categories: meta tags and non-meta tags.
1) META tag
Meta elements provide the original information about the page, descriptions and keywords for search engines and update frequency.
The META element tag is located in the header of the document and does not contain any content, and the information provided is also invisible to the user.
Meta has two properties: the Name property and the Http-equiv property, and different properties have different parameter values that implement different page functions.
(1) http-equiv: equivalent to the HTTP file header function, it can send back some useful information to the browser, than help to correctly display the content of the Web page, the corresponding property value of Content,content is the value of each parameter.
<!--after 2 seconds, jump to the corresponding URL --<meta http-equiv="Refresh"Content="p; Url=https://www.baidu.com"><!--Specifies the type of document to encode -<meta http-equiv="Content-type"charset="UTF-8"><title></title><!--tell IE to render the document in superlative mode --<meta http-equiv="x-ua-compatible"Content="Ie=edge">
In general, HTTP-EQUIV contains some configuration information that tells the browser how to navigate through the contents of the HTML.
(2) name: Mainly used to describe the Web page, and the corresponding property value of content,content content is mainly convenient for search engines to find information.
<link rel="icon"href="Https://www.jd.com/favicon.ico"> <!--tell IE to render the document in superlative mode --<meta http-equiv="x-ua-compatible"Content="Ie=edge"> <!--Web-friendly information can be searched by setting the key<meta name="keywords"content= tutorials, software, programming, development, operations, cloud computing, networking, internet"/><!--description information, displayed in the search interface--<meta name="Description"Content="Research on Internet products and Technologies"/>
In general, the name attribute is for the search engine to see.
The meta type actually has a meta property, and the main role is to agree that the page content can be referenced by other URLs.
2) non-META tags
<!--title, and will not be displayed in the browser--<title>kebi</title> <!--Icon --<link rel="icon"href="The path of the icon you want to insert, can be a URL, can be a file path"> <!--style Files --<link rel="stylesheet"href="Store the CSS style you want to show here."> <!--js file --<script src="js file"></script>
Note: JS can make your Web page move up, CSS can make your net love up.
tags commonly used in 2.body
(1) Basic label
<b> Bold </b><i> Italic </i><u> underline </u><s> Delete </s><p> paragraph tags </p> # before and after paragraphs empty lines maximum of 6 <! -- newline-<br><! -- Horizontal-->
Some of the common special characters
| Content | corresponding Code |
| Space | |
| > | > |
| < | < |
| & | & |
| ￥ | ¥ |
| Version | © |
| Registered | &ren; |
(2) div tags and span tags
div tags are used to define a block-level element and have no practical significance. It is mainly given a different performance by CSS styles.
The span tag is used to define inline rows and has no practical meaning. It is mainly given a different performance by CSS styles.
The so-called block element is the element that begins to render on a different line, and the inline element does not need another row. These two elements are specifically designed to define a CSS style.
Usually a quick-level element can contain inline elements or other blocks, but inline elements cannot contain block-level elements, which can contain only other inline elements.
P tags cannot contain block-level labels.
(3) img Tag
The IMG element mosaics an image into the Web page.
Note that technically the, tag does not insert an image into the page, but instead connects the image from the Web page.
The tag creates a placeholder space for the referenced image.
Within an element, the position of the attribute can be placed at will and the attributes are separated by a space.
IMG has a total of 11 parameters, of which 2 are required.
" picture path " alt=" The picture is not loaded successfully when prompted " title=" Mouse hover when the message " width=" width "height=" High (width height two properties only one will be automatically scaled) ">
(4) a label
<a> tag defines a hyperlink that is used to link from one page to another.
The most important attribute of the <a> element is the Herf property, which indicates the target of the link.
<a href="http://www.oldboyedu.com" target="_blank" > Point Me </a>
Create a link<body><p><a href="001.jpg " target="_blank" > This text </a> is a link to a page in this website. </p> #链接图片,<a> hypertext <p> Standalone field <p><a href="http://www.baidu.com/ "target="_blank"> This text </a> is a link to a page on the World Wide Web. </p> # link URL </body>
Link Mail<body><p> This is the email link:<a href="mailto:[email Protected]?subject=hello%20again > Send mail </a></p><p><b> note:</b> should use% to replace spaces between words, This allows the browser to display the text correctly. </p></body>
(5) Select tag (Create a multi-select menu)
The Select element creates a single-or multiple-selection menu.
The <option> tags in the <select&> element are used to define the options available in the list.
Property Description:
Simple drop-down<form> <select name="cars"> <option value=" Volvo ">Volvo</option> <option value="Saab">saab</ option> <option value="Fiat">Fiat</option> <option Value="Audi">Audi</option> </Select></form >
<form><SelectName="Cars"><option value="Volvo">volvo</option><option value="Saab">saab</option><option value="Fiat"Selected="selected">fiat</option><option value="Audi">audi</option></Select></form>with default values
(6) lable label
The <label> tag defines the callout (tag) for the INPUT element.
The label element does not present any special effects to the user. However, it improves usability for the user of the mouse.
If you click on the text within a LABEL element, the control is triggered, that is, when the user selects the label,
The browser automatically shifts the focus to the label-related form controls.
The For property of the <label> tag should be the same as the id attribute of the related element.
Property Description:
<form><label for="male">male</label><inputtype="Radio"Name="Sex"Id="male"/><BR/><label for="female">female</label><inputtype="Radio"Name="Sex"Id="female"/></form>Label Instance 1
<form><label for="male">male</label><inputtype="Radio"Name="Sex"Id="male"/><BR/><label for="female">female</label><inputtype="Radio"Name="Sex"Id="female"/></form>Label Instance 2
(7) TextArea label (give you a box to write)
<textarea> tags define multiple lines of text output controls .
The text area can hold an unlimited number of text, where the text of the default font is equal to the width of the font.
The size of the textarea can be specified by the Cols and row properties, but a better approach is to use the height and width properties of the CSS.
Between the lines of text in the text input, separated by "%od%oa" (carriage return/line break).
TEXTAREA format and Parameters:
<textarea cols=" rows=" > Here you can enter the content </ Textarea> #textarea可以看作是一个框, use <textarea></textarea> to create.
Property Description:
HTML related knowledge
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
