preface

The content of the article may not be comprehensive, but it is a lot to read slowly. I spent a long time organizing and sharing my thoughts, hoping to help you. However, there will inevitably be typing mistakes or misunderstanding points. If you find them, please tell me [email protected] by email. I will timely modify them. H5 Mobile terminal responsive layout development Hybrid development

H5 –> HTML 5 So what is HTML 5 is HTML version 5

HTML: Hypertext markup language

XHTML: More rigorous HTML

HTML5: The next generation of HTML specification (for mobile devices) DOCTYPE html>

First of all, recommend several good learning websites and books to learn H5

  • Developer.mozilla.org/zh-CN/docs/…
  • HTML5 compatibility check: caniuse.com/
  • Check your code online for compliance: validator.w3.org/
  • Recommended book: HTML5 Secrets, 2nd edition

Let’s take a look at what new method features and apis are coming with HTML 5 (Overview)

  • HTML / XHTML / HTML5
  • New semantic elements
    • The semantic elements used to build the page
    • A semantic element used to identify text
  • Adjusted, deleted elements
    • Delete: big/center/font
    • Adjust: Small/HR
  • Web forms and interactions
    • Add many new types
    • Several ways to validate forms
    • Text box content prompt
    • datalist
    • .
  • Audio/video
  • canvas
  • HTML5 API
    • Web Storage and local databases
    • Web Workers
    • File API
    • History API
    • .

The real learning of HTML5 is not to learn those tags, but to learn its various apis. It provides a large number of APIS for manipulating JS, including audio/Video Canvas, which are implemented based on JS

HTML 5 doesn’t just provide some tags, it also provides a number of methods PAI for manipulating many functions

Let’s start by looking at the adjustments added first, semantic tags removed, and additions to form source elements

What is tag semantics? -> Reasonable labels do the right thing

Why semantic tags? -> is conducive to SEO search engine optimization promotion SEO: search engine keyword ranking promotion SEM: Baidu bidding

TDK: Good for SEO

What is the TDK

TDK is actually the abbreviation of the English word title description keywords, which is the three definition tags, translated into Chinese: title, description and keywords.

Obviously, title is used to write a sentence and the website operation content of the title, tell the search engine what our website is doing, what is called.

Description is used to write a short paragraph, a brief overview of what the website does, so that it can be used to clearly have a general judgment of the website operation content.

Keywords (keywords) is used to define the core keywords of the main optimization of the site, the keyword page of the tag is not displayed, it is hidden in the source code, the purpose is to tell the search engine spider this site all the operation of the content will be related to these keywords.

So, where can I set TDK tags?

TDK tags as the most important tags on the page, naturally is to appear in the header of the page, and only appear in the header, that is, code… In between. We all know that spiders crawl from top to bottom, crawl from left to right, so the position of the head is also the most important position of a page, the weight of nature is also the highest. I’m sorry, but let’s talk about TDK.

The following attached a code, you can learn. Take the Everest website for example:

<title>Qomolangma Training - ten years focus on front-end training, well-known front-end training institutions</title>

<meta name="keywords" content="IT learning, front-end training, front-end development training, Web front-end training,javascript training,JS training,HTML5 training,CSS3 training, mobile terminal training,Node training,React training,Vue training,ReactNative training, Beijing front-end training, Beijing javascript training Beijing REACT Training, Beijing Vue training, Everest training">

<meta name="description" content="Everest training _ China front-end development training well-known brand, ten years focus on web front-end training, to focus on standing up, learning after passing the exam and then pay tuition, unconditional tuition refund within four weeks; 70% of the students are recommended by word of mouth, the strongest teaching team, the most in-depth curriculum system, and the teaching concept of students as the belief. We focus on the features of web training are: HTML5 training, Node. JS training, front-end development training, front-end training, mobile training,React training,Vue training, Webpack training,ReactNative training, front-end architect training. />


Copy the code

So that’s one of the things that came up and we continue our theme

  1. New semantic tags -> Common

    In compatible cases [block-level tags]

    1. Header Header area
    2. The main body
    3. Footer tail
    4. The article articles
    5. Nav navigation
    6. Figure illustrated
    7. Figure caption
    8. Aside has nothing to do with body content (usually used in the sidebar)
    9. Section Common area

    Inline label Mark Text mark time Date mark……

    1. Adjusted, deleted elements

    Delete: big/center/font -> these tags do not report errors but do not conform to the specification

    Adjust: Small/HR

    Small –> This tag is intended to shrink text, but is semantically defined as a small print in H5

    This tag is intended to be bold, but in H5 it is semantically meant to be an emphatic statement

    Hr –> This tag originally means there is a line in the style, but in H5 it is semantically translated as a split area

    Delete –> delete does not mean completely delete, you use the error, but do not recommend you use

    Adjust –> adjust on the basis of the original, modify to the latest meaning

    HTML 5 has compatibility issues

    To handle compatibility (IE6~8), just import a single JS: html5.min.js

    3. Web forms and interactions

    • The traditional form element form does not separate the form submission from the project
    <form action="/adduser. php">
