Wondershare EdrawMind
MindMap Gallery ComputerHTML
- 56
- 2
- 1
ComputerHTML
Pink teacher notes, HTML is a markup language that uses various tags to describe the structure and content of web pages. By learning HTML, you can create and design your own web pages and interact with users.
Edited at 2023-12-18 11:56:17
- Aeon SWOT Analysis
Discover how Aeon can navigate the competitive online landscape with a strategic SWOT analysis. This comprehensive overview highlights Aeon’s strengths, such as its strong brand recognition, omnichannel capabilities, and customer loyalty programs, alongside its weaknesses, including digital maturity gaps and cost structure challenges. Opportunities for growth include enhancing e-commerce competitiveness and leveraging data-driven strategies, while threats from online-first players and market dynamics require attention. Explore how Aeon can strengthen its market position through innovation and customer-centric approaches in the ever-evolving retail environment.
- Aeon Market Segmentation, Targeting and Positioning Analysis
Discover how Aeon effectively tailors its offerings to meet the diverse needs of family-oriented consumers through a comprehensive Segmentation, Targeting, and Positioning (STP) analysis. Our approach begins with demographic segmentation, examining family life stages, household sizes, income levels, and parent age bands to identify distinct consumer groups. Geographic segmentation highlights store catchment types and community characteristics, while psychographic segmentation delves into family values and lifestyle orientations. Behavioral segmentation focuses on shopping missions, price sensitivity, and channel preferences. Finally, needs-based segmentation reveals core family needs related to value and budget considerations. Join us as we explore these insights to enhance family shopping experiences at Aeon.
- Nike Market Segmentation, Targeting and Positioning Analysis
Discover the dynamics of sneaker transactions with our Kream Sneaker Consumption Scene Analysis Template. This comprehensive framework aims to visualize the purchasing and consumption journeys of sneakers, identifying key demand drivers and obstacles. It covers user behavior within Kream and external influences, targeting various sneaker categories over specific timeframes and regions. The analysis defines user segments, including collectors, resellers, sneakerheads, casual trend followers, and gift purchasers, each with unique values and KPIs. It outlines the consumption journey from awareness to resale, highlighting critical touchpoints such as search, purchase, inspection, and sharing experiences. Key performance indicators are established to measure engagement and satisfaction throughout the process. Join us in exploring the intricate world of sneaker trading!
ComputerHTML
- Aeon SWOT Analysis
Discover how Aeon can navigate the competitive online landscape with a strategic SWOT analysis. This comprehensive overview highlights Aeon’s strengths, such as its strong brand recognition, omnichannel capabilities, and customer loyalty programs, alongside its weaknesses, including digital maturity gaps and cost structure challenges. Opportunities for growth include enhancing e-commerce competitiveness and leveraging data-driven strategies, while threats from online-first players and market dynamics require attention. Explore how Aeon can strengthen its market position through innovation and customer-centric approaches in the ever-evolving retail environment.
- Aeon Market Segmentation, Targeting and Positioning Analysis
Discover how Aeon effectively tailors its offerings to meet the diverse needs of family-oriented consumers through a comprehensive Segmentation, Targeting, and Positioning (STP) analysis. Our approach begins with demographic segmentation, examining family life stages, household sizes, income levels, and parent age bands to identify distinct consumer groups. Geographic segmentation highlights store catchment types and community characteristics, while psychographic segmentation delves into family values and lifestyle orientations. Behavioral segmentation focuses on shopping missions, price sensitivity, and channel preferences. Finally, needs-based segmentation reveals core family needs related to value and budget considerations. Join us as we explore these insights to enhance family shopping experiences at Aeon.
- Nike Market Segmentation, Targeting and Positioning Analysis
Discover the dynamics of sneaker transactions with our Kream Sneaker Consumption Scene Analysis Template. This comprehensive framework aims to visualize the purchasing and consumption journeys of sneakers, identifying key demand drivers and obstacles. It covers user behavior within Kream and external influences, targeting various sneaker categories over specific timeframes and regions. The analysis defines user segments, including collectors, resellers, sneakerheads, casual trend followers, and gift purchasers, each with unique values and KPIs. It outlines the consumption journey from awareness to resale, highlighting critical touchpoints such as search, purchase, inspection, and sharing experiences. Key performance indicators are established to measure engagement and satisfaction throughout the process. Join us in exploring the intricate world of sneaker trading!
- Recommended to you
- Outline
HTML CSS JS
HTML5
Formatting CSS styles
shortcut key
shift alt down arrow (up arrow)
Quickly copy a line
ctrld
Select multiple identical words
Ctrl Alt Up Arrow (Down Arrow)
Add multiple cursors
Ctrl h
Globally replace a word
Ctrl g
Quickly locate a row
shift alt then drag the mouse
Select a block
first day
text formatting tag
Bold
<strong></strong> or <b></b>, it is more recommended to use the <strong> tag in bold for stronger semantics
tilt
<em></em> or <i></i>
strikethrough
<del></del> or <s></s>
Underline
<ins></ins> or <u></u>
Image tags and paths
src
Image path
alt
Replacement text. Image cannot display text
title
Prompt text. When the mouse is placed on the image, the text displayed
width
Set the width of the image
height
Set the height of the image
border
Set the border thickness of the image
hyperlink tag
external link
internal link
empty link
Download link
If the address in href is a file or compressed package, the file will be downloaded.
web element link
Hyperlinks can be added to various web elements in web pages, such as text, images, tables, audio, videos, etc.
Anchor link: Click on the link to quickly navigate to a certain location on the page
In the href attribute of the link text, set the attribute value to the form of #name, such as <a href="#two">Episode 2</a>
Find the target location tag and add an id attribute = the name just now, such as: <h3 id="two">Introduction to Episode 2</h3> Topic
href
Used to specify the URL address of the link target, (required attribute) When the href attribute is applied to the tag, it has the function of a hyperlink
target
Used to specify how to open the linked page, where _ self is the default value and _ blank is the way to open in a new window.
Comment
<!--Comment statement-->
Shortcut key: ctrl /
space character
HTML5 new semantic tags
<header>:head tag
<nav>: navigation tag
<article>:Content tag
<section>: defines a certain area of the document
<aside>:sidebar label
<footer>: tail tag
In IE9, these elements need to be converted into block-level elements
1.2 New multimedia tags in HTML5
1. Video <video>-common attributes <video src=""></video>
autoplay
Video is ready to play automatically (Google Chrome needs to add muted to solve the autoplay problem)
controls
Show playback controls to the user
width
Set inserter width
height
Set player height
loop
Whether to continue playing the video after playing, looping
preload
Specifies whether to preload the video (if autoplay is available, this attribute is ignored)
auto (preload video)
none (video should not be loaded)
src
video url address
poster
Load waiting screen image
muted
Play silently
2. Audio <audio>
autoplay
If this attribute is present, the audio is played as soon as it is ready.
controls
If present, displays a control, such as a play button, to the user.
loop
If present, playback resumes whenever the audio ends.
src
The URL of the audio to play.
the next day
Basic syntax of tables
1.<table></table> is the tag used to define the table
2. The <tr></tr> tag is used to define rows in the table and must be nested in the <table></table> tag.
3.<td></td> is used to define cells in the table and must be nested in the <tr></tr> tag
4. The letter td refers to table data, that is, the content of the data cell
5. The <th> tag represents the header part of the HTML table (abbreviation of tablehead). Generally, the header cell is located in the first row or column of the table, and the text content in the header cell is bold and centered.
table properties
align
Specifies the alignment of the table relative to surrounding elements.
border
Specifies whether the table cell has a border. The default is "", which means there is no border.
cellpadding
Specifies the space between the edge of the cell and its content, defaults to 1 pixel
cellspacing
Specifies the space between cells, defaults to 2 pixels.
width
Specifies the width of the table.
Table structure tag
<thead>The header area of the tag table
<tbody> tag body area of the table
Three steps to merge cells:
1. First determine whether to merge across rows or columns
2. Find the target cell and write the merge method = the number of cells to be merged. For example: <tdcolspan="2"></td>
3. Delete redundant cells.
Merge across rows: rowspan="Number of merged cells
Merge across columns: colspan="Number of merged cells
Across rows: the top cell is the target cell, write the merge code
Cross-column: The leftmost cell is the target cell, write the merge code
Merge lines between cells:
border-collapse: collapse;
form fields
form
action
Used to specify the URL address of the server program that receives and processes form data.
method
Used to set the submission method of form data, its value is get or post.
name
Used to specify the name of the form to distinguish multiple form fields on the same page.
Remove the bullet (small dot) in front of li
list-style:none;
form control
input
type
radio
single button
checkbox
checkbox
password
Password input box
text
Single line text input box
button
Normal button
submit
submit button
reset
reset button
image
Image form submit button
hidden
Hidden field
file
file domain
type="email"
Restrict user input to email type
type="url"
Limit user input to URL type
type="date"
Restrict user input to date type
type="time"
Restrict user input to be of type time
type="month"
Restrict user input to be of month type
type="tel"
phone number
type="week"
Limit user input to week type
type="color"
Generate a color selection form
type="search"
search bar
type="number"
Restrict user input to be of numeric type
Other properties
name
The name of the control
value
Default text value in input control
size
The display width of the input control on the page
checked
Define the items selected by default in the selection control
maxlength
The maximum number of characters allowed to be entered by the control
readonly
The content of this control is read-only (cannot be edited and modified)
disabled
Disable the control (grayed out) when the page is first loaded
required
The form has this attribute to indicate that its content cannot be empty and is required.
placeholder
The prompt information of the form will not be displayed if there is a default value.
autofocus
Auto-focus attribute, the page will automatically focus on the specified form after loading.
multiple
You can select multiple files for submission
autocomplete
When the user starts typing in a field, the browser should display options to fill in the field based on the values previously typed.
It is turned on by default, such as autocomplete="on", and autocomplete="off" needs to be placed in the form, and the name attribute is added at the same time, and it is submitted successfully.
textarea
select
size
Specifies the number of visible options for the drop-down menu
multiple
When multiple="multiple" is defined, the drop-down menu will have the function of multiple selections. The method is to hold down the (Ctrl) key and select multiple items at the same time.
option
selected
When selected="selected" is defined, the current item is the default selected item
Comprehensive case
CSS
CSS day one
tag selector
class selector
id selector
wildcard selector
font-style: font style
Remember that tilting is italic, and not tilting is normal. We use normal most often at work.
font-weight: font weight
Remember that bold means 700 or bold, and not bold means normal or 400. Remember that numbers should not be followed by units.
font-size: font size
The unit we usually use is px pixels, we must keep up with the unit
font-family: font type
You can choose: Song Dynasty, Microsoft Yahei, etc.
font: font continuous writing
When using the font attribute, it must be written in the order in the above syntax format. The order cannot be changed, and each attribute must be separated by spaces.
Properties that do not need to be set can be omitted (take the default value), but the font-size and font-family properties must be retained, otherwise the font property will have no effect.
color: text color
text-align: text alignment
text-decoration: text decoration
text-indent: text indent
line-height: line height
inline
Embedded
Linked
CSS day two
1. Generate tags. Just enter the tag name and press the tab key. For example, div and then the tab key to generate <div></div>.
2. If you want to generate multiple identical tags, just add, for example, div*3 to quickly generate 3 div3.
3. If there is a label with a parent-child relationship, you can use > such as ul>li.
4. If there are sibling tags, just use for example div p
5. If you generate a file with a class name or id name, just write demo or two tab keys.
6. If the generated div class names are in order, you can use the auto-increment symbol $
compound selector
descendant selector
ul li [style declaration} / select all i tag elements in ul */
descendant selector
div >p{style declaration] / select all the latest p-marked elements in the div
Union selector
ul,div(style declaration} /t Select ul and div tag elements */
Pseudo class selector
Link pseudo-class selector
a:link
Select all unvisited links
a:visited
Select all visited links
a:hover
Select the link the mouse pointer is over
a:active
Select the active link (the link that does not pop up when the mouse is pressed)
:focus pseudo-class selector
:focus pseudo-class selector is used to select the focused form element
input :focus { background-color:yellow; }
Pseudo element selector (emphasis)
::before
Insert content at the front inside the element
::after
Insert content after the element
Notice
before and after create an element, but it is an inline element
This newly created element cannot be found in the document tree, so we call it a pseudo element
Syntax: element:beforef
before and after must have content attributes
before creates elements before the content of the parent element, and after inserts elements after the content of the parent element.
Pseudo-element selectors are the same as label selectors, with a weight of 1
attribute selector
E[att]
Select E elements with att attribute
E[att="val"]
Selects E elements with att attribute whose value is equal to val
E[att^="val"]
Matches E elements with an att attribute whose value starts with val
E[att$="val"]
Matches E elements with an att attribute whose value ends in val
E[att*="val"]
Matches E elements with an att attribute and val in their value
Structural pseudo-class selector
E:first-child
Matches the first child element E in the parent element
E:last-child
Matches the last E element in the parent element
E:nth-child(n)
Matches the nth child element E in the parent element
n can be a number, keyword, formula (2n) or (2n 1), etc.
n can be the keyword: even even number, odd odd number
nth-child sorts and selects all children in the parent element (the sequence number is fixed). First find the nth child, and then see if it matches E.
The above three selectors are suitable for use in ordered lists
E: first-of-type
specifies the first of type E
E:last-of-type
Specifies the last of type E
E:nth-of-type(n)
specifies the nth item of type E
nth-of-type sorts and selects specified child elements within the parent element. First match E, and then find the nth child based on E
Element display mode conversion
Convert to block element: display:block
Convert to inline element: display:inline;
Convert to inline block: display:inline-block;
background: transparent url(image .jpg) repeat-y fixed top;
background color
background-color: color value; default is transparent (transparent)
Background picture
background-image : none l url (ur1)
none
No background image (default)
url
Specify a background image using an absolute or relative address
Background image tiling
background-repeat: repeat
repeat
Background image tiles vertically and horizontally (default)
no-repeat
Background image is not tiled
repeat-x
Background image tiles horizontally
repeat-y
Background image tiled vertically
Background image location
background-position: x y;
Background image fixed (background attached)
background-attachment : scroll fixed
scroll
The background image scrolls with the object content
fixed
Background image fixed
background: rgba(0, 0, 0, 0.3);
css third day
box model
border: 1px solid red; no order
border-collapse:collapse; means adjacent borders are merged together
padding
If the box itself does not specify the width/hcight attribute, padding will not expand the box size at this time.
margin
Collapse of vertical margins on nested block elements
A top border can be defined for the parent element
Top padding can be defined for parent elements
You can add overflow:hidden to the parent element.
css fourth day
rounded border
border-radius: 50% / 50px;
box shadow
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow
Required. The position of the horizontal shadow. Negative values are allowed.
v-shadow
Required. The position of the vertical shadow. Negative values are allowed.
blur
Optional. fuzzy distance
spread
Optional. The size of the shadow.
color
Optional. The color of the shadow. See CSS color values
inset
Optional. Change outer shadow (outset) to inner shadow
1. The default is outer shadow (outset), but this word cannot be written, otherwise the shadow will be invalid.
2. The box shadow does not take up space and will not affect the arrangement of other boxes.
text shadow
text-shadow: h-shadow v-shadow blur color;
hshadow
Required. The position of the horizontal shadow. Negative values are allowed.
v-shadow
Required. The position of the vertical shadow. Negative values are allowed.
blur
Optional. fuzzy distance
color
Optional. The color of the shadow. See CSS color values
css fifth day
float
Selector [float:property value;]
none
Elements are not floated (default)
left
Element floats to the left
right
Element floats to the right
The most important characteristics of elements with float set
1. Break away from the control of standard ordinary flow (floating) and move to the specified position (moving) (commonly known as off-standard
2. The floating box no longer retains its original position.
3. Any element can be floated. Regardless of the original mode of the element, adding float will have similar characteristics to inline block elements.
4. The floating box will only affect the standard flow behind the floating box and will not affect the standard flow in front of it.
5. Floating allows multiple block-level boxes to be displayed in a row without gaps. It is often used to arrange boxes horizontally.
In order to constrain the position of floating elements, the strategy we generally adopt for web page layout is:
First use the parent element of the standard flow to arrange the upper and lower positions, and then the internal child elements adopt a floating arrangement to arrange the left and right positions. In line with the first standard side of web page layout
Case 1
Case 2
Case 3
Case 4
clear float
After clearing the float, the parent will automatically detect the height based on the floating child box. If the parent has a height, it will not affect the standard flow below.
clear float method
1. The additional label method is also called the partition method, which is recommended by W3C. The new label must be a block element clear:both;
2. Add the overflow attribute to the parent and set it to hidden, auto, scroll. Disadvantage: cannot display the overflow part
3.Add:after pseudo-element to the parent
4. Add double pseudo elements to the parent
Xuecheng Online Case
CSS property writing order (key points)
1. Layout positioning attributes:
display/position/float/lear /visibility/overflow (it is recommended to write display first, after all, it is related to the mode)
2. Own attributes:
width/height/ margin/ padding /border/ background
3.Text attributes:
color/font /text-decoration/ text-align/vertical-align/white-space / break-word
4. Other properties (CSS3):
content /cursor / border-radius / box-shadow / text-shadow/ background:linear-gradient...
Notes on the navigation bar:
1. In actual development, we will not use link a directly but use li to include the link (li a).
2. Let the navigation bar display in one line and add float to li, because li is a block-level element and needs to be displayed in one line.
3. This nav navigation bar does not need to be given width and you can continue to add other text in the future.
4. Because there are different amounts of text in the navigation bar, it is best to add left and right padding to link a to open the box instead of specifying the width.
5. Floating boxes will not have the problem of merging margins
CSS
HTML
The sixth day
position
static positioning
static
Static positioning is the default positioning method of elements and has no meaning of positioning.
Static positioning places the position according to standard flow characteristics, it has no edge offset
relative positioning
relative
Relative positioning means that when an element moves, it is relative to its original position (narcissistic type)
Characteristics of relative positioning: (must remember)
1. It moves relative to its original position (when moving the position, the reference point is its original position).
2. The original position in the standard stream continues to be occupied, and subsequent boxes still treat it as a standard stream. (Do not leave the mark, keep the original position
The son is completely different from the father
absolute positioning
absolute
Absolute positioning means that when an element moves, it is relative to its ancestor element (pin dad type)
Characteristics of absolute positioning: (must remember)
1. If there is no ancestor element or the ancestor element is not positioned, the browser will prevail (Document document).
2. If the ancestor element has positioning (relative, absolute, fixed positioning), use the nearest positioned ancestor element as the reference point to move the position.
3. Absolute positioning no longer occupies the original position. . (Off-standard)
Fixed positioning
fixed
Fixed positioning is where an element is fixed in the browser's viewable area. Main usage scenarios: The position of the element will not change when the browser page is scrolled.
Characteristics of fixed positioning: (must remember)
1. Move elements using the browser's visual window as a reference point
Has nothing to do with the parent element
Does not scroll with the scroll bar
2. Fixed positioning no longer occupies the original position
Fixed positioning is also off-label. In fact, fixed positioning can also be regarded as a special kind of absolute positioning.
Tips for fixed positioning: Fixed on the right side of the center of the page
1. Let the fixed positioning box left:50% go to half of the browser's visible area (can also be regarded as the center of the page)
2. Let the margin-left of the fixedly positioned box be: half the width of the center of the page. By moving half the width of the center of the plate, the fixedly positioned box can be aligned against the right side of the center of the plate.
sticky positioning
sticky
Sticky positioning can be thought of as a hybrid of relative positioning and fixed positioning. Sticky sticky
Features of sticky positioning:
1. Move elements using the browser's visual window as a reference point (fixed positioning characteristics)
2. Sticky positioning occupies the original position (relative positioning characteristics)
3. One of top, left, right, and bottom must be added to be valid.
Position stacking order
z-index
When using positioning layout, boxes may overlap. At this time, you can use z-index to control the order of the boxes (Z axis)
1. The value can be a positive integer, a negative integer or 0. The default is auto. The larger the value, the closer the box is.
2. If the attribute values are the same, follow the writing order, with the last one coming first.
3. No unit can be added after the number.
4. Only positioned boxes have z-index attributes.
Expansion of positioning
1. Center the absolutely positioned box
A box with absolute positioning cannot be horizontally centered through margin:0auto, but it can be horizontally and vertically centered through the following calculation methods.
1. left: 50%;: Move the left side of the box to the horizontal center position of the parent element
2. margin-left:-100px;: Move the box to the left by half its width
2. Position special characteristics
1. Add absolute or fixed positioning to inline elements, and you can directly set the height and width.
2. Add absolute or fixed positioning to block-level elements. If no width or height is given, the default size is the size of the content.
3Off-standard boxes will not trigger margin collapse
Floating elements and absolutely positioned (fixed positioned) elements will not trigger the problem of margin merging.
4. Absolute positioning (fixed positioning) will completely press the box
1. Floating elements are different. They will only suppress the standard flow box below it, but will not suppress the text (picture) in the standard flow box below.
2. Absolute positioning (fixed positioning) will suppress all the content of the standard stream below
3. The reason why floating does not suppress text is because the purpose of floating is originally to create a text wrapping effect. The text will wrap around the floated element
Showing and hiding elements
display
display:none ;hide object
display:block ; In addition to converting to block-level elements, it also means displaying elements.
After display hides the element, it no longer occupies its original position.
visibility
visibility : visible; element is visible
visibility:hidden; element hidden
After visibility hides the element, it continues to occupy its original position.
overflow
visible
Does not cut content or add scrollbars
hidden
Content that exceeds the object size is not displayed and the excess part is hidden.
scroll
Regardless of whether the content is exceeded or not, the scroll bar is always displayed
auto
The scroll bar is automatically displayed when exceeding the limit, and the scroll bar is not displayed when the limit is exceeded.
seventh day
sprites
1. Sprites are mainly used for small background images.
2. Mainly achieved with the help of background position---background-position.
3. Generally, sprite maps have negative values. (Be sure to pay attention to the coordinates on the web page: the x-axis is positive when going to the right, and negative when going to the left. The same goes for the y-axis.)
Font icon
Download of font icons
icomoon font library: http://icomoon.io
Alibaba iconfont font library: http://www.iconfont.cn
Import font files
Use font icons
Adding font icons
CSS triangle
CSS user interface styles
Mouse style cursor
default
Novice default
pointer
tiny hand
move
move
text
text
not-allowed
prohibit
outline outline
After adding outline:; or outline:none; style to the form, you can remove the default blue border
Prevent dragging text fields from being resized
In actual development, the lower right corner of our text area cannot be dragged textarea{ resize: none; )
Text alignment: vertical-align attribute application
vertical-align : baseline l top l middle l bottom
Solve the problem of default blank gap at the bottom of the picture
1. Add vertical-align:middlel topl bottom, etc. to the image. (promoted to use)
2. Convert the image into a block-level element display: block;
Overflow text ellipsis display
1. A single line of text overflows and displays an ellipsis - three conditions must be met
/*1. First force the text to be displayed in one line*/ (default normal automatic line wrapping) white-space: nowrap;
/*2. The excess part is hidden*/overflow: hidden;
/*3. Replace the excess text with ellipses*/text-overflow: ellipsis;
2. Multi-line text overflows and displays ellipsis
/*.Hide the excess part*/overflow: hidden;
/*.Replace the excess text with ellipses*/text-overflow: ellipsis;
/*Elastic expansion box model display*/display: -webkit-box;
/*Limit the number of lines of text displayed in a block element */webkit-line-clamp: 2;
/*Set or retrieve the arrangement of the child elements of the flex box object */webkit-box-orient: vertical;
Common layout techniques
1. Application of negative margin values
1 Move the margin of each box to the left -1px just to suppress the border of the photo box
2. When the mouse passes through a certain box, just increase the level of the current box (if there is no positioning, add relative positioning (retain the position), if there is positioning, add z-index)
2. Text surrounds floating elements
3. Clever use of inline blocks
4. css triangle enhancement
CSS initialization
Day 8
New features of HTML5
HTML5 new semantic tags
<header>:head tag
<nav>: navigation tag
<article>:Content tag
<section>: defines a certain area of the document
<aside>:sidebar label
<footer>: tail tag
In IE9, these elements need to be converted into block-level elements
1.2 New multimedia tags in HTML5
1. Video <video>-common attributes <video src=""></video>
autoplay
Video is ready to play automatically (Google Chrome needs to add muted to solve the autoplay problem)
controls
Show playback controls to the user
width
Set inserter width
height
Set player height
loop
Whether to continue playing the video after playing, looping
preload
Specifies whether to preload the video (if autoplay is available, this attribute is ignored)
auto (preload video)
none (video should not be loaded)
src
video url address
poster
Load waiting screen image
muted
Play silently
2. Audio <audio>
autoplay
If this attribute is present, the audio is played as soon as it is ready.
controls
If present, displays a control, such as a play button, to the user.
loop
If present, playback resumes whenever the audio ends.
src
The URL of the audio to play.
New input types in HTML5
type="email"
Restrict user input to email type
type="url"
Limit user input to URL type
type="date"
Restrict user input to date type
type="time"
Restrict user input to be of type time
type="month"
Restrict user input to be of month type
type="week"
Limit user input to week type
type="number"
Restrict user input to be of numeric type
type="tel"
phone number
type="search"
search bar
type="color"
Generate a color selection form
New form attributes in HTML5
required
The form has this attribute to indicate that its content cannot be empty and is required.
placeholder
The prompt information of the form will not be displayed if there is a default value.
autofocus
Auto-focus attribute, the page will automatically focus on the specified form after loading.
autocomplete
When the user starts typing in a field, the browser should display options to fill in the field based on the values previously typed.
It is turned on by default, such as autocomplete="on", and autocomplete="off" needs to be placed in the form, and the name attribute is added at the same time, and it is submitted successfully.
multiple
You can select multiple files for submission
What’s new in CSS3
attribute selector
E[att]
Select E elements with att attribute
E[att="val"]
Selects E elements with att attribute whose value is equal to val
E[att^="val"]
Matches E elements with an att attribute whose value starts with val
E[att$="val"]
Matches E elements with an att attribute whose value ends in val
E[att*="val"]
Matches E elements with an att attribute and val in their value
Structural pseudo-class selector
E:first-child
Matches the first child element E in the parent element
E:last-child
Matches the last E element in the parent element
E:nth-child(n)
Matches the nth child element E in the parent element
n can be a number, keyword, formula (2n) or (2n 1), etc.
n can be the keyword: even even number, odd odd number
nth-child sorts and selects all children in the parent element (the sequence number is fixed). First find the nth child, and then see if it matches E.
E: first-of-type
specifies the first of type E
E:last-of-type
Specifies the last of type E
E:nth-of-type(n)
specifies the nth item of type E
nth-of-type sorts and selects specified child elements within the parent element. First match E, and then find the nth child based on E
Pseudo element selector (emphasis)
::before
Insert content at the front inside the element
::after
Insert content after the element
Notice
before and after create an element, but it is an inline element
This newly created element cannot be found in the document tree, so we call it a pseudo element
Syntax: element:beforef
before and after must have content attributes
before creates elements before the content of the parent element, and after inserts elements after the content of the parent element.
Pseudo-element selectors are the same as label selectors, with a weight of 1
CSS3 box model
1. box-sizing:content-box box size is width padding border (previously default)
2.box-sizing:border-box box size is width
If we change the box model to box-sizing: border-box, then padding and border will not expand the box (provided that padding and border will not exceed width)
2.6 Other features of CSS3 (understand)
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 blur processing. The larger the value, the blurrier it is.
CSS3 calc function:
calc0 This CSS function lets you perform some calculations when declaring CSS property values.
width: calc(100% -80px);
You can use -*/ inside the brackets to perform calculations
2.7 CSS3 Transition (Key Points)
Transitions are one of the game-changing features of CSS3, allowing us to add effects to elements as they transition from one style to another without using Flash animations or JavaScript. Transition animation: It is a gradual transition from one state to another, which can make our page look better and more dynamic. Although it is not supported by lower version browsers (versions below e9), it will not affect the page layout. We now often use it together with :hover
transition: the property to be transitioned takes time and the motion curve starts when
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)
Remember the formula for using transitions: Whoever makes the transition adds it to whom
website favicon icon
2D conversion
2D transformation movement translate
transform: translate(x,y); or write them separately
transform:translateX(n);
transform:translateY(n);
Define movement in 2D transformation, moving elements along and Y-axis
The biggest advantage of translate: it will not affect the position of other elements
The percentage unit in translate is relative to its own element translate: (50%,50%)
Has no effect on inline tags
2D transformation rotation rotate
transform:rotate(degree)
rotate contains degrees, and the unit is deg. For example, rdate(45deg
) When the angle is positive, it is clockwise; when it is negative, it is counterclockwise.
The default rotation center point is the center point of the element
2D transformation center point transform-origin
transform-origin: x y;
Note that the following parameters x and y are separated by spaces.
The default center point of xy conversion is the center point of the element (50% 50%)
You can also set pixels or position nouns for x y (top bottom left right center)
2D conversion scaling
transform:scale(x,y);
Note that x and y are separated by commas
transform:scale(1,1): The width and height are doubled, compared to no magnification.
transform:scale(2,2): both width and height are enlarged by 2 times
transform:scale(2): Write only one parameter, the second parameter is the same as the first parameter, equivalent to scale(2,2)
transform:scale(0.5,0.5): reduce
The biggest advantage of sacle scaling: you can set the transformation center point scaling. The default scaling is based on the center point and does not affect other boxes.
2D conversion comprehensive writing method
1. Use multiple transformations at the same time, the format is: transform:translate0rotate(scale0.etc.
2. Its order affects the effect of conversion. (Rotating first will change the direction of the coordinate axis)
3. When we have displacement and other attributes at the same time, remember to put the displacement first
animation
Basic use of animation
1.Determine the animation first
2. Reuse (call) the animation
Define animations with keyframes (similar to defining class selectors)
Common animation properties
@keyframes
Specifies animation.
animation
Shorthand property for all animation properties, except the animation-play-state property.
animation-name
Specifies the name of the @keyframes animation. (necessary)
animation-duration
Specifies the seconds or milliseconds it takes for the animation to complete one cycle. The default is 0. ( necessary )
animation-timing-function
Specifies the speed curve of the animation, the default is "ease"
animation-delay
Specifies when the animation starts, the default is 0.
animation-iteration-count
Specifies the number of times the animation is played, the default is 1, and infinite
animation-direction
Specifies whether the animation will be played in reverse in the next cycle. The default is "normal" alternate reverse play.
animation-play-state
Specifies whether the animation is running or paused. The default is "running", and "paused"
animation-fill-mode
Specifies the state after the animation ends, keeping forwards and returning to the starting backwards
Animation shorthand properties
animation: animation name, duration, motion curve, when to start, number of plays, whether to start and end the animation in reverse direction
You must write the first two
The abbreviated attribute does not include animation-play-state
Pause animation: animation-play-state: puased; often used in conjunction with other things such as mouse passing
5.4 Speed curve details
animation-timing-function: Specifies the speed curve of animation, the default is "ease'
linear
The speed of the animation is the same from beginning to end. Uniform speed
ease
default. The animation starts at a slow speed, then speeds up, then slows down before ending.
ease-in
The animation starts at a slow speed.
ease-out
Animation ends at low speed
ease-in-out
Animation starts and ends at slow speed
steps0
specifies the number of intervals (steps) in the time function
3D conversion
3D movement translate3d
transform:translate3d(x,y,z): where x, y, and Z respectively refer to the distance in the direction of the axis to be moved.
6.3 perspective perspective
Produce near, large, and far small visual stereoscopic effects on a 2D plane, but the effect is only two-dimensional.
If you want to produce a 3D effect on a web page, you need perspective (understood as a 3D object projected in a 2D plane)
Simulate the human visual position, which can be used to arrange one eye to see
Perspective is also called viewing distance: viewing distance is the distance from the human eye to the screen
The closer to the visual point, the larger the image will be on the computer plane, and the further away, the smaller the image will be.
The unit of perspective is pixels
Perspective written on the parent box of the observed element
: It is the viewing distance. The viewing distance is the distance from the human eyes to the screen.
: is the z-axis, the distance between the object and the screen. The larger the axis (positive value), the larger the object we see.
6.53D rotation rotate3d
3D rotation means that the element can be rotated along the x-axis, y-axis, z-axis or a custom axis in a three-dimensional plane.
transform:rotateX(45deg): Rotate 45 degrees along the positive direction of the x-axis
transform:rotateY(45deg): Rotate 45deg along the positive y-axis direction
transform:rotateZ(45deg): Rotate 45deg along the positive direction of the Z axis
transform:rotate3d(x,y,z,deg): Rotate deg to the angle along the custom axis (just understand it)
6.6 3D rendering transfrom-style
Controls whether the child element turns on the three-dimensional environment. .
Transform-style:flat sub-element does not enable 3D space by default
transform-style: preserve-3d; child elements enable three-dimensional space
The code is written to the parent, but affects the child box
This attribute is very important and will be used later.
Rotation case 1
Rotation case 2
Rotation case 3