HTML5 new elements and CSS introduction

The main content

1. New elements of HTML5

2. Introduction to the CSS

3. The way to introduce CSS

4, CSS basic selector

Div+CSS layout

Learning goals

HTML5 added the layout tag

HTML5 is the specification of HTML, the core language in the Web. The content that users see when browsing a Web page by any means is originally in HTML format, which is transformed into identifiable information through some technical processing in the browser. HTML5 has made some improvements on the basis of HTML4.01, although technical personnel may not put these new technologies into application in the development process, but for the new features of this technology, website development technical personnel must have some understanding.

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

The draft HTML was released in 1993, and before the HTML5 version, there were four versions of HTML: 2.0, 3.2, 4.0, and then 4.01 in 1999.

Before HTML5, we used DIV+CSS to layout our pages. However, such layout not only makes our document structure unclear, but also is not conducive to search engine crawlers to crawl our pages. To address these shortcomings, HTML5 has added many new semantic tags

Div + CSS layout

HTML5

<header>.</header>The head<nav>.</nav>navigation<section>.</section>Define sections in the document. Such as chapters, headers, footers, or other parts of the document<aside>.</aside>The sidebar<footer>.</footer>The footer<article>.</article>Represents a single, complete block of relevant content that can be used independently of the rest of the page. A full forum post, a blog post, a user comment, etcCopy the code

Using HTML5’s new structure tag, make the above layout as follows:

<header>Defines the header of a page or region</header>
<div>
     <section>Define a region</section>
     <aside>The side box section that defines the page content</aside>
</div>
<footer>Defines the bottom of a page or area</footer>
Copy the code

/* Top of the page header*/
header{
    height:150px;
    background-color:#abcdef;
}
/* div*/
div{
    margin-top:10px;
    height:300px;
}

section{
    height:300px;
    background-color:#abcdef;
    width:70%;
    float:left;
}
article{
    background-color:#F33;
    width:500px;
    text-align:center;
    margin:0px auto;
}
aside{
    height:300px;
    background-color:#abcdef;
    width:28%;
    float:right;
}
/* Bottom of page */
footer{
    height:100px;
    background-color:#abcdef;
    clear:both;
    margin-top:10px;
}

Copy the code

Video and audio

Before HTML5, online audio and video was done with Flash or third-party tools, and now HTML5 supports this. In an HTML5-enabled browser, you don’t need to install any plug-ins to play audio and video. Native support for audio and video injects huge growth potential into HTML5.

video

The Video tag defines a Video, such as a movie clip or other Video stream.

<video src="movie.mp4" controls>Your browser does not support the video TAB.</video>
Copy the code

audio

The audio tag defines sounds, such as music or other audio streams.

 <audio src="someaudio.mp3">Your browser does not support the audio tag.</audio>

Copy the code

source

<audio controls>
  	<source src="horse.ogg" >
  	<source src="horse.mp3" >
	Your browser does not support the audio element.
</audio>

Copy the code

HTML5 New Tags (Understand)

figure

Used to combine elements. Mostly used in combination of pictures and picture descriptions.

<figure>
	<img src="img.gif" alt="Figure labels"  title="Figure labels" />
	<figcaption>The title of the figure</figcaption>
</figure>

Copy the code

details

Details is used to describe the details of a document or part of a document. It is similar to a drop-down list. It is not compatible with chrome and Safari.

<details>
      <summary>The specified title. When the user clicks on the title, all the content below is displayed. The content can be any form of content</summary>
      <div>
          <p>The content description</p>
      </div>
</details>When you add the open attribute, the description is displayed by default.<details open>
     <summary>The specified title. When the user clicks on the title, all the content below is displayed. The content can be any form of content</summary>
     <div>
         <p>The content description</p>
     </div>
</details>

Copy the code

mark

It is used to visually present text that needs to stand out to the user. A typical use of tags is to highlight search terms to the user in search results.

<p>You are a<mark>Big long legs</mark>?</p>
Copy the code

meter

Define weights and measures. Only for measures with known maximum and minimum values

<meter min="0" max="100" value="81" low="20" high="80"></meter>
Copy the code

Low: indicates the lowest critical point

High: indicates the highest critical point

Min: indicates the minimum value

Max: Maximum value

Value: indicates the current Value

progress

A running process. You can use tags to show the process of a time-consuming function in JavaScript.

<progress max="100" value="20"></progress>
Copy the code

Max: Defines the completion value

Value: defines the current value

datalist

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

The datalist and its options are not displayed; it is simply alist of valid input values.

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

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

canvas

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 it presents a drawing API to client-side JavaScript to enable the script to draw whatever it wants onto a single canvas.

<canvas id="myCanvas">Your browser does not support the Canvas tag</canvas>
<script type="text/javascript">
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='#FF0000';
    ctx.fillRect(0.0.100.100);
</script>

Copy the code

CSS is introduced

Why you need CSS

One of the most important reasons for using CSS is the separation of content from format. Before CSS, when we wanted to change the style of AN HTML element, we had to define a separate style attribute for each HTML element. When there was a lot of HTML content, we would define a lot of repetitive style attributes. And when you change it, you need to change it one by one. It was time for a change, so CSS came along.

