Front-end-basic knowledge of html and css

HTML (web page)

Some basic concepts in the web domain.

WEB

The Web (World Wide Web) is called the global wide area network, commonly known as the World Wide Web (www).

W3C

W3C (World Wide Web Consortium) is called the World Wide Web Consortium, which is the most famous standardization organization in the world and has developed web standards.

WEB standard

A web page contains HTML elements Css JavaScript, Html elements determine the structure of the web page, Css is decorated and beautified, and JavaScript controls interactive behavior and dynamic effects.

The web standard includes the following three aspects:

Structural standards (HTML): used to organize and classify web page elements.
Performance Standard (CSS): Used to set the layout, color, size and other appearance styles of web page elements.
Behavior Standard (JavaScript): Used to define the interaction and behavior of web pages.

HTML definition

Html is not a programming language, but a descriptive markup language , whose main function is to define the structure of the content.

In October 2014, the World Wide Web Consortium (W3C) completed the HTML5 standard formulation, which is the latest HTM version.

The birth of HTML5 marks the web entering an rich client (with strong interactive and experience client programs) era, like APP web pages, applets are HTML5 application scenarios.

Html5 new features:

The canvas element used for painting.
The video and audio elements used for media playback.
Better support for local offline storage.
New special content elements, such as article, footer, header, nav, section.
New form controls, such as calendar, date, time, email, url, search.

Basic structure of the page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!--字符集-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <meta name="Author" content="">
    <meta name="Keywords" content="关键词" />
    <meta name="Description" content="页面描述" />
    <title>页面标题</title>
</head>
<body>

</body>
</html>

About viewport

The visible area of the viewport user's webpage, a page viewport meta tag optimized for mobile webpages is as follows:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width: Control the size of the viewport, a value that can be specified, such as 600, or a special value, such as device-width is the width of the device (the unit is CSS pixels when zoomed to 100%).
height: Corresponding to width, specify the height.
initial-scale: The initial scaling ratio, which is the scaling ratio when the page is first loaded.
maximum-scale: The maximum scale that the user is allowed to zoom to.
minimum-scale: The minimum scale that the user is allowed to zoom to.
user-scalable: Whether the user can manually zoom.

Common elements

Head area element: meta title style link script base.

Elements of the body area:

div、section、article、aside、header、footer
p
span、em、strong
table、thead、tbody、tr、td
ul、ol、dl、dt、dd
a
form、input、select、textarea、button

Element classification

block-level elements : each element is on its own line

address-address
blockquote-block quote
center-center alignment block
dir-directory listing
div-common block level is easy, it is also the main tag of css layout
dl-definition list
fieldset-form control group
form-interactive form
h1-h6-title
hr-horizontal divider
isindex – input prompt
menu-menu list
noframes-optional content of frames, (display the content of this block for browsers that do not support frames)
noscript-) Optional script content (display this content for browsers that do not support script)
ol-sort form
p-paragraph
pre-formatted text
table-table
ul-unsorted list

: elements are arranged horizontally in the same row

a-anchor point
abbr-abbreviation
acronym-first word
b-bold
big-big font
br-line break
em-Emphasis
font-font setting (not recommended)
i – Italic
img-picture
input-input box
label-table label
s-underline (not recommended)
select-item selection
small-small font text
span-commonly used inline container to define the block within the text
strike-strike
strong-bold and emphasized
sub-subscript
sup-superscript
textarea-multi-line text input box
tt-Teletext
u-underscore
var – define a variable

inline-block : Elements can be arranged in the same row, and some block element attributes can be set

Change the element through Css:display:inline-block.

Element default style

Many elements have their own default styles. The default styles in different browsers are inconsistent. In order to unify or meet some needs, we need to clear all the default styles. This processing method is also called Css Reset , such as:

*{
    margin: 0;
    padding: 0;
}

Another solution uses normalize.css , which unifies the default styles of different browsers,

https://github.com/necolas/normalize.css

CSS (Cascading Style Sheet)

Css unit

The unit in html is pixel px

absolute unit

in: inch, 1in = 2.54cm = 96px
pc: pickup truck, 1 pickup truck = 1/16 inch
pt: point, 1 point = 1/72 inch
px: pixel, 1 point = 1/96 inch

relative unit

em: The font size in font-size relative to the parent element, and the font size used in the element attribute is relative to its own font size
rem: the font size of the root element, used in the element attributes is relative to the font size of the root element
1h: the line-height of the element
vw: 1% of the width of the window
vh: 1% of the window height
vmin: 1% of the smaller size of the window
vmax: 1% of the view's large size

Font attributes

