This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Preface ⚑

HTML is probably one of the first languages to be introduced to by front-end developers. Basically when you start learning the front end, you learn HTML first. Although it may not seem like much, there are still some points we need to pay attention to during the interview. The following is an introduction to HTML in the front-end interview. Let’s learn ~🧐

⭐ a, the content of the problem set to look first

🌠 2. Specification related

1. How do you understand the semantics of HTML structures

  • More in line withW3CUniform normative standards, yesTechnology trends.
  • The browser’s default style will keep the page structure clean even when there is no style.
  • User friendly to dysfunction. Screen readers (if the visitor is visually impaired) will “read” your page based entirely on your markup.
  • Be friendly to other non-mainstream terminal devices. Like set-top boxes,PDA, various mobile terminals.
  • rightSEOFriendly.

2. How do browsers manage and load Html5 offline storage resources

What is:

  • Online in case the browser findshtmlThe head ismanifestProperty, which will requestmanifestFile, if first accessapp, the browser will be based onmanifestDownload the corresponding resources and store them offline.
  • If you have already visitedappIf the resource is stored offline, the browser will load the page with the offline resource, and the browser will compare the new onemanifestFile with oldmanifestFile. If the file has not changed, nothing is done. If the file has changed, the resources in the file are re-downloaded and stored offline.

How to use:

  • Add one to the page header as abovemanifestThe properties of the;
  • incache.manifestUnder the fileWrite resources for offline storage;
  • inofflineThe operatingwindow.applicationCacheImplement requirements.

HTML W3C standard

Tag closure, tag lowercase, no disorderly nesting, use of external chain CSS and JS, structure behavior separation.

4, Doctype function? How to distinguish strict mode from promiscuous mode? What do they mean?

  • <! DOCTYPE>The declaration is first in the document, inhtmlTag before. Tell the browser’s parser what document type and specification to use to parse the document.
  • Strict mode of typesetting andJSThe mode of operation isTo the highest standards supported by the browserRun.
  • In promiscuous mode, pages are displayed in a loosely backward compatible manner. Emulate the behavior of older browsers in case the site doesn’t work.
  • DOCTYPENonexistent or incorrectly formatted documents can beMixed modeRendering.

5. The content property of viewPort

