Basic knowledge of HTML+CSS

Posted by ardyandkari on Sat, 12 Feb 2022 17:56:26 +0100


W3C (World Wide Web Consortium) was established in 1994 (neutrality)

Shortcuts & basic labels

To get the empty style CSS, click me
Run: Ctrl+r
Completion syntax: Tab
Label: < H1 > ~ < H6 >
Paragraph: < p ></p>
Line feed:</br>
Horizontal line: < / HR >
Bold: < strong > or < b >
Italics: < EM > or < I >
&Multiple uses of symbols
Spaces: & nbsp;
>No.: & + gt;
< No.: & + lt;
Double quotation mark: quote;
©: Copyright symbol
Copyright symbol: copy;

Diverse connections

Picture link:

<img src="Picture path",title="Picture title",alt="What is displayed when the image is cracked",weight="image width",height="Picture height"/>

Hyperlink: you can add pictures

<a href=" Link address (where to jump)",target="Opening method (jump to a new page or open from the current page, the default is the current page)">Write what you want to display here\</a>

_ self: it is opened from the current page, that is, from itself
_ blank: open from new page

Anchor link: create an anchor point first, and then create a link

Anchor point: < a name = "" > I am the anchor point < / a >, and the content in name is user-defined
Link method 1: < a href = "" ></a>
Connection mode 2: < a href = "" # "" ></a>
Plus # sign means jump to the specific position of a page (jump to the specific position of a page must add # sign)

Small knowledge:

  1. The picture suffix PNG is: transparent background, Ctrl + /: comment statement
  2. Block elements are exclusive to one line, and intra line elements are not exclusive to one line
  3. < / span >: span is an empty label used to declare attributes, which is used in conjunction with style.


ID > class > tag

Label selector:

< > < > (can also be divided into single label and double label)

Class selector:

class selector (starts with.)

Id selector:

