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

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  and  tags, and There are two tags,  and , 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>

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>

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>

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>

2. Embedded style:

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

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

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" />

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

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

HTML as a Markup Language: Its Function and PurposeApr 22, 2025 am 12:02 AM

The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.

The Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

See all articles