This is the second day of my participation in the August More text Challenge. For details, see:August is more challenging

Without further ado, cut to the chase

1. The H5 new features

  • Semantic tags:header,nav,footer,article,section,aside
  • Media Label:video,audio,source
  • Form type (type) :email,url,number,search,range,color,time,date,datetime,datetime-local,week,month
  • Form properties:placeholder,autofocus,autocomplete,required,pattern,multiple,form

2. Understand label semantics

  • In short, do the right thing with the right label. The semantic meaning of the tag makes the tag easier to understand, so that people can know at a glance what the tag is used for.

Drag is allowed: draggable=true

Why use semantic tags:

  • Higher readability
  • Easier to SEO

3.H5 Drag API

Events for the element being dragged:

  • ondrag: Event when dragging an element (continuously fired)
  • ondragstart: Event when you start dragging an element
  • ondragend: The event that ends dragging an element
  • ondragleave: Event when the mouse leaves the drag element

Events for dragging an element to the target (events for the target) :

  • ondragenter: The event when the dragged element enters the target element
  • ondragover: Event when the dragged element stays on the target element (fired continuously)
  • ondrop: The event when the dragged element is released over the target element
  • ondragleave: Event when the mouse leaves the drag element

4. Mouse-related events

  • mouseover: Triggered when the mouse moves inside the target element (including child elements) (YesThe bubbling)
  • mouseenter: Fired when the mouse moves over an element (noneThe bubbling)
  • mouseout: Fired when the mouse moves away from the target element or the child element is turned off (yesThe bubbling)
  • mouseleave: Triggered when the mouse moves out of an element (noneThe bubbling)

5. The difference between href and SRC

Principle:

  • srcIs said toresourcesthereference.srcPoint to thecontentWill bedownloadandThe embeddedTo the currentThe labelThe position of
  • hrefIs saidHypertext reference.hrefUsually point toNetwork resources“And built upPoints to a resourcewithThe current documentBetween theLink relations

Handling method:

  • srcWhen the browser parses the elementsuspendedDownloading and processing other resources,untilThe element resourceDownload, compile, and executeBefore proceeding to other tasks (e.gJsThe scriptsrc, soJsReferences to scripts are generally placed inAt the bottom of the)
  • hrefOther tasks will occur when the browser parses to this elementParallel downloads.Don't stopProcessing of the current document

6. The difference between Alt and title in img

  • alt: The network speed is slow or other errors occurThe picture cannot be displayed properlyIs displayedaltIs set to
  • title: when the mouseMove above the imageIs displayedtitleIs set to

7. Inline elements, block-level elements, empty elements

  • Inline elements:a,b,span,img,input,textarea,lable,button,select,small,strongEtc.
  • Block-level elements:dl,dt,dd,ul,li,ol,p,div,h1-h6,section,aside,article,video,audioEtc.
  • Empty elements:br,hr,img,input,link,meta,areaEtc.

Main memories:

  • Inline elements:a,b,span,img,input,textarea,select
  • Block-level elements:dl,dt,dd,ul,li,ol,p,div,h1-h6
  • Empty elements:br,hr,img,input,link,meta,area

8. Meta tags

Meta tags are used to provide meta information about the page, such as search engine keywords, descriptions, and copyright information

Two attributes of the meta tag:

  • http-equiv
  • name

The two attributes of the meta tag have different parameters

  1. nameProperties:
    • Usage:
        <meta name="Parameters" content="Specific description">
Copy the code
    • Key words:keywords(Tell search engines your keywords)
        <meta name="keywords" content="Novel, Journal.">
Copy the code
    • Description:description(Description of site content)
        <meta name="description" content="It's a website that publishes novels and personal journals.">
Copy the code
    • Viewport:viewport(important), often used to design mobile web pages
        <meta name="viewport" content="width=device-width, initial-scale=1">
Copy the code
    • Index mode:robotsUsed to tell search engine crawlers which pages need to be indexedcontentThere areall,none,index,noindex,follow,nofollow)
        <meta name="robots" content="none">
Copy the code

