Chapter 1 Notes:

Composition of web pages: structure (image, text, video, etc.), presentation (style CSS), behavior (human-computer interaction).

Web standards: standards for making Web pages, is a collection of standards, a series of standards set. Structure -> HTML (W3C standard) Performance -> CSS (W3C standard) Behavior -> JavaScript (ECMA)

HTML (Hypertext Markup Language). The fifth major revision of HTML5. HTML files can be named after.html,.htm.

<u></u> : Indicates the underline label. < I ></ I >: font slant labels. < sup > < / sup > : superscript. The < sub > < / sub > : subscript. <span></span>: represents a character or a short piece of text. <p></p>: text label. The title tags < H1 ></ H1 > to < H7 ></h7> cannot be nested within this tag. &nbsp: Prints a space. <oltype="">
    <li></li>
</ol>
Copy the code

: property: htef Jumps to target URL. Target Specifies whether to open a new window.

SRC is the image path; Alt: Text message displayed when the image does not load. The text in Alt is less than 100 characters. The Alt attribute is mandatory for the IMG tag. If there is no prompt, leave it empty. Search engines are unable to retrieve the image above the text, Alt is used to do optimization. The title property is used to increase user experience. When the mouse is moved, a prompt message will be displayed.

Relative path written:

1 File of the same level:. / object file. Suffix 2 Parent file find child file:. / Enter the folder name/target. Suffix 3 Child file find parent file:. / target. Suffix

Merge cells in a table: ColSPAN merges columns RowSPAN merges rows. If both rows and columns are merged, the columns are merged first and then the rows are merged. A label in a table that can be used as a column header. The default style is bold with text centered.

Form and

<thead><tbody><tfoot> -- data row grouping. Fieldset usage in form tags, label usageCopy the code

When a form and a table are nested, place the form tag outside the table.

Chapter 2 Notes: CSS

CSS cascading style sheets, do style rendering for web pages. External style sheets start with @charset “UTF-8”

Inline stylesheets have the largest weight, and internal stylesheets, like external stylesheets, have only label order. The last one overwrites the previous one, and only the same attributes are overwritten. Styles for different attributes continue.

A tag can have multiple class names.

<div class="a1 a2"></div>
Copy the code

I need a space between A1 and A2.

Group selectors: selectors 1, 2, 3{width:””; height:””; }

Selector weights ID (weight 100) >class (10) > tag (1) Compound selector weights equal the sum of their own weights. Pseudo-class selector weight 10. Append the property to! Important has the highest weight.

The third chapter:

Font size The default text size is 16px. It is best to set the text size to even. Preferably no less than 12px.

Units: PX, pt (lb), EM. 9pt=12px, a unit of em relative to the size of the parent element. Rem: Units of relative size, defined by default smal=13px, midium=16px, and large=19px, based on HTML font size values. Top line, middle line, baseline, bottom line of text.

Color: color Color values are expressed in hexadecimal notation. Representation: #3 or 6 hexadecimal characters. 0 -> F Color gradually changes from dark to light. 000 (black) FFF (white). RGB (,,), Rgba (255,, 0-1 (transparent))

Font: font-family If multiple fonts are set, separate the attributes by commas (,).

Font weight: “” bold, bolder, normal. The font – style:

Center the text at a height of 100px. Setting line-height to the text size eliminates spacing errors.

Text-align: justify both ends. Center. The left. Text-decoration: None, underline, overline text-indent: 2em. The indentation.

Word-spacing: spacing between words

List-style: url () list-style:none

Background: background-image: URL (the path of the image) controls whether the background image is tiled: background-repeat: “” repeat tiled, no-repeat not tiled, repeat-x horizontal tiled, repeat-y vertical tiled.

Controls the position of the background image: background-position:; Property has two values, the first controlling left and right, and the second controlling up and down. The first one and the second one could be left, right, center.

Fixed: background-attachment: Attribute value: SCrolled, fixed. Several properties about setting the background can be reduced to a single line. For example, colors, borders, etc.

