Html5 / CSS3 Basics

review

Yes, you read that right! Today is a fresh start, today’s lecture is going to start with H5 and C3, and we’re done with the basics of HTML and CSS. HTML a total of two, CSS has gone through 7, if the foundation is not familiar with the words, it is recommended to look at the CSS and HTML foundation. From today we will start a new journey into the H5 and C3 stages. At present, HTML/HTML5 and CSS/CSS3 are all mandatory requirements. Therefore, in the following study of H5 and C3, I will go to a higher level on the original basis. Look forward to a new understanding!

Vs Code is a real knockout

Vs Code should be a must-have development tool for many developers. It is the leading tool in the market, so it is the same for front-end developers.

Commonly used VS Code plug-ins

Plug-ins are one of vs Code’s most distinctive features, which can improve development efficiency and diversify development methods. Here are some examples of the most commonly used plug-ins and basic plug-ins for future work:

  • Chinse – Chinese (simplified) language pack
  • Open in Browser — Right click and choose Browser mode to open HTML
  • Js-css-html Formatter — Automatically formatting.js CSS and HTML code every time you save it
  • Auto Rename Tag – Automatically renames paired HTML/XML tags
  • CSS Peek – Ultimate style

Advanced plug-in:

  • Auto Close Tag – A closed tag is automatically generated when a tag name is entered
  • Auto Rename Tag: Close a Tag at the end to synchronize changes
  • Bracket Pair Colorizer – Highlights matching brackets in different colours
  • Highlight Matching Tag — Highlights Matching tags
  • Code Spell Checker — Word Spell Checker
  • Import Cost – Introduces the package Cost checker
  • Version Lens: View the latest Version of the imported package

Note: although the plug-in is very easy to use, but remember for the novice, skilled code writing ability is an essential skill, so it is recommended that this automatic completion or other plug-ins in the early stage not too often, try to write by yourself, after skilled can open the automatic completion function.

HTML5 semantic tags

Html5 in a nutshell is the fifth major modification of the hypertext markup language (HTML), which involves a wide range of content and is now used more, so this modification is specifically put forward, called HTML5. This time HTML has a lot of new semantic tags

// Header tag <header> </header> // Navigation tag <nav> </nav> // Content tag <article> </article> // block level tag <section> <section> // sidebar tag < set > </ set > </ set >Copy the code

The above is basically this HTML5 new tag, you can try to output in the code to try the effect, if the page layout can use these tags can increase semantic, more friendly to search engines. In addition, mobile devices prefer these tags.

HTML5 adds multimedia tags

Audio Tag Audio

Another important point is the addition of audio labels and video labels

<audio> </audio>Copy the code

Common attributes of audio labels. Some for compatibility problems can write two forms of file MP3, OGG

  • Autoplay: Autoplay – If this property is present, the audio is played immediately after it is ready
  • Controls: Controls – If present, displays controls to the user, such as a play button
  • Loop: loop — If this property is present, it plays automatically whenever the audio ends
  • SRC: URL – The URL of the audio to play

Video Label

In addition to audio, there is also the property of video, video and audio can also have compatible modes

<video> </video>Copy the code

Common properties of video

  • Autoplay: Autoplay – Video ready autoplay (Added to Chrome browser to address autoplay)
  • Controls: Controls – Displays the play control to the user
  • Width: px — Set the playback width
  • Height: px — Sets the playback height
  • Loop: loop — Whether to continue the loop after playing
  • Preload: auto(preload video)/ None (Should not load video) — specifies whether or not to preload video
  • SRC: URL indicates the URL of the video
  • Poster: imgURL — loading wait screen image,
  • Muted: a muted play

There are a lot of attributes involved in the video type, so you can try them all out. Note that autoplay of audio and video has been disabled from Google’s browser, so a muted attribute was added to the video species to enable autoplay

HTMl5 Form Attributes

Similarly, in addition to the new audio and video, HTML5 has also added new forms. These tags generally represent one form. For example, if type is email, the input box will automatically verify whether it is email, and if not, it will prompt the user to enter the correct email address.

