What you need to know before you go in

Be able to tell the basic composition of a web page

  • The front-end work is to develop web pages, and what is a web page?
    • Website refers to the Internet according to certain rules, the use of HTML, etc., used to display specific content related to the collection of web pages.
    • A web page is a page in a web site, usually an HTML file, that is read through a browser.
    • Web page is the basic element of the website, it is usually composed of pictures, links, text, sound, video and other elements, usually we see the web page often with.htm or.html suffix end of the file, so it is commonly known as HTML file.
  • What is HTML?
    • HTML stands for hypertext language, which is the language used to describe web pages
    • HTML is not a programming language, but a markup language
    • A markup language is a set of markup tags
    • So-called hypertext has two meanings
      • It can include images, sound, video, animation, multimedia and more (beyond text limits)
      • It can jump from one file to another, linking files with hosts around the world
  • Web page formation?
    • A web page is made up of page elements that are described using HTML tags and then displayed to the user through browser parsing.
  • Web page summary
    • A web page is made up of images, video, text, audio and so on. It’s just an HTML file
    • Web page generation, front-end people write HTML files, and then open the browser to parse rendering, and finally we can see the web page.

Able to name common browsers

  • A browser is a platform for displaying and running web pages. The most commonly used browsers are Internet Explorer, Firefox, Google (Chrome), Safari and Poera.
  • Browser kernel (rendering engine) : responsible for the content of the web page, collating information, calculating how the web page is displayed, and displaying the web page.
The browser The kernel note
IE Trident IE, baidu
firefox Gecko Firefox kernel
Safari Webkit Apple Browser kernel
chrome/Opera Blink Google and Openbrowser kernel, actually Blink is a branch of Webkit

Be able to name the three main components of Web standards

  • Web standards are a collection of standards developed by W3C and other standardization organizations. W3C (World Wide Web Consortium) is the most famous standardization organization in the world.
  1. Why do We need Web standards?
    • Depending on the browser, they display the page or layout slightly differently. Developers often have to work hard for multiple releases.
    • Following the Web standard has the following advantages in addition to allowing different developers to produce more standardized and uniform pages.
      • Let the development prospect of the Web become broader
      • Content can be accessed by a wider range of devices
      • More likely to be searched by search engines
      • Reduce website traffic costs
      • Make the site easier to maintain
      • Improve page browsing speed
  2. What constitutes a Web standard.
    • It mainly includes three aspects: structure, performance and behavior.
standard instructions
structure Structure used forWeb page elementsFor sorting and classification, the main learning at this stage is HTML
performance Represents the layout, color, font, and so on used to set web page elementsPresentation styles, mainly refers to the CSS
behavior Behavior refers to the definition and model of web pagesinteractionAt this stage, the main learning is JavaScript

HTML tags

Say the HTML tag writing note specification

HTML syntax specification

  1. Basic Syntax Overview
    • HTML tags are keywords surrounded by Angle brackets, for example<html>
    • HTML usually comes in pairs, for example<html></html>, we call it double label. The first tag in the tag is called the start tag, and the second tag is the end tag.
    • Some special labels must be single labels (in rare cases), for example<br />, we call it single label.
  2. Relationship of labels
    • The relation of double label can be divided into inclusion relation and parallel relation.
    Contains the relationship between the < head > < title > < / title > < / head > parallel relationship < p > < / p > < div > < / div >Copy the code

HTML basic structure tag

  1. First HTML web page
    • Every web page has a basic structure tag (also known as skeleton tag) on which the content of the page is written. HTML pages are also called HTML documents
    </title> </head> </body> </body>Copy the code
    • HTML is the largest tag on a page, and we call it a tag
    • Document header, notice that the tag that we have to set in the head is the title tag
    • The title of the document, so that the page has its own page tag
    • The body of the document, the element that contains all the content of the document, and the content of the page is basically placed inside the body.

Common HTML tags

  1. Document type declaration tag
    • <! DOCTYPE html>The document type declaration tag tells them which VERSION of HTML the browser uses to display the page. This sentence means that the current page takes the HTML page to display.
    • <! DOCTYPE>The declaration is located very first in the document, before the HTML tag.
    • <! DOCTYPE>It’s not an HTML tag, it’s just a document type declaration tag.
  2. <html lang = en >,lang is used to define the language in which the current document is displayed
    • En Defines the language type as English
    • Zh-cn The language type is Chinese
    • Fr defines the language category as French
    • In simple terms, en is an English document, and zh-cn is a Chinese document, but these two do not affect the display of English or Chinese, this attribute is effective for the browser, the translation function switch.
  3. <meta chartset = 'UTF-8' />Character set, character set is a collection of multiple characters, so that the computer can recognize and store various types of text, in the head tag, you can use the meta tag chartset attribute to specify which character encoding HTML documents should use.
    • Common chartset values include GB2312 (simplified Chinese), BIG5 (traditional Chinese), GBK (simplified Chinese), and UTF-8. Utf-8 is also known as universal code, which basically contains characters used by all countries in the world.
    • The character set specified in the meta tag must be specified. Otherwise, garbled characters may occur. Use UTF-8 instead of UTF-8 or UTF8
  4. The title tag<h1>-<h6>
  5. Paragraph tag and line feed tag
    • In a web page, to display text coherently, you need to display the text in sections. In the HTML tag,

      Tags are used to define paragraphs, which divide a page into paragraphs.

    • If you need text to force a newline display, you can use a newline tag
  6. Text formatting tag
    • In web pages, it is sometimes necessary to set up effects such as bold, italic, and underline text to make it appear in a special way.
