Front-end transduction common code

Preface: We are not the creators of code, we are just code movers.

<p> paragraph Labels
<br> Force Line Wrapping Labels
&nbsp; spaces
<b> Bold
<strong> Bold label for heavier tone
<i> Tilt
<em> aggravating tone
<u> Underline
<s> Strikethrough Labels
<a> hyperlinks
<a href= "#" > Hyperlinks
<a href= "https://www.taobao.com" target= "_blank" ></a>
<a href= "index" target= "_blank" > Hyperlinks: Relative paths

<form></form> Forms
Name: Define table sole Name
Method= "Get/post"
action= "Request Address"
<textarea> text content </textarea> multiline text box
<select> drop-down box
<option select></option select> drop-down box contents
<input type= "type"/value= "content" > form elements
Text Single line TextBox
Placeholder Tip Information
Password Password entry box
Rodio Radio Box
CheckBox check box
Checked=checked selected by default
Submit button
Reset Reset button
Button Custom Buttons

CSS (cascading style sheets)
Internal style sheet
<style type= "Text/css" >
</style>
External style sheet
<link rel= "stylesheet" type= "Text/css" href= "/"/>
Inline style sheet
<div style= "height:100px"/>
/* */CSS comment characters
<!----! > HTML comment characters

a:link{} initial state
a:visited{} after being visited
a:hover{} When hovering over a mouse
a:action{} is accessed
Weight of inline style 1000
ID Selector 0100
Class selector 0010
Pseudo-Class selector 0010
Type selector 0001
Inheriting styles 0000
Include selectors: the sum of the weights that contain selectors

margin:0 auto;width:;
Float:left;
Font-style:normal/italic; Set Text to italic
Font-weight:normal (100-500)/blod (600-900);
Font-family: ""; Set Text font
Text-align:; Text Horizontal mode centered
Vertical-align:top/middle/bottom Vertical Mode Center
LINE-HEIGHT:PX; Set the height of text within a line
Font:blod Italic px/px "";
BORDER:PX Solid solid Line/dashed/dotted Bloubie
Text-decoration: Text Decoration
None: no decorations
Underline: Underline
Overline: Underline
Line-through: Add Strikethrough
Text-indent:+-2em (first line indent 2 characters)
Over-flow Overflow Property
Overflow:hidden; Text overflow disappears
Text-overflow:ellipsis; ellipsis when text overflows
Word-wrap:break-word; Force English letters and numbers to break without spaces

Display:block; The default width of the block element is as wide as the parent box to force line breaks to set the width height
Inline The element cannot be set to a wide height, and is displayed in a row by the content brace
Inline-block; Display in a row and can set the height of the inline element
None Do not display elements
Position: Positioning properties
Static default value
Absolute absolute Positioning
Relative relative positioning
Fixed absolute positioning
left:0;right:0;top:0;bottom:0;margin:0 Auto; To absolutely center The block element.
Z-index:; Level
opacity:0.5 (value 0-1,IE9 below is not valid) transparency
Filter.aloha (OPACITY=50); Value 0-100, non-IE browser invalid
Note: The parent element is transparent and the child element is transparent.
Cursor:pointer; The mouse touches the change hand.

Picture integration advantages and disadvantages:
Optimized image integration to reduce the number of requests to the server, thus improving the loading speed of the picture.
Reduce the volume of images by integrating pictures
Disadvantages add to the burden on developers

Pseudo element Selector
: After last child element
: Before the first element before adding a class
: First-letter; Defines the style of the first character
: First-line; Define the style of the first row
Pseudo-elements are not supported under IE8

Resolve height collapse
Overflow:hidden; Automatically retrieve child element widths
Clear:both; Clear float (adds a block element after the last floating element)
. Clear{zoom:1;}
. Clear:after{content: "", Clear:both;display:block;height:0;overflow:hidden}

Visibility:hidden/visible not visible/visible

html,body{height:100%}

Web optimization
Keyword <meta name= "keyword" content= ""/>
Description <meta name= "description" content= ""/>

Advanced Forms
form field set
<fieldset></fieldset>
Field Set Header
<legend></legend>
Form elements
Upload file box <input type= "File" >
Image field <input type= "image" src= "path"/>
Hint Info label <label for= "Bound control ID Name" ></label>
<input type= "hidden" value= "hidden"/>

<section></section> represents the document's columns, structure
<nav></nav> Navigation Labels
<article></article> Article tags
<aside></aside> Side Bar Navigation
<footer></footer> Footer
<mark></mark> highlighting text

<figure></figure> to represent a single piece of content on a Web page
Figcaption is used to represent the title of a figure as the first or last element.
Output display FORM element results
DataList provide a list of form options

