Summary of several key points in html learning-HTML Tutorial-php.cn

Table of Contents

Block elements, inline elements, inline block elements

<p style="color:red">这里文字是红色。</p>

Copy after login

" >

<p style="color:red">这里文字是红色。</p>

Copy after login

<style type="text/css">span{color:red;}</style>

Copy after login

" >

<style type="text/css">span{color:red;}</style>

Copy after login

2. You can use the position attribute to place an element anywhere on the web page.

Difference:

Home

Web Front-end

HTML Tutorial

Summary of several key points in html learning

无忌哥哥

Jul 19, 2018 am 11:39 AM

html

Key summary about html

Block elements, inline elements, inline block elements

HTML can classify elements into There are three types of inline elements, block elements and inline block elements
Using the display attribute, the three can be converted arbitrarily
Block elements automatically Line break
Conversion method
(1)display:inline;Convert to inline element
(2)display:block;Convert to block element
(3)display:inline-block;Convert to inline block element
Compare

1.Inline element

The most commonly used inline element is span, and the others are only used under specific functions, modifying the font <b> and <i> tags, and There are two tags, <sub> and <sup>, which can directly create a square effect without the help of similar movement attributes, which is very practical.

Characteristics of inline elements: (1) Setting width and height is invalid

　　　　　 (2) Setting margin is only effective in left and right directions, not up and down; padding setting is effective in both up, down, left and right directions, which will expand the space

<!DOCTYPE html>
  <html>

      <head>
          <meta charset="utf-8" />
          <title>行内元素</title>
          <style type="text/css">
              span {                  
              width: 120px;                 
              height: 120px;                 
              margin: 1000px 20px;                 
              padding: 50px 40px;                 
              background: lightblue;             
              }
         </style>
     </head>

     <body>
         <sspan>不会自动换行</span>
         <span>行内元素</span>
     </body>

 </html>

Copy after login

2. Block element

The representative block element is p, others such as p, nav, aside, header, Footer, section, article, ul-li, address, etc. can all be implemented using p. However, in order to facilitate programmers to interpret the code, specific semantic tags are generally used to make the code more readable and easy to check for errors.

Characteristics of block elements: (1) Able to recognize width and height

　　　　 (2) The top, bottom, left and right margins and padding are all valid for it

　　　　 (3) Can automatically wrap lines

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 graduate down through the arrangement by default

<!DOCTYPE html>
  <html>

      <head>
          <meta charset="utf-8" />
          <title>块状元素</title>
          <style type="text/css">
              p {                  
              width: 120px; 
               height: 120px;                 
               margin: 50px 50px;                 
               padding: 50px 40px;                 
               background: lightblue;            
                }
         </style>
     </head>

     <body>
         <i>自动换行</i>
         <p>块状元素</p>
         <p>块状元素</p>
     </body>

 </html>

Copy after login

3. Inline block elements

Comprehensive inline block elements It combines the characteristics of inline elements and block elements, but each has its own trade-offs. Therefore, inline block elements are used more often due to their characteristics in daily use.

Characteristics of inline block elements: (1) No automatic line wrapping

<!DOCTYPE html>
  <html>

      <head>
          <meta charset="utf-8" />
          <title>行内块状元素</title>
          <style type="text/css">
              p {                  
              display: inline-block;                 
              width: 100px;                 
              height: 50px;                 
              background: lightblue;             
              }
         </style>
     </head>

     <body>
         <p>行内块状元素</p>
         <p>行内块状元素</p>   
     </body>

 </html>

Copy after login

Absolute path and relative path

Absolute path: refers to the absolute location in the directory, directly reaching the target location, usually the path starting from the drive letter

Relative path: refers to the path relationship with other files (or folders) caused by the path where this file is located
Each one. Jump one level outward.
Three ways to write styles

1. Inline style:

Write the css code directly into the existing HTML tag

<p style="color:red">这里文字是红色。</p>

Copy after login

2. Embedded style:

Embedded css style means that you can write css style code between tags

<style type="text/css">span{color:red;}</style>

Copy after login

3. External style sheet:

External css style (also called external style) is to write the css code in a separate external file. This css style file has the extension ".css"

<link href="style.css" rel="stylesheet" type="text/css" />

Copy after login

Note:

css style file name must comply with the naming rules, such as main.css

rel=”stylesheet” type=”text/css” is a fixed writing method that cannot be modified
css files can also be introduced using import in

, but this method cannot be operated with js
Absolute positioning, relative positioning and fixed positioning

Note:

1. The position attribute can control how and where the web browser displays specific elements.

2. You can use the position attribute to place an element anywhere on the web page.

Optional values:

- static: Default value, the element does not have positioning enabled
– relative: Turn on relative positioning
– absolute: Turn on absolute positioning
- fixed: Turn on fixed positioning

3. Relative positioning

①Each element has a natural position in the document flow of the page. Moving an element relative to this position is called relative positioning. Surrounding elements are completely unaffected by this.

②When relative positioning is turned on, you can use the four attributes top, right, bottom, and left to position the element.

—-left: The left offset of the element relative to its positioning position. left: 100px, offset 100px to the right relative to the original position

—-right: the right offset of the element relative to its positioning position

—-top: the element relative to its positioning position The upper offset of the element

——-Bottom: The lower offset of the element relative to its positioning position

③Characteristics of relative positioning

——-If the element is not set Offset, the position of the element will not change.

——-Relative positioning is relative to the original position of the element in the document flow.

——-Relative positioning does not take the element out of the text flow. The element's position in the text flow does not change.

——-Relative positioning will not change the original characteristics of the element. Block element or block element, inline or inline

- Relative positioning will raise the level of the element so that the element can cover elements in the text flow.

4. Absolute positioning

①Absolute positioning means that the element is positioned relative to the html element or its nearest ancestor positioning element.

②When the position attribute is set to absolute, the absolute positioning of the element is turned on.

③When absolute positioning is turned on, you can use the four attributes top, right, bottom, and left to position the element.

④Characteristics of absolute positioning:

——Absolute positioning will completely separate the element from the text flow.

——-The width of an absolutely positioned block element will be stretched by its content.

——Absolute positioning will turn inline elements into block elements.

——-Absolute positioning is relative to the nearest ancestor element that has positioning turned on. If all ancestors do not have positioning turned on, they will be positioned relative to the browser window.

——Generally, when using absolute positioning, a relative positioning will be specified for its parent element to ensure that the element can be positioned relative to the parent element.

——-Absolute positioning will increase the level of the element.

5. Fixed positioning

①Fixed positioning elements will be locked at a certain position on the screen. When the visitor scrolls the web page, the fixed elements will remain stationary on the screen

②When the position attribute is set to fixed, the fixed positioning of the element is turned on.

③When fixed positioning is turned on, the four attributes of top, right, bottom, and left can be used to position the element.

④ Fixed positioning is also a kind of absolute positioning. Other characteristics of fixed positioning are similar to absolute positioning.

Difference:

(1) Fixed positioning is always relative to the browser positioning.

(2) will be fixed at a certain position in the browser window and will not scroll with the scroll bar.

(3)IE6 does not support fixed positioning.

The above is the detailed content of Summary of several key points in html learning. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn