Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what are the basic knowledge points of HTML, CSS and JS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Overview of Web

Three elements of Web: browser, server, HTTP protocol

How HTML works: HTML is a text file deployed on the server. According to the HTTP protocol, the browser sends a request to the server, the server responds and returns a HTML to the browser, and the browser interprets and executes HTML, thus displaying what is HTML?

HTML is Hypertext markup language (Hyper Text Markup Language), a text-only language used to design markup languages for web pages. Files written in this language are suffixed with .html or .htm and are interpreted and executed by browsers. Scripting language segments such as JavaScript can be nested on HTML pages.

HTML tag

HTML tags are also commonly referred to as HTML tags, HTML elements; HTML tags are keywords surrounded by angle brackets. For example, HTML tags usually appear in pairs. For example, the first tag in a tag pair is the opening tag, the second tag is the closing tag, and the opening and closing tags are also known as open tags and closed tags.

HTML comments:

You can insert comments into your HTML code to improve its readability and make the code easier to understand. The browser ignores comments and does not display them

HTML document type:

Disclaimer: HTML is made up of several different versions. Only when you fully understand the exact HTML version used in the page can the browser display the HTML page correctly. That's what it means.

Instead of a HTML tag, it provides browsers with information about the version in which HTML was written

HTML tags: definition: tags are used to define the header of a document and are containers for all header elements. Elements in the tag can refer to scripts, instruct browsers where to find stylesheets, provide meta information, and so on.

The header of a document describes all kinds of information and attributes of the document, including the title of the document, its position in web and its relationship with other documents. The data contained in the header of most documents will not be displayed to the reader as content.

The following tags can be used in the head section:

Text element:

Function: text is an important part of the web page, and directly written text will be displayed in the default style of the browser.

Text element list: if the text is contained in a text element, it will be displayed as the style owned by the element

HTML title:

The title is defined by the ~ tag in order to be able to display in an eye-catching manner, define the maximum title and define the minimum title

[external link image transfer failed. The origin server may have hotlink protection mechanism. It is recommended to save the image and upload it directly (img-H0qWULYZ-1613216632726) (C:\ Users\ Melody\ AppData\ Roaming\ Typora\ typora-user-images\ image-20210213192107880.png)]

HTML paragraph:

The paragraph is through the

Tag to define

Element provides a way to structure text

The text in the element pair is displayed as a separate paragraph, separated from the front and back text wrapping, adding an additional vertical white space as line spacing

HTML list:

A list is an alignment of lines of text with similar characteristics or sequence. All lists are made up of list types and list items.

List type:

Ordered list: used to list items that appear to have a specific order, which can only contain list items

Unordered list: used to list items that do not have a specific order on the page, and can only contain specific list item elements

List items: used to represent the specific contents of the list

HTML list nesting: use list elements in nests to build multi-tier lists

HTML partition elements:

Used for some grouping of elements, often used for page layout, block partition elements, inline partition elements

How elements are displayed:

Block-level elements: by default, block-level elements occupy a single line, that is, they automatically wrap before and after the element, such as

Inline elements: do not wrap and are on the same line as other inline elements

An element is an inline element that can be used as a container for text with no specific meaning

Element definition italics

Define emphasis text

Used to define text with delete lines

Used to define underlined text

Space folding: by default, multiple spaces and line breaks in HTML are compressed into a single space, that is, only one space is displayed

Entity reference: space: & nbsp; (less than sign): & gt

HTML image:

Use

Element to add a picture to the page

Syntax:

Common attribute: width,height

Src means "source". The value of the original attribute is the URL address of the image, but the address value is divided into absolute path and relative path.

Absolute path: the complete path of a file starting from the highest-level directory, no matter what the current path is, you can always find the file to connect to after using the absolute path

Relative path: the location of the file is relative to the current file location, including the directory name or pointing to a file that can be found from the current directory

HTML hyperlink:

Href attribute: link address URL target attribute: how the target is opened

Anchor: a mark on a line in a document that links to a location in the document

Link anchor: add # content before the anchor