<input type= "url" >
<input type= "number" value= "min=" max= "5" step= step hop min min Max maximum
<input type= "Email" required= "required" multiple= "multiple" > required determine if NULL multiple available comma-separated
<input type= "Date" value= "Yyyy-mm-dd"/>
<input type= "Month" value= "yyyy-mm"/>
<input type= "Week" value= "yyyy-w01"/>
<input type= "Time" value= "hh:mm"/>
<input type= "datetime-local" value= "yyyy-mm-ddt00:00"/>

Property Selector
[Tittle] Selects the elements of all title attributes
[Title=a] Select all elements of Title=a
[title= "1"] Select the element with the name 1
[class= "AB"]

[class~= "A"] selects all elements of a word
[Class|=a] Select an element with a complete word beginning with a
[Class^=a] Selects all elements beginning with a
[Class$=a] Selects all elements that end with a
[Class*=a] Select all elements with a

Structural pseudo-Class selectors
: Root selection of roots can be interpreted as HTML
Body:not (H1) all child elements except the child element H1
P:empty Select elements with empty contents (carriage return line is not empty)
: Target selects the element selected by the anchor.

UL Li:first-child Select the first child element
UL Li:last-child Select the last (child) element
UL Li:nth-child (2) Select the second (child) element
UL Li:nth-last-child (2) Select second to last (child element)
UL Li:nth-child (odd)/(even) Select sub-elements under odd/even number under positive numbers
UL Li:nth-of-type (2) The second child element of this element
UL Li:nth-last-of-type (2) about the second-to-last child element of this element
Div P:only-child only the P element is the only one (child) element that is valid

N operation
UL Li:nth-child (n+2) match starts with the second element
UL Li:nth-child (2n) Number of spouses
UL Li:nth-child (2n-1) matches odd numbers

Stateful pseudo-class selectors
Input:focus the state when the element gets focus
Input:enabled the state of the element when it can
The state of the input:disabled element when it is disabled
The state of the input:read-only element when read-only
The state of the Input:read-write element when it is not read-only
Case: read.html
The state of the input:checked element when it is selected
Case: checked.html
Input:default element has checked status by default
Case: default.html
The input:inderterminate element has not been selected to support only Google
Case: inderterminate.html
The state of the Input::selection element being selected
Need to add a prefix
Case: selection.html

Adjacent sibling selector
Li+li Select the next element
Case: jia.html
Span~p Select all sibling p elements after span
Case: bolang.html

Extended:
: lang (XX) Select the element with the Lang attribute value starting with XX
Ul>li Child selector can only choose a parent son
: After{content:url (path);} Add a picture
: after{content:attr (ID);} using element attribute values as content values not all attribute values can be displayed against single-label elements

Compatible prefixes
-moz-gecko Firefox
-ms-trident IE
-o-presto before Open Gate
-webkit-webkit apples

Text Shadow
text-shadow:x coordinate y-coordinate shadow size color
text-shadow:5px 5px 5px #f00;
text-shadow:5px 5px 5px #f00, 2px 3px 4px #00f;
Word-break:
Normal default
Keep-all can only wrap at half-width spaces or connected characters
Break-all allows line wrapping within a word (the entire word will be wrapped)
Word-wrap:
Normal default
Break-word allow line wrapping within words (simple line wrapping)

Displaying server-side fonts
@font-face {
Font-family:webfont;
Src:url ("FONTS/FONTIN_SANS_B_45B.OTF") format ("OpenType");
}
Format Declaration File type
OpenType *.OTF
Truetype*.ttf
*.eot format file does not need to declare format

Styles related to background and borders (example: banground1.html)
Background-clip: Setting the background display area
Border-boxpadding-boxcontent-box
Background-origin Specifies the starting point when drawing the background image
Border-boxpadding-boxcontent-box
Background-size the size of the image in the specified background
Size or Percentage
Cover on a proportional background
Contain just fills the size of one side.
Background-break Specifies how the background image of an inline element is looped when tiled, browser support is unfriendly, and you do not need to know

Color values
RGBA new color values can be set red, green and blue transparent
Background:rgba (100,100,100,0.5);
Benefits: can set the background or text transparency without affecting the child element opacity
Cons: Color setting complex 0-255; Cannot copy PS color at once

HSL Hue saturation brightness
BACKGROUND:HSL (180, 50%, 50%);
Hsla, guess what?
Background:hsla (180, 50%, 50%,0.5);

Box Shadow Properties
box-shadow:x coordinate y-coordinate shadow size color
box-shadow:5px 5px 5px #f00;
box-shadow:5px 5px 5px #f00, 2px 3px 4px #00f;

