I would like to introduce the open source project ———— daily front-end interview that I have led recently. I will sort out the front-end domain knowledge, including HTML5, CSS3 fundamentals, JavaScript principles, design patterns, framework principles, engineering principles, browser principles and classical algorithms. Although it is a daily interview with time fragmentation, But the content is complete and systematic, from the interview, but more than the interview. It is suitable for the primary front-end to move up, gradually penetrate into the principle, understand the design ideas behind the framework, and aim to accumulate the front-end core knowledge in the fragmented time, so as to be able to write freely in the increasingly complex front-end world.

The first few weeks were about THE basics of HTML and CSS. Here’s the first week.

You can also go to github and check out the corresponding VuePress blog.

001: What are the differences between HTML5 and HTML4?

The declarations

  1. HTML5 file type declaration (
    ) becomes the following:

      
Copy the code

Standard:

  1. HTML5 document parsing is no longer based on SGML(Standard Generalized Markup Language), but has its own set of standards.

The label on

  1. Added semantic tags including
<header>,<footer>,<section>,<article>,<nav>,<hgroup>,<aside>,<figure>
Copy the code
  1. Do away with some of the page beautification aspects of tagging, make style and structure separation more complete, including
<big>,<u>,<font>,<basefont>,<center>,<s>,<tt>
Copy the code
  1. By addingThe < audio > and < video >Two tags to support audio and video use in multimedia.

Properties in terms of

  1. Some form attributes have been added, mainly the input attribute enhancement
<! -- This type requires a well-formed email address -->
<input type=email >
<! Enter the correct URL address -->
<input type=url >
<! -- Request format number, default will have up and down two buttons -->
<input type=number >
<! -- Time series, currently only supported by Opera and Chrome -->
<input type=date >
<input type=time >
<input type=datetime >
<input type=datetime-local >
<input type=month >
<input type=week >
<! -- Default placeholder -->
<input type=text placeholder="your message" >
<! -- Default focus attribute -->
<input type=text autofacus="true" >
Copy the code
  1. Other tags have added some attributes,
<! -- Add charset attribute to meta tag -->
<meta charset="utf-8">
<! Script tag adds async property -->
<script async></script>
Copy the code
  1. Make some attribute names have Boolean attributes by default
<! -- write only attribute name default is true -->
<input type="checkbox"  checked/>
<! -- Attribute name =" attribute name "also true -->
<input type="checkbox"  checked="checked"/>
Copy the code

storage

  1. Added WebStorages, including localStorage and sessionStorage

  2. IndexedDB and WebSQL were introduced to allow the creation of database tables and storage of data on the browser side. The difference between the two is that IndexedDB is more like a NoSQL database, while WebSQL is more like a relational database. The W3C no longer supports WebSQL.

  3. Application Cache is introduced, which can cache the Web and be used when there is no network. Application cache is created by creating cache manifest files, which provides low-level technical support for PWA(Progressive Web App).

Summary: For the difference between HTML5 and HTML4, these basic concepts are to have an impression, maybe now is still relatively rough, but later will be asked for details step by step, slowly in-depth, to achieve the effect of knowing what is what.

002: What are the attributes of the meta tag?

Description: Often used to define page descriptions, keywords, last modified dates, and other metadata. This metadata will serve browsers (how pages are laid out or reloaded), search engines, and other web services.

Charset attribute

<! Define the character set of the web document
<meta charset="utf-8" />
Copy the code

Name + Content attribute

<! -- Page writer -->
<meta name="author" content="Open Source Technology Team"/>
<! -- Page address -->
<meta name="website" content="https://sanyuan0704.github.io/frontend_daily_question/"/>
<! Copyright information -->
 <meta name="copyright" content="2018-2019 demo.com"/>
<! -- Page keyword, used for SEO -->
<meta name="keywords" content="meta,html"/>
<! -- Page description -->
<meta name="description" content="Page Description"/>
<! Search engine index (all) -->
<meta name="robots" content="all" />
<! -- Common viewport Settings on mobile -->
<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no"/>
<! -- device-height: initial-scale: width (value/device-width) Initial scaling scale (ranging from >0 to 10) minimum-scale: indicates the minimum scaling allowed to the user. Maximum-scale: indicates the maximum scaling allowed to the user. User-scalable: Indicates whether the user can manually scale (no,yes) -->
Copy the code

HTTP – equiv properties

