Sharing the concept I've picked up for HTML. Updates regularly.
1. How does Doctype work?
DOCTYPE also known as the html document type declaration. The doctype declaration would tell the browser which rendering mode to use for that document to be analysed by the browser.
Syntax example for HTML5: <!DOCTYPE html>
Full standards mode renders pages according to the W3C web standards.
Quirks mode renders pages in a non standards compliant way.
Almost standards mode is close to full standards mode, but features support for a small number of quirks.
2. What's the difference between src and href?
The src attribute is used to embed a resource, usually URLs into a document for <img> and <script> tags. The loading and processing of the page is paused until this the browser fetches, compiles and executes the file.
href (Hypertext Reference) attribute specifies the location of a Web resource. The browser understands that this resource is a stylesheet and the processing parsing of the page is not paused (rendering might be paused since the browser needs the style rules to paint and render the page).
3. Async vs Defer in script tag?
Both async and defer load scripts asynchronously without blocking the DOM, but there are two differences between async and defer.
Defer waits for the DOM to be loaded. Async doesn’t.
The difference is async doesn’t care whether the DOM is fully loaded. defer waits for DOM to be loaded before it executes.
This means:
You should use defer if your script requires the DOM.
If you use async and you need the DOM, you run the risk that the element you need cannot be found (which is a potential source of bugs).
You should use async if your script contains the following conditions:
The DOM you need is already present (or the script doesn’t need the DOM)
The script doesn’t depend on other scripts
4. Frequently used meta tags
The meta tag is defined by the name and content attributes, used to describe the attributes of the web page document, such as the author of the web page, web page description, keywords, etc.
Commonly used meta tags:
(1) charset, used to describe the encoding type of HTML documents:
<meta charset="UTF-8">
(2) keywords, page keywords:
<meta name="keywords" content="keywords" />
(3) description, page description:
<meta name="description" content="page description content" />
(4) Refresh, page redirection and refresh:
<meta http-equiv="refresh" content="0;url=" />
(5) viewport, adapted to the mobile terminal, can control the size and ratio of the viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Among them, the content parameter has the following types:
width viewport: width (device-width)
height viewport: height (device-height)
initial-scale: initial scale
maximum-scale: maximum zoom ratio
minimum-scale: minimum zoom ratio
user-scalable: Whether to allow the user to zoom (yes/no)
(6) Search engine indexing method:
The content parameter has the following types:
all: The file will be retrieved, and the link on the page can be queried;
none: The file will not be retrieved, and the link on the page cannot be queried;
index: the file will be retrieved;
follow: The link on the page can be queried;
noindex: The file will not be retrieved;
nofollow: The links on the page cannot be queried.
5. Why we use HTML Semantic Elements
Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way.
First, it is much easier to read. This is probably the first thing you will notice when looking at the first block of code using semantic elements.
It has greater accessibility. Search engines and assistive technologies (like screen readers for users with a sight impairment) are also able to better understand the context and content of your website, meaning a better experience for your users.
*Common semantic elements: *
1.<header></header>
2.<nav></nav>
3.<section></section>
4.<main></main>
5.<article></article>
6.<aside></aside>
7.<footer></footer>
6. Pros and Cons for Iframe
The <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
Pros:
It can load resources with huge volume such advertisements as iframe can load the scripts concurrently.
It can achieve cross-subdomain communication
Cons:
iframe will block the main page's onload event
if third party websites were embedded, there may be safety concerns such as CSRF attack.
7. What does the label do?
The element is used to associate a text label with a form field.
8. What is New in HTML5?
Semantic elements such as header, nav and footer.
media element:
audio :
<audio src='' controls autoplay loop='true'></audio>video :
<video src='' poster='imgs/aa.jpg' controls></video>source:
<video> <source src='aa.flv' type='video/flv'></source>
<source src='aa.mp4' type='video/mp4'></source> </video>
Top comments (0)