A DTD is introduced

  • A DTD (Document Type Definition) is a set of machine-readable rules that define the Definition of all allowed elements and their attributes and hierarchies in a particular version of XML or HTML. When parsing a web page, browsers use these rules to check the validity of the page and take action accordingly.
  • A DTD is a declaration of an HTML document that also affects the rendering mode (working mode) of the browser

What’s the difference between SGML, HTML, XML, and XHTML?

  • SGML is the standard General Markup Language, which is an international standard language for defining the structure of electronic documents and describing their content. It is the origin of all electronic document markup languages
  • HTML (HyperText Markup Language) is a Language that defines the meaning and structure of web page content.
  • XML is the extensible markup language, which is the development direction of the future web language. The biggest difference between XML and HTML is that the tags of XML can be created by themselves, and the number is unlimited, while the tags of HTML are fixed and limited.
  • XHTML is an XML-based markup language that is not fundamentally different from HTML, but is more rigorous than HTML.
  • In order to standardize HTML, the W3C developed the XHTML1.0 standard in combination with XML. This standard does not add any new tags, but merely standardizing HTML according to the requirements of XML. The main differences between the two are:
    • The docType declaration at the top of the document is different. The docType declaration at the top of the XHTML docType explicitly specifies how the XHTML DTD is written
    • Elements must always be properly nested
    • The label must always be closed
    • The tag name must be lowercase
    • Special characters must be escaped
    • The document must have a root element
    • Attribute values must be in double quotes""enclosed
    • Disables attribute minimization (for example, must be usedchecked="checked"Rather thanchecked)

What’s the use of a DOCTYPE?

  • <! DOCTYPE>The declaration is in the first line of the HTML document, at<html>Before the label. Tells the browser’s parser to render the document in standard mode. A nonexistent or incorrectly formatted DOCTYPE can cause the document to be rendered in compatibility mode.
// Return the document type definition (DTD) associated with the current document or null if the current document does not have a DTD.
document.doctype
Copy the code
  • Doctype

What is the difference between standard mode and compatibility mode? What do they mean?

  • Standard mode: Also known as strict mode, this is when browsers parse code according to W3C standards.

    • Both the standard mode rendering and the JS engine parsing run to the highest standards supported by the browser.

  • Compatibility mode: Also known as weird mode or promiscuous mode, this is when the browser parses the code in its own way.

    • In compatibility mode, pages are displayed in a loose, backward-compatible manner that emulates the behavior of older browsers in case the site doesn’t work.

  • How to distinguish:

    • In THE HTML4.01 standard, whether the browser parses in standard mode or compatible mode is directly related to the DTD in the web page, because HTML4.01 is based on SGML, which defines the rules of the markup language so that the browser can render it correctly. And there are three
    • HTML5 is not based on SGML, so there is no need to reference a DTD. You just have to declare it at the top<! DOCTYPE html>

  • Objective: To prevent the browser from switching to “compatibility mode” while rendering the document.

  • Weird mode and standard mode

  • Quirks Mode affects HTML pages

What’s the difference between using link and @import when importing styles to a page?

  • Link is an XHTML tag. In addition to loading CSS, it can also be used to define RSS and REL connection attributes. @import is provided by CSS and can only be used to load CSS;

  • When the page is loaded, the link will be loaded at the same time, while the CSS referenced by @import will wait until the page is loaded.

  • @import is proposed by CSS2.1, and can only be recognized in IE5 or above, while link is XHTML tag, no compatibility issues;

  • The weight of the link style is higher than the weight of @import.

What’s the difference between Get and Post in an HTML form’s action method?

  • Get: The default method for Form.

  • Get is used to Get data from the server. Post is used to pass data to the server

  • Get adds data from the form in the form name=value to the URL pointed to by the action, using “?” for both. Join, and the variables are joined with “&”. Post puts the form data in the form body and passes it to the URL pointed to by the action in terms of variables and values

  • Get is not secure because during transmission, the data is placed in the requested URL. All actions of the Post are invisible to the user and placed in the request body

  • The amount of data transferred by Get is small, mainly due to the URL length. Post can transfer a large amount of data, so you can only use Post when uploading files

  • Get limits the value of the data set of the Form to ASCII characters. Post supports the entire ISO10646 character set

  • Get requests are cached by the browser. Post support will not

  • Get request parameters are kept intact in the browsing history. The parameters in Post are not retained.

  • GET and POST are essentially TCP links, no difference. However, due to HTTP regulations and browser/server restrictions, they are different in the application process.

  • GET generates a TCP packet. POST generates two TCP packets.

How does Meta Viewport work?

  • The meta ViewPort tag is used to set the width of the current viewport to equal the width of the deviceuser-scalbale="no"The user is not allowed to perform manual zooming
  • How a Viewport works: Mobile browsers typically render pages in a virtual window that is wider than the mobile screen. This virtual window is called a viewport. The purpose is to normally display the web pages without mobile terminal adaptation, so that they are fully displayed to users;
  • Viewport attribute values
attribute describe
width Width of the virtual viewport of the device.
height The height of the virtual viewport of the device.
device-width Physical width of the device screen.
device-height Physical height of the device screen.
initial-scale Initial scaling when the page is accessed. 1.0 cannot be scaled.
user-scalable Allows the device to zoom in and out with a value of yes or no.
minimum-scale The minimum scale allowed by the user. Table 1.0 cannot scale.
maximum-scale The maximum scale allowed by the user. Table 1.0 cannot scale. 
<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
Copy the code

What is the purpose of Meta?

  • metaThe element can be used to contain name/value pairs that describe HTML document attributes, such as author, character number, keyword list, document author, and so on
<! DOCTYPEhtml>
<html>
  <head>
    <! Meta Tags -->
    <meta charset="utf-8" />
    <meta name="language" content="english" />
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="Author Name" />
    <meta name="designer" content="Designer Name" />
    <meta name="publisher" content="Publisher Name" />
    <meta name="no-email-collection" content="[email protected]" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <! Search Engine Optimization Meta Tags -->
    <meta name="description" content="Project Description" />
    <meta
      name="keywords"
      content="Software Engineer,Product Manager,Project Manager,Data Scientist"
    />
    <meta name="robots" content="index,follow" />
    <meta name="revisit-after" content="7 days" />
    <meta name="distribution" content="web" />
    <meta name="robots" content="noodp" />

    <! -- Optional Meta Tags-->
    <meta name="distribution" content="web" />
    <meta name="web_author" content="" />
    <meta name="rating" content="" />
    <meta name="subject" content="Personal" />
    <meta name="title" content=" - Official Website." />
    <meta name="copyright" content="Copyright 2020" />
    <meta name="reply-to" content="" />
    <meta name="abstract" content="" />
    <meta name="city" content="Bangalore" />
    <meta name="country" content="INDIA" />
    <meta name="distribution" content="" />
    <meta name="classification" content="" />

    <! Meta Tgas for HTML pages on mobile devices -->
    <meta name="format-detection" content="telephone=yes" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <! -- http-equiv Tags -->
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />

    <title>HTML5 Meta Tags</title>
  </head>
  <body>.</body>
</html>
Copy the code
  • Meta Refresh
<! Redirect to the provided URL in 5 seconds. Set to 0 for immediate redirection -->
<meta http-equiv="refresh" content="3; url=https://juejin.cn/user/96412754251390" />
Copy the code
  • Note: If your site is not specifically designed for response and works well at this size, don’t use the response meta tag, as it will make the experience worse.
  • Stop using the viewport meta tag (until you know how to use it)
  • metatags

What are substitution elements and non-substitution elements

  • Replace the element: is the element that the browser determines to display specific content based on the element attributes of its tag, and the element generally has a fixed size (width to height or aspect ratio).
    • In HTML, elements like this haveimg.input.textarea.select.object, these are replacement elements, which have no actual content.
  • Non-substitution elementMost elements in HTML are non-replacement elements, they tell the browser the content and display it directly.
    • For example: the p tag, the browser will directly display the content of the P tag.
  • Tips: Replacement and non-replacement elements are not only found in inline elements, but also in block-level elements, such as embedded documentsiframe.audio.canvasIn some cases, it is also a replacement element.

What is the difference between block-level elements and inline elements?

  • In HTML4.01, elements are divided into two categories: Inlink (inline elements) and Block (block-level elements). The differences are as follows:
Block-level elements Inline elements
An exclusive line Not monopolizing a line
Width and height can be set (box model) The width and height cannot be set. The width and height are determined by the content inside the element. The top/bottom values of padding and margin do not apply to the element
It can contain inline elements and other block-level elements Inline elements can only contain text and other inline elements.
  • This is the default, but you can use itdisplayTo change whether it is block-level or inline
  • Inline and block-level elements

What are block-level elements and inline elements? What are the void elements?

  • The CSS specification states that every element has onedisplayAttribute, each element has a defaultdisplayValue. Such as:
    • Div defaultdisplayAttribute values forblockIs a block-level element;
    • Span the defaultdisplayAttribute values forinline, is an inline element.
  • Block-level elements:
    • <h1>-<h6>,<p>,<div>,<ul>,<ol>,<form>,<table>,<address>,<blockquote>,<center>,<dir>,<dl>,<fieldset>,<hr>,<menu>,<noscript>,<pre>,<noframes>,<isindex>
    • When the elementdisplayProperties forblock,list-item 或 table, the element becomes a block-level element.
  • Inline elements:
    • <a>,<img>,<input>,<span>,<textarea>,<label>,<select>,<abbr>,<acronym>,<b>,<bdo>,<big>,<br>,<cite>,<code>,<dfn>,<em>,<font>,<i>,<kbd>,<q>,<s>,<samp>,<small>,<strike>,<strong>,<sub>,<sup>,<tt>,<u>
    • When the elementdisplayProperties forinline,inline-block 或 inline-tableThe element becomes an “in-line element” when
  • Common empty elements: AN HTML tag that has no content inside the tag is called an empty element.
    • <br>,<hr>,<img>,<input>,<link>,<meta>
  • Unusual empty elements:<area>,<base>,<col>,<command>,<embed>,<keygen>,<param>,<source> <track>,<wbr>