Define anchor points: content

The two should be used correspondingly, echoing back and forth.

HTML form

Tables are defined by tags and are usually used to organize structured information. they are rectangular boxes called cells that are arranged together from left to right and from top to bottom. The data of the table is stored in the cell.

Create a table:

Create a line:

Create a column:

Common properties of tables:

Border border

Width/height width / height

Align alignment

The distance between the padding border and the text, inner margin

Cellspacing: the distance between cells

Cross-line attribute: rowspan merge rows colspan juxtaposed

Row grouping: the table is divided into three parts: header, topic and footer.

HTML form:

A form is used to display collected information and submit it to the server. A form is an area that contains form elements.

Two elements: form element, form control

A form is a means of transferring data from the browser to the server

Form elements:

Defines that the form uses pairs of tags to indicate that you want to pass data from the controls covered in this element to the server

Main attributes:

Action: form submission URL

Method: data submission method

Enctype: how form data is encoded

Form control: consists of many different types of controls, which are HTML elements, are information entry items, and contain

Input elements (with different appearance): text boxes, password boxes, radio boxes, buttons...

Other elements: tags, text fields, drop-down selection

Input element

Text box

Password box:

Main attribute: value: any text is entered freely by the visitor

Maxlength: limit the number of characters entered

Readonly: set read-only for text controls

Check box:

Check box:

Attribute: value: text. When the form is submitted, the radio button is selected, and the server is sent.

Name: implement grouping. A set of checkboxes or checkboxes must have the same name.

Check: setting selected

Submit button: send form data to the server

Reset button: clear the content and set it to the initial default state

Normal buttons: execute client script

Hidden fields: the form contains but does not want the user to see

File selection box: select uploaded files

Other elements:

Labels: text in the form is used to set the display name for the control

Syntax: text

Attribute: for: sets the control ID associated with the text. Clicking the label after association is equivalent to clicking the control.

Text fields: multiline text box

Syntax:

Attribute: cols: specify the number of columns in the text field; rows: specify the number of lines in the text field; readonly: read-only in the text field

Drop-down selection

Syntax:

CSS Overview what is CSS?

CSS is a cascading style sheet (Cascading Style Sheets). Styles define how to display HTML elements. Styles are usually stored in style sheets. CSS is HTML's makeup artist.

How to use CSS?

Inline styles: defined in a single HTML element

Internal style sheets: defined in the header element of HTML

External style sheets: define styles in an external CSS file (.css), which is referenced by the HTML page

Inline style: defined in the attribute style of the HTML element

Css syntax: only one or more attributes separated by semicolons are required as the style attribute values of the element, the attribute values are connected with a colon (:), and multiple attribute values are separated by a semicolon (;).

Internal stylesheets: adding elements inside elements of HTML

External style sheets: styles are defined in a separate CSS file, a plain text file with the suffix .css, which contains only style rules

How to use ① to create an external stylesheet file

② references the style file

CSS syntax specification:

A CSS rule consists of two parts: a selector and one or more style declarations

CSS comments: CSS comments start with "/ *" and end with "* /"

/ * this is a comment * /

Characteristics of CSS rules

Priority: if there are multiple CSS rules for the same element, the declaration of the conflict shall prevail with the higher priority (nearest principle)

Cascading: if there are multiple CSS rules for the same element, non-conflicting declarations can be superimposed

Inheritance: the CSS declaration of the parent element can be inherited by the child element, such as font, color

CSS selector

Element selector: you can select the target of CSS action by element name

Class selector: you can use this style declaration for any element that can have a class attribute. Set the class attribute of the element to the style class name, and you can combine the class selector with the element selector to achieve subdivision control of different styles in an element (.class _ name).