In my opinion, in the name attribute, the commonly asked parameters are: Viewport, description, robots (in addition to the name attribute there are author, generator, copyright, revisit-after, renderer parameters, you can see that Summary of HTML Meta Tags and Introduction to The Use of Attributes

  1. http-equivProperties:
    • Usage:
        <meta name="Parameters" content="Specific description">
Copy the code
    • Character set setting:content-Type
        <! -- The following two words are equivalent -->
    <meta charset="utf-8"> <! -- H5 -->
    <meta http-equiv="content-Type" content="text/html; charset=utf-8"> <! -- HTML -->
Copy the code
    • Browser rendered version:X-UA-Compatible
        <! -- Specify IE and Chrome to render the current page using the latest version -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
Copy the code

Other parameters include refresh, cache-control, expires, and set-cookie

9. Viewport in meta tag

The Viewport in the meta tag can be used to solve mobile adaptation problems

  • Don’t setviewportIs displayed, the default viewport width is960
  • Set upviewport, only configuredwidthWithout configurationinitail-scaleThe default viewport width iswidth
  • Set upviewport, only configuredinitail-scaleWithout configurationwidthIn accordance withinitail-scaleGets the viewport width (Initial-scale = screen width/viewport width)
  • Set upviewport, and simultaneously configuredinitail-scalewithwidth, the width of the viewport iswidthValue, page according toinitail-scaleScale to scale
  • The common configuration code is as follows: 
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
Copy the code

Here is a table of the values and values in the viewport content, from MDN:

10. What tags can be in the head tag

, ,

11. Pros and cons of iframe

  1. advantages
    • The ability to fully display embedded web pages
    • Increase code reuse
    • Can be used to load third-party resources
    • Easy page change
  2. disadvantages
    • Generate multiple pages, inconvenient management
    • Too many pages may cause scrollbars, which can degrade the user experience
    • Is not conducive to SEO
    • The compatibility is not good, and the display may not be normal on the mobile terminal
    • The number of HTTP requests increases, which increases the server burden

12. What does DOCTYPE do? What are strict mode and promiscuous mode? How?

  • declaration is called a file type definition, also known as a DTD, and is intended to tell the browser what type of file the file is and what specification to parse the file with. And,
    declaration must be written on the first line of the HTML document.

  • Strict schema (also known as standard schema) : Files are parsed according to W3C standards

  • Promiscuous mode (also known as weird mode or compatibility mode) : Document parsing in the browser’s own way (backward compatibility), usually mimicking the behavior of older browsers and keeping older sites working

Distinguish (according to DTD) :

  1. Strict mode
    • strictDTD
    • There areURIThe transition ofDTD
  2. Mixed mode
    • There is noURIThe transition ofDTD
    • There is noDTDorDTDIncorrect format

Note: There is no strict mode or promiscuous mode in H5

13. Progressive enhancement and graceful degradation

  • Progressive enhancement: At first, it is designed for the lower version of the browser to ensure the normal use of basic functions, and then it is improved and supplemented for the effect, interaction and other aspects of advanced browsers
  • Graceful degradation: Build full functionality directly at first, and then make it compatible with older browsers
  • The difference between: Progressive enhancement isBy Jane to numerousWhile elegant demotion isFrom high to low

14. The causes and solutions of browser garbled characters

The browser is garbled.

  • Web source codeCoding andWeb contentCode conflicts (for example, one isgbk, anutf-8)
  • Web page codeAnd from theData retrieved from the databaseCode conflict
  • Browser failureAutomatic detectionWeb page code

Solution:

  • Development time determinationcodingIs there a conflict
  • If there is a conflict, you need totranscoding
  • Make adjustments in the browser for encoding conversion

15.Web Worker

Web Worker can run Javascript programs in another thread other than the main thread through API, realizing true parallelism. While the main thread is running, Web Worker threads also execute tasks in the background simultaneously, without interfering with each other.

Purpose: Web Worker’s Woker thread can be used to perform high-latency, time-consuming tasks and then return the results to the main thread, saving time and resources.

Recommended article: “Front-end ER to learn webWorker” – OBKoro1

The last

At present, the frequency of the relatively high to see so many, after seeing other content to add in, if there are written wrong place, please correct, thank ^_^

– (finished)