HTML5 Study Notes

Source: Internet
Author: User

HTML5 is a brand-new markup language.

HTML5 many new tags are available, most of which are often used in our previous web design, but HTML5 to standardize it. So our design concept method is still unchanged, but will need to replace the label to replace it, of course , HTML5 also put forward a lot of new ideas, these things need us to study carefully, so we learn HTML5, in fact, is learning these new design concepts.

I'll look into it. HTML5

1, about the declaration

old version of HTML(HTML4.01,XHTML1.0) at the beginning of the declaration statement content is very rich, rich to I look at the point of trembling, too long, I can't remember, every time is the site copy. <! doctypehtml Public "-//w3c//dtd XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

HTML5 in the site of the declaration of a major reform, a short sentence <! DOCTYPE html> is doing everything, the streamlined statement makes the entire code look neat.

2. Document encoding

This document encoding also has the right to be streamlined, then only need to add a sentence between <meta charset= "Utf-8" > , also very simple.

Attached: Original document code: <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>

3. Semantic tags

One of HTML5 's most interesting aspects is her new semantic tags, which greatly regulate the meaning of the code.

first of all, I'll build a simple, standard HTML5 page code:

<!doctype html>

<meta charset= "Utf-8" >

<body>

<nav> navigation </nav>

<section>

<article> articles </article>

<aside> side bar </aside>

</section>

<footer> end </footer>

</body>

from the above code it is easy to see the difference between his previous code: many of the previous <div class= "" ><div id= "" > No, replaced by a more explicit semantic label, Powerful semantic tags can almost control the entire page, because they support nesting, a page has the beginning, the content, the end, the content, the end of the same can have their own beginning, content, end, but also can continue nesting, that is, almost every label opening and closing will form a closed space, The interior of this space can derive the perfect thing (that is, the semantic tag does not appear only once in a Web page, he can not only appear multiple times, but also in different space when they do not interfere with each other, she only for his space service).

Semantic tags

Serial number
Label
Significance


1
Nav
Defining navigation


2
Header
Defining the document Header


3
Section
Defining the document Area


4
Article
Fixed on sidebar


5
Aside
Define sidebar or related content


6
Footer
Define the end of a document page










This article is from "Owl" blog, please make sure to keep this source http://9096185.blog.51cto.com/9086185/1430525

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.