HTML Learning--Summary of basic classification

Last Update:2017-06-17 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1. html

Hypertext Markup Language hypertext Markup Language. HTML Document BASIC structure:

 <! DOCTYPE html> 
 <  head  > 
  <!--put some other information--</ head  Span style= "COLOR: #0000ff" >>  <  body  > 
 Visible page content  </ body  >  </ Span style= "COLOR: #800000" >html  >

HTML describes a Web page with tag tags, and an element contains a pair of start/end tags . element can be set in the start tag as a name/value pair .

2. can contain the following elements

<title> Page Title </title> 1. browser toolbar title; 2. Favorites title; 3. Title of the Search engine results page

<meta name= "description" content= "description" >
Metadata: Data data, information that describes the HTML data
1. Name= "Property name" content= "property corresponding to the information"
2. http-equiv= "HTTP header Properties" content= "http-equiv corresponding attribute information"

<base href= "http:www.xxx.com" > The default link address in the document

<link rel= "The relationship between the current document and the linked document" Type= "Text/css" href= "CSS document address. css" > Relationships between documents and external resources

<style></style> Style file

<script></script> Client script files

3. <body></body> What is displayed on the page
3.1 Layout

<div></div> A container in which other elements are placed

<table></table> A container in which other elements are placed

<span></span> As a container of text, it can be placed in other containers such as <p></p>

3.2 Text Structure

H1~h6 Title

<p></p> Article paragraph

<br/> Line break

3.3 Multi-media

Inserting images

<map name= "Mymap" >
<area shape= "Rect" >
</map>

IMG Maps to a clickable image using map
Map with area definition image maps
Each area is a clickable region that jumps to an external link

<canvas id= "canvas_id" ></canvas> Canvas is a canvas in which 2D graphics are drawn with JS Html5

<svg xmlns= "XML namespace Address" ></svg> SVG is a scalable vector graphic that uses XML format to define graphics Html5

<video width= "" height= "" controls>
<source src= "video address" type= "video/mp4>
</video>
Insert a video Html5

<audio controls>
<source src= "Audio address" type= "Audio/mpeg" >
</audio>
Insert an audio Html5

<object data= "bookmark.swf" ></object>
object is used to insert objects such as Java programs, videos,
Flash Player and so on. Used by IE under Windows.
HTML Plugin

<embed src= "bookmark.swf>
Embed is used to insert objects such as videos, flash players, and so on. No tabs off!
Used by Netscape under Windows and Mac. Two tags function the same,
To avoid browser incompatibility issues, use the <object><embed></object>
HTML Plugin

3.4 Forms <form></form>
Used to receive different types of user input, the browser packages the data entered by the user in the form, and submits the form to the server

<form action= "Jump to Address" ></form>

<input type= "Radio" Name= "a" value= "B" >
Input is the entry field
Name: Used in JS reference
Value: As the default value for text in an element

<textarea></textarea> Multiple lines of text input controls

<label for= "inputID" >inputID</label>
Use for to bind the label to another element,
The bound element also responds when you click the label text

<fieldset>
<legend>fieldset name </legend>
<input type= "Text" >
</fieldset>

FieldSet contains a set of related form elements in a frame.
Legend Definition fieldset Name

<select>
<optgroup label= "Optgroup1" >
<option value= "Option1" >option1</option>
</optgroup>
<optgroup label= "Optgroup2" >
<option value= "Option1" >option1</option>
</optgroup>
</select>

Select Definition drop-down menu
Optgroup: Multiple option groups, group names are listed but not selectable
option is an item in the menu list

<input list= "Listid" >
<datalist id= "Listid" >
<option value= "a" >a</option>
<option value= "B" >b</option>
</datalist>
DataList can be used to specify a list of possible options for the <input> element and can be entered

3.5 Global Properties & Events

Global properties: Any one label is a property that can be used

<p class= "ClassName1 className2" ></p> Two class names defined for <p>

<p style= "" ></p> Defining inline styles for elements

<p id= "pid" ></p> Unique ID of the specified element

