Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge about "how to quickly understand HTML5 new elements and css". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

I. HTML5 adds layout tags

HTML5 is the specification of HTML, the core language of the Web. When users browse web pages by any means, the content they see is originally HTML format, and it is converted into recognizable information through some technical processing in the browser. HTML5 is an improvement over HTML4.01, and while technicians may not be able to apply these new technologies during development, web developers must understand the new features of this technology.

HTML5 is the latest revision of HTML, which was standardized by the World Wide Web Consortium (W3C) in October 2014.

A draft of HTML was released in 1993, and there were four versions of HTML before HTML5. 2.0 Version 3.2, version 4.0, and version 4.01 in 1999.

Before HTML5, we generally used DIV+CSS to lay out our pages. However, this layout not only makes our document structure unclear, but also is not conducive to search engine crawlers crawling our pages. To address these shortcomings, HTML5 adds many new semantic tags.

Div+CSS layout

HTML5

... head.

…Navigation

... defines sections in a document. such as a chapter, header, footer, or other part of a document

…Sidebar

... footer

…represents a separate, complete block of related content that can be used independently of the rest of the page. For example, a complete forum post, a blog post, a user comment, etc.

Using HTML5's new structure tags, make the layout above, the code is as follows:

II. Video and audio

Before HTML5 came out, online audio and video were implemented with Flash or third-party tools, and now HTML5 also supports this feature. In a browser that supports HTML5, you don't need to install any plug-ins to play audio and video. Native support for audio and video injects huge potential into HTML5.

2.1 video

Video tags define video, such as movie clips or other video streams.

2.2 audio

Audio tags define sounds, such as music or other audio streams.

2.3source

Tags define media resources for media elements such as and.

Tags allow you to specify alternative video/audio files for the browser to select based on its support for media types or codecs.

III. HTML5 new tags (understand)

3.1figure

Used to combine elements. More often used in combination with picture description.

3.2details

Details is used to describe the details of a document or part of a document, similar to a drop-down list, less compatible, chrome and Safari support.

3.3mark

It is mainly used to visually present to the user those words that need to be highlighted. A typical use of tags is to highlight search keywords to users in search results.

3.4meter

Define weights and measures. Only measures for known maxima and minima

low: lowest critical point

High: The highest critical point

Min: Minimum value

Max: Maximum value

Value: Current value

3.5 progress

A running process. Tags can be used to show the progress of time-consuming functions in JavaScript.

max: Define the completion value

value: defines the current value

3.6 datalist

Defines a list of optional data. Used in conjunction with the input element, you can create a drop-down list of input values.

Datalist and its options are not displayed, it is simply a list of valid input values.

Use the list attribute of the input element to bind datalist.

3.7canvas

Define graphs, such as charts and other images. This HTML element is designed for client-side vector graphics. It has no behavior of its own, but exposes a drawing API to client-side JavaScript so that scripts can draw whatever they want onto a canvas.

IV. Introduction to CSS

4.1 Why CSS is needed

The purpose of using CSS is to make the page have a beautiful and consistent page, another of the most important reasons is the separation of content and format, in the absence of CSS, we want to modify the style of HTML elements need to define style attributes for each HTML element separately, when HTML content is very large, it will define a lot of repeated style attributes, and modify the time one by one, troublesome. It was time to make a change, so CSS came along.

4.2 CSS concept

CSS Cascading Style Sheets Cascading Style Sheets

Definition of element styles used in HTML documents

separating content from presentation.

Improve code reusability and maintainability

2. The file suffix is. css

4.3 History of CSS

Tim Berners-Lee and Robert Cailliau invented the Web in 1990. In 1994, the Web really came out of the lab.

Styles have existed in various forms since HTML was invented. Different browsers combine their own style languages to provide users with control over the effects of the page. The original HTML contained very few display attributes.

As HTML grew, it added a lot of display functionality to meet the needs of page designers. But as these features increase, HTML gets cluttered and HTML pages get bloated. CSS was born.

In 1994, Harkun Leigh made the initial proposal for CSS. Bert Bos was designing a browser called Argo, and they decided to design CSS together.

There had been some suggestions for a uniform stylesheet language in the Internet world, but CSS was the first stylesheet language to include the "cascading" element. In CSS, the styles of a file can be inherited from other style sheets. The reader can use his own preferred style in some places and inherit or "cascade" the author's style in others. This cascading approach gives both authors and readers the flexibility to add their own designs, mixing everyone's tastes.

Hacken first proposed CSS at a conference in Chicago in 1994, CSS was presented again at www. com in 1995, Bos demonstrated CSS support for Argo, and Hacken demonstrated CSS support for Arena.

In the same year, the W3C organization (World WideWeb Consortium) was established, and all CSS creative members became W3C working groups and devoted themselves to developing CSS standards. More and more members were involved, such as Microsoft's Thomas Reaxdon, whose efforts eventually led Internet Explorer to support CSS standards. Hakun, Persian and others are the main technical leaders of the project. By the end of 1996, the first draft of CSS had been completed, and in December of that year, Cascading Style Sheets Level 1, the first formal standard, was completed and became a w3c recommendation.

In early 1997, the W3C Working Group on CSS began discussing issues not covered in the first edition. The results of these discussions formed the second edition of the CSS specification, published in May 1998.

"How to quickly understand HTML5 new elements and CSS" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.