What are optional tags? Why use it?

  • In HTML, certain elements have optional tags. In fact, it is possible to completely remove the start and end tags for some elements from an HTML document, even if the elements themselves are required.

  • P, li, TD, tr, th, HTML, head, body, etc. Such as:

<p>Paragraph one.
<p>Paragraph two.
<p>Paragraph three.
Copy the code
  • You don’t have to provide</p>End tag. The browser will detect that it needs them and display them correctly in the DOM anyway. But this can make writing difficult!
  • You can save some bytes and reduce the number of bytes that need to be downloaded in the HTML file.

For ease of reading, when there is content/text in your tag, include the closing tag.

What’s the difference between SRC and href?

  • SRC is used to reference resources, replacing the current element; Href is used to establish a connection between the current document and the referenced resource.
  • Href (hyperReference) : the browser does not block page parsing when it downloads resources in parallel. The same as the CSS introduced by link, the browser does not block page parsing when it downloads the CSS in parallel
    • Href refers to the location of a network resource and establishes a link between the current element (anchor point) or the current document (link), used for hyperlinking.
  • SRC (Resource) resources: When the browser encounters SRC, it pauses parsing until the resource has been downloaded or executed, which is why the script tag is at the bottom
    • SRC is the location to point to an external resource, which will be embedded in the document at the current tag location.
    • When a SRC resource is requested, the resource it points to is downloaded and applied to the document, such as elements such as JS scripts, IMG images, and frames.
    • When the browser parses this element, it pauses the downloading and processing of other resources until the resource is loaded, compiled, and executed. The same is true for elements such as images and frames, similar to embedding the pointed resource in the current tag. This is why the JS script is placed at the bottom and not at the head.

Img, title and Alt

  • titleIs the text that appears when the mouse is placed over the picture,titleIs a description of the picture and further explanation.
  • altDefines an alternate text description of the image.
  • Tips: Browsers do not always display images. When there are the following situations,altProperties can provide alternative information for an image:
    • Non-visual browsers (such as audio browsers used by people with visual impairments)
    • User chooses not to display images (e.g. to save bandwidth, or not to load third-party resource files including images for privacy reasons)
    • The image file is invalid or in an unsupported format
    • Browser disables images, etc
    • Pass as much as possiblealtProperty provides some useful information.
<!-- × -->
<img src="wenhao.jpg" alt="Image" />

<! -) -- -- >
<img src="wenhao.jpg" alt="The man with the question mark." />
Copy the code
  • What is the purpose of the Alt attribute on the image?
    • If the user is unable to view the image, the Alt attribute provides optional information for the image. The Alt attribute should be used to describe any image except those used for decorative purposes only, in which case it should be left blank.
    • Decorative images should have an empty Alt attribute.
    • Web crawlers use Alt tags to understand image content, so they are considered important for search engine optimization (SEO).
    • Adds accessibility at the end of the Alt tag.
  • img

Why use the srcset attribute in the IMG tag? Describe what happens when the browser encounters this property.

  • In order to design responsive images. We can use two new propertiessrcset 和 sizesTo provide additional resource images and tips to help the browser select the right one.
  • Srcset: Defines the set of images we allow the browser to select, and the size of each image.
  • Sizes: defines a set of media conditions (e.g. screen width) and specifies what image size is best when certain media conditions are true.
  • Processing process:
    • Viewing device Width
    • Check which media condition in the SIZES list is the first true
    • View the slot size given to the media
    • Loads the image closest to the selected slot size referenced in the SRcset list
<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">
Copy the code
  • Responsive images: If you are just changing the resolution, use srcset.
  • Responsive graphics tutorial

The role of the noscript tag

  • <noscript>The < script > element is used to define alternative content (text) if the script is not executed.
  • <noscript>The contents of the tag will only be displayed if:
    • The browser does not support scripts
    • The browser supports scripts, but scripts are disabled
<! - Give user-friendly tips! -->
<noscript>Your browser does not support JavaScript!</noscript>
Copy the code

What does the label do? How does it work?

  • labelA label defines the relationship between form controls, and when the user selects a label, the browser automatically shifts its focus to the form controls associated with the label.
  • There are two ways to use it: id binding and nesting
<label for="select">Love me,</label>
<input type="radio" id="select" name="love" value="love" />
<label>Hate me<input type="radio" name="hate" value="hate" /></label>
Copy the code

What is the difference between title and h1, b and strong, I and em?

  • <title> 与 <h1>The difference between
    • <title>Used for site information headers. A site can have more than onetitle, seo weight is higher thanh1;
    • <h1>Summarize the topic of the article, preferably one pageh1, seo weight is lower thantitle.
  • <b> 与 <strong>The difference between
    • <b>Bold for bold’s sake
    • <strong>In order to indicate the key content and bold, has the meaning of tone strengthening
  • <i> 与 <em>The difference between
    • <i>Italics for italics’ sake,<em>Italics for emphasis, and for search engines<strong> 和 <em> 比 <b> 和 <i>There’s more to it than that

rel="noopener"In what context should it be used and why?

<! -- home.html -->
<a href="./home.html" target="_blank">home</a>
<! -- <a href="./home.html" target="_blank" rel="noopener">home</a> -->

<! -- details.html -->
<h1>Pay attention not to get lost!</h1>
<script>
  window.opener.location = 'https://juejin.cn/user/96412754251390'
</script>
Copy the code
  • If you are using thetarget ="_ blank"The external link, your link should haverel="noopener"Property to prevent the tag from being misappropriated. If you need to support older versions of Firefox, userel="noopener noreferrer"
  • Conclusion:rel="noopener"Applied to hyperlinks to prevent open links from manipulating the source page

Why is it best to put the link tag between the heads?

  • the<link>The label on the<head></head>Between is the content required by the specification. In addition, it improves the user experience by gradually rendering the page.
  • Placing a style sheet near the bottom of a document prevents many browsers, including Internet Explorer, from progressively rendering the page.
  • Some browsers block rendering to avoid redrawing elements in the page if the page style changes.
  • This prevents the user from being presented with blank pages or unstyled content.

Is there an exception to why it is best to put the JS script tag before the body?

  • Scripts prevent HTML parsing during download and execution. the<script>The tag at the bottom ensures that the HTML is parsed first, rendering the page to the user as early as possible.
  • Exception: When your script containsdocument.write()At the right time.
    • But right now,document.write()Not recommended.
    • At the same time, will<script>The tag at the bottom means the browser cannot start downloading the script until the entire document has been parsed. A good way to do that is to say,<script>usedeferAttribute, put in<head>In the.

Specifies the number of HTML global attributes

  • accesskey: Sets shortcuts to provide quick access to elements
  • class: Sets the class identifier for the element. Multiple class names are separated by Spaces. CSS and JavaScript can obtain the element through the class attribute
  • contenteditable: Specifies whether the element content is editable
  • contextmenu: Customizes the right mouse button to pop up the menu
  • data-*: Adds a custom attribute to an element
  • dir: Sets the text direction of the element
  • draggable: Sets whether the element can be dragged
  • dropzone: Sets the element drag-and-drop type: Copy, Move, link
  • hidden: indicates whether an element is associated with the document. Style causes the element to not be displayed, but you cannot use this attribute to achieve the style effect
  • id: Element ID, unique within the document
  • lang: the language of element content
  • spellcheck: Whether to enable spell and grammar checking
  • style: Inline CSS style
  • tabindex: Sets the element to get focus, which can be navigated through the TAB
  • title: element
  • translate: whether element and descendant content needs to be localized

Please describe TDK in SEO?

  • In SEO, the so-called TDK istitle,description,keywordsThese three tags
    • titleThe title tag
    • descriptionThe description tag
    • keywordsKeyword tag

What templating engines have you used? Why use it?

  • Common template engines: Pug (formerly Jade), Haml, Handlebars, art-template, etc
  • Most of these template languages are similar in that they provide content replacement and filter capabilities for displaying data
  • Most template engines support custom filters to display content in custom formats.
!!!!!!!!! 5 HTML Head title = HelloWorld Body h1Copy the code

Compiled into

<! DOCTYPEhtml>
<html>
  <head>
    <title>HelloWorld</title>
  </head>
  <body>
    <h1>Use Jade to create a HelloWorld page</h1>
  </body>
</html>
Copy the code
  • It helps us write HTML code faster with less code.

