1, HTML5 (H5)
1. Newly added (modified / deleted) semantic tags
header
footer
main body
section area
Article article area
aside: irrelevant parts (e.g. advertisements)
nav
figure matching area
Fig caption description
Mark mark
time stamp
progress bar
2. New reform of form elements [traditional form elements] input:text/password/radio/checkbox/file/hidden/button/submit/reset
select
textarea text field
button
form
label ...
[add some form elements or form types]
input:search/email/tel/number/range/color/date/time/url...
//=>Oninput: there is no KEY-DOWM/KEY-UP on the mobile terminal, which is replaced by INPUT, indicating that the current form element is being operated (such as INPUT)
Age:
<input type="number" id="ageInp" step="1" max="65" min="18" value="25" disabled>
<input type="range" id="rangeInp" step="1" max="65" min="18" value="25">
<script>
//=>INPUT: there is no KEY-DOWM/KEY-UP on the mobile terminal, which is replaced by INPUT, indicating that the current form element is being operated (such as INPUT)
rangeInp.oninput = function () {
let val = this.value;
ageInp.value = val;
};
</script>New type function added in form element
1. Powerful functions (many things do not need to be imported into JS plug-in, such as calendar)
2. in the mobile terminal, according to the type of settings, the virtual keyboard retrieved from user input process is also different (for example, the number type text box retrieved the digital keyboard).
3. The newly added type provides CSS/JS verification, which can verify whether the content entered by the user conforms to the format (we used to solve this problem by ourselves, but now the new type in H5 has its own verification mechanism)
H5 sets a new attribute for the form element: placeholder is used as the default prompt for the text box (expand yourself as like as two peas: use JS to achieve the same effect as PLACE-HOLDER).
<style>
#userEmail {
border: 1px solid #DDD;
outline: none; /*When the text box gets the focus, take out the browser's default border selection color*/
}
#userEmail:valid {
/*Pass verification: it is not entered or the input format is correct*/
border-color: green;
}
#userEmail:invalid {
/*Failed verification*/
border-color: red;
}
#userEmail:valid + span:after {
content: 'The email format is correct';
}
#userEmail:invalid + span:after {
content: 'Mailbox does not conform to format';
}
</style>
<input type="email" id="userEmail" placeholder="Please enter email address!">
<span id="spanEmail"></span>
<script>
userEmail.onkeyup = function () {
//=>Checkvalidity: a new form content format verification method provided by H5 (any new form type with built-in verification mechanism can be verified based on this method)
if (this.checkValidity()) {
spanEmail.innerHTML = 'OK';
} else {
spanEmail.innerHTML = 'NO';
}
};
</script>
<script>
//=>Blur: lose focus
//=>Focus: get focus
userEmail.onkeyup = userEmail.onblur = function () {
let val = this.value.trim();
if (val.length === 0) {
spanEmail.innerHTML = 'Required';
return;
}
let reg = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if (!reg.test(val)) {
spanEmail.innerHTML = 'NO';
return;
}
spanEmail.innerHTML = 'OK';
};
</script><!--Drop down box (extension: realize three-level linkage of provinces, cities and counties)-->
Region:
<select id="selectCity">
<option value="">==Please select==</option>
<option value="Beijing">Beijing</option>
<option value="Shanghai">Shanghai</option>
<option value="Guangzhou">Guangzhou</option>
<option value="Shenzhen">Shenzhen</option>
<option value="Hangzhou">Hangzhou</option>
<option value="Chengdu">Chengdu</option>
</select>
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>3. Audio and video labels
audio
video
=>Let's bid farewell to the FLASH era
4.canvas drawing
5. Some new API s are provided
Local storage: localstorage / sessionstage
Get the geographical location: navigator.geography.getcurrentposition call the GPS positioning system inside the mobile phone to get the longitude, latitude and accuracy of the current mobile phone
Some API s are also provided so that we can access the software or hardware inside the mobile phone through the browser (but the performance is not very high and the compatibility is not particularly good)
6.websocket: a new transmission mode of socket.io client and server (instant messaging IM systems such as QQ and wechat are basically based on it)
2, CSS3
[selector]
#ID
.CLASS
TAG
*
SELECTOR1,SELECTOR1... Group selector
A .B{} Offspring
A.B{} Existing A Also have.B Of (secondary screening at the same level)
A>B{} Offspring
A+B{} Next brother
A~B{} brother
A[NAME=''] attribute selectors NAME!='' / NAME^=''(with..(beginning) / NAME$=''(with..(end) / NAME*='' ...
A:HOVER
A:ACTIVE
A:VISTED
A:LINK
A:AFTER
A:BEFORE
A:NTH-CHILD
A:NTH-LAST-CHILD
A:NTH-OF-TYPE
A:NTH-LAST-OF-TYPE
A:NOT
A:FIRST-CHILD
A:LAST-CHILD
...[style properties]
1. Basic common
border-radius
box-shadow
text-shadow
2. Background
background -color / -image / -position / -repeat / -attachment / ... background-size: 100px 100px Specific value of width and height 100% 100% Percentage of width and height (relative to the container) cover Zoom the picture to the appropriate scale(No deformation)，Used to cover the entire container contain The background image covers the whole container (but it will appear. If one side touches the edge of the container, stop covering, resulting in no background image in some areas) ... background-clip: Background image cutting border-box padding-box content-box background-origin: Set the starting point of the background image border-box padding-box content-box ... filter
3.CSS3 animation and deformation (2D/3D)
//=>Deformation is not animation
transform:
translate(X|Y|Z) displacement
scale zoom
rotate rotate
skew tilt
matrix matrix(The deformation is realized according to the matrix formula set by yourself)
transform-style:preserve-3d Implementation 3 D deformation
transform-origin: Starting point of deformation
//=>Transition animation
transition:
transition-property:all/width... Which attribute styles are changed to perform transition animation effects? By default ALL，All style attribute changes perform this transition effect
transition-duration:The transition animation takes us seconds, for example:.5s
transition-timing-function:How animation moves linear(default) ease ease-in ease-out ease-in-out cubic-bezier(Execute your own Bezier curve)
transition-delay:Set delay time,The default is 0 s No delay,Execute animation now
...
//=>Frame animation
animation:
animation-name The name of the motion track
animation-duration Duration of exercise
animation-timing-function Way of movement(default ease)
animation-delay delay time
animation-iteration-count Number of movements(Default 1 infinite Infinite motion)
animation-fill-mode The state after the motion is completed (after the frame animation is completed, the element will return to the starting position of the motion by default. If you want to
//It stays at the position of the last frame. Set this attribute value to forwards; backwards is the animation of the current frame. If there is a delay time, it will be delayed
//In the late waiting time, the element is at the first frame position of the frame animation; both is to make the frame animation have both forwards and backwards)
...
//=>Motion track for frame animation
@keyframes [Motion track name] {
from{
//Start style
}
to{
//End style
}
}
@keyframes [Motion track name] {
0%{
//Start style
}
50%{}
100%{
//End style
}
}4. New box model in CSS3
box-sizing: border-box / padding-box / content-box((default) //The change is what the WIDTH/HEIGHT set in CSS represents, and the border box represents the width and height of the whole box, //When we modify PADDING or BORDER, the box size will not change, and only the content will be scaled columns: Multi column layout flex: Elastic box model
5. Some other CSS3 properties
perspective:Sight distance implementation 3 D Required attributes for animation @media:A scheme of responsive layout for media query @font-face:Import Font Icon
3, Responsive layout development
Responsive Layout: it can be well displayed on equipment of different sizes, which is called Responsive Layout
Product form in the company:
1.PC side (width adaptation is required for full screen pages, but it is generally fixed)
2. The PC + mobile terminal uses the same set of items (simple pages, such as product introduction, official website of company display, etc.)
3. Mobile terminal (the size of mobile terminal equipment varies greatly, so responsive layout development is required)
H5 embedded in APP
H5 shared in wechat
WeChat official account
Applet
H5 accessed by browser
4. RN (react native) / ionic / Cordova... JS is the framework for APP development, which uses JS code to develop APP. Finally, the framework will convert the code into the code required by Android and IOS
How to realize responsive layout development? The most commonly used scheme: REM proportional scaling responsive layout
Mobile terminal H5 Development, first add META label
<!--meta:vp [Tab]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
REM and PX They are all style units, PX Is a fixed unit, REM Is the relative unit (relative to the root element of the current page HTML Font (set unit)
We started giving HTML The font size of is set to 100 PX(1REM=100PX)，Next, when we write the style, we use all the dimensions REM
//Set (the measured PX value / 100 is the REM value that should be set). If the FONT-SIZE of HTML remains unchanged, REM and PX are the same, but as
//If the font size is changed, that is, the conversion ratio between REM and PX is changed, all previous styles using rem as units will automatically follow the latest format
//The new scale is used for scaling (the FONT-SIZE of HTML is changed, and the elements in the whole page are scaled accordingly, which will affect the whole body)
In the real project, the designer gives us a set of design draft (common size: 640)*1136 750*1334 640*960 ...)，After getting the design draft, we write the style in strict accordance with the dimensions in the design draft
HTML{
FONT-SIZE:100PX;
}
Next, write the pattern and put the measured PX Divided by 100 becomes REM，All units are based on REM Come on
=>Suppose the design draft is 750,It's equivalent to 750 devices,1REM=100PX
Our page runs on a 320 device and we need to modify it HTML Font size, so as to realize the overall scaling of the page: 320/750*100 =>On current device HTML Font size for<sytle>
html {
/*
* 1.It's best not to write 10PX: the default minimum font of the browser is 12PX
* 2.font-size Set to, which is equivalent to how many pixels a rem is equal to
* 3.The reason why it is set to 100PX is to facilitate the calculation of the ratio of REM and PX conversion
*/
font-size: 100px; /*1REM=100PX*/
}
</sytle>