border-radius:10px setting rounded elements
can set 1-4 values a bit like box model settings

(border-radius:10px/10px; Set the vertical radius to the right of the left setting horizontal radius
This approach is almost impossible to use)

Border color
Border-color: #f00 #ff0 #f0f #00f;

Border-image:
Picture path
4 Directions
Width
Tiling method
Stretch Pull Round Tile

Bd-image.html

The grammar and application of CSS3 gradient

Linear gradient
Radial gradient
Repeating gradients

Linear gradient
Linear-gradient (direction [optional], color 1, color 2)
That is, One direction in the other direction straight gradient

Radial gradient
Radial-gradient (positive circle ellipse [optional], color 1, color 2)
A circular gradient from the origin to the finish color from inside to outside
Circle: The gradient is the largest circle;
Ellipse: (ellipse) is gradient based on the shape of the element, and the element is square to show the same effect as circle.

Repeating gradients
Repeating-radial-gradient
It's going to be a layer by loop.

Repeating-linear-gradient
It's going to be a layer by loop.

Excessive animation
Transition:2s linear All; (Must prefix-moz-)
Define excessive properties
Transition-property:all or property name, property name
Define excessive time
Transition-duration:2s
How long does the delay start?
Transition-delay:2s
Transition-timing-function:
Linear uniform ease slow speed
Ease-in slow start ease-out slow end
Ease-in-out Slow start slow end
Cubic-bezier Customizing Bezel Curves

Convert Properties
Transform: (-moz-)
Translate () mobile
By the translate () method, the element moves from its current position, based on the given left (x-coordinate) and top (y-coordinate) positional parameters

Example: transform.html

Rotate () rotation
The element rotates the given angle clockwise by the rotate () method. Negative values are allowed, and the elements rotate counterclockwise.

Scale () Scaling
With the scale () method, the dimension of the element increases or decreases, depending on the given width (X-axis) and height (Y-axis) parameters

Skew () tilt
By the skew () method, the element flips the given angle, based on the given horizontal line (X-axis) and vertical (Y-axis) parameters

Matrix () Fit notation
The matrix () method combines all 2D conversion methods.
The matrix () method requires six parameters, including mathematical functions that allow you to: rotate, scale, move, and skew elements.
Zoom x, tan (x degree), Tan (y degree), zoom y, position x, position y

Transform applies a 2D or 3D conversion to an element. C3
Transform-origin allows you to change the position of the element being converted C3

Matrix (n,n,n,n,n,n) defines a 2D conversion, using a six-value matrices.
Translate (x, y) defines 2D transformations, moving elements along the x and Y axes
TranslateX (n) defines the 2D transformation and moves the element along the X-axis.
Translatey (n) defines the 2D transformation and moves the element along the Y axis.
Scale (x, y) defines the 2D scaling transformation, changing the width and height of the element.
ScaleX (n) defines the 2D scaling transformation, changing the width of the element.
ScaleY (n) defines the 2D scaling transformation, changing the height of the element.
Rotate (angle) defines the 2D rotation, which specifies the angle in the parameter.
Skew (X-angle,y-angle) defines a 2D tilt transition along the x and Y axes.
SKEWX (angle) defines a 2D tilt transition along the X axis.
Skewy (angle) defines a 2D tilt transition along the Y axis.

3D
3D Conversion
3D Flip Method:
Rotatex (30DEG)
Rotatey (30DEG)
Note: Internet Explorer and
Opera
Rotatex, Rotatey methods are not supported.
Extended
Rotate and Rotatez () have the same effect

How does it work?

Transformations are an effect that changes the shape, size, and position of an element.

You can use 2D or 3D transformations to transform your elements.

Internet Explorer 10 and Firefox support 3D conversions.
Chrome and Safari need a prefix of-webkit-.
OPERA,IE9 still does not support 3D conversion it only supports 2D conversion

3 Ways to move the 3D position
Transform:translate3d (30px,30px,800px)
Transform:translatez (800px) TranslateX (30px) Translatey (30px);
Transform:translatez (800px) translate (30px,30px);

1D (z-axis) on the basis of 2D