The semantic The label instructions
bold <strong></strong>or<b></b> It is recommended to use<strong>Tag, more semantic
tilt < em > < / em > or < I > < / I > It is recommended to use<em>, more semantic
Delete the line <del></del>or<s></s> It is recommended to use<del>, more semantic
The underline The < ins > < / ins > or < u > < u > It is recommended to use<ins>, more semantic
  1. <div>and<span>The label,<div>and<span>They don’t have semantics, they’re just boxes for content.
  2. Image Label Introduction
    • The label is introduced<img SRC =' image path URL' />
attribute Attribute values instructions
src Image path Required property, image path
alt The text Display when the image cannot load successfully
title The text Prompt text, the text displayed when the mouse moves over the picture
width pixel Sets the image width
height pixel Sets the height of the image
border pixel Sets the border line thickness of the image
  1. hyperlinks< a / > tagTo jump from one page to another, you can jump to external links as well as internal links. For example, two properties are used as follows
    • Link category
      • External links<a href=" target url" target=" target window "></a>
      • Internal links<a herf="index.html">
      • Empty connection<a herf="#"> Empty link </a>
      • Download link<a herf="img.zip"> download </a>If the href is a file or zip file then it will download that file
      • Links to web elements<a herf="http://www.baidu.com"><img src="img.png" /></a>Click the image element to jump to baidu home page, text, pictures, video, audio, etc
      • Anchor link, click on our link, you can quickly locate to a certain location in the page. Usage: First, set the property value to #+ name in the link href, for example<a href="#one">; Second, locate the target location tag and add an ID attribute to it = the name you just set, as in<h3 id='two'>
attribute role
href The URL used for the hyperlink target, must be a property
target Specifies how the linked page should be opened, with _self being the default and _blank being opened in a new window

Special characters

  • In HTML pages, some special symbols are difficult or inconvenient to use directly, we can use the following characters instead
Special symbols describe The character code
Spaces &nbsp;
< Less than no. &lt;
> More than no. &gt;
& And no. &amp;
RMB The yuan &yen;
° c &deg;
x Multiplication sign &times;
present devide &divide;
squared Squared 2 superscript &sup2;
after Superscript cubed three &sup3;
© copyright &copr;
® The registered trademark &reg;

Table label

  • The function of tables; Mainly used to display and display data; It allows the data to be presented very neatly.
  • Basic syntax for tables
<table>
    <thead>
          <tr>
                <th></th>
           </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>
Copy the code
  • <table></table>The label used to define the table; In order to better represent the semantics of the table, the table can be divided into two parts: header and body.<thead>Represents the header of the table,<tbody>Represents the main part of the form;<tr></tr>The tag;<th></th>Title tag,<td></td>The label of the cell
  • Common table properties
The property name Attribute values describe
align Left, right, center Specifies the alignment of the table with respect to surrounding elements
border 1, “” Specifies whether the table has borders. Default is “”, indicating no borders
width Pixels or percentages Specify the width of the table
cellpadding Pixel values Specifies the distance between the border of the cell and the content. The default is 1 pixel
cellspacing Pixel values Specifies the distance between cells. Default is 2 pixels
height pixel Specify the height of the cell
  • Merge the cells of the table
    • A way to merge tables
      • Rowspan = “Number of merged row cells”
      • Colspan = “Number of cells in merged columns”

A list of tags

  • Unordered list<ul><li></li></ul>
  • An ordered list<ol><li></li></ol>
  • Custom list
<dl> <dt> noun </dt> <dd>Copy the code
  • In the HTML tag<dl>The tag is used to define a description list or (definition list) that is associated with<dt>(Define project/name) and<dd>(Describe each item/name) used together.
  • A list of summary
Tag name define instructions
<ul></ul> Unordered label It can only contain li, which is not sequential and is used frequently. Li can contain any tag
<ol></ol> An ordered list It can only contain li, which is sequential and relatively rarely used. Li can contain any tag
<dl></dl> Custom list It can only contain dt and DD, and dt and DD can contain any tag

The form tag

  • The purpose of form tags is to collect information about the user. In HTML, a complete form is usually composed of three parts: form fields, form controls (also known as form elements), and prompts.

  • In HTML,<form>The tag defines the form field for the collection and delivery of user information.<form>The form submits information about the form elements in its scope to the server.
<form action=" utL address "method=" submission method" name=" form domain name ">Copy the code
  • The common attributes of a form are as follows