What is an iframe? What are the pros and cons?

  • HTML inline frame elements (<iframe>) indicates embeddedBrowsing context. It can embed another HTML page into the current page.
  • An iframe is used to insert a third party page into a web page. Early pages used iframes mainly for the navigation bar, which many pages shared, so as to avoid repeated downloads when switching between pages.
  • Tips: You can place the tip text in<iframe></iframe>To prompt some browsers that do not support iframe
  • advantages
    • Easy to modify, analog separation, like some information management systems will be used.
    • The iframe displays the embedded web page as it is.
    • If there are multiple pages that reference the iframe, then you can change the content of each page that is invoked quickly and easily by simply modifying the contents of the iframe.
    • Web pages that have the same header and version for uniform style can be written as one page, nested with iframes, to increase code reuse.
    • Parallel loading script
    • Security Sandbox
    • Resolve slow loading third-party content. For example: ICONS and ads and other loading problems.
  • disadvantages
    • There is no meaning. Search engines can’t read this page, not good for SEO
    • It produces a lot of pages and is not easy to manage.
    • Even if the content is empty, it takes time to load.
    • The creation of an iframe is 1-2 orders of magnitude slower than a normal DOM element
    • Many mobile devices (PDA phones) cannot fully display the frame, device compatibility is poor.
    • Iframe framework pages increase HTTP requests to the server and are not desirable for large sites.
    • The iframe blocks the onLoad event on the home page.
    • The iframe and the home page share a connection pool, and browsers have restrictions on connections to the same domain, which affects the concurrent page loading.
    • If you need to use an iframe, it is better to dynamically add the SRC attribute to the iframe using javascript to bypass both of these problems
    • The Iframe framework can be confusing at times. If there are too many frames, there can be up, down, left, and right scrollbars, which can distract visitors and make the user experience poor.
  • Tips: Not recommended except for special needs. Currently, the benefits of iframes can be implemented using Ajax, so there is no need to use them.
  • iframe

What are the advantages of div+ CSS over table layouts?

  • Separation is convenient, quick revision, clear and concise, SEO
    • The manifestation is separated from the structure.
    • It’s easier to change the version, just change the CSS file.
    • Pages load faster, are clearly structured, and display succinct.
    • Easy to optimize (SEO) search engines are more friendly and easier to rank higher.

Many websites don’t use the table and iframe elements. Do you know why?

Since the browser renders the page from top to bottom, the table and iframe elements change the rendering rules so that they have to wait for their elements to load before rendering as a whole. The user experience can be very unfriendly.

  • There are other effects: See detailsWhy don’t we recommend a Table layout.iframeThis article has been mentioned, you can look up

What is the function of the lang attribute in HTML?

  • Help search engines with language detection by using page styles in the CSS :lang() pseudo-class spelling and grammar checker
:lang(zh) {
  font-size: 1.5 em;
}
Copy the code
  • The lang attribute of HTML
  • Description of the lang attribute of an HTML element in HTML
  • Lang =”zh” or lang=”zh-cn” for header declarations?

whatenctype='multipart/form-data'You mean?

  • enctypeProperty specifies how the form data should be encoded when submitted to the server.

HTML5

HTML5 is the latest revision of HTML (Hypertext Markup Language), which was standardized by the World Wide Web Consortium (W3C) in October 2014. The goal is to replace the HTML 4.01 and XHTML 1.0 standards established in 1999. It is a language for building and displaying content for the World Wide Web, the core technology of the Internet.

Is HTML5 backward compatible with older browsers?

  • HTML5 is designed to be backward compatible with existing Web browsers as much as possible

Why does HTML5 only need to write<! DOCTYPE html>?

  • HTML5 is not based on SGML, so it does not require a reference to a DTD, but does require a DOCTYPE to regulate the behavior of browsers (to make browsers work the way they should).
  • HTML4.01 is based on SGML, so a reference to a DTD is required to tell the browser what type of document the document uses.
  • Among them, SGML is the Standard General Markup Language, which is simply an older standard than HTML and XML, both of which were developed from SGML. But HTML5 is not.

What are HTML5 document types and character sets?

  • HTML5 document types:<! DOCTYPE html>
  • HTML5 character set encoding:<meta charset="UTF-8" />

What’s new in HTML5

  • In HTML5, DOM extends three selectorsdocument.querySelector,document.querySelectorAll,matchesSelector()
  • Drag and Drop API
  • paintingcanvas, support inline SVG. Support MathML
  • media-playingvideo 和 audioThe element
  • Local Offline StoragelocalStorageLong-term storage of data, data is not lost after the browser is closed;sessionStorageIs automatically deleted after the browser is closed
  • Better practice of Web semantics, such asarticle,footer,header,nav,sectionEqual semantic tag
  • Form controls:calendar,date,time,email,url 等
  • New form elements:datalist,keygen,output
  • New technology: Multithreaded programmingwebWorker, a full-duplex communication protocolwebSocketAnd geolocationGeolocation

What is the data-* attribute?

  • Custom data properties start with data and will be named according to your needs

  • You can use JavaScript to get the values of these properties

  • Before JavaScript frameworks became popular, front-end developers often used the data-* attribute to store extra data in the DOM itself, when there were no other hacks (such as using non-standard attributes or extra attributes on the DOM). It is used to store custom data that is specific to a page or application, for which there is no more appropriate attribute or element.

  • Now, the use of the data-* attribute is discouraged. The reason:

    • The user can easily modify the data by using the check element in the browser to modify the attribute value
    • The data model is best stored in JavaScript itself and kept up to date with the DOM by taking advantage of the data binding provided by the framework

What HTML tags are not recommended for HTML5?

  • <acronym>: it is recommended that use<abbr>
  • <applet>: it is recommended that use<object>
  • <basefont>: it is recommended that use<font>
  • <bgsound>: it is recommended that use<audio>
  • <b>: Not recommended, recommendedfont-weightInstead of
  • <big>: Not recommended, recommendedfont-sizeInstead of
  • <blink>: RecommendedanimationInstead of
  • <center>: Not recommended, recommendedtext-align: centerInstead of
  • <dir>: You are advised to use this parameter based on the semantics<ul>,<ol>or<dl>
  • <font>: Is not recommended. You are advised to use CSS instead for better control.
  • <frame>: Not recommended, recommended<iframe>Instead. but<iframe>Now you can use Ajax instead
  • <frameset>: Not recommended
  • <hgroup>: Not recommended
  • <isindex>: it is recommended that use<input>
  • <listing>: it is recommended that use<pre>Or use semantics better<code>
  • <marquee>: Not recommended
  • <multicol>: it is recommended that use<input>
  • <nobr>: Not recommended, recommendedwhite-spaceInstead of
  • <noframes>: Not recommended. Use frame CSS instead
  • <plaintext>: it is recommended that use<pre>Or use semantics better<code>
  • <u>: Not recommended. Frame is recommendedfont-styleInstead of
  • <spacer>: Not recommended
  • <strike>: Suggest using better semantics<del> 或 <s>
  • <tt>: it is recommended that use<code> 或 <span>
  • <xmp>: CSS is recommended<pre>Or use semantics better<code>
  • How HTML5 differs from HTML4
  • HTML Element Reference

How do you understand the semantics of the Web?

  • Web semantics refers to the semantic representation of the information contained in the page through HTML tags, including the semantic of HTML tags and THE semantic of CSS names.
  • Semantization of HTML tags means that the document structure is properly represented by using tags that contain semantics, such as H1-H6
  • CSS naming semantics refers to adding meaningful classes to HTML tags and adding ids to unexpressed semantics. For example, microformats add class descriptions that conform to rules

Why does HTML need structural semantics

  • Easy to team development and maintenance.
  • Without CSS style, it can make the page appear clear structure.
  • A screen reader (if the visitor is visually impaired) will “read” your page based entirely on your markup.
  • Search engine crawlers rely on tags to determine the context and the weight of each keyword, which is conducive to SEO.

It is used to improve the automated processing of documents. Automated processing happens more often than you realize — each site ranking in a search engine is derived from automated processing of all sites.

<! -- Machine: This structure might look like a navigation element? -->
<div class="some-meaningless-class"><ul><li><a href="internal_link">.</div>

<! Machine: This is the navigation element! -->
<nav class="some-meaningless-class"><ul><li><a>.</nav>
Copy the code
  • Why use HTML5 semantic tags instead of divs?
  • I should use it for ICONS<i>Mark instead of<span>?
  • <section> 和 <div>What’s the difference?

What are semantic and non-semantic elements?

  • Semantic elements: Clearly describes what it means to both the browser and the developer. Such as:<form>.<table>.<article>.<aside>.<details>.<figcaption>.<figure>.<footer>.<header>.<main>.<mark>.<nav>.<section>.<summary>.<time>Define what it means.
  • Non-semantic element:<div>.<span>It doesn’t mean anything.

Briefly describe the use of some HTML5 semantics

  • <header>Used to contain introductory and navigational information about a section of a page. This can include chapter titles, author names, time and date of publication, contents, or other navigational information.
  • <article>Is used to store a self-contained composition that logically can be recreated independently of the page without losing its meaning. Personal blog posts or news stories are good examples.
  • <section>Is a flexible container for holding content that shares a common information topic or purpose.
  • <footer>Used to hold information that should appear at the end of a content section and contains additional information about that section. Author names, copyright information, and related links are typical examples of this type of content.
  • <main>Element representsbodyThe main content of the document. The main content area consists of content that is directly related to or extends the central topic of the document or the central function of the application.
  • Semantics in HTML5

Canvas and SVG

  • Canvas and SVG both allow you to create graphics in the browser, but they are fundamentally different.

SVG

SVG, which stands for Scalable Vector Graphics, is an XML-based image format used to define vector-based two-dimensional Graphics for the Web. Unlike raster images (e.g..jpg,.gif,.png, etc.), vector images can be zoomed in or out to any degree without loss of image quality.

<! SVG is vector and declarative -->
<svg viewBox="0 0 200 200">
    <circle cx="10" cy="10" r="10" />
