Home > Developer > Web Develop
1. CSS3 to achieve fillet (Border-radius), Shadow (Box-shadow),
2. Add effects to Text (Text-shadow,), linear gradient (gradient), rotation (transform)
3.transform:rotate (9deg) scale (0.85,0.90) translate (0px,-30px) skew ( -9deg,0deg);//rotate, zoom, position, tilt
4. Added more CSS selectors multi-background Rgba
5. The only pseudo-elements introduced in CSS3 are:: Selection.
6. Media query, multi-column layout
7. Border-image
New features:
1. Drag release (Drag and Drop) API
2. Semantically Better content tags (header,nav,footer,aside,article,section)
3. Audio, Video API (Audio,video)
4. Canvas API
5. Geography (geolocation) API
6. Local offline storage Localstorage long-term storage data, the browser is closed after the data is not lost;
7. Sessionstorage data is automatically deleted after the browser is closed
8. Form controls, calendar, date, time, email, url, search
9. New technology Webworker, WebSocket, geolocation
Elements to remove:
1. Elements of pure expression: Basefont,big,center,font, s,strike,tt,u;
2. Elements that have a negative impact on usability: frame,frameset,noframes;
Support for HTML5 new tags:
1. IE8/IE7/IE6 supports the label generated by the Document.createelement method, which allows these browsers to support HTML5 new tags, and after the browser supports new tags, You also need to add the default style of the label (the best way is to use the mature framework directly, the Html5shim framework is the most used):
<!--[If Lt IE 9]>
<script> src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" </script>
<! [endif]-->
How to differentiate:
DOCTYPE declaration of new structural elements, functional elements
Cookies: The server and client can be accessed, the size is only about 4KB, the expiration date will be deleted;
Local storage: Only the local browser can access the data, the server cannot access the local storage until the channel is intentionally sent to the server via post or get, each domain 5MB;
Call Localstorge, cookies and other local storage methods
File merge
File minimization/File compression
Using CDN Hosting
Use of the cache
It is about the process of making a Web page that allows different devices to have different sizes and different functions. Responsive design allows all people to make the site work properly on these devices
Answer: HTML5 document type: <!doctype html>
HTML5 using the encoding <meta charset= "UTF-8" >
A: The Canvas element is used to draw a graphic on a Web page, and the element tag is powerful in that it can be graphically manipulated directly on the HTML.
Answer: Media API, Text track API, application Cache API, User Interaction, Data Transfer API, Command API, Constraint Validation API , History API
P:first-of-type selects each <p> element that belongs to the first <p> element of its parent element.
P:last-of-type selects each <p> element that belongs to the last <p> element of its parent element.
P:only-of-type selects each <p> element that belongs to the <p> element that is unique to its parent element.
P:only-child selects each <p> element that belongs to the unique child element of its parent element.
P:nth-child (2) Select each <p> element that belongs to the second child element of its parent element.
: Enabled,:d isabled controls the disabled state of the form control.
: Checked, the Radio box or check box is selected.
The level of proficiency and practical experience of CSS properties
How familiar animation-related properties are
HTML5 is now not a subset of SGML, mainly about image, location, storage, geolocation and other functions.
* Painting canvas elements
Video and audio elements for media playback
Local offline storage Localstorage long-term storage data, the browser is closed after the data is not lost;
Sessionstorage data is automatically deleted after the browser is closed
Semantically better content elements such as article, footer, header, nav, section
form controls, calendar, date, time, email, url, search
CSS3 achieve rounded corners, shadows, add effects to text, add more CSS selectors multi-background Rgba
New technology Webworker, Websockt, geolocation
Removed elements
Elements of pure expression: Basefont,big,center,font, s,strike,tt,u;
Elements that have a negative impact on usability: frame,frameset,noframes;
* is IE8/IE7/IE6 supports the label generated by the Document.createelement method,
You can use this feature to enable these browsers to support HTML5 new tags,
After the browser supports new tags, you also need to add the default style of the tag:
* Of course the best way is to use the mature framework directly, the most used is the Html5shim framework
<!--[If Lt IE 9]>
<script> src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" </script>
<! [endif]-->
* First divided into head, body, feet;
* Implementation is the most basic work, accurate to 2px;
Communication with designers, product managers and project participation
Good page structure, page refactoring and user experience
Handle hack, compatible, write beautiful code formats
Optimized for servers, embracing HTML5.
Progressive Enhancement Progressive Enhancement: build pages for low-version browsers, ensure the most basic functionality, and then improve and append features such as effects and interactivity for advanced browsers to achieve a better user experience.
Graceful downgrade graceful degradation: Build the full functionality from the beginning and then be compatible with the low-version browser.
The difference: Graceful demotion begins with a complex situation and attempts to reduce the supply of user experience, while the incremental enhancement begins with a very basic, workable version and is continuously expanded to suit the needs of the future environment. Downgrading (functional decay) means looking back, while progressive enhancement means looking forward while keeping its roots in a safe zone.
The "Graceful downgrade" view
The "Graceful downgrade" view is that the site should be designed for the most advanced and sophisticated browsers. Test work in browsers that are considered "obsolete" or functionally missing is scheduled in the final stages of the development cycle, and the test object is limited to the previous version of the main browser (IE, Mozilla, etc.).
In this design paradigm, older browsers are thought to offer only a "poor, but passable" browsing experience. You can make small adjustments to fit a particular browser. But since they are not the focus of our attention, other differences will be ignored in addition to fixing larger errors.
"Progressive enhancement" view
The "progressive enhancement" view is that the focus should be on the content itself.
Content is the incentive for us to build our website. Some sites show it, some collect it, some seek, some operate, and some websites even contain all the above, but the same point is that they all involve content. This makes "progressive enhancement" a more reasonable design paradigm. That's why it was immediately adopted by Yahoo! and used to build its "tiered browser support (graded Browser)" strategy.
That's the problem. Now Product manager See ie6,7,8 page effect relatively high version modern browser a lot less fillet, shadow (CSS3), requirements compatible (use picture background, discard CSS3), how will you persuade him?
CDN Cache is more convenient
Breakthrough Browser Concurrency Limits
Save Cookie Bandwidth
Saves the number of connections to the primary domain and optimizes page response times
Prevent unnecessary security issues
(no standard) web standards and standards-setting agencies are to enable the web development of more ' health ', developers follow the unified standards, reduce development difficulties, development costs, SEO will do better, and will not because of the abuse of code caused by various bugs, security issues, and ultimately improve the usability of the site.
Sessionstorage is used to store data locally in a session, which can only be accessed by a page in the same session and destroyed when the session ends. So sessionstorage is not a persistent local store, only session-level storage. While Localstorage is used for persistent local storage, the data will never expire unless the data is actively deleted.
Web Storage and the Cookies the Difference
The concept of WEB storage is similar to a cookie, except that it is designed for larger capacity storage. The size of the cookie is limited, and every time you request a new page, the cookie is sent past, which virtually wastes bandwidth, and the cookie needs to specify the scope and cannot be called across domains.
In addition, WEB storage has methods such as setitem,getitem,removeitem,clear, unlike cookies that require front-end developers to encapsulate Setcookie,getcookie themselves. However, cookies are also not available or missing: The role of cookies is to interact with the server as part of the HTTP specification, and Web Storage is only for local "storage" of data.
Know. The content property of the CSS is specifically applied to the before/after pseudo-element, which is used to insert the generated content. The most common application is to use pseudo-classes to clear floats.
A common code that uses pseudo-classes to clear floating
. clearfix:after {
Content: "."; This takes advantage of the content property
Display:block;
height:0;
Visibility:hidden;
Clear:both; }
. clearfix {
*zoom:1;
}
After pseudo-elements generate block-level elements of a point after the element through the content, and then use Clear:both to clear the float.
So the question goes on, do you know that the CSS counter (sequential numeric characters are automatically incremented)? How do I implement CSS counters with CSS content properties?
Answer: The CSS counter is implemented by setting Counter-reset, counter-increment two properties, and counter ()/counters () a method with the After/before pseudo-class.
HTML 5 contains the standard way to embed audio files, supported formats include MP3, Wav, and Ogg:
<audio controls>
<source src= "Jamshed.mp3" type= "Audio/mpeg" >
Your Browser does ' NT support audio embedding feature.
</audio>
Like audio, HTML5 defines a standard method for embedding video, supported in the following formats: MP4, WebM, and Ogg:
<video width= "height=" 340 "controls>
<source src= "Jamshed.mp4" type= "Video/mp4" >
Your Browser does ' NT support video embedding feature.
</video>
Datalist datetime output keygen date Month week time number range Emailurl
P:first-of-type selects each <p> element that belongs to the first <p> element of its parent element.
P:last-of-type selects each <p> element that belongs to the last <p> element of its parent element.
P:only-of-type selects each <p> element that belongs to the <p> element that is unique to its parent element.
P:only-child selects each <p> element that belongs to the unique child element of its parent element.
P:nth-child (2) Select each <p> element that belongs to the second child element of its parent element.
: Enabled,:d isabled controls the disabled state of the form control.
: Checked, the Radio box or check box is selected.
(Many new tags added in HTML5 (e.g.:<article>, <nav>,
is based on the principle of semantic design)
< div id= "header" >
< h1> title
< h2> focus on web front-end technology
</div>
Semantic HTML has the following characteristics:
Text is wrapped in elements to reflect the content. For example:
The paragraph is included in the <p> element.
The sequential table is included in the <ol> element.
Large blocks of text referenced from other sources are included in the <blockquote> element.
HTML elements cannot be used for purposes other than semantic purposes. For example:
<blockquote> contains a large quote, but is not used for text indentation.
The blank paragraph element (<p></p>) is not used for skip.
Text does not directly contain any style information. For example:
Do not use formatting tags such as <font> or <center>.
The color or location is not referenced in the class or ID.
Sessionstorage and localstorage have larger storage space;
Sessionstorage and Localstorage have more rich and easy-to-use interfaces;
Sessionstorage and Localstorage have their own separate storage space;
* HTML5 is now not a subset of SGML, mainly about image, location, storage, multi-tasking and other functions.
* Painting Canvas
Video and audio elements for media playback
Local offline storage Localstorage long-term storage data, the browser is closed after the data is not lost;
Sessionstorage data is automatically deleted after the browser is closed
Semantically better content elements such as article, footer, header, nav, section
form controls, calendar, date, time, email, url, search
New technology Webworker, Websockt, geolocation
* Removed elements
Elements of pure expression: Basefont,big,center,font, s,strike,tt,u;
Elements that have a negative impact on usability: frame,frameset,noframes;
Support for HTML5 new tags:
* IE8/IE7/IE6 supports labels generated by the Document.createelement method,
You can use this feature to enable these browsers to support HTML5 new tags,
After the browser supports new tags, you also need to add the default style of the tag:
* Of course the best way is to use the mature framework directly, the most used is the Html5shim framework
<!--[If Lt IE 9]>
<script> src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" </script>
<! [endif]-->
Do the right thing with the right label!
HTML semantics is to make the content structure of the page, easy to browser, search engine analysis;
It is also displayed in a document format without a style CCS, and is easy to read.
Search Engine crawler relies on the tag to determine the context and the weight of each keyword, conducive to SEO.
Make it easier for people who read the source code to block the site and maintain understanding of the site.
Localstorage long-term storage data, the browser is closed after the data is not lost;
Sessionstorage data is automatically deleted when the browser is closed.
<docype html> |
Html5:nav, footer, header, section, Hgroup, video, time, canvas, audio ... Css3:rgba, opacity, Text-shadow, Box-shadow, Border-radius, Border-image, Border-color, transform ...; |
In my opinion, semantics is like a paragraph, then we should use the <p> tag to decorate, the title should be used
Some common face questions about HTML5 and CSS3
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