CSS concept

Cascading Style Sheets (CSS), also known as Cascading Style Sheets, are short for Style Sheets

1, used to define the style of elements in HTML documents

The separation of content and presentation is achieved

Improve code reusability and maintainability

2. The file suffix is.css

The history of CSS

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

Styles have existed in various forms since THE invention of HTML. Different browsers combine their styling languages to give the user control over the effect of the page. The original HTML contained very few display properties.

As HTML grew, it added a lot of display capabilities to meet the requirements of page designers. But as these features increased, HTML became more cluttered and HTML pages became more bloated. CSS was born.

The original proposal for CSS was made in 1994 by Hakun Ley. At the time, Bert Bos was designing a browser called Argo, and they decided to design CSS together.

There had been some suggestions for a unified style sheet language on the Internet, but CSS was the first style sheet language with the idea of cascading. In CSS, styles in a file can be inherited from other stylesheets. 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 each person’s tastes.

Harken first proposed CSS at a conference in Chicago in 1994, and again at the WWW Web Conference in 1995. Bose demonstrated CSS support in the Argo browser, and Harken showed CSS support in the Arena browser.

In the same year, the World WideWeb Consortium (W3C) was founded, and CSS creators became working groups of the W3C and were fully responsible for developing the CSS standard. The development of cascading style sheets (CSS) was finally on track. More and more members were involved, such as Thomas Reaxdon of Microsoft, whose efforts eventually led to Internet Explorer supporting the CSS standard. Hakun, Persia and others are the main technical leaders for the project. At the end of 1996, a first draft of CSS was completed, and in December of that year, the first formal standard for Cascading Style Sheets Level 1 was completed as a W3C recommendation.

In early 1997, the W3C working group on CSS began discussing issues not covered in the first release. The results of this discussion formed the second edition of the CSS specification, published in May 1998.

Relationship between CSS and HTML

1. HTML is used to build the structure of a web page

CSS is used to style HTML elements

HTML is the content of the page, CSS is the performance of the page

grammar

CSS rules consist of two main parts: selectors, and one or more declarations:

Selectors are usually HTML elements that you need to change the style of.

Each declaration consists of a property and a value.

A property is a style attribute that you want to set. Each attribute has a value. Properties and values are separated by colons.

CSS style sheet features

1. Inheritance

This means that an internal tag can have the style of an external tag, such as: text-, font-, and line-height, but some attributes cannot be inherited, such as: border, padding, margin

2. Lamination

Simply put, cascading is setting the same style on an element multiple times, using the value of the property that was set the last time. For example, if you use the same CSS style sheet for multiple pages on a site, and you want to use other styles for certain elements on some pages, you can define a separate style sheet for those styles and apply it to the page. These later defined styles override the previous styling Settings, and what you see in the browser is the effect of the most recent styling Settings.

3. Priority

When style definitions conflict, styles are applied according to the precedence of different style rules

CSS comment

Comments are used to explain your code and can be edited at will. The browser will ignore them.

CSS comments start with “/*” and end with “*/”. Example:

/* This is the comment */
Copy the code

This section describes how to import the CSS

Inline style (inline style)

By mixing presentation and content, inline styles can lose many of the advantages of style sheets. Use this approach with caution, such as when the style needs to be applied only once on an element.

To use inline styles, you need to use the style attribute in the associated tag. The Style property can contain any CSS property.

Features: Lack of integrity and planning, is not conducive to maintenance, maintenance cost is high;

<p style="background: orange; font-size: 24px;" >CSS<p>
Copy the code

Internal style

Internal style sheets should be used when a particular style is required for a single document. You can use

<style></style>
Copy the code

The tag defines the internal style sheet in the document header

Features: THE CSS code within a single page has unity and planning, easy to maintain, but easy to chaos between multiple pages

<head>
    <style> 
       h1 { background: red; } 
    </style>
</head>
 
Copy the code

External Styles (recommended)

When styles need to be applied to many pages, an external style sheet is ideal. In the case of external stylesheets, you can change the look of the entire site by changing one file. Each page uses a tag to link to the stylesheet. The tag is in the header:

<link rel="stylesheet" type="text/css" href="xxx.css">
Copy the code

Import (understand)

<style type="text/css">
   @import url("CSS file path");
</style>

Copy the code

What’s the difference between @import and link?

1. @import is a method of loading styles provided by CSS. It can only be used to load CSS. The link tag can do a lot more than just load CSS, such as define rel connection properties.

2. Differences in loading sequence. When a page is loaded, the CSS referenced by link is loaded at the same time, and the CSS referenced by @import is not loaded until the page is fully downloaded. So sometimes when browsing @import loaded CSS page will start to have no style (that is, flicker), it will be more obvious when the network speed is slow.

3. Differences in compatibility. @import can only be recognized in IE5, but link tag does not have this problem.

4. Differences in using DOM to control styles. When using javascript to control the DOM to change styles, you can only use the link tag, because when the DOM manipulates the style of the element, the @import style may not be loaded yet.