</svg>
Copy the code

Canvas

Canvas is an HTML5 element used to draw graphics on web pages. It is a bitmap with an “immediate mode” graphical application programming interface (API) on which to draw. The

element is just a container for graphics. To draw graphics, you should use the JS canvas to have several strategies for drawing paths, boxes, circles, text, and adding images.

  • HTML <canvas>The element provides a blank drawing area that can be drawn via the JavaScript API (CanvasAPI orWebGLAPI) to draw graphics and graphics animation
    • Use Javascript to draw 2D graphics
    • It is rendered pixel by pixel
    • Its position changes and it is redrawn
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 70;

  context.beginPath();
  context.arc(centerX, centerY, radius, 0.2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
</script>
Copy the code
  • Some of the intended uses for Canvas include building graphics, animations, games, and image compositing.
  • Canvas element is used to draw graphics on web pages. The power of this element tag is that you can directly manipulate graphics on HTML

The difference between Canvas and SVG

Canvas SVG
Raster-based (made up of pixels) Vector-based (made up of shapes), perfect for UI/UX animation
Resolution dependent Resolution independent
Event handlers are not supported Support for event handlers
Poor text rendering Good text rendering function
Using more objects or smaller surfaces or both provides better performance High complexity slows down rendering (and any application that overuses the DOM is not good)
Best suited for graphics-intensive games where many objects are frequently redrawn Not suitable for gaming applications
Change only through scripts Modify through scripts and CSS
The ability to save the resulting image in.png or.jpg format Multiple graphic elements that become part of the PAGE’S DOM tree
Poor scalability. Not suitable for printing at higher resolution. Pixelation may occur Better scalability. You can print high quality at any resolution. No pixelation will occur

How much memory does a 100 * 100 Canvas have?

  • How much memory does a 100*100 canvas have

How do you choose SVG or Canvas for your website?

  • If you know you need vector art, choose SVG. Compared to raster graphics such as JPG, vector art is visually clear and file size is usually small.
  • Like a small flat color icon, this is clearly the domain of SVG.
  • Like interactive games, that’s Canvas, obviously.

reference

  • Canvas API

  • SVG image

  • How to Choose Between Canvas and SVG

  • When to use SVG and when to use Canvas

The new label

New semantic and structural elements

  • canvas The tag defines graphs, such as charts and other images. This tag is based on JavaScript’s drawing API
<canvas width="300" height="300">Sorry, your browser does not support the Canvas element</canvas>
Copy the code

  • A figure represents a separate piece of content, often with caption, and acts as a separate reference unit

  • A figCaption is a caption/caption for the image associated with it, describing other data in its parent figure element.

<style>
  figure {
    border: thin #c0c0c0 solid;
    display: flex;
    flex-flow: column;
    padding: 5px;
    max-width: 220px;
    margin: auto;
  }
  img {
    max-width: 220px;
    max-height: 150px;
  }
  figcaption {
    background-color: # 222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
  }
</style>

<figure>
  <img src="1.jpg" alt="Sauron">
  <figcaption>An elephant at sunset</figcaption>
</figure>
Copy the code
  • summaryMade use of adetailsA summary, title, or legend of one of the contents of the element.
  • detailsYou can create a widget that displays the contained information only when switched to the expanded state.
    • Tags are used to describe the details of a document or part of a document.
    • Animate it: How do I animate the Details element
<style>
  details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 0.5 em 0.5 em 0;
  }
  summary {
    font-weight: bold;
    margin: -0.5 em -0.5 em 0;
    padding: 0.5 em;
  }
  details[open] {
    padding: 0.5 em;
  }
  details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.5 em;
  }
</style>

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>
Copy the code
  • header,nav,main,footer,section,article
<section>
  <header></header>
  <main>
  	<nav></nav>
  </main>
  <footer></footer>
</section>
<article></article>
Copy the code
  • mapDefine a client-side image map. An image-map is an image with a clickable area
    • The Area element is always nested inside the Map element. The Area element defines an area in an image map.
<div>
  <img
    src=".. /img/cs.jpg"
    width="500"
    height="500"
    alt="pic"
    usemap="#circusmap"
  />
  <map name="circusmap">
    <area shape="rect" coords="90,18,202,186" href="https://www.baidu.com/"/>
    <area shape="rect" coords="222141318, 256" href="https://www.baidu.com/" />
    <area shape="circle" coords="343111455, 267" href="https://www.baidu.com/" />
    <area shape="rect" coords="35328143500" href="https://www.baidu.com/" />
  </map>
</div>
Copy the code
  • markHighlight the text in the HTML. Before this tag appeared, it was often usedem 或 strongGive the highlighted content some semantics. It’s not recommended now. Use this label if you want to highlight
<p><mark>Lio</mark></p>
Copy the code

The default background color is yellow

/* default style */
mark {
  background: yellow;
  color: black;
}
Copy the code

You can use CSS to customize styles

mark {
  background: red;
  color: white;
}
Copy the code
  • meterLabels define scalar measurements within a known range or fraction value. Also known as gauge.
    • <meter> Labels should not be used to indicate progress (in progress bars). If the progress bar is marked, use<progress>The label.
<div>
  <meter value="4" min="0" max="10">4/10</meter><br />
  <meter value="0.6">60%</meter>
</div>
Copy the code
  • progressThe tag indicates the progress (progress) of the task.
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
Copy the code
  • timeDefine a date or time.
<p>The concert starts at <time datetime="2020-06-01T20:00:00">00 PM</time>.</p>
Copy the code
  • bdiAllows you to set a piece of text away from its parent element’s text orientation setting.
<p dir="ltr">Lorem ipsum <bdi>dolor</bdi> sit amet.</p>
Copy the code
  • dialogA label defines a dialog, confirmation, or window.
<dialog open>
  <p>Greetings, one and all!</p>
</dialog>
Copy the code

New multimedia elements

  • sourceDefining a video source<video> 和 <audio>
  • trackDefining text tracks
  • videoDefining video elements
    • HTML5 supports video in MP4, WebM and OGG formats. The Ogg format is not supported in any way in IE
    • srcSpecify the source of the video.
    • When not tovideoWhen setting the height and width, the browser does not know the size of the video, and the page will change or blink when the video loads
<! -- 1. Define with SRC attribute -->
<video
  src="video.mp4"
  controls
></video>

<! -- 2. Define the source tag -->
<video controls>
    <source src="video.mp4" type="video/mp4">Your browser does not support the HTML5 Viedo tag.</video>
Copy the code
  • embedInserts external content in a specified location in the document.
<embed
  src="https://juejin.cn/user/96412754251390"
  height="700"
  width="100%"
/>

<embed
  type="video/webm"
  src="/media/cc0-videos/flower.mp4"
  height="700"
  width="100%"
/>
Copy the code
  • audioDefining audio content
    • HTML5 supports audio in MP3, Wav and Ogg formats.
<audio controls>
  <source src="sound.ogg" type="audio/ogg" />
  <source src="sound.mp3" type="audio/mpeg" />Your browser does not support the HTML5 Audio tag.</audio>
Copy the code

New Form elements

  • datalist
    • <datalist>The tag defines a list of options. This element is used in conjunction with the input element to define possible values for the input.
    • The datalist and its options are not displayed; it is simply alist of valid input values.
    • Use the list attribute of the input element to bind the datalist
<label for="course">Selected courses of study:</label>
<input list="target" name="course" id="course" />
<datalist id="target">
  <option value="HTML"></option>
  <option value="CSS"></option>
  <option value="JavaScript"></option>
  <option value="Node"></option>
  <option value="Vue"></option>
  <option value="React"></option>
  <option value="Webpack"></option>
</datalist>
Copy the code

  • Keygen This element helps generate the key and submit it through the form.

    • keygenMust be used within a form.
    • keygenHas been removed from Web standards, please use JavaScript to generate the key
    • MDN

  • The output tag defines different types of output, such as the output of a script.

<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
  0 <input type="range" id="a" value="50"> 100
  * <input type="number" id="b" value="1" /> =
  <output name="x" for="a b"></output>
</form>
Copy the code

Some elements before HTML5

  • The Pre tag defines preformatted text. The text enclosed in the 

     tag usually retains whitespace and newlines. The text is rendered in the same width font.

  • Strong is used to indicate text that is more important than the surrounding text, such as a warning or error. Semantically, it matters. It appears in bold

  • B is very similar to strong in that it is also shown in bold. Unlike it, however, it doesn’t really convey any importance; it’s more stylistic than semantic.

  • Em is used to emphasize a word. It appears in italics

<strong>lorem</strong>
<b>lorem</b>
<em>lorem</em>
Copy the code
  • q 和 blockquote
    • qquotes
    • blockquoteBlock quotes
<q>lorem</q>
<blockquote>lorem</blockquote>
Copy the code
  • bdoYou can change the direction of HTML text
    • RTL: From right to left. LTR: Left to right.
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
Copy the code
  • useabbrThe tag abbreviates your code, and when you pass a title, it will create a tooltip
    • <abbr>The default style varies from browser to browser. In Chrome and Firefox, it will be underlined, and when hovering, it will betitleTooltips for passed values. If you open this page in Safari, the underline does not appear. Also, only if you havetitleProperty.
    • Due to cross-browser differences, it is recommended that<abbr>Add custom styles to code. This way, you’ll have a consistent look and feel across browsers

When defining the term, it can be mixed with DFN

