Home > Developer > Web Develop
Labels are generally divided into two types:
1. Block-level labels
Occupy a whole row of labels. such as:
2. In-line labels
Labels that can occupy a row with multiple labels. such as:<span>,<a>,<input>,,<label>, etc.
3. block-level labeling features
4. in-line label features
< >"©®
HTML file structure Label Usage Scope descriptionAs can be seen, the HTML file is mainly composed of and <body> tags . In the label bodies of the two tags, the following tags can be nested:
Due to historical reasons, each browser has different rendering on the page, and even the same browser in different versions, the page rendering is not the same. Before the introduction of the world standard, the browser has no uniform specifications on the rendering of the page, resulting in a difference (Quirks mode or compatibility mode);
Due to the introduction of the standard, browser rendering page has a unified standard (Csscompat or called Strict mode also called Standarsmode), which is the simplest difference between the two.
After the introduction of the standard, the browser began to adopt the new standards, but there is a problem is how to ensure that the old page can continue to browse, before the standard comes out, many pages are based on the old rendering method, if used by the standard to render, will cause the page to show an exception. In order to maintain the compatibility of browser rendering, so that the previous page can browse normally, the browser retains the old rendering methods (such as: Microsoft's IE). In this way, Quircks mode and standars mode are generated on the browser rendering, and there is a common browser for both rendering methods.
Window.top.document.compatmode://backcompat: Weird mode, the browser uses its own weird mode to parse the rendered page. Css1compat: Standard mode, browser uses the standard resolution rendering page.
This property will be recognized and used by the browser, but if your page does not have a DOCTYPE declaration, then compatmode default is Backcompat, which is the beginning of the devil-the browser in its own way to parse the rendered page, then the different browsers will show different styles.
If you add <! to your page DOCTYPE html> So, then it is equivalent to open the standard mode, then the browser will have to be honest in accordance with the standards to parse the rendering page, so that your page in all browsers display is a look.
This is <!. The role of DOCTYPE html>.
<meta> tagsThere are two properties: the Http-equiv property and the Name property, different attributes have different parameters, these different parameters make the name, the META tag has different functions.
Http-equiv PropertyHttp-equiv, as the name implies, is equivalent to the HTTP file header function, it can send back some useful information to the browser to help correct and accurate display of the content of the Web page, and the corresponding property value of content,content content is actually the variable value of each parameter.
<meta http-equiv= "Content-type" Charset=utf8 ">
<meta http-equiv= "Refresh" content= "30" > Refresh the webpage <meta http-equiv= "Refresh" content= 5 Url=http://www.baidu.com "> Jump to a webpage in 5 seconds. (about jump, can be used in the emergency, can be used in general JS implementation)
Name property
The name attribute is mainly used to describe the Web page, and its corresponding property value is content,content content is mainly convenient for search engine robot to find information and classification information.
<meta name= "keywords" content= "Interstellar 2, Spaceship, UFO, pickup" > Keywords
<title> tags<meta name= "description" content= "to provide you with the latest information" > website description
Title Tag write the website header information, that is, the name of the page label
<link> TagsThe link tag has two functions:
1. Set the tab icon:2. External CSS files:<link rel= "shortcut icon" href= "Image/favicon.ico" > # rel refers to the type, href is the file path, (image is the folder where the picture is stored)
<style> tags<link rel= "stylesheet" type= "Text/css" href= "Css/common.css" > # rel refers to the type, href is the folder that holds the CSS file
Writing CSS styles in an HTML file
<script> Tags 1. Introduction of documents2. Write JS code<script type= "Text/javasvript" src= "Http://www.googletagservices.com/tag/js/gpt.js" ></script>
Basic label<script type= "Text/javascript" >...</script>
The value range ofUse of <sup> and <sub><p> This text contains <sub> subscript </sub> text. </p><p> This text contains <sup> superscript </sup> text. </p>Show Results:
This text contains the subscript text.
This text contains superscript text.
<input> Label Type propertyThe following values can be taken:
Name propertyText input box password password input box radio single box checkbox check box Submit 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"
The value of the form submission item.
Checked propertyRadio and checkbox are selected by default
ReadOnly PropertyRead-only, text and password tags are used
Disabled propertyMakes the input tag unavailable for editing and is valid for the input tag used
<textarea> tagsThe Text field label has the following three attributes:
<label> tagsName: The key of the form submission item. COLS: How many columns default to a text field rows: How many lines default to a text field
<label for= "xxx" > Name </label><input id= "xxx" type= "text" >
When a label label is associated with the ID property of another label through the For property, clicking the label body of the label label automatically responds to the label associated with the label label
<select> tagsThe selection box has the following properties:
Name: The key of the form submission item.
Selectted: Default Selection
If the property is set multiple= "multiple" size= "3", the selection box can only display three items at the same time. Value in <option> is background recognition, innertext is text content.
<p> Choose your address </p> <select name= "City" > <option value= "1" selected= "selected" > Beijing </ Option> <!--selected default options-- <option value= "2" > Shenzhen </option> <option value= "3" > Shanghai </option> <option value= "4" > Hangzhou </option> <option value= "5" > Chengdu </option> </select>
<form> tags<p> Please choose your hometown </p> <select name= "Jiguan" > <optgroup label= "Hebei province" > <option value= " 1 "> Shijiazhuang </option> <option value=" 2 "> Baoding </option> <option value=" 3 "> Handan </option > </optgroup> <optgroup label= "Hunan" > <option> Changsha </option> <option > Zhuzhou </option> <option> xiangtan </option> </optgroup> <optgroup label= "Guangdong" > <option> guangzhou </option> <option> shenzhen </option> <option> Foshan </ option> <option> Zhuhai </option> <option> Zhongshan </option> </optgroup> </select>
Where the form was 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 propertyHow the form is submitted Post/get. The default value is get.
Enctype PropertyGet: 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 on the length of submissions. Post: 1. The value of the submitted key is not in the address bar. 2. Security is relatively high. 3. The length of the submission is theoretically unlimited. Get/post is a common two-way request.
When uploading a file, the form label must add the attribute and must also send the request by post
<a> tagsEnctype= "Multipart/form-data"
There are two functions:
<a href= "http://www.baidu.com" target= "_blank" title= "click to see Ah" > Hello </a>
<a href= "#i1" > Chapter </a><a href= "#i2" > Chapter II </a><a href= "#i3" > Chapter III </a><a href= "#i4 "> Fourth </a><a href=" #i5 "> Fifth Chapter </a> <div id=" I1 "style=" height:600px; " > The first chapter of the content <p> introduction </p></div><div id= "I2" style= "height:600px;" > Chapter II content <p> A.D. 500 </p></div><div id= "i3" style= "height:600px;" > content of chapter III <p> Park 1000 </p></div><div id= "I4" style= "height:600px;" > Fourth Chapter <p> 1900 </p></div><div id= "i5" style= "height:600px;" > Fifth Chapter <p> A.D. 2010 </p></div>
Note:The default display style of the <a> tag is underlined, if you want to get rid of it, set it in a tag style: Text-decoration:none;
tagsPicture Display label
The properties are as follows:SRC: The path of the picture to be displayed. alt: The picture does not prompt when it is loaded successfully. Title: Tip Information when hovering the mouse. Width: The height of the picture: high (width height two attributes only one will automatically zoom
NOTE: The IMG tag can also be nested in a tag to achieve the ability to click on the image jump.
List label<ul> tags<ul>: Unordered list <ol>: Sequence table <li>: Each item in the list .<dl> define list <dt> list title <dd> list item
The browser appears as follows:
The browser appears as follows:
1.Coffee
2.Milk
<dl> tagsThe browser appears as follows:
Build the table.
The properties are as follows:Merge cellsBorder: Table border. cellpadding: padding cellspacing: Margin width: pixel percentage. (preferably with CSS to set the length and width) <tr>: Table row <th>: Table Head cell <td>: Table data Cellrowspan: How many rows the cell spans colspan: How many columns (that is, merged cells) the cells span <th>: Table header <tbody> (not used): partitioning the table.
Introduction to HTML tags (common)
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
