1, THE difference between HTML, XML, XHTML

  • HTML: Hypertext markup language, is the syntax is relatively loose, not strictWebLanguage;
  • XMLExtensible markup language, mainly used to store data and structures, extensible
  • XHTML: Extensible Hypertext markup language, based onXML, the role andHTMLSimilar, but with more strict syntax.

2. What does HTML5 have more than HTML?

1. Semantic labels

  • Header: Defines the header (header) of the document;
  • Nav: The part that defines navigation links;
  • Footer: Defines the footer (bottom) of a document or section;
  • Article: Define the content of the article;
  • Section: Defines a section (section) in a document.
  • Aside: Define content outside of the content it is in (side);
  • Detail: Describes the details of a document or part of a document;

2. Media labels

(1) Audio

<audio src='' controls autoplay loop='true'></audio>
Copy the code

Properties:

  • Control panel
  • Autoplay Autoplay
  • Loop = ‘true’

(2)

<video src='' poster='imgs/aa.jpg' controls></video>
Copy the code

Properties:

  • Poster: Specifies that the video has not been fully downloaded or that the user has not clicked on the cover that appears before playing. By default, the first pin of the current video file is displayed. Of course, you can also specify the poster by yourself.
  • Control panel
  • width
  • height

(3) Source tag Because browsers support different video formats, in order to be compatible with different browsers, you can specify the video source through source.

<video>
 	<source src='aa.flv' type='video/flv'></source>
 	<source src='aa.mp4' type='video/mp4'></source>
</video>

Copy the code

3. The form

Form type:

  • Email: Verify that the current email address is valid
  • Url: Verify URL
  • “Number” : only enter the number, other input can not, and the upper and lower arrow, Max attribute can be set to the maximum value, min can be set to the minimum value, value is the default value.
  • Search: after the input box will be provided with a small fork, you can delete the input content, more user-friendly.
  • Range: Can be provided with a range where Max and min can be set as well as value, where the value attribute can be set to the default value
  • Color: Provides a color picker
  • Time: time, minute, and second
  • Data: Select the date
  • Datatime: Time and date (currently only supported by Safari)
  • Datatime -local: date and time control
  • Week: week control
  • Month: month control

Form properties:

  • Placeholder: hint

  • Autofocus: Automatically obtains focus

  • Autocomplete = “on” or autocomplete= “off” To use this property there are two prerequisites:

    • The form must have been submitted
    • You must have a name attribute.

  • Required: The input field cannot be empty and must have a value to be submitted.

  • Patte =”^(+86)? \d{10}$”

  • Multiple: Multiple files or email addresses can be selected

  • Form =” ID of form form”

Form events:

  • Oninput Fires this event whenever the content of the input box in the input changes.
  • Oninvalid This event is triggered when validation fails.

4. Progress bar and metric

  • The progress TAB: indicates the progress of the task (not supported by IE and Safari), Max indicates the progress of the task, and value indicates how much has been completed

  • Meter property: used to display remaining capacity or remaining inventory (not supported by IE and Safari)

    • High /low: Specifies the range to be considered high/low
    • Max /min: specifies the maximum/minimum value
    • Value: Specifies the current measurement value

Setting rule: min < low < High < Max

DOM query operations

  • document.querySelector()
  • document.querySelectorAll()