3D distance
Perspective
element to use 3D effect requires perspective property mates
Method 1:
<div>
<p></p> div{perspective:200px;}
p{width:100px;height:100px;
Transform:translate3d (0,0,-50px); background: #ff9;}

</div>
Method 2:
<p></p> p{width:100px;height:100px;
Transform:perspective (200px) Translate3d (0,0,-50px);
Background: #ff9;}

3D Zoom Flip
Scale3d cannot be used alone, and it needs to be used in conjunction with other transformation effects.
Parent Box Settings
perspective:1200px
transform-style:preserve-3d; (3D view)
(child element maintains 3D position)
Transform-origin:left/top/right/bottom
Flip position
Example: preserve-3d.html

3D Animation

CSS3 @keyframes Rules
To create animations in CSS3, you need to learn @keyframes rules.
@keyframes rules are used to create animations.
Specify a CSS style in the @keyframes,
You can create an animated effect that changes from the current style to the new style.
Iexplorer 10, Firefox, and Opera support @keyframes rules and animation attributes.
Chrome and Safari need a prefix of-webkit-.
Note: Internet Explorer 9, and earlier versions, do not support @keyframe rules or animation properties.

Grammar:
KeyFrames zidingyi{
from {background:red;}
to {Background:yellow;}
to {Background:yellow;}
}
@-moz-keyframes myfirst{/* Firefox */{
from {background:red;}
to {Background:yellow;}
to {Background:yellow;}
}

CSS3 Animation

When you create an animation in a @keyframes,
Please bundle it to a selector, otherwise it will not animate.
You can bind an animation to a selector by stipulating at least the following two CSS3 animation properties:
Specify the name of the animation
Specify the duration of the animation

Animation properties
Animation: (can be understood as cyclic over-animation effect)
Animation-name: Animation name
Animation-duration: Time Default 0
Animation-timing-function: Curve Default Ease
Animation-delay: Delay Default 0
Animation-iteration-count: Number of plays default 1
Animation-direction: Whether to rewind after the cycle
Animation-play-state: Whether to pause the default running
Animation-fill-mode: The state after the animation has ended

Animation:name 5s linear 2s infinite alternate;

Key frame:
From to 0% 100%

Elastic box and responsive type

Weird box model
Elastic box
Responsive design Layout Concepts
Multi-column Layouts

Weird box model
CSS3 Box Model
Box-sizing:
Content-box standard box model (default)
Border-box Weird Box model

Elastic box
Display: Elastic box type

Box: Displays the object as an elastic telescopic box. (The oldest version of the telescopic box)
Inline-box: Displays the object as an inline block-level elastic expansion box. (The oldest version of the telescopic box)
Flexbox: Displays the object as an elastic telescopic box. (Telescopic box transition version)
Inline-flexbox: Displays the object as an inline block-level elastic expansion box. (Telescopic box transition version)

Flex: Displays the object as an elastic telescopic box. (The latest version of the Telescopic box)
Inline-flex: Displays the object as an inline block-level elastic expansion box. (The latest version of the Telescopic box)

Note: Setting the use of the elastic box on the parent element float vertical-align Multiple columns are not valid
Elastic box Flow (set on parent element)
Flex-direction:

Row: Horizontal left-to-right (left-aligned), arranged by default.
Row-reverse: Reverses the horizontal arrangement (right-aligned, from back to front, and the last item to the front.)
Column: vertical arrangement.
Column-reverse: Reverse the vertical arrangement, from the back to the front row, the last item on top.
Flex-direction.html

Elastic box Sub-element order (set on child elements)
Order
Negative number up front: (smaller, more front)
0 for original position
Positive integers back (bigger, later)

Order.html

Elastic box allocates the remaining space (set on child elements)
Flex-grow:
0 is the default
Assign a commission number

Flex-grow.html

Scalability (on set child elements)
Flex:
Assigning numbers by commission
0 0 cent allocation

Flex.html

Flex Line Wrapping (for parent class containers)
Flex-wrap:

NoWrap: Does not wrap when child elements overflow the parent container.
Wrap: Wraps automatically when a child element overflows the parent container.
Wrap-reverse: Reverse wrap arrangement.

Flex-wrap.html

Telescopic flow direction and line wrapping (for parent class containers)
Flex-flow:flex-direction Property Value Flex-wrap property value

Use 2 attributes together

Spindle horizontal alignment (set on parent class container)
Justify-content:
Flex-start: Left Justified
Flex-end: Right-justified
Center: Center Alignment
Space-between: Separate alignment
Space-around: Separate left and right margin alignment

Justify-content.html

Spindle vertical alignment (set on parent class container)
Align-content:
Flex-start: Top Justify
Flex-end: Bottom Align
Center: Center Alignment
Space-between: Separate alignment
Space-around: Align the top and bottom margins separately
Strecth up and down to align

Align-content.html

Side axis Alignment
Align-items (set in parent), align-self (set in child)
Flex-start: Top Justify
Flex-end: Bottom Align
Center: Center Alignment
Baseline baseline Alignment
Stretch up and down to align

Note: Align-items basic and Align-content almost 2 parameters no
Align-self.html

Retrieving the shrink ratio of a flexible box (child element Settings)
Flex-shrink:
Digital

Note: Scale is calculated when overflow

Flex-shrink.html
Retrieving elastic box Scaling datum values (child element settings)
Flex-basis:
Numerical

Note: Calculation of numerical proportions when overflow

Flex-basis.html

Responsive design Layout Concepts

<meta name= "viewport"? content= "Width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

Width=device-width: Width equal to the width of the current device;
Initial-scale=1: The initial scaling ratio (default is 1);
Maximum-scale=1: Allows the user to zoom to the maximum scale (default is 1)
User-scalable=no: User cannot zoom manually;

@media screen and (max-width:720px) and (min-width:320px) {
body{
background-color:red;
}
}
@media screen and (max-width:320px) {
body{
Background-color:blue;
}
}
This section of the media query means:

When the screen width of the device is between 320px--720px, the background color (background-color:red;) of the body in the media query overlaps the previous body background color,

When the screen width of the device is 320px and below, the body background color (background-color:blue;) of the body in the media query overlaps the previous body background color;

Advantage
Multi-terminal vision and operation experience very good style unified
Compatible with current and future new equipment
Most of the technologies in responsive web design can be used in WEBAPP development
Savings in development costs, maintenance costs and much less

Insufficient
Compatibility: Problem with low version browser compatibility
Mobile bandwidth traffic: Compared to mobile phone customized website, traffic slightly larger,
But comparing loading a full PC-side website is obviously much smaller
Code is cumbersome, there will be hidden useless elements, loading time extended
Compatible with a wide range of equipment workloads

For what?
For Web sites with heavy content, such as an image display, it is more appropriate to use responsive web design

What's not to use?
For heavily functional sites, such as e-commerce classes, it is recommended to use a standalone mobile site

(1) Control the layout on the mobile browser using the viewport meta tag
<meta name= "viewport" content= "width=device-width,initial-scale=1,maximum-scale=1"/>
(2) Hide the Apple browser toolbar and menu bar. Full Screen display
<meta name= "apple-mobile-web-app-capable" content= "yes"/>
(3) Setting the style of the Web app's status bar (the top bar of the screen)
<meta name= "Apple-mobile-web-app-status-bar-style" content= "blank"/>

@media Media Query

Basic syntax
The CSS syntax of the external union
<link rel= "stylesheet" href= "wide.css" media= "screen and (min-width:1024px)"/>
<link rel= "stylesheet" href= "mobile.css" media= "screen and (max-width:320px)"/>
<link rel= "stylesheet" href= "medium.css" media= "screen and
(max-width:1024px) and (min-width:320px) "/>

With CSS3, you can create multiple columns to lay out your text-just like a newspaper!

Multi-Column Properties:
Column-count
Column-gap
Column-rule

Internet Explorer 10 and Opera support multi-column properties.
Firefox needs a prefix-moz-.
Chrome and Safari need a prefix of-webkit-.
Note: Multi-column properties are not supported for Internet Explorer 9 and earlier versions

Create multiple columns
Column-count: Digital
property specifies the number of columns that the element should be delimited
Specify the interval between columns
Column-gap: Value
property specifies the interval between columns
Column rules
Column-rule:
property sets the width, style, and color rules between columns

Duolie.html

Mobile-page Layout
Advantages and disadvantages of mobile-side layouts
Advantages:
Mobile is basically compatible with H5 CSS3 all can be assured to use the CSS3 style to layout
Mobile page is generally not very large, so the label does not use much relative to one side development time no web end long
Disadvantages
The width and height of the moving side are different so the measurement size is called a puzzle. Unable to write size very precisely

Because the inability to use normal dimensions cannot be written directly pixels are usually written in 2 different ways
New Unit REM
REM is the font-size value that gets the HTML
Example html{font-size:100px;} then all child elements 1rem=100px;
Then through JS to get the screen size to develop a coefficient to change the font-size value of HTML
(When the screen size is 320px I want to set 1rem=1% then set the HTML font-size:32px; JS to set the screen size divided by 100)

VW,VH Get screen width high
100vw= width of the screen
1vw=1% Screen Size
This is more intuitive to get a percentage but a few phones are not supported so you need to control
VW,WH is the future trend

\
\
To move the size of the display normal need to add the following meta
<meta name= "viewport"? content= "Width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

When copying, pay more attention to punctuation, English words. If there is an error, I am not responsible!
Author: Porter
Again, I'm just a porter.

Front-end transduction common code