< input type="submit" value="Carry">
</form>
Copy the code

    Input: text/radio/checkbox/button/submit/reset/hidden/file… Textarea select dropdown box

    <select name="" ID =""> <option value=""> <option value="">Copy the code

    • New form element in HTML5 or new type input in input:

    • Search -> Search box

    • Email -> Mail box

    • Tel -> Phone box

    • Number – > digital box

    • The date – > calendar box

    • Time – > date

    • Color – > color plate and frame

    • Range – > slide bar

    • .

      1) Powerful

      2) The corresponding keyboard can be retrieved on the mobile terminal to facilitate user input

      3) Verification of the input content format of the built-in form

    <div class="formBox"> <input type="email" ID ="emailInp" placeholder=" email" > <p id="emailTip"> CheckValidity () emailinp.onkeyDown = emailinp.onkeyUp = function () {if (! this.checkValidity()) { emailTip.style.opacity = 1; return; } emailTip.style.opacity = 0; } </script> -> CSS validation <style>. FormBox input:invalid+p {opacity: 1; } .formBox input:valid+p { opacity: 0; } </style> <div class="formBox"> <input type="email" id="emailInp" placeholder=" email" Id ="emailTip"> Invalid email format ~~</p> </div>Copy the code

    • Key knowledge in CSS3

      Recommended book: Illustrated CSS3

      • @font-face

      • CSS 3 selector

      • Common style properties: text and border handling

    • Background processing

    • Gradient background

(1) Gradient from top to bottom:

        ` ``background: linear-gradient(red, blue); 
Copy the code

(2) Gradient from left to right:

       ` `` background: linear-gradient(to right, red , blue);Copy the code