ID selector: in a way independent of document elements, it acts only on the value of the id attribute (# id_name)

Selector group: selector declared as a comma-separated list of selectors, applying some of the same rules to multiple elements

Derived selector: used to select child elements

Category: descendant selector: select the descendant (descendant) element of an element

Child element selector: select all child elements of an element

Pseudo-class selector: used to set the style of the same element in different states

Common pseudo classes:

Link adds styles to unaccessed hyperlinks

: visited adds styles to the accessed ones

: active: add styles to inactive elements

: hover: adds a style when the mouse hovers over the element

Focus: when an element gets focus, add a style to the element

Border: used to set the border of an element

Quadrilateral setting: border: width value style value color value

Unilateral setting: border-left border-right border-top border-bottom

Style unit:%: percentage in: inch cm: cm

Mm: mm pt pounds (1pt=1/72 in)

Px pixel 1em equals the current font size

Overflow: when the content overflows the element border

Visible does not crop content, but can be displayed outside the content box

Hidden clips content without scrolling mechanism

Scroll tailors content to provide scrolling mechanism

If Auto overflows, scrolling is provided.

Box box model:

The innermost part of the element box is the actual content, and the inner margin directly surrounds the content. The inner margin presents the background of the element. The edge of the inner margin is the border. Outside the border is the outer margin, which is transparent by default, so it does not obscure any elements behind it.

The inner margin, border, and outer margin are optional, and the default value is zero. However, many elements will have the outer and inner margins set by the user agent style sheet. You can override these browser styles by setting the element's margin and padding to zero. This can be done individually, or all elements can be set using a universal selector.

Margin-clears the border area. Margin has no background color, it is completely transparent

Border-the padding and content around the border. The border is affected by the background color of the box.

Padding-clears the area around the content. Will be affected by the background color filled in the box

Content-the contents of the box, displaying text and images

Background color: background-color: used to set a background color for an element and can accept any legal color value

Background picture:

Background-image: sets the background image. The default value is none, which means that no image is placed on the background. If you want to set it, you need the url address of the image attached to the starting character.

By default, background pictures are repeated horizontally and vertically

Background-repeate: can control the tiling effect of the background image

Repeate: repeat horizontally and vertically

Repeate-x: repeat horizontally

Repeate-y: repeat vertically

No repeate: display only once

Background-position: used to change the position of the background image in the element

CSS text formatting control font: font-family:value 1 MagneValue 2 specified font

Font-size:value font size

Font-weight:normal/bold font bold

Color:value text Color

Text-align:left/right/center text arrangement

Line-height:value row height

Text-indent:value first line text indentation

Table style: common properties: tables also use box models (borders, inner margins, width, height) and text formatting properties table-specific properties: if cell borders are set, adjacent cell borders are displayed separately, similar to double-line borders

Border-collapse: merges adjacent borders and sets whether to merge the borders of the table into a single border

Display: elements have their own default selection

Block element: displayed from top to bottom, you can set the width and height as follows:

Inline elements: display from left to right, width and height cannot be set, such as:

Inline block elements: displayed from left to right, you can set width and height

In addition to the default display effect, you can use the display attribute to modify how elements are displayed

Specific modification method:

Display:none means that the element is not displayed, releasing the space it occupies.

Display:block means to set the display of an element to a block

Display:inline means to set the display of an element to an inline element

Display:inline-block: sets the display of an element to an inline block element

Positioning:

Defines where an element box should appear for its normal position or relative to another element relative to the parent element relative to the browser window itself

Flow positioning: the block-level elements on the page are arranged from top to bottom, and each block-level element appears on a new line. The vertical distance between the element boxes is calculated from the vertical outer margin of the box.

Inline elements: from left to right in a line, horizontal arrangement does not require line wrapping, but uses horizontal inner margins, borders and outer margins to adjust their spacing

Floating positioning: exclude the element from the normal flow, place the floating element on the left or right side of the inclusion box, the floating element is still contained outside the box, and the floating box can be moved to the left or right until the outer edge meets the inclusion box or another floating box bit. If you need to set the box to float to the left or right of the inclusion box, you can move in a specific direction through the float attribute.

Any element is a removable float:none/left/right

Clear clears the impact of floats: clear:none/left/right/both

Relative positioning: the space occupied by the element is not released, and the element box will be offset by a certain distance from the original position, set vertically or horizontally, so that the element moves relative to its starting point.

You first need to set the position property with a value of relative, and then use left/right/top/bottom to set the specific offset

Absolute positioning: clears the contents of an element from the current location, frees up space, and uses an offset to fix the position of the element. Relative to the nearest ancestor element, if the offset element has no positioned element, then its position is relative to the body element.

First set the position property with a value of absolute, and then use left/right/top/bottom to set the specific offset

Fixed positioning: the content of the element is fixed in a certain position on the page, the element is completely removed from the normal flow, and does not take up page space. When the user scrolls the page down, the element does not move with it.

First set the position property with a value of fixed, and then use left/right/bottom/top to set the specific offset

Stacking order: once you change the positioning of the elements, the elements may be stacked. You can use z-index to control the stack values where the elements appear in the box.

The higher the Z-index:value value, the higher the level, and the more it appears in the front.

List style:

List-style-type: a style used to control the flags of list items in a list

Unordered list: dots that appear next to each column

Values without list: none: unmarked; disc: solid circle (default); circle (hollow circle); square solid square

Ordered list: numbers, letters, or other things that may be used to arrange counts

Values of ordered list: none: unmarked; decimal: number

Lower-roman: lowercase Roman numerals upper-roman: uppercase Roman numerals

List-style-image: replace list items with images, with a value of url

JavaScript

What is javaScript?

A scripting language embedded in HTML and in the browser, with languages similar to java and C, a web page programming technology used to add interactive behavior to HTML pages, directly embedded in HTML pages, the browser interprets and executes the code without pre-compilation

Features: can be compiled using any text tool, and the code can be executed by the browser's built-in JavaScript engine

Parsing execution: do not compile in advance and execute line by line

Object-based: built-in a large number of thread objects

Use: client-side data calculation, client-side form validity verification, browser event trigger, web page special display effect production, server exception data submission

Usage of the JavaScript program:

Event definition: write JavaScript directly when the time is defined

Embedded: using Script tags

File invocation: the code is in a separate (.js) file, the html page references the js file, and add the file's address (src= "") to the script tag.

JavaScript code error:

Explain the code. If the code is wrong, there will be no effect in the page. You can open the "check" and "error console" of the web page to view the error.

JavaScript syntax specification:

Basic syntax: written by Unicode character set

Comments: single line: / / comment content multiple lines: / * comment content * /

Statements: expressions, keywords, operators, case-sensitive, it is recommended to end a statement with a semicolon

Identifiers and keywords:

Identifiers: letters, numbers, underscores, and $that do not begin with numbers

Keywords: view js manual

Variables: use the keyword var to declare variables, and variable initialization uses "= =" to assign values

The automatic value of an uninitialized variable is: undefined

Variables are untyped, and var declarations are used uniformly. Data referenced by variables are typed.

JavaScript data type:

Special type: null: empty undefined: undefined

Built-in object: Number: numeric String: string boolean: two values true/false Array array function: function

External object: window: browser object document: document object

Custom objects: Object: custom object

String type:

A sequence of characters consisting of Unicode characters, numbers, and punctuation, the direct amount of which is enclosed by a pair of single / double quotation marks

Number type:

In JavaScript, there is no distinction between integer values and floating-point values, integer direct values: the default integer direct quantity is decimal

Boolean type:

There are only two values true/false

Data type conversion:

Implicit conversion between ① data types

② conversion function:

ToString: all data types can be converted to String types

ParseInt (): cast to an integer and NaN if it cannot be converted

ParseFloat (): cast to floating-point numbers, NaN will appear if you can't convert

Typeof: view the current type and return String/Number/boolean/object/Function/undefined

IsNaN (): determines whether the detected expression is not a number after conversion. If not, it is true;; otherwise, it is fasle.

Special data types:

Null: no value / no object in the program. You can assign a variable to null to clear the content.

Undefined: declare variable, unit assignment / object property does not exist

Operator:

Arithmetic: +, -, *, /,%, + (self-increasing),-(self-subtracting)

Relational operation: >, > =

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.