<! -- Expires Specifies the expiration date of a web page. Once the page expires, it must be downloaded from the server. -->
<meta http-equiv="expires" content="Fri, 12 Jan 2020 18:18:18 GMT"/>
<! Wait a certain amount of time to refresh or jump to another URL. The following 1 represents 1 second -->
<meta http-equiv="refresh" content="1; url=https://www.baidu.com"/>
<! - Prevents the browser from reading the web page from the local cache, meaning that once the browser leaves the web page, it cannot access the page without connecting to the network. -->
<meta http-equiv="pragma" content="no-cache"/>
<! -- Is also a way to set cookies, and can specify expiration time -->
<meta http-equiv="set-cookie" content="name=value expires=Fri, 12 Jan 2001 18:18:18 GMT,path=/"/>
<! -- Use the browser version -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<! - for WebApp full-screen mode, hide status bar/sets the status bar color, the value of the content for the default | black | black - translucent -- -- >
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
Copy the code

003: What is the difference between SRC and href?

define

Href is short for Hypertext Reference.

Common scenarios:

<a href="http://www.baidu.com"></a> 
<link type="text/css" rel="stylesheet" href="common.css"> 
Copy the code

SRC is short for source. The purpose is to download files to an HTML page.

Common scenarios:

<img src="img/girl.jpg"> 
<iframe src="top.html"> 
<script src="show.js"> 
Copy the code

The results

  1. Href is used to establish a link between the current document and the referenced resource
  2. SRC replaces the current content

Browser parsing mode

  1. When the browser encounters href, it downloads the resource in parallel and does not stop processing the current document. (This is also why it is recommended to load CSS using link rather than @import.)
  2. When the browser parses to SRC, it suspends downloading and processing of other resources until the resource is loaded or executed. (This is why the script tag is placed at the bottom and not at the head)

004: What is the difference between defer and async in the Script tag?

By default, scripts are downloaded and executed synchronously in document order. While the script is downloading and executing, document parsing is blocked until the script is downloaded and executed.

Here are the differences between Async and defer:

  • When the defer property is present in a script, the loading of the script and the document happens asynchronously, and the script does not start executing until the document is parsed (the DOMContentLoaded event occurs).

  • When a script has the async property, the loading of the script and the loading of the document also occurs asynchronously. However, after the script is downloaded, THE HTML parsing stops and the script is executed. After the script is parsed, the HTML parsing continues.

  • When a script has both async and defer properties, the effect is the same as async.

005: How many ways can you center an element horizontally and vertically?

Horizontal center

  • For inline elements: text-align: center;

  • For block-level elements of fixed width:

  1. Width and margin implementations. margin: 0 auto;

  2. Margin-left: -width/2, if the parent element position: relative

  • For block-level elements of unknown width

  1. The table tag is horizontally centered with margin left and right Auto. Use the table tag (or simply set the block-level element to display:table) and add a margin of auto to the tag.

  2. Inline-block implements a horizontally centered method. Display: inline – block; (display:inline) and text-align:center; Achieve horizontal center.

  3. Absolute position + Transform, translateX can move 50% of its element.

  4. Flex layout uses context-content: Center

Vertical center

  1. Center with line-height, which is suitable for plain text classes

  2. The relative positioning of the parent container is set, and the absolute positioning of the child is set. The label is self-centered by margin

  3. Display: flex; Sub-set margin to auto to achieve adaptive center

  4. Relative positioning is set for the parent level, and absolute positioning is set for the child level, which is realized by displacement transform

  5. The table layout is implemented by converting the parent level to a table format and setting vertical-align for the child level. (Note that vertical-align: middle is used only for the inline element and the element whose display value is table-cell.)

006: Advantages of floating layouts? What are the disadvantages? What are the ways to clear floats?

Floating layout introduction: When an element is floating, it can move left or right until its outer edge touches the border of the box containing it or another floating element. Elements float out of the normal flow of the document, so the box in the normal flow of the document behaves as if the floating element did not exist.

advantages

The advantage of this method is that it is good to surround the image with text when mixing images. In addition, when an element is floated, it has some block-level properties such as the ability to set the width, but there are some differences between it and inline-block. The first is that for horizontal sorting, float can set the orientation while inline-block orientation is fixed. Another problem is that inline-blocks sometimes have a white space when used

disadvantages

The most obvious disadvantage is that the floating element cannot support the parent element once it is out of the document flow, causing a high collapse of the parent element.

The way to clear the float

  1. Add extra labels
<div class="parent">// Add additional labels and add the clear attribute<div style="clear:both"></div>// You can also add a br tag</div>
Copy the code
  1. The parent adds overflow properties, or sets the height
<div class="parent" style="overflow:hidden">//auto can also // set overflow of the parent element to hidden<div class="f"></div>
</div>
Copy the code
  1. Creating a pseudo-class selector to clear floats (recommended)
Parent :after{/* Sets the content of the added child element to be empty */ content: ''; */ display: block; /* Set the height of the added child element to 0 */ height: 0; /* Set add child element to invisible */ visibility: hidden; /* set clear: both */ clear: both; } <div class="parent"> <div class="f"></div> </div>Copy the code

This is the end of the first week of content summary, hope to inspire you, see you next week!