<p hidden= "hidden" >abc</p> Hide <p> Elements

Event Properties: Triggering behavior in the browser Window events, form events, keyboard events, mouse events, and other

3.6 Colors & Symbols

Color representation
Color name 16 Binary Value
Black #000000

Character
To display the HTML page correctly, the browser must know what character set meta is used
ISO character set: standard set of standards for different alphabets/languages defined by the International Standards Organization (ISO)
The standard Unicode conversion format (UTF) wants to replace the existing character set. Unicode can be compatible with different character sets. Commonly used are UTF-8 and UTF-16.
ASCII Character set: American Standard Code for Information interchange

Symbol entity
Mathematical symbols, Greek letters, other
Character entity number entity name
A & #913; Α

HTML Learning--Summary of basic classification

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

<title> Page Title </title>	1. browser toolbar title; 2. Favorites title; 3. Title of the Search engine results page
<meta name= "description" content= "description" >	Metadata: Data data, information that describes the HTML data 1. Name= "Property name" content= "property corresponding to the information" 2. http-equiv= "HTTP header Properties" content= "http-equiv corresponding attribute information"
<base href= "http:www.xxx.com" >	The default link address in the document
<link rel= "The relationship between the current document and the linked document" Type= "Text/css" href= "CSS document address. css" >	Relationships between documents and external resources
<style></style>	Style file
<script></script>	Client script files

<div></div>	A container in which other elements are placed
<table></table>	A container in which other elements are placed
<span></span>	As a container of text, it can be placed in other containers such as <p></p>

	Inserting images
<map name= "Mymap" > <area shape= "Rect" > </map>	IMG Maps to a clickable image using map Map with area definition image maps Each area is a clickable region that jumps to an external link
<canvas id= "canvas_id" ></canvas>	Canvas is a canvas in which 2D graphics are drawn with JS	Html5
<svg xmlns= "XML namespace Address" ></svg>	SVG is a scalable vector graphic that uses XML format to define graphics	Html5
<video width= "" height= "" controls> <source src= "video address" type= "video/mp4> </video>	Insert a video	Html5
<audio controls> <source src= "Audio address" type= "Audio/mpeg" > </audio>	Insert an audio	Html5
<object data= "bookmark.swf" ></object>	object is used to insert objects such as Java programs, videos, Flash Player and so on. Used by IE under Windows.	HTML Plugin
<embed src= "bookmark.swf>	Embed is used to insert objects such as videos, flash players, and so on. No tabs off! Used by Netscape under Windows and Mac. Two tags function the same, To avoid browser incompatibility issues, use the <object><embed></object>	HTML Plugin

<form action= "Jump to Address" ></form>
<input type= "Radio" Name= "a" value= "B" >	Input is the entry field Name: Used in JS reference Value: As the default value for text in an element
<textarea></textarea>	Multiple lines of text input controls
<label for= "inputID" >inputID</label>	Use for to bind the label to another element, The bound element also responds when you click the label text
<fieldset> <legend>fieldset name </legend> <input type= "Text" > </fieldset>	FieldSet contains a set of related form elements in a frame. Legend Definition fieldset Name
<select> <optgroup label= "Optgroup1" > <option value= "Option1" >option1</option> </optgroup> <optgroup label= "Optgroup2" > <option value= "Option1" >option1</option> </optgroup> </select>	Select Definition drop-down menu Optgroup: Multiple option groups, group names are listed but not selectable option is an item in the menu list
<input list= "Listid" > <datalist id= "Listid" > <option value= "a" >a</option> <option value= "B" >b</option> </datalist>	DataList can be used to specify a list of possible options for the <input> element and can be entered

Global properties: Any one label is a property that can be used
<p class= "ClassName1 className2" ></p>	Two class names defined for <p>
<p style= "" ></p>	Defining inline styles for elements
<p id= "pid" ></p>	Unique ID of the specified element
<p hidden= "hidden" >abc</p>	Hide <p> Elements
Event Properties: Triggering behavior in the browser	Window events, form events, keyboard events, mouse events, and other

HTML Learning--Summary of basic classification

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support