Attributes: font, line height, color, size, background, border, scroll, line break, modification attributes (bold, italic, underline)

p{
    font-size: 20px;         /*字体大小*/
    line-height: 30px;      /*行高*/
    font-family: PingFang SC;     /*字体类型：显示PingFang SC，没有就显示默认*/
    font-style: italic ;        /*italic表示斜体，normal表示不倾斜*/
    font-weight: bold;    /*粗体或写（400｜500｜600）*/
    font-variant: small-caps;  /*小写变大写*/
}

line-height

It is generally agreed line height of 1616e7b0cdd8b1 and the font size are even numbers , so that the difference between them must be an even number divided by 2 to get an integer, as shown in the following figure:

line-height

text is centered vertically

For single-line text, you can set line height = box height .

For the vertical alignment of multi-line elements, we can use the vertical-align: middle property, but the vertical-align only applies to inline, inline-block and table-cell elements.

vertical-align

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* 指定长度值 */
vertical-align: 10em;
vertical-align: 4px;
/* 使用百分比 */
vertical-align: 20%;
/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;

Text attributes

letter-spacing: 0.5em ; The spacing between individual letters.
word-spacing: 1em; The space between words.
text-decoration: none; none Remove underline, underline, line-through, and overline.
color:red; font color.
text-align: center; text alignment, the attribute value can be: left, right, center, justify.
text-transform: lowercase; uppercase, lowercase, capitalize.
text-indent:10px; Indent the first line of text.
text-shadow:2px 2px #ff0000; text shadow effect.
white-space: normal; Set element blank handling, normal, nowrap, break-spaces.

Overflow attribute

Content overflow handling

visible : The default value, all the extra content will be displayed.
hidden : The content exceeding the element is hidden.
auto : The content exceeds the display scroll bar.
scroll : Windows always displays scroll bars. Mac and auto same attributes.

Filter

filter:gray()

Background attributes

background-color:#fff; sets the background color.
background-image:url(img.png); sets the image as the background.
background-repeat: no-repeat; no-repeat do not tile, repeat-x tile horizontally; repeat-y tile vertically.
background-position:center top; Set the position of the background image in the container, top, bottom, left, right, center.
background-attachment:scroll; set the background picture to move with the scroll bar, scroll (follow the scroll), fixed (fixed).
background-origin:border-box; css3, border-box (positioning of the background relative to the border frame), padding-box (positioning of the background relative to the filling box), content-box (positioning of the background relative to the content box).
background-clip:border-box; css3, background cropping.
background-size:cover; css3, adjust the size,
- contain (without cropping or stretching the image, zoom the image as much as possible in its container),
- cover (scale the image as large as possible to fill the container, stretch the image if necessary.),
- auto (The background image is scaled in the corresponding direction to maintain its inherent proportions.).

priority

Understanding priority is very important and helps us troubleshoot some problems. browser divides the priority into two parts: HTML inline style and selector style.

style

The inline style is directly applied to the element, and its priority is higher than the selector style. Use ! important can increase the priority of the style sheet.

<div style="font-size:16px">
</div>

selector style

<style type="text/css">
    p{
      font-size: 16px;
    }
</style>
<link rel="stylesheet" href="style/app.css">

The priority rules are as follows:

If the number of IDs of the selector is the most, the winner.
If the number of IDs is the same, the selector with the most classes wins.
If the above two comparisons are consistent, then the selector with the most tag names wins.

优先级

We can determine the priority of the selector through the marking method as shown in the figure below.

优先级

Two rules of thumb

Try not to use the ID selector, because it will greatly increase the priority. When you need to overwrite this selector, you usually cannot find another meaningful ID, so you need to copy the original selector and add another class to make it different from the selector you want to overwrite.
Do not use! important. It is more difficult to overwrite than ID. Once you use it, if you want to overwrite the original statement, you need to add another one! important, and still have to deal with the issue of priority.

Base selector

Type or tag selector, matching the tag name of the target element, such as: p, input[type=text], priority (0, 0, 1).
Class selector, matching the element with the specified class name in the class attribute, such as: .box, priority (0, 1, 0).
ID selector, matching elements with specified ID attributes, such as: #id, priority (1, 0, 0).
Universal selector (*), matching all elements, priority (0, 0, 0).

Combination selector

A complex selector composed of multiple basic selectors.

The descendant combinator (single space ( ) means), such as .nav li, which means that li is a descendant of an element with the nav class.
Child combinator (>), the matched element is the direct descendant, .parent> .child.
Adjacent sibling combinator (+), the matched element immediately follows other elements, div + p.
Universal sibling combinator (~), matching all sibling elements following the specified element, it will not select the sibling element before the target element, li.active ~ li.

