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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