<dfn>
  <abbr title="Today I learned">TIL</abbr> something awesome!	
</dfn>
Copy the code

Indicates a non-abbreviation and prints it in parentheses on the page

abbr[title]::after {
  content: '(' attr(title) ') ';
}
Copy the code

Use the hover state to display non-abbreviations only when clicked

abbr[title]:hover::after {
  content: '(' attr(title) ') ';
}
Copy the code

Use the abBR TAB to indicate that tabIndex =”0″ is focable in the sequential keyboard navigation, and then trigger our non-abbreviated content when focusing.

<abbr title="Today I learned" tabindex="0">TIL</abbr>
Copy the code
abbr[title]:focus::after {
  content: '(' attr(title) ') ';
}
Copy the code

You can also use tip tools such as the tooltip component in Bootstrap.

  • kbd 和 code
    • kbd: indicates the text entered by the user from the keyboard, voice input, or any other text input device.
    • code: Text that represents a short fragment of computer code.
    • They both use the samemonospaceFont. But semantically they are different. It is best to usekbdInstead ofcode
<kbd>Ctrl</kbd> + <kbd>C</kbd>
<code>Ctrl</code> + <code>C</code>
Copy the code
/* Default Style */
kbd {
  font-family: monospace;
}

kbd.code {
  border: 1px solid gray;
  border-radius: 5px;
  padding: 5px;
}
Copy the code
  • s 和 delDelete the line
    • sUse it when you are trying to represent something that is no longer relevant or accurate.
    • delUse it when you want to indicate that something has been removed from a document.
    • They are deletion lines. However, they convey different meanings about the content.
<s>Lorem ipsum dolor sit amet.</s>

<! -- often used in commodity price discounts -->
<span><s>The $1999</s></span>
<span style="color: red;">The $99</span>

<del>Lorem ipsum dolor sit amet.</del>

<! -- often used with to-do lists -->
<ul>
  <li><del>Clock in</del></li>
  <li>Drink a cup of coffee</li>
</ul>
Copy the code
  • ins
<p>
  Lorem ipsum
  <ins>dolor sit amet consectetur adipisicing elit.</ins> Perferendis, rem.
</p>
Copy the code

  • 20 HTML Elements for Better Text Semantics

  • What are some useful HTML tags that are underrated and not widely used?

New properties

  • contenteditable
    • contenteditableAttributes apply to any HTML element, which can look likeinput 或 <textare>Work that way and edit them
    • You can add an event listener to it to listen for changes in its content
    • contenteditableProperty values have three different values: true, false, and inherit
<div contenteditable="true">
  <h1>Element editable</h1>
</div>
<div contenteditable="false">
  <h1>Elements are not editable</h1>
</div>
<div contenteditable="inherit">
  <h1>Element inherits the editable state of its parent element</h1>
</div>
Copy the code
  • input
    • required
    • autofocusProperties enablebutton.input 或 textareaThe element automatically becomes the focus of the page when the page finishes loading
    • patternVerify with regular expressions
<! -- required -->
<input type="text" id="username1" name="username" required>

<! -- autofocus -->
<input type="text" id="username2" name="username" >

<! -- pattern -->
<input
  type="password"
  name="password"
  placeholder="Please enter your password"
  pattern="^ (? =.*\d)(? =.*[a-z])(? =. * [a-z]). 6, 20} {$"
  required
/>
Copy the code
  • HTML5’s new form input type?
    • New input types (13 types) :date,month,week,time,number,range,email,url,color,datatime-local,datetime,search,tel
    • search: Is used for searching domains, such as site search or Google search, that are displayed as regular text domains.
    • url: For the input field that should contain the URL address, the VALUE of the URL field is automatically validated when the form is submitted.
    • email: for the input field that should contain the E-mail address, the value of which is automatically validated when the form is submitted.
    • datetime: Select time, day, month, and year (UTC)
    • date: Select day, month, and year
    • month: Select month and year
    • week: Selects weeks and years
    • time: Select time (hours and minutes)
    • datetime-local: Select time, day, month, year (local time)
    • number: for input fields that should contain numeric values. You can also set limits on the number accepted.
    • range: for an input field that should contain a range of numeric values. The type is shown as a slider.
    • color: Defines a color picker.
    • tel: Defines the field used to enter the phone number.
    • Among themdatetimeIt’s no longer recommended. It’s used insteaddatatime-local
<! -- url -->
<input type="url" />

<! -- tel -->
<input type="tel" name="tel" />

<! -- search -->
<input type="search" />

<! -- email -->
<form action="/">
    <input type="email" />
    <input type="submit" value="Submit">
</form>

<! -- date -->
<input type="date" value="2020-06-01" min="2020-01-01" max="2022-01-01" />

<! -- time -->
<input type="time" value="Twelve" />

<! -- datetime -->
<input type="datetime" value="2020-09-12T23:00Z" />

<! -- week -->
<input type="week" />

<! -- month -->
<input type="month" value="2020-06-01" />

<! -- datetime-local -->
<input type="datetime-local" value="2020-09-06T23:00" />

<! -- number -->
<input type="number" name="number" min="2" max="10" value="3"  />

<! -- color -->
<input type="color" onchange="showColor(event)">

<! -- range -->
<input type="range" name="range" min="0" max="100" step="1" value="" />
Copy the code
  • hidenAttribute specifies that the element is hidden.
    • Can behiddenProperty to enable the user to see an element only when certain conditions are met (check boxes, and so on). You can then use JavaScript to remove the hidden property to make the element visible.
<div hidden>lorem</div>
Copy the code
  • Download
    • The default setting for the anchor point tag is the navigation link, which will take you to thehrefProperty
    • adddownloadProperty, it will become a download link. Prompts you for files to download. The downloaded file will have the same name as the original file name. However, you can also pass the value todownloadProperty to set the custom file name
    • downloadProperty applies only to same-origin urls. If thehrefThe source is different from the source of the website, then it will not work properly. In other words, you can only download files that belong to the site. This property followsThe same-origin policyOverview of the same rules in.
<a href=".. /img/cs.jpg" download>Download the local file using the original file name</a>

<a href=".. /img/cs.jpg" download='logo'>Download logo.png using the user-defined file name</a>
Copy the code
  • The same-origin policy
  • Browser homology policy and its circumvention

How to turn off autocomplete for HTML5 forms?

  • willinputSet toautocomplete=off
<! -- Not using autocomplete -->
<input type="email" name="email" />

<! -- use autocomplete -->
<form action="/post">
    <input type="email" name="email" autocomplete="off" />
    <input type="submit" value="Submit" />
</form>
Copy the code

<script>On the tagdefer 和 asyncWhat is a property?

  • <script>: When a script is encountered, HTML stops parsing and the script is retrieved and executed immediately. When the execution is complete, HTML parsing continues.
  • defer 和 asyncBoth allow the script to be downloaded and performed without blocking the page rendering

The difference between:

  • deferDeferred execution, which is to wait until the page is rendered, all scripts are downloaded, and then execute in the order of the script in the document before the DOMContentLoaded event.
  • asyncThe process of loading and rendering subsequent document elements will take place in parallel (asynchronously) with the loading and execution of the JS script.
  1. aboutdeferWe also need to remember that it executes the scripts in the order they were loaded
  2. Marked asasyncAre not guaranteed to execute in the order in which they are specified. For it, the script is loaded and executed right next to each other, so it executes as soon as it’s loaded, regardless of the order in which you declare it.
  3. asyncIt is less useful for applying scripts because it does not consider dependencies at all (even at the lowest level of sequential execution), but it is great for scripts that can depend on or be relied on by no script.
<script src="longTime.js"></script>
<script src="longTime.js" defer></script>
<script src="longTime.js" async></script>
Copy the code
  • Tips: nosrcProperty (that is, not an inline script),async 和 deferProperties are ignored.

How to deal with browser compatibility issues with new HTML5 tags? How to distinguish HTML from HTML5?

  • Ie6-8 supports tags generated by the document.CreateElement method, and takes advantage of this feature to make these browsers support the new HTML5 tags

  • Use the HTML5shiv framework

  • HTML 5:

    • DOCTYPE declaration
    • The new semantic elements (<header>,<section>Etc.)
    • New functional elements

What makes HTML5?

  • Semantics: Provides a more accurate description of the content.
  • Connection: Provides a new way to communicate with the server.
  • Offline and storage: Allows web pages to store data locally and run effectively offline.
  • Multimedia: In Open Web, video and audio are treated as first-class citizens.
  • 2D/3D graphics and effects: more presentation options.
  • Performance and integration: Computer hardware that provides faster access and better performance.
  • Device access: Allows the use of various input and output devices.
  • Appearance: Rich themes can be developed.
  • HTML5

Modernizr

  • Modernizr is a JavaScript library that detects browser support.
  • With this library we can check how well different browsers support HTML5 features.
<article>
  <h1>Use Modernizr to detect HTML5 features</h1>
</article>
<script
  crossorigin="anonymous"
  integrity="sha384-l7lIexAaQrMGAnOGdPikxQDjq8aY1MS3oqkKPS8FXlJ47UejXvEzmezjhEwHVkzm"
  src="https://lib.baomitu.com/modernizr/2010.07.06dev/modernizr.js"
></script>
<script>
  window.onload = function () {
    // Check the browser canvas function by Modernizr
    if (Modernizr.canvas) {
      console.log('This browser supports Canvas API')}else {
      console.log('This browser does not support the Canvas API')}}</script>
Copy the code

It is stored

localStorage

