HTML5 development-HTML5 getting started

Source: Internet
Author: User


HTML5 is a very popular technology today. After learning about it for a while, I found that its future is indeed very promising. Although it has not yet been officially released, major browser vendors have already taken action, friends in China have developed HTML5-based games such as dawn empire.

Currently, Chrome is the best supported by browsers, and Firefox is also good. Development tools can use DreamWeaver, but the features in HTML5 do not have the automatic prompt function.

So what is HTML5?

HTML5 = HTML + CSS + JS

I. Why HTML5?

1. HTML5-based videos will be web videos in the future

The video and audio tags supported by HTML5 will be web audio and video in the future, so you do not need to install flash players,

2. the resume of the player is directly stored in the browser.

This means that you do not need to install flash-like operations. This will make the video playback process faster and consume less system resources.

3. labels are more standardized and semantic, and code redundancy is reduced. unified standards make it easier for previous engineers to collaborate in teams.

It also occupies less system resources.

 

Ii. Differences between HTML5 and Flash

JavaScript is a client scripting language that is based on objects and events and is relatively secure. It is often used to add dynamic functions to HTML webpages. The complete JS implementation includes three parts: ECMA, DOM, and BOM.
HTML5 adds many new JavaScript APIs.

HTML5 advantages and disadvantages:

Advantages

1. No plug-ins required

2. open and free

3. Friendly to search engines

Disadvantages

1. browser compatibility is poor because it is still in the Draft Stage

2. the development mode is single. Currently, only notepad is used for development. (DreadWeaver is also supported, but new HTML5 attributes are not currently supported)

 

JS advantages and disadvantages

Advantages

1. high penetration rate. Generally, FlashPlayer is installed on each PC.

2. A large number of developers

3. No compatibility issues

4. Mature Development Environment

Disadvantages

1. Power Consumption, poor performance

2. Closed and charged

3. Simple Example

View Code? <! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> Query Selector Demo </title>
<Style type = "text/css">
Td {
Border-style: solid;
Border-width: 1px;
Font-size: 300%;
}

Td: hover {
Background: cyan;
}

# HoverResult {
Color: green;
Font-size: 200%;
}
</Style>
</Head>

<Body>
<Section>
<Table>
<Tr>
<Td> A1 </td>
<Td> A2 </td>
<Td> A3 </td>
</Tr>

<Tr>
<Td> B1 </td>
<Td> B2 </td>
<Td> B3 </td>
</Tr>
<Tr>
<Td> C1 </td>
<Td> C2 </td>
<Td> C3 </td>
</Tr>
</Table>

<Div>
Foucs the button, hover over the table cells, and hit Enter to identify them using querySelector ('td: hover ').
</Div>
<Button type = "button" id = "findHover" autofucus> Find 'td: hover '</button>
<Div id = "hoverResult"> </div>

<Script type = "text/javascript">
Document. getElementById ("findHover"). onclick = function ()
{
Var hovered = document. querySelector ("td: hover ");
If (hovered)
{
Document. getElementById ("hoverResult"). innerHTML = hovered. innerHTML;
}
}
</Script>
</Section>
</Body>
</Html>

You can use the mouse to show the color of each cell.

 


By Lou Lijun
 

Related Article

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.