Compound selector

Multiple basic selectors are connected (no spaces in between) to form a composite selector (such as: ul.nav). The element selected by the compound selector will match all its basic selectors. .box.nav can select class="box nav", but cannot select class="box".

Pseudo-class selector

Used to select elements in a specific state, priority (0, 1, 0).

:first-child-The matched element is the first child element of its parent element.
:last-child-The matched element is the last child element of its parent element.
:only-child-The matched element is the only child element of its parent element (no sibling elements).
:nth-child(an+b)——The matched element has a specific position among the sibling elements. The a and b in the formula an+b are integers, and the formula specifies which element to select. To understand how a formula works, substitute all integer values of n starting from 0. The calculation result of the formula specifies the position of the target element. The following table gives some examples.

:nth-child(an+b)

:nth-last-child(an+b)——similar to: nth-child(), but instead of counting from the first element, it is counting from the last element. The formula in parentheses has the same rules as the formula in nth-child().
:first-of-type——Similar to: first-child, but instead of searching for the element based on its position in all child elements, it searches for the first element based on the numerical order of the child elements with the same tag name.
:last-of-type-matches the last child element of each type.
:only-of-type——The element matched by this selector is the only child element that satisfies the type.
:nth-of-type(an+b)——Select elements according to the numerical order of the target element in a specific type and a specific formula, similar to: nth-child.
:nth-last-of-type(an+b)——Select elements according to element type and specific formula, counting from the last element, similar to: nth-last-child.
:not( <selector> )-The matched element does not match the selector in the brackets. The selector in the brackets must be a basic selector, it can only specify the element itself, it cannot be used to exclude an ancestor element, and it is not allowed to include another exclusion selector.
:focus-Matches the element that gets the focus by clicking the mouse, touching the screen, or navigating by pressing the Tab key.
:hover-matches the element on which the mouse pointer is hovering.
:root-matches the document root element. For HTML, this is an html element, but CSS can also be applied to XML or XML-like documents, such as SVG. In these cases, the selector has a wider range of options. There are also some pseudo-type selectors related to form fields.
:disabled-matches disabled elements, including input, select, and button elements.
:enabled-matches enabled elements, that is, those elements that can be activated or receive focus.
:checked-matches the selected checkbox, radio button or checkbox option.
:invalid——According to the definition in the input type, match elements with illegal input values. For example, when the value of <inputtype="email"> is not a valid email address, the element will be matched.

More reference: https://developer.mozilla.org/zh-CN/docs/Web/CSS

Pseudo element selector

Pseudo-element selectors can insert content into undefined places in HTML tags, with priority (0, 0, 1).

::before-Create a pseudo element, making it the first child element of the matched element. This element is an inline element by default and can be used to insert text, pictures or other shapes. The content attribute must be specified to make the element appear, such as: .nav::before.
::after-Create a pseudo element, making it the last child element of the matched element. This element is an inline element by default and can be used to insert text, pictures or other shapes. The content attribute must be specified to make the element appear, such as: .nav::after.
::first-letter——Used to specify the style of the first text character of the matched element, such as h1::first-letter.
::first-line-Used to specify the style of the first line of text of the matched element.
::selection-Used to specify the style of any text selected by the user using the mouse to highlight. Usually used to change the background-color of selected text. Only a few attributes can be used, including color, background-color, cursor, text-decoration.

Attribute selector

The attribute selector is used to match elements according to HTML attributes, with priority (0, 1, 0).

[attr]——The matched element has the specified attribute attr, no matter what the attribute value is, such as input[disabled].
[attr="value"]——The matched element has the specified attribute attr, and the attribute value is equal to the specified string value, such as input[type="radio"].
[attr^="value"] ——"beginning" attribute selector. The element matched by this selector has the specified attribute attr, and the beginning of the attribute value is the specified string value, for example: a[href^="https"].
[attr＊="value"]——"contains" attribute selector. The element matched by this selector has the specified attribute attr, and the attribute value contains the specified string value, such as: [class＊="sprite-"].
[attr~="value"]——"space-separated list" attribute selector. The element matched by this selector has the specified attribute attr, and the attribute value is a space-separated list of values, a value in the list is equal to the specified string value, such as: a[rel="author"].
[attr|="value"]——The matched element has the specified attribute attr, and the attribute value is either equal to the specified string value, or starts with the string followed by a hyphen (-).

summary

To review the main points of this article, please leave a message for exchange.

Introduction to some basic concepts in the Web.
Html page structure, element classification.
Css priority.
Css selector, (basic selector, combination selector, composite selector, pseudo-type selector, pseudo-element selector, attribute selector).