<meta name="viewport" content="" />Width - the width of the viewport [device - width | pixel_value] width if directly set pixel_value numerical, most of the android mobile phone does not support, but the ios support; Height - the height of the viewport (range from 223 to 10000) user - scalable [yes | no] whether to allow scaling of initial - scale [number] initialization ratio > (range from 0 to 10) Minimum-scale Maximum-scale maximum scale-target-densityDPI values are as follows (It is generally recommended to set medium loudness density or low pixel density, the latter to the specific value dPI_value, -- DPI_value is usually 70-400// number of pixels per inch -- device-dPI Default pixel density -- high-DPI high pixel density -- medium-dpi medium pixel density -- Low-dpi Low pixel densityCopy the code

Side question: how to deal with the mobile 1px rendering 2px?

Local treatment:

The viewport attribute in the meta tag is set to initial-scale 1.

Rem according to the design standard, and the use of transfrome scale(0.5) to reduce twice.

Global processing:

The viewport attribute in the meta tag is set to initial-scale 0.5.

Rem according to the design standards can go.

6. Meta related

<! DOCTYPEhtml> <! --H5 standard declaration, using HTML5 docType, case insensitive --> 
<head lang="En"> <! -- standard way to write lang attributes --> 
<meta charset='utf-8 ΚΉ> <! Declare the character encoding used in the document --> 
<meta http-equiv="X" - UA - Compatible content="IE=edge,chrome=1 /"> <! -- Give priority to specified browsers and use specific document modes --> 
<meta name="Description" content="Contains a maximum of 150 characters" /> <! -- Page description --> 
<meta name="Keywords" content="/"> <! -- Page keywords --> 
<meta name="The author" content="The name, email@gmail.com"/ > <! -- Page writer --> 
<meta name="Robots" content="The index, follow" /> <! -- Search engine crawl --> 
<meta name="Viewport" content="The initial scale=1, maximum-scale=3, minimum-sc 
<meta name="Apple -- mobile web app - title" content="Title"> <! - the iOS devices begin -- > 
<meta name="Apple -- mobile web app - capable" content="Yes" /> <! -- Whether to enable WebApp full-screen mode after adding to the home screen, delete apple's default toolbar and menu bar --> <meta name="Apple -- mobile web app - the status bar - style" content="Black" /> 
<meta name="The renderer" content="Its"> <! -- Enable webKit in 360 browser --> 
<meta http-equiv="X" - UA - Compatible content="IE=The edge"> <! Avoid compatibility mode in IE --> 
<meta http-equiv="Cache-control" content="No - siteapp" /> <! -- don't let Baidu transcode --> 
<meta name="HandheldFriendly" content="True"> <! -- Optimized for handheld devices, mainly for older browsers that don't recognize viewports --> 
<meta name="MobileOptimized" content="320"> <! -- Microsoft's old browser --> 
<meta name="Screen -" orientation" content="Portrait"> <! -- UC forced portrait --> 
<meta name="X5 -" orientation" content="Portrait"> <! --QQ forced portrait screen --> 
<meta name="Full screen" content="Yes"> <! --UC mandatory full screen --> 
<meta name="X5 - fullscreen" content="True"> <! --QQ mandatory full screen -->
Copy the code

πŸ’« 3. Labels are related

1. Talk about the title and Alt attributes

  • Both properties are displayed when the mouse is slid over the element.
  • alt 是 imgThe unique property of isEquivalent description of picture contentTo replace text when the picture does not display properly.
  • titleAttributes can be used in addition tobase.basefont.head.html.meta.param.scriptandtitleAll other tags, yesrightdomElement.

2. What are the disadvantages of iframe?

  • iframeBlocks the main pageOnloadThe event
  • The search engine’s retrieval program cannot interpret this kind of page, not goodSEO
  • iframeThe connection pool is shared with the main page, and browsers have restrictions on connections to the same domain, so parallel page loading can be affected
  • useiframeThese two disadvantages need to be considered before. If needediframeIt is better to passjavascriptdynamic
  • toiframeaddsrcProperty value, which gets around both of these problems

3. What are the new features and elements removed from Html5

(1) New elements

  • paintingcanvas
  • Used for media playbackvideo ε’Œ audioThe element
  • Local Offline storagelocalStorageData is stored for a long time. Data is not lost after the browser is closed
  • sessionStorageData is automatically deleted after the browser is closed
  • Better semantically oriented content elements, such asarticle 、footer,header,nav,section
  • Form control,calendar 、 date 、 time 、 email 、 url 、 search
  • The new technologywebworker 、 websocket 、 Geolocation

(2) Removed elements

  • Pure expressive elements:basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
  • Elements that have a negative impact on usability:frame 、 frameset 、 noframes

(3) Support HTML5 new tags

  • IE8/IE7/IE6Supported bydocument.createElementMethod to generate a label.
  • You can take advantage of this feature to make these browsers support itHTML5The new label.
  • Once the browser supports the new tag, it also needs to add the default style for the tag.

4. What is the function of Label? How does it work?

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

<label for="Name">Number:</label> 

<input type="Text" name="Name" id="Name"/> 

<label>Date:<input type="text" name="B"/></label>
Copy the code

5. What are the advantages of div+ CSS over table

  • It’s more convenient when you change it, you just need to change itcssFile.
  • Page loading speed, clear structure, simple page display.
  • Expression is separated from structure.
  • Easy to optimizeseoThe search engines are friendlier and the rankings are easier.

6. Outline the difference between SRC and href

  • SRC is used to replace the current element, and href is used to establish a link between the current document and the referenced resource.

  • SRC, short for source, refers to the location of an external resource, which will be embedded in the document at the current tag location. SRC resources are downloaded and applied to documents when requested, such as JAVASCRIPT scripts, IMG images, and frame elements.

  • SRC also refers to the fact that when the browser parses the element, it suspends the downloading and processing of other resources, such as images and frames, until the resource is loaded, compiled, and executed, similar to embedding the resource in the current tag. This is why js scripts are placed at the bottom and not at the top.

  • Href is short for Hypertext Reference, refers to the location of a web resource, establishes a link between the current element (anchor) or document (link), If we add to the document, the browser recognizes the document as a CSS file, downloads the resources in parallel, and does not stop processing the current document. This is why it is recommended to load CSS using link rather than @import.

7, know the web page production will use the picture format

  • png-8.png-24.jpeg.gif.svg.
  • But none of the above is the final answer the interviewer is looking for. Interviewers want to hear Webp. (Check whether there is attention to new technology, new things)
  • A popular scienceWebp ： WebPFormat, Google (google) is designed to developSpeed up image loadingImage format. Image compression volume is only aboutJPEG ηš„ Two-thirds of theAnd can save a lot of server bandwidth resources and data space.Facebook 、 EbayAnd other well-known websites have begun to test and useWebPFormat.
  • At the same mass,WebPFormat the volume of the image thanJPEGFormat images40% smaller.

How to embed audio and video in HTML5 pages?

HTML5 includes a standard way to embed audio files in formats including MP3, Wav, and Ogg:

<audio controls> 
<source src="jamshed.mp3" type="audio/mpeg"> 
	Your browser does'nt support audio embedding feature. 
</audio>
Copy the code

As with audio, HTML5 defines a standard way to embed video in formats including MP4, WebM, and Ogg:

<video width="450" height="340" controls>
<source src="jamshed.mp4" type="video/mp4">
	Your browser does'nt support video embedding feature. 
</video>
Copy the code

9. What are HTML global attributes

  • class: Sets the class identity for the element
  • data-*: Adds custom attributes to an element
  • draggable: Sets whether elements can be dragged
  • idElements:id, unique in the document
  • lang: the language of the element content
  • style: inlinecssstyle
  • title: Suggestion information about the element

✨ 4. Conclusion

There aren’t a lot of htML-related topics that you’ll be looking at in the interview, but you should remember them a little bit in case you’re suddenly asked questions during the interview.

This is the end of htML-related topics. Hope to help everyone!

If the article is wrong or want to add new content, welcome to add my wechat pointed out, πŸ‘‰ vx: MondayLaboratory~

Monday in the whole spring and autumn recruitment preparation process, know from 0 to 1 preparation is very not easy. I also want to sort out all the content I have learned to make this interview column more perfect and benefit more young partners preparing for interviews ~πŸ’¬

In the future, if there are new additions to the column content, it will be placed in the update address below, you can click the link below to direct to ~

🐣 Egg One More Thing

(: Data acquisition

πŸ‘‰ wechat concern public account Monday laboratory, reply keywords HTML interview PDF can obtain relevant information ~ πŸ‘‰ reply interview daquan PDF can obtain the full series of information!

(: Update address

πŸ‘‰ offer comes to the interview column

) Introduction

  • If you think this article is helpful to you, you might as well like to support yo ~~πŸ˜‰
  • That’s all for this article! See you next time! πŸ‘‹ πŸ‘‹ πŸ‘‹