Combing the knowledge points of H5 and CSS3 (46)

Posted by ninib on Sun, 17 Oct 2021 18:59:56 +0200

1, HTML5 (H5)

1. Newly added (modified / deleted) semantic tags



main body

section area

Article article area

aside: irrelevant parts (e.g. advertisements)


figure matching area

Fig caption description

Mark mark

time stamp

progress bar

2. New reform of form elements [traditional form elements] input:text/password/radio/checkbox/file/hidden/button/submit/reset


textarea text field



label ...

[add some form elements or form types]


//=>Oninput: there is no KEY-DOWM/KEY-UP on the mobile terminal, which is replaced by INPUT, indicating that the current form element is being operated (such as INPUT)

<input type="number" id="ageInp" step="1" max="65" min="18" value="25" disabled>
<input type="range" id="rangeInp" step="1" max="65" min="18" value="25">
    //=>INPUT: there is no KEY-DOWM/KEY-UP on the mobile terminal, which is replaced by INPUT, indicating that the current form element is being operated (such as INPUT)
    rangeInp.oninput = function () {
        let val = this.value;
        ageInp.value = val;

  New type function added in form element

    1. Powerful functions (many things do not need to be imported into JS plug-in, such as calendar)

    2. in the mobile terminal, according to the type of settings, the virtual keyboard retrieved from user input process is also different (for example, the number type text box retrieved the digital keyboard).

    3. The newly added type provides CSS/JS verification, which can verify whether the content entered by the user conforms to the format (we used to solve this problem by ourselves, but now the new type in H5 has its own verification mechanism)

    H5 sets a new attribute for the form element: placeholder is used as the default prompt for the text box   (expand yourself as like as two peas: use JS to achieve the same effect as PLACE-HOLDER).

    #userEmail {
        border: 1px solid #DDD;
        outline: none; /*When the text box gets the focus, take out the browser's default border selection color*/

    #userEmail:valid {
        /*Pass verification: it is not entered or the input format is correct*/
        border-color: green;

    #userEmail:invalid {
        /*Failed verification*/
        border-color: red;

    #userEmail:valid + span:after {
        content: 'The email format is correct';

    #userEmail:invalid + span:after {
        content: 'Mailbox does not conform to format';
<input type="email" id="userEmail" placeholder="Please enter email address!">
<span id="spanEmail"></span>
    userEmail.onkeyup = function () {
        //=>Checkvalidity: a new form content format verification method provided by H5 (any new form type with built-in verification mechanism can be verified based on this method)
        if (this.checkValidity()) {
            spanEmail.innerHTML = 'OK';
        } else {
            spanEmail.innerHTML = 'NO';

    //=>Blur: lose focus
    //=>Focus: get focus
    userEmail.onkeyup = userEmail.onblur = function () {
        let val = this.value.trim();
        if (val.length === 0) {
            spanEmail.innerHTML = 'Required';
        let reg = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        if (!reg.test(val)) {
            spanEmail.innerHTML = 'NO';
        spanEmail.innerHTML = 'OK';
<!--Drop down box (extension: realize three-level linkage of provinces, cities and counties)-->
<select id="selectCity">
    <option value="">==Please select==</option>
    <option value="Beijing">Beijing</option>
    <option value="Shanghai">Shanghai</option>
    <option value="Guangzhou">Guangzhou</option>
    <option value="Shenzhen">Shenzhen</option>
    <option value="Hangzhou">Hangzhou</option>
    <option value="Chengdu">Chengdu</option>

<input id="myCar" list="cars" />
<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">

3. Audio and video labels



=>Let's bid farewell to the FLASH era

4.canvas drawing

5. Some new API s are provided

Local storage: localstorage / sessionstage

Get the geographical location: navigator.geography.getcurrentposition call the GPS positioning system inside the mobile phone to get the longitude, latitude and accuracy of the current mobile phone

Some API s are also provided so that we can access the software or hardware inside the mobile phone through the browser (but the performance is not very high and the compatibility is not particularly good)

6.websocket: a new transmission mode of client and server (instant messaging IM systems such as QQ and wechat are basically based on it)

2, CSS3






SELECTOR1,SELECTOR1... Group selector

A .B{} Offspring
A.B{} Existing A Also have.B Of (secondary screening at the same level)
A>B{} Offspring
A+B{} Next brother
A~B{} brother
A[NAME=''] attribute selectors  NAME!='' / NAME^=''(with..(beginning) / NAME$=''(with..(end) / NAME*='' ...

[style properties]

1. Basic common




2. Background

  background -color / -image / -position / -repeat / -attachment / ...
       100px 100px  Specific value of width and height
       100% 100%  Percentage of width and height (relative to the container)
       cover  Zoom the picture to the appropriate scale(No deformation),Used to cover the entire container
       contain The background image covers the whole container (but it will appear. If one side touches the edge of the container, stop covering, resulting in no background image in some areas)
  background-clip: Background image cutting
  background-origin: Set the starting point of the background image

  3.CSS3 animation and deformation (2D/3D)

 //=>Deformation is not animation
     translate(X|Y|Z)  displacement
     scale zoom
     rotate rotate
     skew tilt
     matrix matrix(The deformation is realized according to the matrix formula set by yourself)
  transform-style:preserve-3d Implementation 3 D deformation
  transform-origin: Starting point of deformation

  //=>Transition animation
     transition-property:all/width... Which attribute styles are changed to perform transition animation effects? By default ALL,All style attribute changes perform this transition effect
     transition-duration:The transition animation takes us seconds, for example:.5s
     transition-timing-function:How animation moves linear(default) ease ease-in ease-out ease-in-out cubic-bezier(Execute your own Bezier curve)
     transition-delay:Set delay time,The default is 0 s No delay,Execute animation now

  //=>Frame animation
     animation-name The name of the motion track
     animation-duration Duration of exercise
     animation-timing-function Way of movement(default ease)
     animation-delay delay time 
     animation-iteration-count Number of movements(Default 1  infinite Infinite motion)
     animation-fill-mode The state after the motion is completed (after the frame animation is completed, the element will return to the starting position of the motion by default. If you want to
//It stays at the position of the last frame. Set this attribute value to forwards; backwards is the animation of the current frame. If there is a delay time, it will be delayed
//In the late waiting time, the element is at the first frame position of the frame animation; both is to make the frame animation have both forwards and backwards)

  //=>Motion track for frame animation
  @keyframes [Motion track name] {
       //Start style
       //End style

  @keyframes [Motion track name] {
        //Start style
        //End style

4. New box model in CSS3

box-sizing: border-box / padding-box / content-box((default) 
//The change is what the WIDTH/HEIGHT set in CSS represents, and the border box represents the width and height of the whole box,
//When we modify PADDING or BORDER, the box size will not change, and only the content will be scaled

  columns: Multi column layout

  flex: Elastic box model

5. Some other CSS3 properties

  perspective:Sight distance implementation 3 D Required attributes for animation
  @media:A scheme of responsive layout for media query
  @font-face:Import Font Icon

3, Responsive layout development

Responsive Layout: it can be well displayed on equipment of different sizes, which is called Responsive Layout

Product form in the company:

1.PC side (width adaptation is required for full screen pages, but it is generally fixed)

2. The PC + mobile terminal uses the same set of items (simple pages, such as product introduction, official website of company display, etc.)

3. Mobile terminal (the size of mobile terminal equipment varies greatly, so responsive layout development is required)

H5 embedded in APP

H5 shared in wechat

WeChat official account


H5 accessed by browser

4. RN (react native) / ionic / Cordova... JS is the framework for APP development, which uses JS code to develop APP. Finally, the framework will convert the code into the code required by Android and IOS

How to realize responsive layout development? The most commonly used scheme: REM proportional scaling responsive layout

 Mobile terminal H5 Development, first add META label
    <!--meta:vp [Tab]-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    REM and PX They are all style units, PX Is a fixed unit, REM Is the relative unit (relative to the root element of the current page HTML Font (set unit)

    We started giving HTML The font size of is set to 100 PX(1REM=100PX),Next, when we write the style, we use all the dimensions REM
//Set (the measured PX value / 100 is the REM value that should be set). If the FONT-SIZE of HTML remains unchanged, REM and PX are the same, but as
//If the font size is changed, that is, the conversion ratio between REM and PX is changed, all previous styles using rem as units will automatically follow the latest format
//The new scale is used for scaling (the FONT-SIZE of HTML is changed, and the elements in the whole page are scaled accordingly, which will affect the whole body)

    In the real project, the designer gives us a set of design draft (common size: 640)*1136  750*1334 640*960 ...),After getting the design draft, we write the style in strict accordance with the dimensions in the design draft
       Next, write the pattern and put the measured PX Divided by 100 becomes REM,All units are based on REM Come on
       =>Suppose the design draft is 750,It's equivalent to 750 devices,1REM=100PX

    Our page runs on a 320 device and we need to modify it HTML Font size, so as to realize the overall scaling of the page: 320/750*100 =>On current device HTML Font size for
    html {
             * 1.It's best not to write 10PX: the default minimum font of the browser is 12PX
             * 2.font-size Set to, which is equivalent to how many pixels a rem is equal to
             * 3.The reason why it is set to 100PX is to facilitate the calculation of the ratio of REM and PX conversion
            font-size: 100px; /*1REM=100PX*/

4, Wechat secondary development (applet) = > hybrid APP development

5, Mobile end events

6, Commonly used plug-ins, class libraries, frameworks, etc. on the mobile end

Topics: css3 html5 html