Home > Developer > JavaScript

HTML skeleton structure, html skeleton

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

HTML skeleton structure, html skeleton

Directory [1] document structure [2] Document declaration [3] Document Header [4] document subject document structure

A complete HTML document must contain three parts: Document declaration, document header, and document subject.

[Simplest document structure]

<!DOCTYPE html>

[Complex document structure]


<!DOCTYPE html>

 
Document declaration

Tell the browser which standard to parse HTML documents


[Note] the first line and top lattice are required, which are case insensitive.


[HTML Version]


  

 
    
    
 
     Version 
     Year 
    
 
    
 
     HTML 
     1991 
    
 
    
 
     HTML + 
     1993 
    
 
    
 
     In HTML 2.0 
     1995 
    
 
    
 
     In HTML 3.2 
     1996 
    
 
    
 
     In HTML 4.01 
     1999 
    
 
    
 
     XHTML 1, 1.0 
     2000 
    
 
    
 
     HTML5 
     2014 
    
 
   

  


 


[Common statement]


[1] HTML5


<!DOCTYPE html>


[2] Before HTML5, there are generally three types of document Declaration: strict, transitional, and framework frameset.


[A] HTML4.01


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


[B] XHTML1.0


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


[C] XHTML1.1 is equivalent to XHTML1.0 Strict


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">    


 
Document Header Describes some basic attributes and information of the document (title and icon can be displayed)


[1] document title <title>


[Role]
[A] define the title in the browser toolbar
[B] provides the title displayed when the page is added to favorites.
[C] page title displayed in search engine results


[Note] <title> is required in all HTML documents.


 


[2] base tag


Specify the default address and default open mode for all links on the page


<base href="http://baidu.com" target="_blank">


　　


[3] link tag


[A] import icon


<link rel="shortcut icon" href="ico.ico"/>


[B] introduce external CSS style sheets


<link rel="stylesheet" type="text/css" href="mystyle.css" />


 


[4] style and script labels


[A] introduce internal CSS styles


<style>　　body{background-color: red;}</style>


[B] introduce javascript


document.onclick = function(){　　alert('hello world;')}


 


[5] meta tag


[A] character encoding, document encoding must be consistent with the file itself, otherwise there will be garbled, it is recommended to use UTF-8 Encoding


<meta charset="utf-8"/>


[B] key words and description commonly used by SEO


<meta name="description" content="Free Web tutorials on HTML, CSS, JavaScript" /><meta name="keywords" content="HTML, CSS, XML" />


[C] author, copyright


<meta name="author" content="littlematch"><meta name="copyright" content="">


[D] timed jump (How many seconds does the webpage refresh or jump to another webpage)


<meta http-equiv="refresh" content="5"><meta http-equiv="refresh" content="5;url=http://www.baidu.com">


[E] term (specify the expiration time of the webpage in the cache)


<meta http-equiv="Expires" Content="0"><meta http-equiv="Expires" Content="Sat Nov 28 2015 21:19:15 GMT+0800">    


[F] Cache


<Meta http-equiv = "Pragma" Content = "No-cach"> (Cache prohibited, visitors cannot browse offline)


[G] cookie


<meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Sat Nov 28 2015 21:19:15 GMT+0800; path=/">


[H] viewport: Used on mobile terminals


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />


 
Document subject <body>

Content that can be viewed on the page


Common tags]


[Note] which tags can be used and which cannot be used under the HTML5 standard, please move to the HTML element and valid DTD


 

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

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