Improvement of HTML5 and CSS3

Don't be lazy 2021-04-08 00:39:14
improvement html5 html css3 css

One .HTML5 New features

HTML5 The new features are mainly aimed at the previous shortcomings , Added some new tags 、 New forms and new form properties, etc .
These new features have compatibility issues , Basic is IE9+ Only browsers of the above versions support , If you don't think about compatibility , You can use it a lot
Some new features .
1.HTML5 New semantic tags
Previous layout , We basically use div To do it .div For search engines , There is no semantics .
<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>
<header>: Head tag
<nav>: Navigation tag
<article>: Content labels
<section>: Define an area of the document
<aside>: Sidebar labels
<footer>: Tail label
Be careful :
This semantic standard is mainly for search engines
These new tags can be used many times in the page
stay IE9 in , You need to convert these elements to block level elements
Actually , We prefer to use these tags on mobile terminals
2.HTML5 New multimedia tags
The newly added multimedia tags mainly include two :
Audio :<audio>
video :<video>
Using them, it's easy to embed audio and video in the page , Instead of using flash And other browser plug-ins .
HTML5 Without plug-ins , Can also support the original video format file playback , Of course , The supported formats are limited .
video <video>:
At present <video> Element supports three video formats : Use as much as possible mp4 Format
 <video src=" File address " controls="controls"></video>
 <video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
Your browser doesn't support <video> Tag play video
</ video >
video <video>—— Common properties :


Audio <audio>:
At present <audio> Element supports three audio formats :
<audio src=" File address " controls="controls"></audio>
< audio controls="controls" >
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
Your browser doesn't support <audio> label .
</ audio>
Common properties :



3.HTML5 Newly added input type



4.HTML5 New form properties



Two .CSS3 New features

New selector :

1. Attribute selector

Attribute selectors can select elements based on their specific attributes . So you don't have to rely on classes or id Selectors .


2. Structure pseudo class selector

The structure pseudo class selector mainly selects elements according to the document structure , It is often used according to the child elements in the parent selector


3. Structure pseudo class selector
nth-child(n) Select one or more specific child elements of a parent element ( a key )
n It could be a number , Keywords and formulas
n If it's a number , It's choice number two n Sub elements , The numbers come from 1 Start …
n It can be a keyword :even even numbers ,odd Odd number
n It can be a formula : The common formula is as follows ( If n It's the formula , From 0 Start calculating , But the first 0 Elements or more than the number of elements will be ignored )
The structure pseudo class selector mainly selects elements according to the document structure , It is often used according to the child elements in the parent selector
difference :
nth-child Sort and select all the children in the parent element ( The serial number is fixed ) Find the second one first n A child , And see if it's with E matching
nth-of-type Sort and select the specified child elements in the parent element . Match first E , And then based on E Find the first n A child
4. Pseudo element selector ( a key )
Pseudo element selectors can help us take advantage of CSS Create a new label element , Without the need for HTML label , Thus simplify HTML structure .
Be careful :
before and after Create an element , But it's an in-line element
The newly created element is not found in the document tree , So we call it pseudo elements
grammar : element::before {}
before and after There has to be content attribute
before Create an element in front of the parent element's content ,after Insert the element after the content of the parent element
Pseudo element selectors are the same as tag selectors , The weight of 1
5.CSS3 Box model
CSS3 Through box-sizing To specify the box model , Yes 2 It's worth : Can be designated as content-box、border-box, So that we
The way the box size is calculated changes .
It can be divided into two situations :
box-sizing: content-box The size of the box is width + padding + border ( It used to be the default )
box-sizing: border-box The size of the box is width
If we change the box model to box-sizing: border-box , that padding and border It won't make the box big ( Premise padding
and border Not more than width Width )
6.CSS3 Other features ( understand )
The picture blurs :
filter CSS Attribute to apply a graphic effect such as blur or color offset to an element .
filter: function (); for example : filter: blur(5px); blur blurred The larger the value, the more fuzzy 
Calculate the width of the box width: calc function :
calc() this CSS Functions let you declare CSS Some calculations are performed when the property is valued .
width: calc(100% - 80px);