attribute Attribute values role
action The url address The URL address used to specify the server program that accepts and processes the form data
method get/post Used to set how form data is submitted, with a value of GET or POST
name The name of the Use to specify the name of the form to distinguish multiple form fields on the same page
  • Form controls (form elements)
    • Input Input form element, used for mobile user information, which contains the Type attribute. Input fields can have many forms of control types (text input fields, check boxes, radio buttons, buttons);
      • The type attribute has the following attribute values
Attribute values describe
button Define buttons that can be clicked
checkbox Define check boxes
file Define input fields and browse buttons for file upload
hidden Define hidden input fields
image Define submit buttons in the form of images
password Defines a password field in which the characters are masked
radio Define radio buttons
reset Define the reset button. The reset button clears all data in the form
submit Define a submit button that submits form data to the server
text Defines a single-line input field into which a user can enter a field
  • Common attributes in the input tag
attribute Attribute values describe
name User-defined Define the name of the input element. When defining radio buttons and check boxes, you must add the same name value to the Input form control
value User-defined Specifies the value of the input element
checked checked Specifies that the input element should be selected when it is first loaded
maxlength Positive integer Specifies the maximum length of characters in an input field
  • <lable>The tag defines the annotation (tag) for the input element; When clicking on the Lable TAB, the input TAB mouse will automatically focus; Syntax is as follows
<label for="sex"> male </label> < INPUT ID ="sex" type="radio" name="sex" /> Core: Input id= for.Copy the code
  • Select dropdown form element, syntax is as follows
    • Select must contain at least one option tag
    • When the selected attribute of the Option tag = “selected”, the current item is selected by default
<form> <select> <option selected="selected" value="one"> </option> <option value="two"> </option> </select> <form> // If option 1 is selected, the return value is one, and if option 2 is selected, the return value is twoCopy the code
  • Textarea form element used to enter more multiline text. Syntax is as follows
<form> <textare> Text </textarea> </form>Copy the code

Three forms of relative paths

  • Path is introduced
Relative paths symbol instructions
Same order path The image file is at the same level as the HTML file
Next level path / The image is one level below the HTML file
Upper path ../ The image is one level above the HTML file
  • An absolute path: refers to the absolute path to the directory, directly to the target location, usually starts with the drive path, for example, “D: \ web \ logo PNG” or the complete network address, “www.baidu.com/images/logo…”

CSS cascading style sheets

The CSS profile

  • CSS is short for cascading style sheets, mainly used to beautify web pages, page layout, CSS is a markup language, mainly used to set the text content in HTML pages (font, size, alignment), image shape (width and height, border style, margin, etc.) as well as the layout and appearance display style.

CSS syntax specification

  • CSS rules consist of two main parts: selectors and one or more declarations
    • The selector is the HTML tag used to specify the CSS style, with the specific style set to the object in curly braces
    • Properties and property values take the form of key-value pairs, and properties are style properties set to the specified object. Such as text size, font color; Property and property value in English:Separate, multiple attributes in English between;To separate.

  • CSS Code Style
    • Style format writing; The second format is recommended to be more intuitive.
      • Compact format
       h3 { color: red; font-size: 16px }
Copy the code
      • A format
      h3 {
    color: red;
    font-size: 16px;
}
Copy the code
    • Style case, the second is recommended.
      • A capital
      h3 {
    COLOR: RED;
}
Copy the code
      • lowercase
      h3 {
    color: red;
}
Copy the code
    • The space specification
      • Property value is preceded by a colon and followed by a space
      • Leave a space between the selector and the brace
      h3 {
    color: red;
}
Copy the code

CSS selectors

CSS base selector

  • The function of selector is to select different labels according to different needs, which is used to select labels.
  • In CSS, selectors can be divided into basic selectors and coincidence selectors according to the type of selector. The coincidence selector is based on the basic selector and combines the basic selector.
  • Basic selectors include: label selectors, class selectors, ID selectors, and wildcard selectors
    • Tag selector refers to the use of HTML as a selector, categorized by tag name, to specify a uniform CSS style for a particular type of tag in the page.
    • The class selector is when we want to differentiate between different tags, we can select one or more tags individually, we can select the class selector.
    • An ID selector can specify a specific style for HTML elements marked with a specific ID selector. Id attributes in HTML are not allowed to have the same attribute value and cannot be repeated.
    • Wildcard selector used*Definition, which means all elements in the page are selected.
      • The following code
      h3 {
    color: red;
}
.class {
    color: pink;
}
#id {
    color: black;
}
* {
    padding: 0;
}
Copy the code
  • The class naming rules are as follows
Kind of life Name of the corresponding structure class
header The head
content/container content
footer The tail
nav The navigation bar
sidebar The sidebar
column The column
left/center/right Left to right
loginbar Article on the
logo mark
banner advertising
main Page body
hot Page hot
news news
download download
subnav The subnavigation
menu The menu
submenu Sub menu
## CSS font properties
  • The CSS uses the font-family property to define the font family of text