Set border-collapse: collapse in table to eliminate internal cascading lines.

Fixed the table layout property: table-layout: Fixed

The fourth chapter:

Padding: 10px around, 10px, 20px left and right

10px 20px 30px up left right down

1px 2px 3px 3px up right down left.

Margin: 0 auto Center an element inside its parent.

Be careful with margin-top and use padding to solve layout problems.

The upper and lower margin values between two sibling elements do not stack, but are set to the maximum value. The left and right are superimposed.

Padding is the best way to control the position of child elements, and margin is the best way to control the position between elements.

The border of the button expands inward. So when you use a button, you can put a div around it to make it look good.

List-style-image: URL defines the image in front of the list.

Overflow: Scroll bar, hidden auto

White – space:; White space treatment. Property values: pre, pre-wrap, nowrap (Important) No line breaks.

White-space: nowrap overflow: hidden text-overflow: ellipsis width: (need to add width)

To center a block element in a div:

Div: {width: ""; Height: ", "text - align:"”；
}
Copy the code

Let the element to be centered set to style

{display: inline-block vertical-align:middle}Copy the code

Add a span tag to the end of the element and style it as

{width: 0 px; height:100%; display:inline-block; vertical-align:middle; }Copy the code

Labels are classified from another Angle: replacement elements and non-replacement elements. Substitution elements: The type of attribute or tag determines the state of the page display, because the substitution element generates a box during page rendering that can be added with width and height.

Transition and height collapse problems

The transition attribute must be triggered by an event. Such as:

Transition: width 1s.

Transition: width 1s 2s

Transition: width 1s, background 1s; (Width changes by one second, background changes by one second.) Attribute value: Attribute of overparticipation (default is all), time (overparticipation time s, ms) Delay time s, ms. The type of motion is linear. Bezier curve properties.

The opacity property needs to be understood. Setting opacity: 0-1 (range)

Position: Fixed Indicates a fixed position. Use the browser window as a reference. Separate from the document flow and take up no space.

Position: fixed; position: fixed; Left: 50%; Top: 50%; Margin: – height half 0 0 – width half. 2: position: fixed; Left: 0; Right: 0; Top: 0; Bottom: 0; Margin: auto. (recommended)

Method to center an element in the parent element window:

Parent element: position: relative; Child element: position: absolute; Left: 0; Right: 0; Top: 0; Bottom: 0; Margin: auto

Position: sticky (top suction effect). Position: relative is executed when the sticky positioning element is added and does not exceed the browser window; position: sticky is executed when the sticky positioning element is added and does not exceed the browser window. Add position: sticky; Top: 0; (This effect has some compatibility on PC)

< tag ID = “a1” ></ tag >

<a href="#a1"><a/> 
Copy the code

Anchor points – Jump within the page.

Width adaptive :(day9pm)

If an element has no width set and is absolutely positioned, floated, fixed positioned, or detached from the text stream, the width is the width of the content to spread out.

Height collapse scenario: when the parent element does not set the height, the child element adds a float, the parent element will appear height collapse, even if the child element is set height or min-height float child element will not extend the parent element height. Solutions to height collapse:

1: Add over-flow: hidden to the element with height collapse; The principle is that over-flow: Hidden triggers the BFC (layout logic). The BFC states that when the height of an element is calculated, the floating element in it is also calculated. Cons: Over-flow: hidden hides content other than the parent element.

2: At the bottom of the float element, add an empty div and give

Div {clear: both; }Copy the code

Clear: left, right, both. Respectively are cleared left, right and side float. Close the space reserved by the floating element above. Cons: There is a lot of code redundancy.

3: Universal elimination method

Display: block height: 0 overflow: hidden Clear: both visibility: hidden (hidden elements, but still occupy space) }Copy the code

: after{} pseudo-object selector. Add content after the current element.

: before{} Adds a paragraph of content before the current element.