Features
Features:

Product Tour >

Edraw AI >

Paid Plans:

Individuals >

Business >

Eduaction >
Resources
Blog

History

How-tos & Tips

Discovery

Biography

Business Analysis

Examples

AI concept Map

Free AI Mind Map Generator

Onenote Mind Map

Bcg Matrix Examples

Nike Marketing Strategy

Unilever SWOT Analysis

Make Mind Maps in Google Docs

Guide

FAQs

What's New

Resource Center
Templates
All Templates

Brain Storming Templates

Strategy and Planning Templates

Project Management Templates

Product Management Templates

Human Resources Templates

Agile Workflow Templates

Marketing Templates

Education Templates

Fun and Games Templates

User Gallery
Download
Pricing
Enterprise

MindMap Gallery Programming Basics 4 HTML5CSS3 Basics

Programming Basics 4 HTML5CSS3 Basics

This is a mind map about Programming Basics 4: Basics of HTML5CSS3. If we change the box model to box-sizing: border-box, then the padding and border will not hold up the box (provided that the padding and border will not exceed the width) width).

Edited at 2022-12-01 20:08:11

PlotWizard

Recent works View more works>>

Programming Basics 4 HTML5CSS3 Basics

PlotWizard

Recent works View more works>>

Recommended to you
Outline

HTML5 CSS3 basics

1: HTML5

HTML adds semantic tags

<header> header tag

<nav>Navigation tag

<article>Content tag

<section> defines a certain area of the document

<aside>Sidebar tag

<footer>Tail tag

Tags are semantic and are beneficial to browser search engines

media label

video tag video

<video controls="controls" width="300"> <source src="move.ogg" type="video/ogg" > <source src="move.mp4" type="video/mp4" > Your browser does not currently support the <video> tag to play videos </ video >

autoplay automatic play

- Note: On Google Chrome, autoplay is disabled by default. If you want the effect of autoplay, you need to set the muted attribute.

width width

height height

loop loop playback

src play source

muted muted playback

audio tag - audio

< audio controls="controls" > <source src="happy.mp3" type="audio/mpeg" > <source src="happy.ogg" type="audio/ogg" > Your browser does not currently support the <audio> tag. </audio>

autoplay If this attribute is present, the audio will be played as soon as it is ready.

controls If this attribute appears, displays controls to the user, such as a play button.

loop If present, restarts playback whenever the audio ends.

src The URL of the audio to be played.

New form input type

Add new form properties

The required attribute of the form indicates that its content cannot be empty and is required.

placeholder prompt text The prompt information of the form, if there is a default value, it will not be displayed.

autofocus auto-focus attribute, the page will automatically focus on the specified form after loading.

autocomplete off /on When the user starts typing in a field, the browser should display options to fill in the field based on previously typed values.

It is turned on by default, such as autocomplete="on", and turned off autocomplete="off"

It needs to be placed in the form, and the name attribute must be added at the same time, and it must be submitted successfully.

multiple allows you to select multiple files for submission

2: CSS3

attribute selector

E[ata] selects the E element with att attribute

E[att="val"] selects E elements with an att attribute whose value is equal to val

/* Select only the input of the type =text text box */ input[type=text] { color: pink; }

E[att^="val"] matches E elements that have an att attribute and whose value starts with val

/* Select the elements that are first div and then have class attribute and the attribute value must start with icon */ div[class^=icon] { color: red; }

E[att$="val"] matches E elements with an att attribute whose value ends in val

/* Select the elements that are section first and then have class attributes and the attribute values must end with data */ section[class$=data] { color: blue; }

E[att*="val"] matches E elements with an att attribute and a value containing val

Structural pseudo-class selector

E:first-child

Matches the first child element E of the parent element

List item one List item two List item three List item four

E:nth-child(n)

ul li:nth-child(2){} matches the second child element of the parent element

ul li:nth-child(odd){} matches the odd-numbered child element of the parent element

ul li:nth-child(-n 3){} matches the first 3 child elements of the parent element

Pseudo element selector

::before Insert content before inside the element

::after inserts content after inside the element

box model

box-sizing: content-box box size is width padding border (previously default)

box-sizing: border-box box size is width

If we change the box model to box-sizing: border-box, then the padding and border will not expand the box (provided that the padding and border will not exceed the width)

margin: 0; padding: 0 /* Initialize style settings */ box-sizing: border-box

CSS3 adds other features

CSS3 filter filter

filter CSS property applies graphic effects such as blur or color shift to elements

filter: function(); --> For example: filter: blur(5px); --> blur processing. The larger the value, the blurrier it is.

calc function

calc() This CSS function lets you perform some calculations when declaring CSS property values.

CSS3 transition

Transition animation: It is a gradual transition from one state to another.

transition: the property to be transitioned takes time and when does the motion curve start;

1: Attributes: The css attributes you want to change, such as width, height, background color, and inner and outer margins. If you want all attributes to change and transition, just write all

2: Time spent: The unit is seconds (the unit must be written), such as 0.5s

3: Motion curve: The default is ease (can be omitted)

4: When to start: The unit is seconds (the unit must be written). You can set the delay trigger time. The default is 0s (can be omitted)