<input type="" /> <! <input type="email"> <! <input type=" URL "> <! <input type="date"> <! <input type="time"> <! <input type="month"> <! <input type="week"> <! <input type="number"> <! <input type="number"> <! <input type="search"> <! <input type="color">Copy the code

In addition to the new type values, there are also a number of new attribute values in the input. Try them out in VS Code, and you’ll be using them a lot in your future work. Even if you want to build an NPM package and write your own UI components, you’ll need to know about them

<input type="text" required /> // <input type="text" autofocus />....Copy the code
  • Required: Required — This property indicates that its content cannot be empty
  • Placeholder: Prompt text (placeholders) — Prompt information for forms with default values will no longer be displayed
  • Autofocus: Autofocus — The autofocus property, which automatically focuses to the specified form after the page is loaded
  • Autocomplete: OFF /on — When the user starts typing in the field, the browser displays the field based on the result that was previously typed
  • Multiple: multiple — You can select multiple file submissions (used in uploading files)

Css3 property selector

Property selector

Attribute selectors are usually written like this: A [b] : represents the selection of a elements that have b attributes, so there are many ways to extend attribute selectors from this

  • A [b = “val”] — Selects the element a that has the attribute B and the attribute value is equal to val
Input [type="text"]{color: red}Copy the code

Note: Class selectors, attribute selectors, and pseudo-class selectors all have weights of 10

Structure pseudo-class selector

The reason it’s called a pseudo-class selector is because it’s not really a class selector, and it’s different from a class in the Chrome debug panel.

  • Div: first-child — matches the first element in the div
  • Div: last-child — Matches the last element in the div
  • Div: nth-child(n) — Matches the NTH child of the parent element. N can be a number, keyword, or formula. Note: n can also be even or odd or n can be a formula, starting at 0
Structure of the HTML < body > < div class = "content" > < div > 1 < / div > < div > 2 < / div > < div > 3 < / div > < div > 4 < / div > < div > 5 < / div > < div > 6 < / div > <div>7</div> <div>8</div> </div> </body>Copy the code

The results are as follows:

You can also specify a selector for the type

  • Div: first-of-type — Specifies the first div of type
  • Div: last-of-type — Specifies the last div of type
  • Div: nth-of-type(n) — specifies the NTH of type e

CSS pseudo-class elements

Pseudo-class elements are also treated as a top priority in work and study, because a large number of pseudo-class elements will be used in future work, especially for small ICONS or small things in picture styles. Pseudo-class elements are mostly used. Basically, there are two kinds of commonly used pseudo-elements: before and after

  • : before — Inserts content before the inside of the element
  • : after — Inserts content after the inside of the element

It is worth noting:

  1. Before and after must have content attributes
  2. A. before B. after C. after D. before
  3. Before and after create an element, which are inline elements
  4. These elements are called pseudo-elements because you can’t see them in the DOM
  5. Pseudo-elements, like label selectors, have a weight of 1

In general, if a large picture or content has a small icon or other elements, it can be directly represented by pseudo-elements. This scenario is very common, and can be moved to the appropriate position using the “child” phase.

Well, today’s H5 and C3’s first article came to an end, recently the author is still quite busy, what questions welcome to leave a message at any time ~

Today, let’s learn another poem that we wrote down.

  • Nangzi ci 2 / new voice liuzhi Ci — Wen Tingyun
  • A foot of crimson is better than dust
  • Acacia walnut hate, xu Yuan to others
  • Well bottom point such as deep candle Yi, total Lang long mo Go
  • Linglong dice Ann red beans, acacia know I do not know

The translation

  • She wore a long crimson dress, which had grown pale yellow over time. From time immortalized, the old was no better than the new
  • You I originally should be like walnut same constancy not to move, where think of your heart originally already had others, let me have hate to you after all
  • Late at night lit candles deeply asked you, this journey far do not forget the date of return
  • On cabinet and delicate dice embed the red bean of that meaning metaphor acacia, acacia goes to the bone whether do you know?