LocalStorage persistent localStorage, unless deleted by js, or clear the browser cache, otherwise data will never expire, and closed the browser will not be lost.

  • HTML5 revision localStorage to replace globalStorage
  • Share data between all tabs and Windows of the same origin
  • Data is stored only on the client and does not communicate with the server. Data operations are synchronized
  • Size limit is 5M; But the actual strings in JavaScript are UTF-16, so each character requires two bytes of memory. This means that although many browsers have a 5MB limit, you can only store 2.5m characters.
  • Supported browsers: Internet Explorer 7 and later versions do not support Web Storage. But in IE5-7 there is a userData, which is also used for local storage.

sessionStorage

SessionStorage Storage object Stores the data of a session. The data is automatically deleted after the browser is closed.

  • As with localStorage, the maximum size limit is 5M.

  • Only pages of the same session can be accessed and data is destroyed when the session ends, so sessionStorage is not a persistent local storage

  • With localStorage has a unified API interface;

  • LocalStorage has its own independent storage space.

  • Operations on the data are synchronous.

  • LocalStorage can also use this

  • Add the expiration time to localStorage

  • Introduction to different types of browser storage

  • Front-end storage in addition to localStorage and what

Cookie, sessionStorage, and localStorage

  • Are storage mechanisms that store key-value pairs on the client side, and can only store values as strings.
cookie localStorage sessionStorage
Who initializes it Client or server that the server can useSet-CookieRequest header. The client The client
Expiration time manually Never expire The current page is closed
Remains unchanged in the current browser sessions Depends on whether the expiration time is set is no
Whether to send to the server with each HTTP request Yes, the Cookies will pass throughCookieRequest header, automatically sent to the server no no
Capacity (per domain) 4kb 5MB 5MB
Access permissions Any window Any window Current Page Window

What is WebSQL?

  • WebSQL is the database API for the client (browser) that uses SQL.
  • The Web SQL Database API is not part of the HTML5 specification, but it is a stand-alone specification that introduces a set of APIs for manipulating client databases using SQL.
  • Not all browsers support WebSQL.
  • It is not recommended to use WebSQL at this time and use IndexedDB instead.

What is IndexedDB?

IndexedDB is a low-level asynchronous API, a browser-built database for storing large amounts of structured data (also files/binary large objects (BLOBs)) on the client side.

  • It stores the data as key-value pairs.
  • IndexedDB is supported by most browsers.

The IndexedDB API is powerful but may seem too complex for simple cases. If you prefer a simple API, try localForage, dexie.js, PouchDB, IDB, IDB-keyval, Libraries like JsStore or LoveField that make IndexedDB more developer-friendly.

  • IndexedDB
  • Introduction to browser database IndexedDB

Why use IndexedDB instead of WebSQL in HTML5?

IndexedDB is like a NoSQL database, while WebSQL is like a relational database, using SQL to query the data. W3C WebSQL no longer supports this technique.

HTML5 Application Cache

According to the latest standard, this feature has been removed from the Web standard and it is recommended to use Service Workers instead. Here to find some information, interested to understand.

  • Interesting HTML5: Offline storage

  • Using the application cache

  • Html5-offline Cache (Application Cache)

What are Web Workers?

  • Web Workers help us run JavaScript code in the background without blocking the application.
  • Web Workers run in an isolated (new) thread to execute JavaScript code and pass the results back to the main thread via postMessage. This will not block the main thread.
  • Web Workers are typically used for large tasks.
  • Web Workers need a separate file to store our JavaScript code.
  • The Web Workers file is downloaded asynchronously.
  • All the latest browsers support Web Worker.

Client JS:

var myWebWorker = new Worker("task.js") / / create the worker

// Listen for task.js worker messages
worker.addEventListener("message".function(event) {
  console.log("Worker said: ", event.data)
}, false)

// Start the working procedure
worker.postMessage("From web worker file")
Copy the code

Task.js (working file) file:

// Listen to the client JS file publish messages
self.addEventListener("message".function(event) {
  // Send the processed data to the client listening JS file
  self.postMessage(event.data)
}, false)
Copy the code
  • Use Web Workers to speed up JavaScript applications

WebSocket

  • WebSocket is a protocol for full-duplex communication over a single TCP connection that HTML5 began to provide.
  • WebSocket is a TCP network protocol that keeps a long connection between the client and the server. Information can be exchanged at any time.
  • Websocket uses the uniform resource identifier of WS or WSS, similar to HTTPS, where WSS stands for Websocket over TLS.
  • The Websocket protocol uses port 80 by default; When running over TLS, port 443 is used by default.

How is webSocket compatible with low browsers?

  • Adobe Flash Socket
  • ActiveX HTMLFile (IE)
  • Send XHR based on multipart code
  • XHR based on long polling

The difference between WebSocket and socket

Socket is a transport control layer protocol, and WebSocket is an application layer protocol. See reference for more information

reference

  • WebSocket describes the difference between WebSocket and Socket
  • WebSocket tutorial
  • WebSocket
  • How does WebSocket work? Why are persistent connections possible?

How does the Geolocation API work in HTML5?

  • The HTML5 geolocation API allows the user to provide the user’s location to the Web application when needed. For privacy reasons, users need permission to report location information.
  • JavaScript captures your latitude and longitude and can be sent to a back-end Web server to do fancy location-aware things like finding local businesses or displaying your location on a map
  • Today, most browsers and mobile devices support the geolocation API
  • Geolocation API passesnavigatorGet the object.
if ("geolocation" in navigator) {
  /* geolocation is available */
} else {
  /* geolocation IS NOT available */
}
Copy the code

  • Use the navigator. Geolocation. GetCurrentPosition () method to obtain the user’s location

  • Navigator.geolocation

What can the Page Visibility API be used for?

  • The page visibility API provides events that you can observe, the ability to learn when a document is visible or hidden, and the ability to view the current visibility state of a page.

  • With tabbed browsing, any given web page is likely to be in the background and therefore not visible to the user. The page visibility API provides events you can observe to see when a document is visible or hidden, as well as the ability to view the current visibility state of a page.

  • Document. hidden returns a Boolean value.

    • True indicates that the page is visible. False indicates that the page is hidden.
    • Switching back and forth between different pages triggers the VisibilityChange event.

  • Document. visibilityState: indicates the state of the page and the visibility of the current page. There are four values

    • visible: Page is completely invisible.
    • hidden: At least part of the page is visible.
    • prerender: The page is about to be rendered and is not visible.
    • unloaded: Has been abandoned and is not in use.

  • The VisibilityChange event is triggered whenever the document.visibilityState property changes

// Open a new page, switch back and forth between tabs, and watch the page title change
document.addEventListener("visibilitychange".function() {
  if (document.visibilityState === 'hidden') {
    document.title = "Love me"
  } else {
    document.title = "Hate me"}})Copy the code
  • USES:
    • Animation, video and audio can all be opened when the page is displayed and closed when the page is hidden
    • After login, the login status of other pages is automatically synchronized
// Pause or play the video
document.addEventListener('visibilitychange'.function () {
  if (document.visibilityState === 'hidden') {
    video.pause()
  } else if (document.visibilityState === 'visible') {
    video.play()
  }
})
Copy the code
  • Tips: The page visibility API is particularly useful for saving resources and improving performance by preventing pages from performing unnecessary tasks when documents are not visible.
  • Page Visibility
  • Page Visibility API tutorial

Talk about the HTML5 Drag And Drop API

The HTML Drag and Drop interface enables applications to use Drag and Drop functionality in the browser. For example, the user can use the mouse to select draggable elements, drag elements to droppable elements, and release the mouse button to place those elements.

Event Description
Drag It fires every time you move the mouse while dragging an object. The body of the event is the dragged element and is triggered when the dragged element is being dropped.
Dragstart Triggered when the user starts dragging an object. The body of the event is the dragged element and is triggered when the dragged element is started.
Dragenter It fires when the user moves the mouse cursor over the target element. The event body is the target element and is triggered when the element is dragged and dropped into an element.
Dragover Fires when the mouse moves over an element. The event body is the target element and is triggered when it is dragged and moved within an element.
Dragleave Fires when the mouse moves away from an element. The event body is the target element and is triggered when the drag element is removed from the target element.
Drop Triggered at the end of the drag and drop operation. The event body is the target element and is fired when the target element fully accepts the element being dragged and dropped.
Dragend Triggered when the user releases the mouse button to complete the drag operation. The body of the event is the element to be dragged and is triggered at the end of the entire drag operation

Draggable is an enumerable attribute indicating whether the element can be dragged, which is used to indicate whether the element is allowed to use the HTML drag-and-drop API

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
<script>
  function allowDrop(e) {
    e.preventDefault()
  }

  function drag(e) {
    e.dataTransfer.setData("text", e.target.id)
  }

  function drop(ev) {
    e.preventDefault()
    var data = e.dataTransfer.getData("text")
    e.target.appendChild(document.getElementById(data))
  }
</script>
Copy the code
  • HTML Drag and Drop API
  • Determines what is dragged from the Dragenter and Dragover events
  • HTML5 Drag and Drop API for touchscreen devices
  • HTML5 drag and drop between Windows

Other HTML 5 API

Document. QuerySelector () and document. QuerySelectorAll ()

  • querySelector(): returns the first matched element based on the CSS selector, or null if there is no match
  • querySelectorAll()The: method returns all elements in the document that match the specified CSS selector. The NodeList object is returned. If querySelectorAll does not match anything, it returns an empty array.

