Take the HTML interview questions - 10 questions you must master
1. What are the inline elements? What are block-level elements? What are the empty (void) elements?
Inline elements: span, img, input, a, strong...
Block-level elements: div, h1 to h6, ul, ol, li, footer, header, section, p...
Empty elements: br, hr...
Conversion problem between elements:
display: inline; convert an element into an inline element
display: inline-block; Convert an element into an inline block element
display: block; convert an element into a block element
2. Picture format problem
png: Lossless compression, larger in size and volume than jpg, suitable for small icons
jpg: Lossy compression, smaller than png, suitable for medium and large pictures
gif: animation
webp: supports lossy or lossless compression at the same time, with the same quality image, webp is smaller in size. Disadvantages: poor compatibility
3. How to understand semantics
- Causes:
When there was only DIV in the past, because it didn't have any semantic meaning, it all relied on CSS to display the style of the page. Therefore, developers proposed the semantics of HTML structure, and W3C formulated semantic tags. - What is semantics:
Semanticization refers to the selection of appropriate tags (code semantics) based on the structure of the content (semantic content), so that developers can read and write more elegant code, and at the same time allow browser crawlers and machines to analyze well . That is, the tags that make up the HTML structure should be meaningful, such as head means the head of the page, footer means the bottom of the page, not all of them are represented by div - Semantic tags:
Semantic elements:<article> <aside> <details> <footer> <main> <time>etc. - Determine whether the page uses semantics:
Remove the CSS of the page and look at the HTML code structure. If the page structure is still clear and the content can be displayed normally, then semantics is used. - Why there are semantics and
semantic advantages:
• Conducive to SEO, helping crawlers to grab more effective information: crawlers rely on tags to determine the context and the weight of each keyword • Screen readers can use them as signposts to help visually impaired users navigate pages (That is, barrier-free web pages, please refer to: Accessibility Principles)
• div finds meaningful code blocks more easily than nonsensical code blocks
• Conducive to building a clear structure, conducive to the development and maintenance of the team
• Better user experience, even if CSS cannot be loaded, the page structure is still clear
4.H5 new features
- Semantic tags
- Media and video tabs
<audio controls="controls">
<source src="" type="" />
</audio>
<video muted="muted" loop="loop" controls>
<source src="" type="" />
Your browser does not support playing this video
</video>
- local cache： localStorage、sessionStorage
-
New features added to the form
<li>Email: <input type="email" ></li> <li>URL: <input type="url" /></li> <li>Date: <input type="date" /></li> <li>Date: <input type="time" /></li> <li>Number: <input type="number" /></li> <li>Mobile phone number: <input type="tel" /></li> <li>Search: <input type="search" /></li> <li>Color: <input type="color" /></li> -
Image function Canvas: If we want to add Canvas tag in our HTML document, we need ID, width and height.
<canvas id="myCanvas" width="100" height="100"> </canvas>
SVG:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />
</svg>
HTML SVG is a markup language for describing vector and raster graphics, and XML text files define SVG images and related behaviors.
5. The difference between using link and @import when importing styles
- order of appearance:
link first, then @import (compatibility link is stronger than @import: link is the syntax provided by HTML, there is no compatibility problem @import is the syntax provided by CSS, only compatible with IE5 and above); - Loading order:
link css is loaded at the same time when the page loads
The css introduced by @import needs to be loaded after the page is loaded - The weight of the link style is higher than that of @import
- It is recommended to use
link
Expansion
The link tag can be preloaded through the rel attribute, such as <link rel="dns-prefetch" href="">
rel has several attributes:
dns-prefetch: The browser will perform DNS resolution and cache the domain name in href. When requesting the domain name again, it can save the process of querying the IP, thereby reducing time loss
prefetch/preload: download and cache a resource in advance, the difference is that prefetch may be ignored when the browser is busy, but preload will definitely download in advance
preconnect: Pre-execute DNS resolution, TCP handshake, etc. before formally sending http requests. Save time by eliminating round trip delays
prerender: The browser will not only load resources, but also parse and execute the page, and perform pre-rendering
6. The title and alt of the img tag
Difference one:
title : The value displayed when the mouse moves into the image
alt : The value displayed when the image cannot be loaded
Difference two:
At the level of seo, in order to increase the SEO effect, alt attributes should be added to describe the content or keywords of this picture, because the content of the picture cannot be captured.
7. The difference between i and em
definition:
i: Entity label, used for text tilting.
em: is a logical label, used to emphasize the text content
the difference:
i is just an italic label with no real meaning.
em indicates the importance of the characters in the label for emphasis.
Scenes:
i is more used in font icons, em terms (medicine, biology)
PS:
The HTML emphasis element `<em> `marks content that the user should focus on
`<em>` elements can be nested, and the deeper the nesting level, the more important the content is considered to be.
Note: Normally, this element will be displayed as italic text by the browser
8. The difference between title and h1
definition:
title: summarizes the website information, written in <head>, tells search engines or users what the content theme of this website is
h1: Article subject content, written in <body>
the difference:
title is displayed on the title of the webpage, h1 is displayed on the content of the webpage
For SEO, title is more important than h1
9. What problems will result from setting the same id to multiple elements in a page
The css style set according to the id will also appear.
The element event is triggered according to the id, only the first element is valid and the following elements cannot be obtained normally
test code
<style>
#one{
color: aquamarine;
}
</style>
<body>
<div id="one">47</div>
<div id="one">587</div>
<div id="one">587</div>
</body>
<script>
var one= document.getElementById('one')
one.onclick=function(){
console.log('123')
}
</script>
10.HTML head tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
Document Type Declaration!DOCTYPE
usage:
<!DOCTYPE html>
effect:
- The <!DOCTYPE> declaration is placed at the very front of the document, before the tag. This tag tells the browser which HTML or XHTML specification the document uses
- <!DOCTYPE> is not an HTML tag, it is a document type declaration tag
page language lang
<html lang="en"> specifies the html language type
The 2 most common:
endefines the language as Englishzh-CNdefines the language as Chinese
The role of lang:
According to the lang attribute to set the css style of different languages, or the font tells the search engine to do accurate recognition
Let the grammar checker do the language identification
Help translation tool to do recognition
Help web reader program to do recognition
character set
<meta charset="UTF-8" />
A character set is a collection of characters.
In order for a computer to accurately process various character set texts, character encoding is required so that the computer can recognize and store various texts.
PS:
Additionally, the <meta> element contains the name and content attributes:
<meta http-equiv="X-UA-Compatible" content="initial-scale=1.0" name="viewport">
- name specifies the type of element; the description should contain information about the element type.
- content specifies the actual metadata content.
These two meta elements are used to define the author of your page and provide a brief description of the page (it may make your page appear more SEO in relevant searches of search engines)