7.CSS3 transition ( a key )

transition (transition) yes CSS3 One of the subversive features of , We can use Flash Animation or
JavaScript Under the circumstances , Add an effect to an element when it changes from one style to another .
Transition animations : It's from a state Gradually transition to another state
It can make our page look better , More dynamic , although Older browsers don't support (ie9 The following versions ) But it won't affect
The page layout .
We often talk to :hover Together Use it with .
transition: Properties to transition Spend time Motion curve When to start ;
attribute : Want to change css attribute , Width height The background color Both inside and outside margins are OK . If you want all the attributes to be
Change, transition , Write a all Can .
Spend time : The unit is second ( Must write unit ) such as 0.5s
Motion curve : The default is ease ( It can be omitted )
When to start : The unit is second ( Must write unit ) You can set the delay trigger time The default is 0s ( It can be omitted )
本文为[Don't be lazy]所创,转载请带上原文链接,感谢

  1. The difference between pseudo class and pseudo class elements
  2. [CSS effect] simple drop-down menu
  3. [Vue] value transfer by parent-child component
  4. 【css】设置table表格边框样式
  5. 【css】修改input,textarea中的placeholder样式
  6. vue-router的两种模式(hash和history)及区别
  7. CSS3的滤镜filter属性
  8. [CSS] set table border style
  9. [CSS] modify the placeholder style in input and textarea
  10. Two modes of Vue router (hash and History) and their differences
  11. Filter property of CSS3
  12. 全局安装gulp 报错问题解决
  13. Solution of error report in global installation of gulp
  14. 18个好用的自定义react hook
  15. 你应该知道的常用服务器HTTP状态码?
  16. 18 user defined react hooks
  17. What HTTP status codes should you know about common servers?
  18. 手把手教你打造属于自己团队的前端小报系统
  19. Hand in hand to teach you to build your own front-end tabloid system
  20. In 2021, enterprise SEO actual operation, how to less update, batch ranking regional words?
  21. vue cli4.0 快速搭建项目详解
  22. Vue cli4.0 quick build project
  23. vue-cli脚手架安装
  24. Installation of Vue cli scaffold
  25. [JS knowledge] method of getting elements from DOM
  26. 【jQuery效果】文字滚动
  27. [jQuery effect] text scrolling
  28. [front end] live broadcast of user experience optimization series, real-life sharing of front-line celebrities
  29. React native introduces third party Android SDK
  30. Using html2canvas to generate shared images, CDN images do not show the problem
  31. Using hooks to write react components
  32. Explain the module hot replacement function of webpack in detail
  33. An incomplete guide to writing a simple native wechat applet
  34. How JavaScript calculates 1 + 1 - Part 1 creates a source string
  35. Jsonp method to solve cross domain problems
  36. Canvas animation demo (from zero to one)
  37. El dialog of elementui component encapsulation
  38. Transition group of Vue source code
  39. When encountering bracket validity, next larger element, specific minimum value, try stack
  40. Vue3 virtual DOM
  41. Scheme and implementation of front end page watermarking
  42. Why is 0.1 + 0.2 not equal to 0.3?
  43. JS arrow function this points to related practice
  44. CSS text decoration & text emphasis
  45. 2021必修 首门CSS架构系统精讲 理论+实战玩转蘑菇街
  46. 大前端
  47. The first compulsory CSS architecture system in 2021
  48. Big front end
  49. 你喜欢才是最好的,前端工程师常用的8个工具
  50. What you like is the best. There are 8 common tools used by front-end engineers
  51. Spring Boot + Vue3 前后端分离 实战wiki知识库系统
  52. Spring boot + vue3 front end and back end separation practical wiki knowledge base system
  53. CSS高级技巧总结
  54. CSS advanced skills summary
  55. HTML5教程 - HTML5 事件
  56. HTML5 tutorial - HTML5 events
  57. Vue和微信小程序的区别
  58. The difference between Vue and wechat applet
  59. HTML5和CSS3提高
  60. Improvement of HTML5 and CSS3