Use the @import method with caution because it increases HTTP requests and affects load speed.

priority

Inline style > Internal Style (External Style)

Note: Internal styles have the same priority as external styles, and those written in the back take effect

Base selector

Global selector

Can match any element, lowest priority, not recommended.

* {margin: 0;
     padding: 0;
 }
div{
  margin:0 auto;
}
 
Copy the code

Element selector

Elements in an HTML document, p, b, div, a, IMG, body, etc.

Tag selectors, which select all tags of this type on a page, often describe “commonalities” and cannot describe the “personality” of an element.

p{
    font-size:14px;
}

Copy the code

For example, if I want the words “front end” in the sentence “Finish with front end, continue with Java” to be red, I can enclose the words “front end” with a tag and add a tag selector to the tag.

<pWord-wrap: break-word! Important; ">span< / > front endspan>, continue to learn Java</p>
 span{
            color: red;
 }

Copy the code

【 Conclusion 】 It should be noted that:

(1) All tags can be selectors. Such as ul, Li, label, DT, DL, INPUT, div, and so on.

(2) No matter how deep the label is hidden, it must be able to be selected.

(3) Choose all, not just one.

Class selectors

Specify a dot for all tags you want.

Advantages: Flexible.

<h2Class ="oneclass twoclass"> </h2>
/* Define class selectors */
.oneclass{
		width:800px;
}

Copy the code

The class attribute has the following characteristics:

Property 1: Class selectors can be used by multiple tags.

Characteristic 2: Class names cannot start with numbers

Feature 3: Multiple class selectors can be used on the same tag. Separate them with Spaces. For example, the following

     <h3Class =" classOne classtwo"h3Oh < /h3>  	
Copy the code

It cannot be written as:

     <h3"> < p style =" margin-top: 0px; margin-bottom: 0pxh3Oh < /h3>  
Copy the code

The ID selector

It can be used only once for a specific tag. The ID selector in CSS is defined by “#”.

<h2Id = "mytitle" > hello < /h2>
#mytitle{
    border:3px dashed green;
}

Copy the code

In particular, HTML pages must not have the same ID, even if they are not of the same type. For example, there is a page id pp p, a div ID pp, is illegal! ID The name cannot start with a number.

A label can be selected by multiple CSS selectors:

For example, we can have both the tag selector and the ID selector on the same tag. (With cascading) :

Then let’s look at the effect through the censorship element of the page:

Now, let’s say the selectors collide, so the ID selector says this text is red, and the tag selector says this text is green. So who does? In fact, CSS has very strict formulas to handle conflicts.

A single tag can be selected by multiple CSS selectors, working together. This is the first layer of “cascading”

Merge selector

Syntax: selector 1, selector 2,… {}

What it does: Extracts common styles and reduces duplication of code

.header..footer{height:300px; }Copy the code

The priority of the selector

The CSS uses four digits to represent weights. The weights are expressed as follows: 0, 0, 0. The weight of the element selector is 0001. The weight of the class selector is 0010

Priority from high to low:

Inline Style >ID selector > Class Selector > Element Selector

Div + CSS layout

advantages

1. Comply with W3C standards. This ensures that your site will not become obsolete due to future web application upgrades. 2. Be more approachable to the viewer and browser. Because CSS is rich in styles, so that the page is more flexible, it can be according to different browsers, and achieve uniform display effect and deformation. This allows for browser backward compatibility, which means that whatever comes next in the browser wars, your site will be perfectly compatible. 3. Make pages load faster. The size of the page becomes smaller and the browsing speed becomes faster. Since most of the page code is written in CSS, the size of the page becomes smaller. DIV+CSS divides the page into more separate areas than a nested table, which is loaded layer by layer when the page is opened. Instead of enclosing the entire page in one large table like table nesting, which makes it slow to load. 4. Maintain visual consistency. The previous method of making table nesting will make the display effect between page and page, or between area and area will be biased. And the use of DIV+CSS production method, all pages, or all areas with unified CSS file control, to avoid different areas or different pages reflect the effect of bias. 5. Be more efficient when modifying your design. Because the DIV+CSS method is used to separate the content and structure, it is easier to save time when modifying the page. According to the area content tag, find the corresponding ID in the CSS, which makes it more convenient to modify the page, and does not break the layout style of other parts of the page. In the team development, it is easier to divide the work and reduce the correlation. 6. Search engines are friendlier. Compared with the traditional table, DIV+CSS technology is used in web pages, because most of the HTML code and content style is written into THE CSS file, which makes the code in the web pages more concise, the body part more prominent, easy to be collected by search engines.

DIV

<div class="news">
  <h2>News headline 1</h2>
  <p>some text. some text. some text...</p>.</div>
Copy the code

<body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>
Copy the code

<style>
        .header{
            height: 100px;
            background-color: #fcc;
        }
        .content{
            height: 400px;
            background-color: #ff9;
        }
        .footer{
            height: 100px;
            background-color: #ccf;
        }
</style>

Copy the code