The object they choose can be a tag, a class (you need to add a dot), or an ID(you need to add a #)

6. The Web store

HTML5 provides two new ways to store data on the client:

  • LocalStorage – Data store with no time limit
  • SessionStorage – Data store for a session

7. Other

  • Drag and drop: Drag and drop is a common feature of grabbing an object and then dragging it to another location. Set elements to be drag-and-drop:
<img draggable="true" /> Copy the codeCopy the code
  • Canvas: The Canvas element uses JavaScript to draw an image on a web page. A canvas is a rectangular area that you can control every pixel of. Canvas has multiple ways to draw paths, rectangles, circles, characters, and add images.
<canvas ID ="myCanvas" width="200" height="100"Copy the code
  • SVG: Scalable vector graphics (SVG) is used to define vector-based graphics for use on the Web. It uses an XML format to define graphics so that images can be enlarged or resized without loss of quality. It is a World Wide Web Consortium standard
  • Geolocation is used to locate a user’s position. ‘

Summary: (1) Added semantic tags: Nav, Header, footer, aside, Section, article (2) Audio and video tags: Audio, video (3) Data storage: LocalStorage, sessionStorage (4) Canvas, Geolocation, WebSocket (5) Input tag added attributes: Placeholder, AutoComplete, AutoFocus, Required (6) History API: go, forward, back, PushState

The removed elements are:

  • Pure expressive elements: Basefont, big, center, font, S, strike, TT, U;
  • Elements that negatively affect usability: frame, frameset, noframes;

3. Difference between SRC and href

SRC and href are both used to refer to external resources. The difference between them is as follows:

  • SRC: a reference to a resource that is embedded in the current tag. SRC downloads the resource it points to and applies it to the document, such as a request JS script. When the browser parses this element, it suspends the downloading and processing of other resources until the resource is loaded, compiled, and executed, so the js script is usually placed at the bottom of the page.
  • Href: a hypertext reference that points to a web resource and links it to the current element or document. When the browser recognizes the file it is pointing to, it downloads the resources in parallel and does not stop processing the current document. This parameter is used on labels such as A and link.

4. Semantic understanding of HTML

Semantic refers to the choice of appropriate tags (code semantic) based on the structure of the content (content semantic). In layman’s terms, doing the right thing with the right label.

The advantages of semantics are as follows:

  • Machine friendly, with semantic text expressive rich, more suitable for search engine crawlers to crawl effective information, conducive to SEO. In addition, semantic classes also support screen reading software that automatically generates directories based on articles;
  • Developer friendly, using semantic tags to enhance readability, clearer structure, developers can clearly see the structure of the web page, facilitate the development and maintenance of the team.

Common semantic tags:

<header></header> header <nav></nav> Navigation bar <section></section> Block (with semantic div) <main></main> Main area <article></article> Main content <aside></aside> sidebar <footer></footer> bottomCopy the code

5. What meta tags are commonly used

Meta tags are defined by the name and content attributes, which describe the attributes of the web document, such as the author of the web page, description of the web page, keywords, etc. In addition to the HTTP standard, some names are fixed as common usage, but developers can also customize names.

Meta tags:

(1) Charset, which describes the encoding type of an HTML document:

<meta charset="UTF-8" >
Copy the code

(2) Keywords, page keywords:

<meta name="keywords" content=" keywords" />Copy the code

(3) Description:

<meta name="description" content=" page description" />Copy the code

(4) Refresh, page redirection and refresh:

<meta http-equiv="refresh" content="0; url=" />Copy the code

(5) Viewport, suitable for mobile terminal, can control the size and proportion of viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Copy the code

The content parameter has the following types:

  • width viewport: width (numeric /device-width)
  • height viewport: height (numeric /device-height)
  • initial-scale: Initial scale
  • maximum-scale: Indicates the maximum scaling ratio
  • minimum-scale: Indicates the minimum scale
  • user-scalable: Whether to allow user scaling (yes/no)

(6) Search engine index mode:

<meta name="robots" content="index,follow" />
Copy the code

The content parameter has the following types:

  • all: Files will be retrieved and links on the page can be queried;
  • noneFiles will not be retrieved, and links on the page will not be queried;
  • index: Files will be retrieved;
  • follow: Links on the page can be queried;
  • noindex: The file will not be retrieved;
  • nofollowLinks on the page cannot be queried.

6. What are the in-line elements? What are the block-level elements? What are the void elements?

  • The inline elements are:a b span img input select strong;
  • Block-level elements are:div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p;

An empty element is an HTML element with no content. Empty elements are closed in the opening tag, i.e. empty elements have no closing tag:

  • Common examples are:<br>,<hr>,<img>,<input>,<link>,<meta>;
  • Rare examples are:<area>,<base>,<col>,<colgroup>,<command>,<embed>,<keygen>,<param>,<source>,<track>,<wbr>.

7. How to use HTML5 offline storage and how does it work

Offline storage means that the site or application can be accessed normally when the user is not connected to the Internet, and the cached files on the user’s machine can be updated when the user is connected to the Internet.

** Principles: **HTML5 offline storage is based on a new.appCache file caching mechanism (not storage technology), using the parse list on the file to store resources offline, these resources will be stored like cookies. Later, when the network is offline, the browser displays the data stored offline

(1) Create a manifest file with the same name as HTML and add the manifest attribute to the page header:

<html lang="en" manifest="index.manifest">
Copy the code

(2) Write resources to be stored offline in the cache.manifest file:

CACHE MANIFEST #v0.11 CACHE: js/app.js CSS /style.css NETWORK: resourse/logo.png FALLBACK: / /offline.htmlCopy the code
  • CACHE: indicates the list of resources that need to be stored offline. Since the pages containing the manifest file are automatically stored offline, you do not need to list the pages themselves.
  • NETWORK: Indicates that the resources listed below can be accessed only when they are online. They are not stored offline, so they cannot be used offline. However, if a resource is the same in the CACHE and NETWORK, the resource will be stored offline, which means the CACHE has a higher priority.
  • FALLBACK: if access to the first resource fails, then the second resource will be used to replace it. For example, this file indicates that if access to any of the resources in the root directory fails, then offline.

(3) When the window. ApplicationCache is in offline state, perform offline cache operations.

How to update the cache:

(1) Update the manifest file

(2) Through javascript operations

(3) Clear the browser cache

Notes:

(1) Browser capacity limits for cached data may vary (some browsers set a limit of 5MB per site).

(2) If the manifest file, or one of the internally listed files, cannot be downloaded properly, the entire update process will fail, and the browser will continue to use all the old cache.

(3) The HTML referencing the manifest file must be the same as the manifest file, in the same domain.

(4) Resources in the FALLBACK must be the same as the manifest file.

(5) When a resource is cached, the browser directly requests the absolute path to access the resource in the cache.

(6) Even if the manifest attribute is not set for other pages in the site, the requested resources will be accessed from the cache if they are in the cache.

(7) When the manifest file changes, the resource request itself will trigger the update.

8. How do browsers manage and load HTML5 offline storage resources?

  • In the online case, the browser finds the MANIFEST attribute in the HTML header, and it requests the manifest file. If it’s the first time you visit the page, the browser downloads the corresponding resources based on the contents of the manifest file and stores them offline. If the page has been accessed and the resources have been stored offline, then the browser will use the offline resources to load the page, and then the browser will compare the new manifest file with the old one, and if the file hasn’t changed, it won’t do anything, and if the file has changed, The resources in the file are redownloaded and stored offline.
  • When offline, the browser directly uses the resources stored offline.

9. What are the advantages and disadvantages of iframe?

The iframe element creates an inline frame (that is, an inline frame) that contains another document.

Advantages:

  • Used for slow loading content (such as ads)
  • You can make scripts downloadable in parallel
  • Communication across subdomains can be achieved

Disadvantages:

  • The iframe blocks the onLoad event on the home page
  • Cannot be identified by some search engine lines
  • It produces a lot of pages and is not easy to manage

10. What is the function of label? How to use it?

Label defines the relationship between form controls: When the user selects the label label, the browser automatically shifts its focus to the form control associated with the label.

  • Usage method 1:
</label> <input type="text" id="mobile"/Copy the code
  • Usage method 2:
<label>Date:<input type="text"/></label>
Copy the code

11. The difference between Canvas and SVG

(1) SVG: SVG Scalable Vector Graphics is a language for 2D Graphics based on extensible Markup Language (XML) descriptions. SVG being XML-based means that every element in the SVG DOM is available and you can attach Javascript event handlers to that element. In SVG, every drawn graph is treated as an object. If the attributes of an SVG object change, the browser can automatically reproduce the graphics.

Its characteristics are as follows:

  • Resolution independent
  • Support for event handlers
  • Best for applications with large rendered areas (such as Google Maps)
  • High complexity slows down rendering (and any application that overuses the DOM is not good)
  • Not suitable for gaming applications

(2) Canvas: Canvas is a Canvas, which is used to draw 2D graphics through Javascript and is rendered pixel by pixel. When its position changes, it is redrawn.

Its characteristics are as follows:

  • Resolution dependent
  • Event handlers are not supported
  • Weak text rendering capability
  • The ability to save the resulting image in.png or.jpg format
  • Best suited for graphics-intensive games where many objects are frequently redrawn

Note: A vector graph, also known as an object-oriented image or drawing image, is mathematically defined as a series of points connected by lines. Graphic elements in a vector file are called objects. Each object is a self-contained entity with properties such as color, shape, outline, size, and screen position.