Font: "Microsoft yahei ",Arial; } div { font-family: "Microsoft Yahei"; }Copy the code
  • Fonts must be separated by English commas.
  • In general, multiple word fonts need to be separated by a space between words and contain word groups in quotation marks in English.
  • Use the default font to ensure that it can be displayed in any browser.
  • If there are multiple fonts, the browser will display them from left to right. If the first font does not exist, the next font will be displayed. And so on.

CSS composite selector

  • The compound selector can select the target element more accurately and efficiently. The compound selector is composed of two or more basic selectors combined in the same way. Common compound selectors include descendant selectors, child selectors, union selectors, pseudo-class selectors, and so on.

Descendant selector

  • Descendant selectors, also known as inclusion selectors, can select the child elements within the parent element, syntax is the outer tag written inIn front of the, the inner city label is written onbehindBetween,The blank spaceThe inner label is the descendant of the outer label.
div p {
    color: red;
}
Copy the code

Child element selector (child selector)

  • Child element selectors (child selectors) can only select the nearest child element of an element. Style Settings for grandchildren and grandchildren below do not take effect.
  • Syntax is the outer element>Inner parent son element
<div class="ins">
        <p>hello</p>
        <div>
            <p>A newline</p>
        </div>
</div>

.ins>p {
    color:red;
}
Copy the code

Union selector

  • Union selectors can select groups of tags while defining the same style for them, usually for collective declarations.
  • Grammar; Union selector is each selector through English.Any form of selector can be part of a union selector.
div>p,ul>li {
    color: red;
}
Copy the code

Pseudo class selector

  • Pseudo-class selectors are used to add generic effects to utting selectors, such as adding special effects to connections, or selecting the first or NTH element. The most important feature of pseudo-class selectors is their useThe colon:For example:hover,:first-child.
  • Link pseudo-class selector –a:link; Select all unvisited links.
    • a:visited; Select all the links that have been visited.
    • a:hover; Select the link over which the mouse moves.
    • a:active; Select active links (mouse down unplayed links)
  • Link pseudo-class selector considerations
    • To ensure this takes effect, declare in the order of LVHA::link.:visited.:hover.:active. Love hate can also be used to remember.
  • :focusPseudo class selector; Gets the form for the mouse cursor
input:focus {
    background: red;
}
Copy the code

CSS Font Properties

CSS font size

  • The CSS uses the font-size property to define the font size
p {
    font-size: 16px;
}
Copy the code
  • Px (pixel) is the most common unit for our web pages.
  • The default text size for Chrome is 16px.
  • The default size may vary depending on the browser, so let’s set a default size for the body. For example, body {font size: 16px}

CSS font size

  • The CSS uses the font-weight property to set the font size of the text.
p {
    font-weight: bold;
}
Copy the code
  • Font-weight Specifies the common attribute value
Attribute values describe
normal Default value (not bold)
bold bold
100-900. 400 equals normal, and 700 equals bold. Note that numbers are not followed by symbols
## CSS text properties
### CSS text decoration
  • The text-decoration property specifies the decorations to be added to the text. You can add underscores, hyphens, and stripouts to the text
p {
    text-decoration: underline;
}
Copy the code
Attribute values describe
none No trim line, default
underline The underline
overline On the line
line-through Delete the line

CSS text indent

  • The text-indent property is used to specify the indentation of the first line of text, usually the first line of a paragraph.
p { p { text-indent: 15px; } div { text-indent: 2em; }} // em is a relative unit, which is the size of the current element.Copy the code

Line spacing

  • The line-height property sets the distance between lines. You can control the distance between lines

Summary of CSS text properties

attribute said Pay attention to the point
color Text color We usually use hexadecimal notation like # FFFFFF
text-align Text alignment Horizontal text alignment can be set
text-indent Text indentation Usually used to indent the first line of a paragraph by two words
text-decoration The text to modify Underline as underline, ununderline as None, and delete as line-through
line-heigt Line spacing Set the distance between lines

Introduction of the CSS

Three styles of CSS

  • Inline style sheets (inline styles), which set CSS styles in the style property inside the element tag, are suitable for simple styles.
<div style="color:red;font-size:25px"></div>
Copy the code
  • Internal style sheets (embedded), which are written inside the HTML, place all the CSS in a single style.
<style>
    div {
        color: red;
    }
</style>
Copy the code
  • External style sheets (external chain); The actual development is all external style sheets, suitable for the case of a large number of styles, the core is to write the style separately to the CSS file, then the CSS file into the HTML page.
<link rel="stylesheet" href="home.css">
Copy the code
  • Summary of CSS introduction
The stylesheet advantages disadvantages usage Control range
Inline style sheets Easy to write, high weight Mix structure styles less Control a label
Internal style sheet Partial structure and style separation Not completely separated more Controlling a page
External style sheets Completion is the separation of mind from structure and form Need to introduce Maximum, vomiting blood is recommended Multiple pages can be controlled

CSS element display mode