(3) Diagonal gradient (from top left to bottom right) :

       ```   background: linear-gradient(to bottom right, red , blue);
Copy the code

www.jianshu.com/p/133d7609e…

    • Background image processing

    Background-size specifies the size of the background image

The background-origin attribute specifies the location of the background image. The background image can be placed in the Content-box, padding-Box, or border-box area.

    • Filter

    Drop shadow Sets a shadow effect on the image:

    Grayscale converts an image to Grayscale:

    Opacity Indicates the Opacity of an image

    www.runoob.com/cssref/css3… >

    • Transfiguration and animation

      • transform

      • transition

      • animation

      • 3D deformation animation

    • The box model

      • box-sizing

      • column

      • flex box

    • Media adaptation and responsive layout development

    • Compatible with processing and prefixfree.min.js

    • Compatible with processing and prefixfree.min.js

    We’ll focus on media adaptation and responsive layout development

    Responsive layout development design

    • Overview of responsive layout development

    • Hybrid APP development

    • Responsive layout development techniques

      • viewport

      • Dpi adaptation

      • @media

      • rem

      • .

CSS precompiled language: less

lesscss.cn/

  • LESS profile
    • What is LESS
    • The effect of LESS

Less is a CSS precompiled language with similar precompilers such as Sass and Stylus. And the so-called precompilation, in fact, is the CSS markup language, in accordance with the object-oriented (programming language) way to write (variables, functions, judgment and other operations), but this writing browser can not be directly identified, we need to recompile the normal CSS code can; At the same time, it makes CSS more maintainable and extensible

Less can run on Node or in a browser.

  • Compile the LESS
LESS compilers are commonly divided into two types1.In the development environment (when developing projects) we are based on less2.53..min.js: Import less files based on link, but the rel must be stylesheet/less, so that the imported JS will find these less files, and compile less into CSS"stylesheet/less" href="css/index.less"> index.less File format/* The best way to import @import is to import LESS files (only then can we compile them together; Reference is only imported and used, not compiled; * /
@import './reset.less';
@import (reference) './common.less';

'./common.less'-> We call this file to use the methods in it, and ultimately want the return value of the method to be returned to us2.In the production environment (when the project is deployed online) we need to compile less to CSS, and then import the compiled CSS in the page based on node environment. - install NODE - $NPM install less -g - find the corresponding less file directory, in the directory: $lessc xxx.less xxx. CSS / -x (set -x to compress code)Copy the code
  • Variables in LESS

Variables that store values and represent values work with JS

  • Mixins hybrid

    • The basic use
    • The extend inheritance

    inheritance

    1. Common styles can be realized based on inheritance (principle: two style classes share the same set of code, but descendant styles cannot be inherited)

    .box1 {
	@A1: lightgreen;
	@W: 200;
	@H: 200px;

	.func_center(@W, unit(@H, px));

	box-sizing: border-box;
	width: unit(@W, px);
	height: @H;
	border: 5px solid @A1;
     
//-> .box1 img
	img {
		// @w-20 is understood as a variable name (the variable name can contain -)
		width: unit((@W)- 20, px);
		height: unit(unit(@H, px)- 20, px); } .box2 { &:extend(.box1); }.box2:extend(.box1) {} -> Descendant IMG styles cannot be inherited, only from box1Copy the code
    • Namespaces and scopes

    Each curly bracket is a private scope, and the variables used in it are private (if the and parameters are declared in the current scope).

    • ! important
    • Parametric Mixins Function with parameters

    function

1. Each style class can be used as a function that executes directly from other scopes (without passing arguments, parentheses can be used) => This type of function calls the original code exactly the same (including all its descendants).

2. Functions with arguments (create functions with parentheses) are also called directly, but when compiled into CSS, the function is not compiled, but the code executed by the function is placed in the selector of each fetching function

.func_center(@W: 100, @H: 100) {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: unit(-@H/2, px) 0 0 unit(-@W/2, px);
}

.func_transition(@property: all, @duration: . 5s, @timing: linear, @delay: 0s) {
	// transition: @property @duration @timing @delay;
	transition: @arguments;
}

img {
	.func_transition;
	.func_transition(@duration: 1s);
	.func_transition(opacity, 3.s, ease, 0s);
}

Copy the code
    • Mixin Guards sets conditions
  • Parent Selectors The current and Parent Selectors concatenation &

&a concatenator in a nested box that makes the following selector next to the parent selector. Box1 >img

​ &>img { ​ transform: skew(45deg); ​ }

  • Loops recursively
.loop(@n) when (@n<=4) {
	.loop(@n+1);

	.column-@{n} {
		width: unit(@n*10, %);
	}
}

.loop(1);
Copy the code

  • Built-in functions in less

    • Unit Unit Processing
    //-> unit: less built-in function to set or remove units
.box1 {
	@A1: lightgreen;
	@W: 200;
	@H: 200px;

	.func_center(@W, unit(@H, px));

	box-sizing: border-box;
	width: unit(@W, px);
	height: @H;
	border: 5px solid @A1;

	//.box1 img
	img {
		// @w-20 is understood as a variable name (the variable name can contain -)
		width: unit((@W)- 20, px);
		height: unit(unit(@H, px)- 20, px);
	}
Copy the code
    • Darken –> lighten up

Modifies the brightness of colors in elements. It takes the following parameters:

  • Color: This represents the color object.
  • Amount: It contains a percentage between 0 and 100%.
  • Method: This is an optional parameter that is used to adjust relative to the current value by setting it to relative.

Responsive layout development: Adapt H5 pages to different devices

Project type: 1. Pc-end products (generally used for large projects, and large projects make a set of products for PC and mobile terminals respectively) => Generally, there is no need to do responsive development, and the layout is fixed in width and height (100% restored design draft) => Sometimes for full-screen projects, we need to set the width of the outer container to percentage layout 2. Mobile products (PC access processing is not required) =>webApp: Put the DEVELOPED H5 page into the mobile browser, wechat and your own APP to run "Hybrid APP development" => small program =>APP: IOS, ANDROID, front-end (React Native, Flutter, Uni-app, Ionic, phoneGap, Cordova...) Mobile phone size (PX) : 320, 375, 414, 360, 480, 540... PAD size: 768 * 1024 (3) PC and mobile terminal with the same set of project = > need to deal with the responsive layout = > show this kind of products are generally simple enterprise stand For example: https://www.huawei.com/cn/ = > technology stack: @media responsive layout development "Dare to explore, dare to try => more thinking" 1. <meta name=. <meta name="viewport" content="width=320px..."> => Write a version in a fixed style (for example: 320), then divide it by 320 according to the width of the device, calculate the scale ratio, and finally make the whole HTML scale based on transform:scale.Copy the code

The foundation of responsive layout development

By default, regardless of how wide the device is, the HTML is rendered at 980(or 1024) width, so the entire page shrinks (and so does the content). Width =device-width: initial-scale=1.0; Initial scaling ratio 1:1 maximum-scale=1.0: maximum scaling ratio 1:1 minimum-scale=1.0: minimum scaling ratio 1:1 user-scalable=no: manual scaling is not allowed. <meta name="viewport" content="Width =device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">


Copy the code

????? What is REM and how does it lay out

Rem (font size of the root Element) : Refers to the unit of font size relative to the root element. The layout is essentially proportional scaling, generally based on width.

Turning a design into something on a mobile screen is similar to drawing a map and scaling it down

REM responsive layout development

Step 1: After receiving the design (now the design is usually 750PX), we set an initial REM to PX conversion ratio (usually set to 1REM=100PX, in order to facilitate later conversion). Step 2: Measure the dimensions of the elements in the design (PS measures PX units) and convert them to REM units when writing the style (divide by 100) =>100% restore the design step 3: Write a section of JS, get the width of the current device, divide it by the width of the design draft 750, multiply it by the initial conversion ratio 100, calculate how many pixels 1REM should be equal to under the current device (just change the FONT SIZE of the HTML can be); When the HTML font size is changed, all previous elements in REM are automatically scaled...... Now in real projects, the main responsive layout is MAINLY REM, part of the effect can be done based on FLEX, style tweaks are still needed based on @media... DPR fit: screen pixel density ratioCopy the code

Understand unit differences

Common units of the CSS: PX pixel (fixed unit) EM relative to the font size of the parent element rem (root EM) relative to the font size of the root element (HTML)................. % deg s/msCopy the code

App development history and Hybrid development

Native app

Native apps: IOS and ANDROID IOS: Object-C/Swift ANDROID: Java-native

advantages

Run directly in the operating system (can directly operate the software or hardware in the device, with good performance)

disadvantages

Content that is not cross-platform is not up to date or available to users in a timely manner

webApp

WebApp: H5 page => H5 + CSS3 + JAVASCRIPT

advantages

Cross-platform development (mobile browsers are all webKit kernel), mandatory automatic update, timely delivery of content to users

disadvantages

The H5 runs in the phone’s browser, not the operating system (which requires browser support to operate the phone’s hardware and software functions and doesn’t perform well).

Hybrid APP development

Hybrid APP development: => Embed webApp into the Webview of Native APP

Develop an Everest classroom APP whose shell is made of native materials

The operation software and hardware and some functions requiring high experience or payment sharing are handed over to native app development

Embed the H5 page in the WebView

A WebView is a browser not called a browser, and it renders pages based on the WebKit kernel

The front-end developer gives the url to the APP developer, and they embed it in the WebView

For example,

There’s a selfie feature in the WebView,

When this feature is used, it sends a request to the app

Access the cell phone camera

When the App receives the request, it will take the camera and take photos. After taking photos, the address of the photos saved in the album will be returned to H5

At this point, Hybrid focuses on the communication between H5 and APP

JSBridge

JSBridge principle: Inject all methods into webView that require H5 post-call APP (similar to window global objects)

Pseudo protocol transport

===> only for IOS, because Android is open source and not secure

When the touchStart event for taking a photo is triggered

window.location.href= “sports://kbs.com/photo?callback= fn” –>

When we send a window.location.href request from the H5 page and our H5 is running on the APP, all of our requests can be intercepted by the APP. When it intercepts that the request is a sports:// bogus protocol, This agreement is, however, we negotiate a better does not exist at all pseudo agreement in advance, he found that as long as it is sports: / / agreement not to jump pages, but call photo method pass our function to him And then take a picture for us, and then to help us put the function, and give us the photo function Then we can get the photos in this function

Common mobile libraries or plug-ins

Mobile TOUCH event processing

  • Zepto.js as a library to manipulate DOM (JQ on PC, ZP on mobile)
  • Swiper.min. js as a slide screen processing plug-in
  • Makisu.min.js as a plug-in for the drop-down 3D menu
  • Iscroll.js is a new plugin for jQuery
  • www.jq22.com/yanshi6625 ….

Mobile events — Almost forgot about you

Move the end finger event

Single finger event model Touch

  1. Touchstart Finger press down
  2. Touchmove Finger movement
  3. Touchend finger release
  4. Cancel the touchCancel operation (usually used to end an operation in an abnormal state)

Multi-finger event model Gestrue

  1. gestruestart
  2. gesturechange / gestrueundate
  3. gestureend
  4. gesturecancel

The mobile side has a separate touch event, and generally does not use the click event because there is a 300ms delay on the mobile side;

let box = document.querySelector('#box');
Copy the code
  • Touchstart is triggered when the element is touched
box.addEventListener('touchstart'.function (e) {
    console.log('toustart'); console.log(e); // In the Touches object, store the touch information in Touches; console.log(e.touches[0].clientX); });Copy the code
  • Touchmove is triggered when it slides on an element
box.addEventListener('touchmove'.function (e) {
    console.log(e.touches);
  });
Copy the code
  • Touchend is triggered when the finger leaves the element
box.addEventListener('touchend'.function (e) {
    console.log('touchend'); console.log(e.changedTouches); // TouchEnd does not have e.touches, the event is placed on the E.touches property})Copy the code