Home > Developer > Web Develop
Company |
Department |
Name |
Position |
Share Content |
Pain Guest Dream Factory Technology Co., Ltd. |
Technical Department |
Zhang Qingchin |
Web front-end development engineer |
HTML5 and CSS3 |
First, HTML5
Second, CSS3
Third, JQuery with the CSS3 selector (see PDF documentation)
Note: Some examples are shown in the sharing meeting file demo.html
1. Why do I need HTML5?
HTML4 's obsolescence does not meet the growing need for the Internet, especially the mobile internet. In order to enhance the browser function Flash is widely used, but security and stability worrying, not suitable for mobile use (power, touch, not open). HTML5 enhances the native functionality of the browser, and the browser features that conform to the HTML5 specification will be more powerful, reducing Web application dependency on plugins, making the user experience better and making development more convenient.
Basic knowledge: Html+css+javascript with any kind of Web server backend technology (java,dotnet,php)
2. What is HTML5?
HTML5 refers to a set of technology combinations including HTML, CSS, and JavaScript. It wants to reduce web browsers ' rich Web application services (plug-in-based Rich Internet application,ria) that require plugins. HTML5 is the latest version of HTML, October 29, 2014, the World Wide Web Consortium announced that after nearly 8 years of hard work, the standard specification was finally finalized.
3. HTML5 Status and browser support.
Most mainstream browsers already support HTML5, but the way that browsers support them and the syntax is different. Browsers that support HTML5 include Firefox, IE9 and later, Chrome (Google Chrome), Safari (web browser developed by Apple), opera and other modern browsers.
Support Score:
4. HTML5 advantages and disadvantages.
4.1. Advantages1, network standards Unified, HTML5 itself is recommended by the web;
2, multi-equipment, cross-platform;
3, immediate updating;
4, improve the usability and improve the user's friendly experience;
5, HTML5 new tags, this will help developers define important content;
6, can bring more multimedia elements (video and audio) to the site, can be a good alternative to flash and Silverlight;
7, related to the site crawl and index when the SEO is very friendly;
8, is widely used in mobile applications and games.
A), security: Like the previous FIREFOX4 Web sockets and transparent proxy implementations have serious security issues, while the Web Storage, Web sockets such a feature is easily exploited by hackers to steal users ' information and information;
b), perfect sex: Many features the level of support of the browser is not the same;
c), performance: engine problems on some platforms cause HTML5 performance is low;
d, browser compatibility: The biggest drawback, IE9 the following browsers almost annihilated.
6. Document Declaration
<! The doctype> declaration must be in the first row in the HTML5 document, which is before the <HTML> tag. This tag informs the HTML specification used by the browser document.
The DOCTYPE declaration is not an HTML tag, it is an instruction that tells the browser the version of the markup used to write the page.
It is important to specify DOCTYPE in all HTML documents so that the browser can understand the expected document type.
The DOCTYPE in HTML 4.01 requires a reference to the DTD because HTML 4.01 is based on SGML. While HTML 5 is not SGML-based, it does not require a reference to the DTD.
Cases:
6, HTML5 new form labelName: <input type= "Tel" name= "text" ></br></br>
E-mail: <input type= "email" name= "email" ></br></br>
Date: <input type= "date" name= "date" ></br></br>
Duration: <input type= "Time" name= "Times" ></br></br>
Sliders: <input type= "range" name= "range" ></br></br>
Personal homepage: <input type= "url" name= "url" ></br></br>
<input type= "Submit" value= "Tijaio" name= "BTN" >
Example: Share a HTML5: Add a new form label. html
7. HTML5 Multimedia ComponentsThe HTML5 multimedia component refers to the video and audio components. HTML5 Multimedia components can embed multimedia components directly on your Web page without the help of third-party plug-ins such as Flash Player. The new ability of the browser to provide native support video makes it easier for web developers to add video components to their sites without relying on external plug-in availability. The ability to HTML5 multimedia components is especially important because of the limitations of the flash technology that Apple is using on the iphone and ipad at this stage.
Example: Sharing a file CSS3: Video, audio. html
8, HTML5 's canvasThe 1.HTML5 canvas element uses JavaScript to draw an image on a Web page.
2. The canvas is a rectangular area where you can control each pixel.
3.canvas has several ways to draw paths, rectangles, circles, characters, and add images.
Example: Sharing will file Css3:canvas Kaleidoscope conversion. HTML and clock. html
What is 1.CSS3?
CSS is a cascading style sheet (Cascading stylesheet). The use of cascading style sheets in web pages makes it possible to effectively control the layout, font, color, background and other effects of the page. Just make some simple changes to the corresponding code, you can change the different parts of the same page, or pages of different page appearance and format. CSS3 is an upgraded version of CSS technology, and CSS3 language development is evolving towards modularity.
2.css3transform---rotate animation----animation
Rotation: The Transform property is applied to the 2D or 3D transformations of the element. This property allows you to rotate, scale, move, tilt, and so on.
Example: Sharing will file CSS3 digital 3D stereo rotation. HTML and 3Dbanner Carousel diagram. html.
Animation:
1. Animations are effects that gradually change an element from one style to another.
2. You can change any number of styles as many times as possible.
3. Use percentages to specify when changes occur, or to use the keywords "from" and "to", equivalent to 0% and 100%.
4% is the beginning of the animation, and 100% is the completion of the animation.
5. To get the best browser support, you should always define the 0% and 100% selectors.
Example: Sharing a file CSS3 animation. html
3.CSS3 font:
Example: share a file CSS3 font icon. html
4.CSS3 icons:
Example: share a file CSS3 font icon. html
5.CSS rounded border:
With CSS3, you can create rounded borders, add shadows to rectangles, use pictures to draw edges, and no longer need to use design software, such as Photoshop, to do these effects, making it easy to make rounded corners, shadows, and other effects on the page.
Example: Sharing will file CSS3 fillet. html (CSS3 vs. JavaScript fillets).
6.CSS3 Comprehensive Animation:
7. Add:jQuery and CSS3 selector
jquery Selector
Basic selector:
$ ("#one"). CSS ("Background", "#bfa"); Change the element background color for ID one
$ (". One"). CSS ("Background", "#bfa"); Change the background color of all elements of class one
$ ("div"). CSS ("Background", "#bfa"); changing the element name is the background color of all elements of <div>
$ ("*"). CSS ("Background", "#bfa"); Change the background color of all elements
$ ("span, #two"). CSS ("Background", "#bfa"); Change the background color of all span and both elements
Hierarchy selector:
$ ("div span") Select all <span> elements in <div>
$ ("div > span"); Select <div> element under element name is a sub-element of <span>
$ (". One + div"); Select the next <div> element of class
$ ("#two ~div"); Select all <div> elements after the element with ID
Basic Filter Selector:
$ ("Div:first"). CSS ("Background", "#bfa"); Change the background of the first <div> element
$ ("Div:last"). CSS ("Background", "#bfa"); Change the background of the last <div> element
$ ("Div:not (. One)"). CSS ("Background", "#bfa"); the background color of the <div> element not for one
$ ("Div:even"). CSS ("Background", "#bfa"), changing the background of <div> elements with an even number of indexed values
$ ("div:odd"). CSS ("Background", "#bfa"); Change the background of the <div> element with an odd index value
$ ("Div:eq (3)"). CSS ("Background", "#bfa"); Change the background color of the <div> element with an index value of 3
$ ("DIV:GT (3)"). CSS ("Background", "#bfa"); change <div> element background color with index value greater than 3
$ ("Div:lt (3)"). CSS ("Background", "#bfa"); Change the background color of the <div> element with an index value less than 3
$ ("Div:header"). CSS ("Background", "#bfa"); Change the background color of all title elements
$ ("div:animated"). CSS ("Background", "#bfa"); Change the background of an animated element that is currently executing
Content Filter Selector:
$ ("Div:contains (DI)"). CSS ("Background", "red"); change the background of the DIV element containing the text "Di"
$ ("Div:empty"). CSS ("Background", "red"); change the background of <div> elements that do not contain child elements
$ ("Div:has (mini)"). CSS ("Background", "red"); change the containing. For mini elements <div> elements back
$ ("Div:parent"). CSS ("Background", "red"); change background color with child elements <div> elements
Visibility Filter Selector:
$ ("div:visible"). CSS ("Background", "red"); change the background color of all visible <div> elements
$ ("Div:hidden"). CSS ("Background", "Red"); Show hidden <div> elements
Attribute Filter Selector:
$ ("Div[title]"). CSS ("Background", "red"), change the background color of the <div> element that contains the title of the property
$ ("div[title=test]"). CSS ("Background", "red"), change the background color of the <div> element of the property x=x
$ ("div:[title=test]"). CSS ("Background", "red"), change property x!=x <div> element background color
$ ("Div[title^=te]"). CSS ("Background", "red"); change title to TE start <div> element background color
$ ("Div[title$=est]}"). css ("Background", "red"); change title to est end <div> element background
$ ("div:[title*=es]"). CSS ("Background", "red"); Change title contains es <div> element background
$ ("div:[id][title*=es]"). CSS ("Background", "red"), change the background color of the <div> element that contains the attribute ID, and the attribute title value contains ES
child element Filter Selector:
$ ("Div.one:nth-child (2)"). CSS ("Background", "Red");
Change the background color of the second child element under the <div> parent element of each class as one
$ ("Div.one:first-child"). CSS ("Background", "Red");
Change the background color of the first child element under the <div> parent element of each class as one
$ ("Div.one:last-child"). CSS ("Background", "Red");
Change the background color of the last child element under the <div> parent element for each class
$ ("Div.one:only-child"). CSS ("Background", "Red");
If class is the only child element under the <div> parent element of one, then the child element is changed to the background color
Form selector:
$ (": input"); Get all <input><textarea><select> and <button> elements
$ (": text"); Get all single-line text boxes
$ (":p assword"); Select all the password boxes
$ ("Radio"); Select all the radio boxes
$ ("checkbox"); Select all the check boxes
$ (": Submit"); Select all the Submit buttons
$ ("image"); Select all the image buttons
$ (": Reset"); Select all reset Buttons
$ ("button"); Select all the buttons
$ ("file"); Select all the upload fields
$ ("hidden"); Explain in the Invisible filter selector
HTML5 and CSS3 jquery Part knowledge Summary
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