Block-level elements

  • Common block-level elements<h1>~<h6>,<p>,<div>,<ul>,<li>And so on.
  • Characteristics of block-level elements
    • More domineering, exclusive line.
    • Height, width, margins, and margins can be controlled.
    • The width defaults to 100% of the container (parent width).
    • Is a container and box from which internal or block-level elements can be released.
  • Matters needing attention
    • You cannot use block-level elements inside literal elements.
    • <p>Tags are mainly used to store text, so<p>You can’t put block-level elements in it, especially<div>.
      • In the same way<h1>~<h6>It is also a text label, and can not put block elements inside.

Inline elements

  • Common inline elements:<a>,<strong>,<b>,<i>,<del>,<s>,<ins>,<u>,<span>And so on.
  • Characteristics of inline elements
    • Adjacent inline elements are on a line, and multiple elements can be displayed on a line.
    • Height and width Settings are invalid.
    • The default width is the width of its own content.
    • Inline elements can only hold text or other inline elements.
  • Matters needing attention
    • You can’t put a link inside a link
    • Special case link<a>You can put block-level elements inside, but give<a>Converting to block-level elements is safest.

Inline block elements

  • There are several special tags within the inline elements<img>,<input>And `. They have the characteristics of both block-level elements and inline elements.
  • Characteristics of inline block elements
    • On a row with adjacent inline block elements and inline elements, but with a space between them. More than one line can be displayed.
    • The default width is the width of its own content.
    • Width height, line height, inside and outside margin can be set directly.

Three features of the CSS

Cascading sex

  • When the same selector sets the same style, one style overwrites (cascades) another conflicting style.

inheritance

  • CSS inheritance. Child tags inherit certain styles of their parent tags, such as text color and size.
    • The child element can inherit the style of the parent element (text-, font-, line-) and so on, as well as color
    • Line height inheritance, syntax is as follows
    body {
    font:12px/15px;
} 
div {
    font:14/1.5;
}
Copy the code
    • Note:
      • Row height can follow units or not follow units.
      • If the child element has no row height set, 1.5 times the row height of the parent element is inherited.
      • No units, line height is 1.5 times the current font size. The advantage of the second method is that the child element can adjust the line height according to its text size.

priority

  • If the selectors are the same, perform cascading (overlay)
  • If the selector is different, it is executed according to the weight of the selector. The selector weights are shown in the following table
The selector Selector weight
Succession or* 0，0，0，0
Element selector 0，0，0，1
Class selector, pseudo class selector 0，0，1，0
The id selector 0，1，0，0
Inline style 1，0，0，0
! important infinity

CSS Background image

  • Composition of a background image
    • Background: Color Background image address Background tiled background image Scroll position of the background image.
  • Background color translucency
    • Background: rgba (0, 0, 3)
    • Note: background translucency does not affect content. This property is new to CSS3 and is only supported by IE9+.

CSS box model

  • Page layout has three core elements: box model, float and position.

CSS float

  • Method to clear the float

    • Additional label method (partition method);

      • Advantages: easy to understand, easy to write.
      • Disadvantages: Add a lot of meaningless tags, poor structure.
      • Note: The new tag added must be a block-level element, otherwise the effects of the float cannot be cleared.

    • Add overflow properties to the parent element, with hidden, auto, or Scroll values.

      • Advantages: Simple code.
      • Disadvantages: Unable to display overflow parts.

    • :after pseudo-element method, add to the parent element.

      • Advantages: No additional labels, simpler structure.
      • Take care of older browsers.
         .clearfix:after {
        content:' ';
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
   .clearfix {
        //IE6 7Proprietary * zoom:1;
    }
Copy the code

    • The double pseudo-element clears the element, which is also added to the parent element.

      • Advantages: Simpler code.
      • Cons: Takes care of older browsers.
      .clearfix:before,.clearfix:after {
    content:' ';
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    *zoom:1;
}
Copy the code

The core shadow

  • box-shadow:h-shadow v-shadow blur spread color inset
value describe
h-shadow Required, horizontal shadow position, negative values allowed.
v-shadow Required, vertical shadow position, negative values allowed.
blur Optional, blur the distance.
spread Optional, shadow size size.
color Optional, shadow color.
inset Optional, change the outer shadow to the inner shadow.

CSS writing sequence

  • Layout positioning properties:display,position,float,clear,visibility,overflow
  • Self attributes:width,height,margin,padding,border,background
  • Text attributes:color,font,text-decoration,text-align,vertical-align,white-space,break-word
  • Other attributes:content,cursor,border-radius,box-shadow,text-shadowAnd so on.

The CSS positioning

  • Relative position (important)
    • The characteristics of relative positioning
      • He is moving relative to his original position. (The reference point is the original position when moving position)
      • The original remains in its standard place, and the box behind it still treats it as a standard stream. Its most typical use is for absolute positioning.
  • Absolute position is when an element moves position relative to its ancestor
    • The characteristics of absolute positioning
      • If there is no ancestor element or the ancestor element is not located, the browser is used to locate the ancestor element.
      • If the ancestor element has a position (relative, absolute, fixed), the position is moved with the nearest level of the positioned ancestor element as the reference point.
      • Absolute location does not occupy the original position, out of the document flow.
  • Fixed position fixed, fixed to the position of the browser visible area. The position of the element does not change as the browser page scrolls.
  • Sticky positioning, sticky positioning can be considered as a mixture of relative positioning and fixed positioning
    • Grammar:div {position: ticky; top: 10px; }
    • Features:
      • Move elements with the browser’s visual window as a reference point (fixed positioning feature).
      • Sticky positioning is the possession of the original position (a characteristic of relative positioning).
      • You must addtop,bottom,left,rightOne of them will be effective.
  • Expansion of positioning
    • Absolutely positioned boxes are centered horizontally and vertically 
      // div {width:200px; height:200px; position: absolute; top: 50%; left: 50%; margin-left: -100px; margin-top: -50%; } div {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) }Copy the code
    • Particularity of localization
      • Add absolute or fixed positioning to inline elements, and you can set the height and width directly. Same thing with floating.
      • Add absolute or fixed positioning to block-level elements. If width or height is not given, the default size is the content size.
      • Absolute positioning and fixed positioning will do the job of pressing the box and text, but floating will not press the text. The original purpose of floating is to create the effect of wrapping the text. Add a float to the image to create a text wrap effect.
Positioning mode Whether to de-scale (out of document flow) Reference point
Static Static positioning No (occupy position) You cannot use edge offsets
Relative positioning No (occupy position) Position offset with respect to itself
Position Absolute position Yes (does not occupy position) Parent element with location
Fixed Fixed position Yes (does not occupy position) Browser viewable area
Sticky sticky positioning No (occupy position) Browser viewable area

The elves figure

  • The purpose of Sprite technology: to effectively reduce the number of times the server receives and sends requests, improve the speed of page loading.
  • Sprite is mainly used for background images, which is to integrate multiple small background images into a large image. This big image we call sprites or Sprite.
  • Use Sprite image core: move the background image position, this can use background-position, move Sprite image to the corresponding position.
  • Disadvantages of Sprite diagrams:
    • The image file is still quite large.
    • The picture itself is distorted when enlarged or reduced.
    • Once the picture is finished, want to replace the very hair. One technique was the font icon iconfont

The fonts icon

  • Font ICONS display ICONS, but are essentially fonts.
  • The advantages of font ICONS
    • Lightweight: An icon font is smaller than a series of images, and once the font is loaded, the icon is rendered immediately, reducing server requests.
    • Flexibility: Essentially text, you can change colors, create shadows, transparency, rotation, etc.
    • Compatibility: support almost all browsers, please feel free to use.
    • Note: Font ICONS are not a replacement for Sprite techniques, they are just improvements and refinements to the icon part of the technology at work.

CSS User interface styles

Mouse style CURSOR

Attribute values describe
default The default
pointer Little hands
move Moving cross
not-allowed ban

Outline the outline

  • Add a formoutline:0oroutline:none; After the style, you can remove the blue border after the click on the default input form.

input {outline: none; }

  • If you need to change the border line of the input form after clicking, the code looks like this
input:focus {
    border: 1px solid red;
}
Copy the code

Prevents dragging and dropping text field resize

<textarea> hello < /textarea>

textarea {
    resize: none;
}
Copy the code

Application of the vertical-align attribute

  • Usage scenarios of the vertical-align attribute of the CSS. Often used to align images or forms (inline block elements) vertically with text. But it only works for inline block elements or inline elements.

vertical-align: baseline | top | middle | bottom

value describe
baseline The default. Element positions are placed on the parent’s baseline
top Align the top of the element with the top of the highest element in the row
middle Place the location of this element in the middle of the parent element
bottom Align the bottom of the element with the bottom of the lowest element in the row

  • Fixed the default gap at the bottom of the image
    • The reason for this problem is that there is a blank space at the bottom of the image because of the baseline alignment of the inline block elements with the text. There are two main solutions
      • To add to the picture vertical – align: middle | top | bottom (advocated).
      • Convert images to block-level elements,display:block.

Text overflow ellipsis display

// Single line text overflows ellipsis display //1First force text to be displayed on a linewhite-space: nowrap; (the defaultnormal, wrap) //2, beyond the part hiddenoverflow: hidden;
//3Use ellipses to replace the excesstext-overflow: ellipsis; // Multi-line text overflow ellipsis display, has large compatibility issues, suitable for WebKit browsers or mobile terminals (most of the mobile terminals are WebKit kernel)overflow: hidden;
text-overflow: elipsis; // The elastic expansion box model is displayeddisplay: -webkit-box; // Restrict the number of text lines displayed in a block element -webkit-line-clamp:2; // Set or retrieve the arrangement of the children of the flex box object -webkit-box-orient: vertical;Copy the code

CSS resets the stylesheet

* {margin:0;padding:0}em.i{font-style:normal}li{list-style:none}img{border:0;vertical-align:middle}button{cursor:pointer}a{color:# 666;text-decoration:none}a:hover{color:#c81623}button.input{font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif}body{-webkit-font-smoothing:antialiased;background-color:#fff;font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;color:# 666}.hide..none{display:none}.clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:0}.clearfix{*zoom:1}
Copy the code

Emmet grammar

  • Quickly generate HTML structure syntax
    • If you want to generate more than one of the same tags tag plus*The number is fine; For example, li*3 can quickly generate three LI tags.
    • If there is a parent-child relationship tag can be used>, for example ul>li.
    • If it’s a sibling tag, you can use it+, such as div+p.
    • If you want to generate tags with attributes or classes, write them directly.demoor#navJust press enter.
    • You can use this if you want to label the class name in order.demo$*5Can.
    • This can be used if you want to generate a tag that has internal homogeneity{}Contains content, for example.demo{hello word}.
  • Quickly generate CSS styles
    • Such asw200Can quickly generatewidth: 200px
    • Lh20px can be generated quicklyline-height: 20px
    • Ti2em can be generated quicklytext-indent: 2em

New features in HTML5

HTML added semantic tags

  • HTML5’s new features mainly address the previous shortcomings, adding some new tags, new forms, new form attributes and so on.
The label element describe
header The head tags
nav Navigation TAB
article The content label
section A region tag, which can be interpreted as a large div
aside Sidebar tag
footer At the bottom of the

HTML5 new multimedia tags

  • Audio:<audio> 
    <audio width="200" height="200" controls>
    <source src="movie.mp3" type="video/mp3">
    <source src="movie.ogg" type="video/ogg">Your browser does not support the video TAB</audio>// The video code is executed from top to bottom, stopping if the first line fits, moving down if it doesn't, and displaying the text if it doesn't.Copy the code
  • Common properties of audio
attribute value describe
autoplay autoplay If this property is present, the audio plays automatically when it is ready
controls controls If present, the control, such as a play button, is displayed to the user
loop loop Automatic loop
src url The address of the MP3 player
  • Video:<video> 
    <video width="200" height="200" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">Your browser does not support the video TAB</video>// The video code is executed from top to bottom, stopping if the first line fits, moving down if it doesn't, and displaying the text if it doesn't.Copy the code
attribute value describe
autoplay autoplay Autoplay video when it’s ready (Google added muted to address autoplay)
controls controls Video player control
loop loop Automatic loop after playing
preload Auto (preloading video) Node (not preloading video) Specifies whether to preload and play the video. If autoplay is set, this property is ignored
poster Image SRC Load the waiting picture picture
muted muted Mute play

HTML5 new input form

  • It must be used with the Form form to be effective
Attribute values instructions
type="email" Restrict user input to a mailbox type
type="url" Restrict user input to URL type
type="date" Restrict user input to a date type
type="time" Restrict user input to time type
type="month" Restricted user input must be a month type
type="week" Restrict user input must be weekly
type="number" Restrict user input to be numeric
type="tel" Restrict user input to mobile phone number
type="search" Search box
type="color" Generate a color selection form

New form attributes for HTML5

attribute value instructions
required required Having this property means that the form cannot be empty and must be filled in
palceholder Tooltip text The prompt message of the form will not be displayed if there is a default value
autofocus autofocus Autofocus property, which automatically focuses the page to the specified form after loading
multiple multiple You can select multiple file submissions
autocomplete off/on When the user enters the field, the browser will focus on the field based on the previously entered value and display the option, plus the name attribute, and the submission must be successful
  • You can change the font color in the placeholder in the following way.
input::placeholder {
    color: red;
}
Copy the code

New features of CSS3

Css3 new selector

Property selector

  • Attribute selectors can select elements based on their specific properties without resorting to class or ID selectors.
/* Select all forms whose input has a value attribute */
input[value] {
    color: red;
}
/* Select the form whose type attribute in the input form equals submit. Key: oh * /
input[type=submit] {
    color: pink;
}
/* Select some elements at the beginning of the attribute value */
div[class^=icon] {
    color: black;
}
/* Select some elements whose attribute values end with what */
div[class$=data] {
    cursor: pointer;
}
/* Select some elements of what the attribute value contains */
div[class*=val] {
    color: yellow;
}
Copy the code

Structure pseudo-class selector

  • Structure pseudo-class selectors mainly select elements based on the structure of the document, and are often used for child elements within a parent selector.
selector Introduction to the
E:first-child Matches E, the first child of the parent element
E:last-child Matches E, the last child of the parent element
E:nth-child(n) Matches the NTH child E of the parent element; N can be even, odd, odd
E:first-of-type Specifies the first of type E
E:last-of-type Specifies the last of type E
E:nth-of-type(n) Specifies the NTH of type E
  • Where n can be a number, keyword, and formula, the formula is as follows
The formula The values
2n An even number
2n+1 An odd number
5n 5 10 15 20
n+5 Starting at the fifth and going all the way to the end
  • Note:
    • Nth-child sorts all the children in the parent element, finding the NTH child first to see if it matches E. If it doesn’t match, it doesn’t work.
    • Nth-of-type selects the sort of the specified element in the parent element, matching E first, and then finding the NTH child based on E

Pseudo element selector

  • Pseudo-element selectors can simplify HTML structure by helping you create new tag elements using CSS without the need for HTML tags.
selector Introduction to the
::before Insert content first inside the element
::after Insert content at the very back of the element inside
  • Pay attention to
    • Before and after create an element, but are inline elements.
    • The newly created element is not found in the document tree, so we call it a pseudo-element.
    • Syntax: element::before{}.
    • Before and after must have content attributes.
    • Pseudo-elements have the same weight as tag selectors with 1.

Other features of CSS3

Css3 filter, apply graphic effects such as blur or color offset to elements.

  • Grammar:The filter: () () function; For example, filter: blur (5px). The larger the blur value is, the more blurred it becomes.

Css3 calc function that performs some calculations when declaring CSS property values

  • Grammar:width: calc(100% - 50px)

CSS 3 transition

  • Transitions are subversive in CSS3, adding effects to elements as they transform from one style to another.
  • Transition animation: a gradual transition from one state to another.
  • It makes our pages look better and more dynamic, although it is not supported in the lower versions of browsers, but it does not affect the layout of the page.
  • We have a lot of conversations now:hoverUse together.
  • Syntax is as follows
    • Transition: The time it takes for a property to transition when the motion curve begins
      • The motion curves include linear uniform speed, ease gradual deceleration, ease-in acceleration, ease-out deceleration, and ease-in-out first acceleration and then deceleration. The default ease
    • If you want to write multiple attributes, separate them with commas

    transition: width .5s, height .5s

    • You can use all if you want multiple properties to change

    transition: all .5s

    • Note: Whoever makes the transition will be added.

The 2 d transformation transform

Transform, which can realize the displacement, rotation, scaling and other effects of elements, can be simply understood as deformation.

  • 2D translation translate
    • grammar
    transform: translate(x,y);
/* or separate */
tansform: translateX(n);
transform: translateY(n);
Copy the code
    • Focus on
      • Define movement in a 2D transformation, moving elements along the x and y axes
      • The best thing about Translate is that it doesn’t affect the position of other elements;
      • The percentage unit in Translate is the width or height relative to its own element.
      • Has no effect on inline labels.
  • Rotate of the 2D transform causes elements to rotate clockwise or counterclockwise in a two-dimensional plane
    • grammar
    tansform: rotate(degrees)Copy the code
    • Focus on
      • Rotate The number of degrees in deg, such as rotate(45deg).
      • When the Angle is positive, clockwise, and when it is negative, counterclockwise.
      • The default rotation center is the center of the element.
  • Transform-origin 2D conversion center point
    • grammar

    transform-origin: x y;

    • Focus on
      • Note that the following arguments x and y are separated by Spaces.
      • The center of the x and y default transformation is the center of the element (50% 50%).
      • You can also set pixels or location words for x and y (Top bottom left right Center)
  • The zoom of a 2D transform, as the name suggests, can be zoomed in and out, and can be controlled by adding this property to an element
    • grammar

    transform: scale(x,y)

    • Pay attention to
      • Notice that x and y are separated by commas
      • Transform: scale(1,1) double the width and height.
      • Transform: scale(2); transform: scale(2,2)
      • Transform: Scale (.5), width and height reduced by 0.5 times.
      • The biggest advantage of scale: You can set the conversion center scale, default is center scale, and does not affect other boxes.
  • 2D conversion synthesis writing method
    • Multiple conversions are used at the same time in the formattransform: translate() rotate() scale()... Etc..
    • The order affects the effect of the transformation. Rotation will change the direction of the coordinate axes.
    • When we have displacement and other attributes at the same time, remember to put displacement first.

Animation

  1. Define the animation with KeyFrames 
    @keyframesAnimation name {0% {
        width: 200px;
    }
    100% {
        width: 400px; }}Copy the code
    • 0% and 100% are called animation sequences
      • 0% is the beginning of the animation, 100% is the end of the animation. Such rules are animation sequences.
      • By specifying a CSS style in @KeyFrames, you can create an animation that changes gradually from the current style to the new style.
      • Animation is the effect of changing one element into another, changing as many styles as you want as many times as you want.
      • Use percentages to specify when the change occurred, or use the keywords from and to equal 0% and 100%.
  2. Element use animation 
    div {
    /* Animation name */
    animation-name:move;
    /* Duration */
    animation-duration:2s
}
Copy the code
    • Common animation properties
attribute describe
@keyframes Provisions of the animation
animation Short for all animation properties except animation-play-state
animation-name @keyframes Specifies the animation name. (Necessary)
animation-duration Specifies the duration of animation completion, which can be seconds (s) or milliseconds (ms).
animation-timing-function Specify the speed curve for the animation, which defaults to ease
animation-delay Specify that the animation is appropriate to start
animation-iteration-count Specifies the number of times the animation is played. The default is 1, and the value can also be infinite.
animation-direction Specifies whether the animation is played in reverse next cycle. Default is normal and alternate (play in reverse).
animation-play-state Specifies whether the initial state of the animation is running or paused. The default is RUNNING and paused
animation-fill-mode Specify the state after the animation ends, keep forward, back to start backwards