This is the first day of my participation in the August Challenge. For details, see:August is more challenging

It is a good way to study with questions.

HTML5+CSS3+JavaScript Web front-end development case tutorial (MOOCs version), wechat reading found in the study of Web front-end books, ok, I want to take the exercises after class, began to learn front-end development, yeah (^ – ^)V

Problem sets

1-1 What are the core technologies of web production?

HTML5 (a text-only language), CSS3 (Cascading Style Sheets), and JavaScript (a scripting language for web design)

1-2 Overview of the basic structure of HTML5 files.

An HTML5 file is made up of elements and tags. Elements are important parts of HTML5 files, such as title, IMG, and table. Element names are case insensitive, and HTML5 uses tags to specify an element’s attributes and its location in a file.

1-3 What is the start tag for creating an HTML document? What is the closing tag?

The entire contents of the file

What are the categories of elements 1-4? Please specify each.

  • Block elements

An element whose property is display:block. A non-block element can be changed to a block element by setting display:block.

1. By default, each block element starts on a new line, followed by another line.

2. By default, block elements are arranged vertically from top to bottom, and each block has its own row.

3. Block elements generally act as containers for other elements, containing inline elements and other block elements.

4, block element height, line height and its margins and margins can be controlled and adjusted through the CSS properties!

5. If width is not set, the block-level element has the same width as its parent element.

6. If no height is set, the height of the block-level element is the same as the height of its parent element.

  • Inline element

An element with the property display:inline and whose width varies with the content of the element. An element that is not inline can be made inline by setting display:inline.

1. Inline elements will not occupy a single row. Multiple adjacent inline elements will be arranged in the same row from left to right.

It is not valid to set the height of an inline element. The width is determined by its own content, but the height can be adjusted by using line-height.

The width of an inline element is determined by the size of the element itself, such as text, images, etc.

< span style = “box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; white-space: normal;”

5. Inline elements set the padding. Only the left padding left and right padding are valid, but the top and bottom are not.

Inline elements can only hold text or other inline elements. Do not nest block elements within inline elements.

  • Block inline elements

An inline-block element can be set to both the width and height of an inline element and can be displayed on an exclusive line. Setting display:inline-block converts an element to an inline block element.

1. Inline block elements are on the same line as other adjacent elements, but there is a gap between them, and the gap size is the font size;

2, inline block element height, width, row height and top and bottom margins can be set.

Common inline block elements:

Button, textarea, INPUT, SELECT, and IMG are inline-block elements

1-5 Explain the meaning of comments on a web page and how to add them.

Appropriate comments can help users better understand the division of the various modules in the page, and also help with future code review and modification. Commenting code is a good programming practice.

  • Comments in the file opening tag:
<! -- Annotated text -->Copy the code
  • Comments in CSS:
/* Annotated text */Copy the code
  • Comments in the JavaScript scripting language
Single-line comment: // The text of the commentCopy the code
Multi-line comments: /* Comments text */Copy the code

Other notes

  • View the source code of a web page: Right-click and click to view the source code

  • Download WebStorm

www.jetbrains.com/webstorm/