An Id can only be used once in a page (starting with #)


font-family:Set font type
font-size:Set font size
font-style: Set font style
font-weight:Set font weight
font Set all font properties in one declaration:
font: style(Style), weight(Thickness), size(Size), family(Type);
text-shadow:X Axis offset, Y Axis offset, shadow range, color
text-indent:text-indent ➡➡➡px(Pixels), em((character)
text-align: Horizontal alignment of elements
center: Centered, left: Left, right: Right, justify: both ends
line((row)-height: Row height
text-decoration: Text decoration( none: (without any decoration)

RGB 0-255 (0,0,0) RGBA (transparent 0-1) (0, 0, 0, 1) #ff color corresponding words (color: red, green, blue, 0-1)


Background color, style: Type, link: external CSS embed
background-color:background color 
background-image: url(Path) (background picture can be inserted)
background-repeat:Background picture tile
background: no-repeat: no-repeat 
background-position: (x,y)Background image positioning positive right negative left
background: Picture, positioning( x,y),Tile, color (can be out of order))
Vertically centered text (for pictures): vertical-align: middle
 Quickly generate labels: example: span*quantity/p*quantity>span.a/#a
 Effect achieved by hovering the mouse over it: example: hover{Style name: style value;}
a:link Click access for
a:visited After clicking access
a:hover Hover the mouse over it
a:active Mouse click not released

H5 inline CSS: < link href = "", rel = "", type = "" >


The picture is above the background color (similar to PS layer)


Unordered list
ul: List declaration    li: List item
list-style: none;
List style no style

Ordered list
ol: List declaration    li: List item

Definition list
dl: List declaration    dt: List title    dd: List content


Properties: border frame
that 's ok:<tr></tr>
((Consolidation)<td colspan="1"></td> One space to the right
((Consolidation)<td rowspan="1"></td> 1 grid down

Hierarchy selector

1. Descendant selector

 Parent selector and descendant selector{ }

2. Sub selector

 Parent selector>Child selectors 
 For example: h1>span{}

form declaration

form action = " " method = " "
action:Address of data submission
method:Method of submission( get/post)
get: Submission will display the form data directly to the address
post: The submission will encrypt the list data and not display it
input: An element on the form
type = input Type of element
 user name:<input type = "text"/> 
password:<input type = "password"/>
name Attribute: give the form a name so that the background can know what the current number is
Male:\<input type = "radio"/>
Female:\<input type = "radio"/>
Radio button to realize radio selection name Same, from name by sex(Gender)
Multi selection button
<input type = "check(Multiple) box((box)" />
Multiple check box buttons, name It must be the same
list box
select: Drop down list box declaration   option: Check box of drop-down list box
         <option>  </option>
Selected by default:
     <option selected = "selected">
Reset button
 Properties: reset           value: Value of element
<input type = "reset"  value = "Reset">
Submit button  submit
<input type = "submit"/>
get Submit: the form data will be directly displayed on the address bar (high efficiency)
post Submit: the form data will be encrypted and not displayed (high security)
Picture button (picture submission)
<input type = "image(picture)"   src="route"/>
Button:<input type = "button"/>
Protocol box
<textarea name =""  rows="Several lines"  cols="Several columns"/>
(complex/Radio button (selected by default)
checked = "checked";
Radio <input type:"checkbox"/>
size: " " ; Length of frame
maxlength=""; The maximum number of characters can be entered in the text box
<input type = " "  value=""/>
type Contents in:
Hidden fields: hidden
 Read only: readonly
 Disable: disabled
Text box prompt: placeholder=" ";
latel for="";
latel:click label You can select the content in the for The label (focus);
For example:<label for ="nan">male</label>
    <input id = "nan" type=""/>

box model


(solid:Solid line, double:Double solid lines, dashed:Dotted line, none:(no border)

One value: up, down, left and right; Two values: up and down, left and right; Three values: up, left and right, down; Four values: up, right, down, left

border-direction-Styles: Values;(For example: border-top-color: green;)
Outer margin( margin): The distance from the border of an element to the border of another element.
Inner margin( padding): The inner and outer margins change the size of the element. (distance from the border to the content inside)
Horizontal block level centered element
1. Must have width(For example: border-width: 1px;)
2. margin: 0 auto((automatic)
(Used to solve the problem of box size change (border, inner margin))
(The width and height of the content can be obtained by subtracting the border and inner margin from the set width and height.)

Tips: linear gradient: linear gradient;

DIV (box (very clean (no block level elements of any style))

display: Used to change the element level (in-line variable block level)
display: block;
display: inline;
Intra row block: (i.e. width and height can be set in one row)
display: inline-block;

Small knowledge: (when writing web pages, write from outside to inside and from top to bottom) form form (for submission)

advanced selectors

#box dt: nth of type (subscript) {background}
#box dd: last-of-type{border: none}

Excess hide / scroll bar

overflow: hidden/scroll

Resolve text box collapse

1. Make a subclass (make a son)
2. Add width to it
3. hide/Add scroll bar
4. Add to collapsed elements:
   #box: after{
              content: "";

Union selector:

p,h1{color:red;} Intersection selector: < p class = "a b c d e" > element hiding: display:none;

Standard document flow (let elements sort naturally according to their own level)

Off standard: off standard document flow
 Floating properties: snap properties
1. When floating elements can be placed in a row, they will be placed in this row, close to the floating elements in the previous row
2. Floating directly turns the element into an inline block
3. When the floating is preceded by the standard document stream, the floating elements are placed in the next row
4. When the floating element is preceded, the standard document flow will automatically fill up the position

1. float-float attribute
     float: left;Left float
2.   clear: left;Clear left float
     (Tell the current element that your previous element is not floating)
3.   Parent element: hover Child element{ }
        When the mouse is over the parent element, what happens to the child element
        Example:#box: hover div{display: bloch;}
4.   Border radian:
        border-radius: 50%(Circle)
5.   border: 1px solied red;
     (Borders also count as Div Part of the size)
6.   margin: 0 auto;(Block level elements (centered)
7.   height: 27px;
     line-height: 27px;
     (The height shall be consistent with the line height, and the text shall be centered vertically within the line)
8.   #box>p>a:first-of-type;
9.   vertical-align:middle;(Vertically centered text)

Topics: css3 html css