HTML Learning notes-standard Web design + using CSS, Javascript

First, the standard web design

1, Standard page Overview:

Standard Web page design to follow, content and performance are separated .

content + Performance = page---that is: XHTML + CSS = page

Content and monetization are separated, that is, content using HTML, XHTML, and how to content layout, display using CSS.

2, the advantages of standard Web design:

(1) Less code and easier maintenance.

(2) faster page downloads, lower bandwidth requirements, and less drive capacity.

(3) layout is more convenient.

(4) Can improve ease of use and scalability (can adapt to many other devices: search spiders/Screen readers/printers/handheld devices/mobile devices, etc.).

(5) Separation of content and performance, make the extension more simple, the division of labor and collaboration is more simple.

Note:

1. DOCTYPE Label--defines the type of standard document

• DOCTYPEThe label appears separately
• Description
  • Document type, which causes the browser to load the Web page with the appropriate criteria and display
  • The document type is defined in the first line of the HTML document, before the HTML tag
  • The document does not define DOCTYPE, and the browser will not be able to learn the type of HTML or XHTML documents, so it will go into chaos mode, see: Browser mode
• DOCTYPE, abbreviated as the DTDs abbreviation for the English document type, Chinese

2. Span and Div--a bridge between CSS and HTML

html,xhtml is only responsible for displaying the content. Text labels and block tags are generally meaningful, span and div have little meaning, and they are widely used in conjunction with CSS .

　　spanis inline and represents a row.

　　divRepresents a piece. (a bit to the label p , before and after the block is always separated from the other blocks a distance.)

Example:

1 <DivID= "Dreamdu">2     <P>Learn3         <spanID= "Strong">4 of5         </span>Road6     </P>7 </Div>

Using CSS---to define CSS styles in HTML

There are three ways of embedding CSS in HTML:

1. External reference CSS --load a CSS file in the head tag-- link Tag

Example:

1 < Head > 2     <  rel= "stylesheet"  type= "text/css"  href= " Style.css "/>3</head>

This example uses the link tag. The contents of the Style.css are as follows

12 {3    font-size:12px;  4 }56 {7    font-size:10px;  8    color: #FFFFFF;  9 }

Note:

Link tag--Use this tag when declaring an external resource (such as CSS) in a document

• The link tag appears separately
• Property
  • HREF--Specifies the address URI of the resource (CSS file) to be loaded
  • Media-Medium type
  • REL--Specify link type
  • Rev--Specify link type
  • Title--Specify the element name
  • type--Contains the type of content, general usetype="text/css"

(1) Rel attribute-the REL attribute, which describes the relationship between the current page and the document specified by the href.

• The rel attribute usually appears in the A,link tag
• Property value
  • alternate --defines alternating links--  defines two different styles that users can choose from a browser
  • Appendix  --Additional information for defining documents
  • bookmark  --bookmarks
  • canonical -- The canonical Web page is the preferred version of a set of highly similar pages
    • rel= "canonical" Property lets the search engine know the duplicate or similar page in the current site, which page is the webmaster want to let it crawl and ingest
  • Chapter  --Chapters of the current document
  • contents
  • Copyright  --The current document
  • glossary  --glossary
  • help  -- Link Help information
  • index  --The index of the current document
  • next --The next page of the document. The browser can load this page in advance)
  • nofollow  --not be used for calculation PageRank
  • prev --Previous page of the record document . (defines the browser's back key)
  • Section  --as part of the document
  • start --notifies the search engine of the beginning of the document
  • stylesheet--  defines an externally loaded style sheet
  • subsection  --as a small part of a document
• rel is relationship's abbreviation for English.

(2) Rev Property-Rev property, which describes the relationship of the document specified by the HREF to the current page. --- with rel attribute

2, Internal reference CSS --Directly write CSS content in the head tag of the HTML file-- style tag

Example:

1 <Head>2     <styletype= "Text/css">3 abbr4     {5 font-size:12px;6     }7 . Text10pxwhite8     {9 font-size:10px;Ten Color:#FFFFFF; One     } A     </style> - </Head>

This example uses the style label.

Note:

Style label--use this tag when declaring a style in a document

• The style tag is paired up to start to <style> </style> end
• Property
  • media--media type, see CSS Advanced Tutorial
  • type--Contains the type of content, general usetype="text/css"

Note: The style tag should be inside the head tag.

3. inline referencing CSS --Use the Style property to load the label style--style property

inline references can directly work with CSS styles in HTML tags.

Example:

1 <  style= "Font-size:12px;color: #000;" > 使用CSS内联引用表现段落 </ P >

This example uses the label's style property.

CSS Learning:CSS Tutorial

Third, use JavaScript in HTML---add dynamic function

JAVASCRIPTT is a client-side scripting language that can help HTML implement some dynamic functionality.

Example: Loading a JavaScript file

1 < Head > 2     <  type= "Text/javascript"  src= "Dreamdu.js"></ Script > 3 </ Head >

JavaScript Learning:JavaScript Tutorial

HTML Learning notes-standard Web design + using CSS, Javascript