MindMap Gallery 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:11This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
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
<style> div { width: 200px; height: 200px; background-color: pink; } /* div::before weight is 2 */ div::before { /* This content must be written */ content: 'I'; } div::after { content: 'Peppa Pig'; } </style> <body> <div> yes </div> </body>
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)