classList

  • Control the CSS add, delete, switch, and whether a class exists
ele.classList.add("addClass")
ele.classList.remove("removeClass")
ele.classList.toggle("toggleClass")
ele.classList.contains("containsClass")
Copy the code

contextMenu

  • It does not replace the original right menu, but adds your own custom right menu to the browser’s right menu
<div id="menu">Lorem ipsum dolor sit amet.</div>
<script>
  menu.addEventListener('contextmenu'.function() {
    alert("Point me!!!!!!! ')})</script>
Copy the code

You can also block it and display your own custom menu

menu.addEventListener('contextmenu'.function(e) {
  e.preventDefault()
  // ...
})
Copy the code
  • How do I create a custom context menu for your Web application

dataset

  • throughdatasetYou can easily get or set data-* custom data attribute set
<div class="avatar" data-user="lisi" data-avatar-type="circle" data-animateSpeed>
  lorem
</div>
<script>
  const avatar = document.querySelector('.avatar')
  avatar.dataset.user === 'lisi' // true
  avatar.dataset.avatarType === 'circle' // true
  avatar.dataset.animateSpeed = 4000
    
  // Add attributes that do not exist
  avatar.dataset.id = 'user'
  // console.log(avatar.dataset)
</script>
Copy the code
  • dataset

tabindex

  • tabindexProperty specifies the order of elements when navigated using the “TAB” key.
  • In HTML4.01, the tabIndex attribute can be used to:<a>.<area>.<button>.<input>.<object>.<select> 和 <textarea>.
    • In HTML 5,tabindexThe attribute can be used on any HTML element (it validates any HTML element). But not necessarily useful)
<ul>
  <li tabindex="2">HTML</li>
  <li tabindex="1">CSS</li>
  <li tabindex="3">JAVASCRIPT</li>
</ul>
Copy the code

accessKey

  • accessKeyProperty specifies the shortcut keys that activate (bring the element into focus) the element.
  • Different browsers use different shortcut keys:
    • Opera 15+ : [ALT] + AccessKey
    • Opera prior version 15: [SHIFT] [ESC] + accesskey
    • Firefox: [ALT] [SHIFT] + AccessKey
<input accesskey="b" />
<a href="https://www.baidu.com/" accesskey="c">Google it and you'll know</a>
Copy the code

FullScreen

  • The FullScreen API is a new JavaScript API
  • The full screen display can be any element
  • The HTML5 API has compatibility issues (IE9+), even with higher versions of browsers
  • Different browsers need to add different prefixes webkit, moz, o, and ms
const fullscreen = (mode = true, el = 'body') = >
  mode
    ? document.querySelector(el).requestFullscreen()
    : document.exitFullscreen();

fullscreen(); // Open "body" in full screen mode by default
fullscreen(false); // Exit the full-screen mode
Copy the code

:fullscreen CSS pseudo-elements represent an element that is displayed when the browser is in full-screen mode.

.elem:fullscreen {
  background-color: #e4708a;
  width: 100vw;
  height: 100vh;
}
Copy the code

preload

  • Prefetch CSS files, prerender entire pages or resolve domains in advance
  • Browsers have a simple built-in way to do all of these things. There are six<link rel>The tag instructs the browser to preload the content:
<link rel="prefetch" href="/index.css" as="style" />
<link rel="preload" href="/index.css" as="style" />
<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />
<link rel="prerender" href="https://example.com/about.html" />
<link rel="modulepreload" href="/index.js" />
Copy the code

preload

  • usepreloadAs arelThe attribute value of the. It still needs to be passedhref 和 asProperty specifies the resource path and type of the resource to be preloaded.
<link rel="preload" href="index.css" as="style">
Copy the code
  • useasTo specify the type of content to be preloaded, will enable the browser to:
    • Optimize resource loading priorities more precisely.
    • Match future loading requirements and, where appropriate, reuse the same resource.
    • Apply the correct content security policies to your resources.
    • Set the correct Accept request header for the resource.
    • Complete list of MDN

prefetch

  • Requires the browser to download and cache resources (such as JS or CSS) in the background. Downloads have a lower priority, so they don’t interfere with more important resources. This helps when you know that the resource is needed on the next page and you want to cache it ahead of time.

  • After downloading resources, the browser does not perform any operations. Do not execute JS, do not apply CSS. It is simply cached, so it is immediately available when other requirements arise.

  • Specify “prefetch” in the rel attribute of the link tag and specify the address of the resource to be loaded in the href attribute

<! -- Preload the entire page -->
<link rel="prefetch" href="https://juejin.cn/user/96412754251390" />

<! -- preload an image -->
<link rel="prefetch" href="https://images.pexels.com/photos/918281/pexels-photo-918281.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
Copy the code

preconnent

  • <link rel="preconnect">Requires the browser to perform a connection to the domain in advance.
<link rel="dns-prefetch" href="https://juejin.cn/user/96412754251390"> 
Copy the code

dns-prefetch

  • DNS-prefetch(DNS prefetch) is an attempt to resolve a domain name before a resource is requested. This could be a file to load later, or it could be the target of a link the user is trying to open.
<link rel="dns-prefetch" href="https://juejin.cn/user/96412754251390"> 
Copy the code

Some considerations for link preloading

  • Preloading can be done across domains and, of course, information such as cookies will be sent when requested.
  • Preloading can corrupt site statistics without the user actually visiting.
  • Browser compatibility is not very good

prerender

  • <link rel="prerender">Requires the browser to load the URL and render it in an invisible label. When the user clicks a link to this URL, the page should be rendered immediately. This helps when you are sure that the user is going to visit a particular page next and wants to render it faster.
<link rel="prerender" href="https://juejin.cn/user/96412754251390" />
Copy the code
  • You can use it when you are certain that most users will navigate to a particular page and you want to speed things up

modulepreload

  • <link rel="modulepreload">Tell the browser to download, cache and compile the JS module script as soon as possible.
  • Use it to load your ES module application faster. This tag only applies to preloaded ES modules — that is, you passedimport ...Or imported modules<script type="module">.
<link rel="modulepreload" href="/static/Header.js" />
Copy the code
  • Preload, prefetch and other <link> tags
  • dns-prefetch
  • Preload content with rel=”preload”
  • Prefetch, preload, and prebrowse

other

Understanding and understanding of WEB standards and W3C

  • Web standardsIn short, it can be divided intoStructure, performance and behavior.
    • The structure consists mainly of HTML tags. Perhaps in general terms, the tags we write in the body of the page are for the structure of the page.
    • Presentation refers to CSS style sheets, which can be used to make the structural tags of a page more aesthetic.
    • Behavior refers to a certain interaction between the page and the user, while the page structure or performance changes, mainly composed of JS.
  • Web standards typically separate these three parts to make them more modular. But in general, when behavior occurs, there will be changes in structure or performance, which makes the boundary between the three not so clear.
  • The World Wide Web Consortium (W3C) is an international organization that develops open standards to ensure the long-term growth of the Web.
  • The W3C provides a specification for Web standards, which is a code specification in actual programming:
    • Web standard specification requires that writing tags must be closed, tags lowercase, not disorderly nesting, tag specification can improve the search engine on the page crawl efficiency, very helpful to SEO
    • It is suggested to use the external link CSS and JS script, so as to achieve the separation of structure, performance and behavior, improve the page rendering speed, improve user experience
    • The separation of styles and tags, more reasonable semantic tags, so that the content can be accessed by more users, the content can be accessed by a wider range of devices, less code and components, so as to reduce maintenance costs, easy revision
    • No need to change the content of the page, providing a printed version without copying the content, improving the usability of the website;
    • Following the Web standards formulated by THE W3C makes it easier for users and browsers to read, and enables better communication between web developers.

What are the three layers of front page? What does it do?

  • Divided into: structure layer, presentation layer, behavior layer.
  • Structural Layer: It is created by a markup language such as HTML or XHTML. Tags, those words that appear in Angle brackets, describe the semantic meaning of the content on the web page, but they don’t contain any information about how to display the content. For example, the P tag expresses the semantics: “This is a text segment.”
  • Presentation Layer: The CSS creates the presentation layer. CSS answers the “how to display the content” question.
  • The behaviorLayer is responsible for answering the question of how the content should react to the event. This is where the JavaScript language and DOM dominate.

What is progressive rendering?

  • Progressive Rendering: A technique used to improve the performance of a web page (especially user perceived loading speed) in order to render the page as quickly as possible.

  • Examples of such techniques:

    • Lazy image loading: Images on the page do not load all at once. When the user scrolls the page to the image section, JavaScript loads and displays the image.
    • Prioritizing display content (Hierarchical Rendering) : Pages contain a minimum of basic CSS, scripts, and content in order to present them to users as quickly as possible, and then lazy loading scripts or listening can be usedDOMContentLoaded/loadEvent loads additional resources and content.
    • Asynchronous loading of HTML fragments: When the page is being rendered in the background, the HTML is broken up and sent to the browser in chunks via asynchronous requests.

  • Asynchronous fragments: Rediscover progressive HTML rendering using Marko

  • What is progressive rendering?

Can you describe the difference between progressive enhancement and graceful degradation?

Progressive enhancement

Graceful degradation

What are microformats? Should microformats be considered in front-end builds?

  • Microformats, collections of semantic XHTML vocabularies that are machine-readable, are open standards for structured data. Is a special format for a particular application.
  • Pros: Adding smart data to the web, allowing content to display additional hints on the search engine results screen. (such as: Douban, interested in Google)
  • Microformats

What is character encoding?

  • Character encoding is a method of converting bytes into characters. In order to correctly validate or display HTML documents, the program must select the appropriate character encoding. This is specified in the tag:
<meta charset="UTF-8" />
Copy the code
  • Utf-8: Unicode conversion format, in 8-bit units (bytes). Characters in UTF8 can be from 1 to 4 bytes long, making UTF8 variable in width.

What is WHATWG?

The WHATWG (Web HyperText Application Technology Working Group) is a community of people interested in developing the Web through standards and testing.

  • WHATWG

What is WebP?

  • WebP is an image format like JPG or PNG that is about 10-20% smaller than other formats.
  • Developed and launched by Google in 2010.
  • Not all browsers support WebP.
  • Plug-ins can be used to convert other formats to WebP.
  • A new image format for the Web

What is a Web component?

Web Components is a different set of technologies that allow you to create reusable custom elements (whose functionality is encapsulated outside your code) and use them in your Web applications. You don’t need any external libraries to work.

Features:

  • Custom Elements

  • Shadow DOM

  • Templates for HTML

  • HTML Import Allows the Import of external HTML documents.

  • Web Components

  • An example tutorial for getting started with Web components

Accessibility in Web applications?

Wikipedia: Accessibility is most often used to describe facilities or facilities that help people with disabilities, such as “wheelchairs”. This can extend to braille signs, wheelchair ramps, audio signals at crosswalks, contour sidewalks, website design, and more.

What is ARIA?

Accessible Rich Internet Applications (ARIA) is a set of mechanisms that make it easier for people with disabilities to access Web content and use Web Applications (especially those developed in JavaScript).

  • ARIA provides additional information to the screen reader through HTML attributes. It does not affect how the element is rendered in the browser.
  • You can do this by following ARIA standards (for example: HTML semantics, Alt attributes and using them as intended[role = button]) to make your website more accessible
<style>
  [role='note'] {
    padding: 10px;
    border: 1px solid;
    border-left: 5px solid rebeccapurple;
    color: rebeccapurple;
    border-radius: 5px;
  }
</style>
<section>
  <div role="note">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo illum cum
    totam.
  </div>
</section>
Copy the code
  • ARIA roleNothing is added to the default semantics of most elements
  • In some cases, the semantics of HTML elements are available through ARIArole, state or property. Often referred to as the “elemental”Default implicit ARIA semantics”
  • ARIA allows developers to reinvent and extend native HTML features in meaningful ways. But its features are fragile compared to the built-in technology.

Some examples of redundant ARIA:

<button role="button">According to my</button>
<a href="https://www.baidu.com" role="link"></a>
<input type="checkbox" role="checkbox" />
<input type="radio" role="radio" />
Copy the code

  • HTML5 defines a new set of structure and segmentation elements using default implicit semantics that match the ARIA Role (in some cases) :

    • userole = button, consider using<button>Element, or various other native HTML button types.
    • userole=link, consider switching to<a href>Elements.
    • userole=heading 和 aria-level="1-6", consider switching to<h1> 到 <h6>Elements.
    • userole=list 和 role=listitem, consider switching to<ol> 或 <ul> 和 <li>Elements.
    • userole=listbox 和 role=option, consider switching to<select> 和 <option>Elements.
    • userole=checkbox 或 role=radio, consider switching to<input type="checkbox"> 或 <input type="radio">Elements.
    • userole=textboxCan be considered to use<input type="text">Or search, email, URL, or phone.
    • article,aside,footer,header,main,nav,sectionAnd so on…
    • This means that after implementation, the browser exposes the default implicit semantics of the element, so you don’t have to.

  • MDN: ARIA

  • On HTML and ARIA braces (implicit ARIA semantics by default, they don’t want you to know)

  • HTML5 — W3C recommendation October 28, 2014

  • Considerations for using ARIA in HTML

What is a screen reader?

Screen readers are software programs that provide assistive technology that enables people with disabilities (for example, people without sight, sound or mouse abilities) to use Web applications.

HTML Development Guidelines

  • W3C compliance: All pages need to be tested using W3C validators to identify possible problems in the HTML code.
  • Clean up comments: Unnecessary code needs to be removed before the page can be sent to production.
  • Error pages: Every web site should have error 404 pages and error 5XX pages.
  • HTML5 Semantic Elements: Appropriate use of HTML5 semantic elements (<header>.<section>.<footer>.<main>…).
  • HTMLHint: I use tools to help me analyze any problems my HTML code may encounter.
    • Dirty markup
    • Webhint is a customizable declutter tool that helps you improve the accessibility, speed, cross-browser compatibility, and other features of your web site by reviewing best practices and common errors in your code.
  • Link Checker: Check that the page links are available and make sure you don’t have any 404 errors.
  • Noopener: If you are using thetarget ="_ blank"The external link, your link should haverel="noopener"Property to prevent the tag from being misappropriated. If you need to support older versions of Firefox, userel="noopener noreferrer"
  • HTML Code Specification: Develop consistent, flexible, and sustainable standards for HTML and CSS.
  • Get the most out of your code with the great open source tools W3C Tools.

HTML performance optimization

  • Style and script the page speed

  • Compress HTML: Remove comments, Spaces, and blank lines from the production file.

    • Removing all unnecessary Spaces, comments, and interrupt lines reduces the size of the HTML, speeds up the page load time of the site, and significantly reduces the user’s download time.
    • This can be removed using a build tool such as Glup
    • HTML minifier | Minify Code
    • One solution with HTML minifier — Perfection Kills

  • Remove unnecessary properties: Properties such as type=”text/javascript” or type=”text/ CSS “should be removed.

    • Type attributes are not required because HTML5 takestext/css 和 text/javascriptAs the default value. Useless code should be removed from your website or application because it adds to the size of your web page.
    • Ensure that all and<script>Tags do not have any type attribute.
    • The Script Tag | CSS-Tricks

  • Avoid blocking script loading. Be sure to load the CSS before using the JavaScript code.

    • Referencing CSS before referencing JavaScript allows for better parallel downloads, which can speed up browser rendering.
    • Make sure that<link> 和 <style>Always located in<script>Before.
    • Arrange styles and scripts to speed up the page

  • Use async and defer whenever possible

    • Make sure your JavaScript scripts are compatible with Async and Defer, and use async whenever possible, especially if you have a lot of script tags.
    • This way the page will not be redrawn during JavaScript loading, otherwise the browser will not redraw anything after a script tag that does not have these features.
    • Eliminates rendering blocking resources

  • DNS prefetch: A DNS query takes 60-120ms or longer to resolve possible network connection domain names in web pages in advance

<link rel="dns-prefetch" href="http://example.com/">
Copy the code

  • Reduce the number of inline scripts

    • Inline scripts consume a lot of resources during page loading because the parser thinks that inline scripts will change the structure of the page.
    • In general, use inline scripts as little as possible and use lessdocument.write()To output content, in some cases to speed up the overall page load. Modern W3C DOM methods are now commonly used in browsers to manipulate page content, rather than usingdocument.write()In the traditional way.

  • Zoom out and compress the image

    • Larger images cause the page to take more time to load. Before adding images to a page, consider using the compression features built into image processing tools such as Photoshop, or using dedicated tools such as Compress Jpeg or Tiny PNG to Compress images

  • Minimize the number of files

    • Reducing the number of files referenced by a page reduces the number of HTTP requests required to download a page, thus reducing the time to send and receive those requests.
    • Depending on its cache Settings, the browser may send an if-modified-since request to the web server for each referenced file to see If the file has been Modified Since the last time it was loaded. It takes too long to query the last modification time of the referenced file, resulting in a first-screen delay because the browser must confirm the modification time of each file before rendering the page.

  • Minimize the number of Iframes: Use iframes only when nothing else is technically feasible.

  • Avoid deep-level nesting of nodes: Deep-level nested nodes tend to require more memory to initially build and are slower to traverse the nodes, depending on how the browser builds the DOM document. The browser stores the structure of the entire HTML document as a DOM “tree” structure. The deeper the nesting of document nodes, the deeper the DOM tree will be built.

  • Page cache: If the page cache is not set, the server file is reread every time the page is refreshed. You can set the page cache to read data locally each refresh, improving page loading efficiency

    • By setting the page headerexpiresTo define the page expiration time, set the expiration time any longer to reach the “permanent” cache.
<meta http-equiv="expires" content="Sunday 26 October 2099 01:00 GMT" />
Copy the code

  • Avoid Table layout: Tables take up more bytes than other HTML tags (resulting in slower download times and more traffic on the server)

    • Do not usetableInstead, use floats, positioning, Flexbox, or grids.
    • Of course, tables are still a valid way to present tabular data. To help browsers render your page more quickly, you should avoid nested tables.
    • Reference: Why don’t we recommend a Table layout and a minimal layout

  • There are other examples of how to make HTML pages that load quickly, such as arranging page components efficiently, selecting user-agents appropriately, and so on

  • Prioritize resource allocation

  • Preload key assets to increase load speed

  • Establish a network connection early to increase perceived page speed

  • Prefetch resources to speed up future navigation

  • Best Practices for Speeding Up Your Web Site

  • Adaptive service based on JavaScript and Network information API

reference

  • W3C
  • wikipedia
  • MDN
  • The HTML standard
  • front-end-interview-handbook
  • front-end-Interview-Questions
  • Front-End-Performance-Checklist
  • Front-End-Checklist
  • 30-seconds-of-interviews
  • HTML cheat sheet