A new guide to HTML5

Time:2021-1-3

This article was created and launched by the technical team of grape city

Author:Official website of grapevineGrapevine provides professional development tools, solutions and services for developers to enable them.

The development of HTML5 has changed the trend of Internet technology, and front-end technology is still popular, so front-end technology has become one of the necessary skills for application developers. The purpose of this article is to help sprout new introductory guidance, and at the same time, hope to play a role in leak detection for old birds. Let’s start.

What is HTML5?

Broadly speaking, HTML5 is the latest revised version of HTML, which was developed by the World Wide Web Consortium (W3C) in October 2014. The goal is to replace the HTML 4.01 and XHTML 1.0 standards formulated in 1999, so as to make the network standards meet the needs of the contemporary network when the Internet applications are developing rapidly.

But we often talk about HTML5 technology in our daily life, which actually refers to a set of technology combinations including HTML, CSS and JavaScript.

In order to improve the development efficiency, developers often use various component tools, such as jQuery, bootstrap, webpack, or front-end framework, such as Vue, etc. In addition to learning the use of various tool frameworks, the basic knowledge of HTML5 also needs to be mastered, which helps to better understand the design and use of tool frameworks.

Later, we will combine a series of articles to introduce the common functions and programming skills of HTML, CSS and JavaScript in simple terms.

First of all, let’s find out what has been updated in HTML5

What kind of webpage is HTML5 webpage?

As long as the first line of the HTML page is <! DOCTYPE HTML >, the browser will parse the page according to the HTML5 standard, regardless of whether the new content of HTML5 is used in the page

What’s new in HTML5?

Better semantic tags

Structural elements: article, aside, header, hgroup, footer, figure, section, NAV.

Other elements: video, audio, canvas, embed, mark, progress, meter, time, command, details, DataGrid, keygen, output, source, menu, ruby, WBR, BDI, dialog.

Some semantic tags, such as section and NAV, are no different from traditional div in use, but they are more conducive to the indexing of search engines, the adaptation of small screen devices such as smart phones and pads, and the use of disabled people.

At the same time, some tags add new functions to the browser, such as audio and video.

· application program interface (API)

1. Canvas, you can get the context object of the canvas label element, and then use the drawing function in the context object to draw.https://www.w3schools.com/html/html5_canvas.asp


<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 100);
    ctx.stroke();
</script>

2. Audio and video, using audio and video elements, the browser does not need to install playback plug-ins, and provides playback control API.

3. Geographic location. By using navigator API, user location information can be obtained under user authorization.

4. New form elements: Tel, email, URL, search, range, number, color, datetime, datetime local, time, date, week, month. With the support of browser, many form controls will become history

5. New form features and functions: placeholder, autocomplete, autofocus, spellcheck, list feature, datalist element, min and Max, step, required

6. Drag and drop API: draggable attribute, drag and drop event (dragstart, drag, drawer, dragleaf, dragover, drap, drawn), datatransfer object

7. Websocket, a full duplex network technology between browser and server, can transmit text and binary data based on information

8. Web workers, JavaScript single thread, copying JS calculation will lead to page feign death. If JS operation does not need to visit the page window, it can be processed in parallel in web worker.

The abolition of elements

Abolish some pure cash and incompatible elements, such as acronym, applet, BASEFONT, big, center, dir, font, frame, frameset, isindex, NOFRAMES, strike, TT.

Browser support

IE9 began to support, ie10 after the support is better.

Chrome, Firefox, Safari and opera support better.

The above are some new features of common HTML5. Next, let’s take a look at the changes in page layout of HTML5.

HTML 5 page layout

There are many common page layouts, such as

  • The earliest static table layout
  • Flow layout of dividing page by fence
  • Adaptive layout of content automatically adjusted according to screen size
  • Responsive layout combining flow layout and adaptive layout

The above layout is mainly realized by matching the display, position and float attributes in CSS. When determining the position and clearing the float, we often encounter thorny problems (such as vertical center and screen adaptation).

CSS3 provides a simpler way of layout flex layout.

Let’s show the ease of use of flex layout through an example. The figure below is a typical single page application style, which is divided into four parts: header, aside, footer and main. Header and footer adaptive width, aside fixed width and contractible, main area automatically filled according to the remaining space.

We first use adaptive layout to implement the structure in the figure above

  • HTML

<body>
<div class="header"></div>
<div class="container">
  <div class="aside"></div>
  <div class="main"></div>
</div>
<div class="footer"></div>
</body>
  • CSS

html,body {
      margin: 0;
      padding: 0;
  height: 100%;
  background: black;
}
  
.header, .footer{
  height:80px;
  background: white;
}
  
.container{
  height: CALC(100% - 160px);
  background: pink;
  padding: 10px 0;
}
  
.aside{
  width: 20%;
  height: 100%;
  float: left;
  background: gold;
}
.main{
  width: 80%; 
  height: 100%;
  float: left;
  background: gray;
}

The page is divided into three parts: upper, middle and lower. The height of the container in the middle part is calculated by using Calc and automatically adjusted when the browser height changes. The aside in the container is a floating element with a width of 20%. Main adjusts according to the remaining width.

There are some problems in this layout, that is, when the height of header and footer changes, the height of container needs to be reset. In addition, if there are many parallel elements in the container, the floating is difficult to control.

Next, let’s see how to use flex layout to achieve the above effect:

  • html:

<body>
<header><h1>Welcome to HTML5 World!</h1></header>
<section class="designerContainer">
<aside class="designerAside">
<div style="width:180px">Aside</div>
</aside>
<main class="designerMain">
</main>
</section>
<footer><h3>Copyright © 2020 GrapeCity inc.</h3></footer>
</body>
  • css:

html, body{
      margin: 0;
      padding: 0;
    }
    body{
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
    h1, h2, h3 {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      text-align: center;
      color: #2c3e50;
      margin-block-start: 0;
      margin-block-end: 0;
      padding: 15px;
    }
    .designerContainer{
      padding: 10px;
      flex: 1;
      display: flex;
      background: gray;
    }
    .designerAside{
      text-align: center;
      background: gold;
    }
    .designerMain{
      display: flex;
      flex: 1 100%;
      padding: 0 0 0 10px;
      background: pink;
    }

The results are as follows

Compared with adaptive layout, the above code has the following characteristics:

  • HTML 5 semantic tags are used in the page, and the functions of each part of the page are clear.
  • The height of body is set to 100vh. Here, the new unit VH of CSS3 is used, that is, the height of view height window. 100vh is equivalent to HTML, the height of body is 100%, and VW represents the width of window
  • Body set flex layout, direction from top to bottom
  • Designercontainer sets flex 1 to automatically fill the remaining space outside the header and footer
  • The interior of the container is still flex layout, and the designer main sets flex 1 to automatically fill the remaining space of the aside

Flex compatibility considerations:

IE9 does not support flex, ie11 is recommended

L Safari and IOS need to add WebKit-

We have written flexbox tutorial before. For more information, please check this articlehttps://www.cnblogs.com/powertoolsteam/p/10000927.html

Later, we will introduce JavaScript related content to you. I hope you will continue to pay attention to it.

The above is the details of Mengxin’s HTML5 introductory guide. For more information about HTML5 introductory guide, please pay attention to other related articles of developer!

Recommended Today

A detailed explanation of the differences between Perl and strawberry Perl and ActivePerl

Perl is the abbreviation of practical extraction and report language “practical report extraction language”. Application of activestateperl and strawberry PERL on Windows platformcompiler。 Perl   The relationship between the latter two is that C language and Linux system have their own GCC. The biggest difference between activestate Perl and strawberry Perl is that strawberry Perl […]