Initial knowledge of HTML and CSS

HTML one, HTML and CSS overview

• World Wide Web Consortium, is currently the most authoritative and influential technology standards organization in the field of website technology. More than 200 standards have been published. Its official address: w3.org
• WHATWG: Working Group on Hypertext applications, full name is Web hypertext Application Technology Working Group.
• HTML: Hypertext Markup Language, full name is Hypertext Markup Language. The language is used to define the structure of the document's content, that is, the structure of the Web page or the label of the generated Web page, and the code written by the language is usually parsed by the browser.
• Hypertext: hypertext, which means not just text, but also non-text elements such as pictures, links, audio, video, and so on.
• Markuo Language: Markup Language, which is a set of tag tags.
• CSS: Cascading style sheet, full name is cascading style Sheets. Used to define the style (appearance) of an HTML document, which is to beautify the HTML. Is the basis of the page performance, you can control the label location, control the rendering of elements, so as to control the layout.  
  Summary: HTML determines the document structure, and CSS determines the document style. That is, html+css→ through browser parsing, rendering → generating web pages

Second, the HTML terminology

2. HTML comment: Used to describe code functionality. The browser ignores comment content when parsing code.  
   Writing format:<! --Comment content-->
3. HTML elements (also called tags, markers, tags): An HTML consists of a large number of elements, all the content structure of HTML, is organized by elements into the page. 
   
   • H3 element:< H 3 > element content

   • A element:< a href= "/classroom/17" > Element content </a>-> where ①href= "/classroom/17" is a property, and the attribute can only be written in the start tag, and multiple attributes may exist, representing additional functionality , such as links, jumps and so on. ②a is the tag name. ③href is the property name. ④ "/CLASSROOM/17" is the attribute value (double quotation marks are added).
   • Empty element: Only the start tag has empty elements, which means to store links, display pictures, etc. in the start tag, without element content and end tags. Also known as a closed element only. Write as:< tag Name property > or < Tag Name property/>
   • Element hierarchy: In the content of an element, you can include other elements to form a nested hierarchy, but the two elements cannot be nested with each other. ① If a element directly contains B: Then A is the parent of B and B is a child element. ② If two yuan has the same parent element, then they are the sibling elements of each other. ③ if a directly or indirectly contains b,a is the ancestor of B, B is the descendant element of a.

Third, the document structure of HTML

• Document declaration: It is neither an element nor a comment, it always appears in the first line of the HTML code, and is used primarily to tell the browser to parse the code using the correct version of the HTML parser. 
  Write:<! DOCTYPE HTML >→ tells the browser to be a HTML5 version 
  If you do not write this statement, the browser renders the page into a strange mode, that is, the content can only be displayed, unable to parse the label (mainly because when the browser does not know which version to use the default selection of the minimum version resolution, and browser compatibility can display text content, but does not recognize the label). 
  
  2. The HTML element is also called the root element, the root tag , and he is the ancestor of all other elements, all elements of the document are placed in its element content.  
     
     • Related properties: lang (this property specifies what natural language the text in the document is written in, and may affect the browser's voice reading and translation behavior)
  3. Head element: 
     
     • also called the document header, he is the first child element of the HTML element.
     • head element are not displayed on the page, but instead appear on the tab page, which generally shows the title, description, link address, and so on.
     •  
       ①< title > identifies the document title, which is displayed on the tab page. &NBSP;
       ②< meta > Identifies additional metadata for the page (page related additional information), which is an empty element. For example:< meta charset= "UTG-8" > The language used to parse element content, the full name is &NBSP; character encoding set .
  5. BODY element
     
     • Also called the document body, all the visible content in the Web page is placed within that element.

Iv. absolute path and relative path

2. Absolute path:
   
   • Writing format: protocol://domain/directory → example: http://www.google.com/
   • Usage scenario: When accessing out-of-station resources, only absolute paths can be used; access to the site resources is, if the website has been deployed, you can use absolute path, and the protocol and domain name can be omitted, omitted to/as the beginning .
4. Relative path:
   
   • Relative to the location of the current resource, it can only be used to access resources within the station .
   • Write:./path
   • ./indicates the directory in which the current resource resides, must be the beginning of a relative path, or omitted, and only begins with the directory name .
   • .. /indicates return to the previous level directory.

CSS One, SCC reference

2. &NBSP;
   
   • reference rule: in HTML < link href=" style address ">. < link > elements exist within < head > and are generally not recommended for direct connection to < head >.
   • Other: Ctrl +? : Note the line where the cursor is located. Press CTRL + once more? The comment is canceled.
4. &NBSP;
   
   • writing:< style> </style> written in head.
   • Note: typically used for debugging, it can be written in the internal debugging, and then glued to the outside.
6. Using inline style sheets: CSS code is written in the style of the element, and the style is written in the properties of the start tag.
   
   • Note: Inline styles do not write selectors.
   • Features: ① does not have a stylesheet file, and at some point can improve efficiency. ② multiple pages is difficult to share styles and is not conducive to code efficiency. ③html and CSS code mixed, not conducive to programmers and search engine reading. The ④javascript operates in inline style and is used in test scenarios.  
     Prioritization: In-line style sheets have the highest weights and precedence

Second, CSS terminology

2. CSS comments:
   
   • Writing format:/* Comment content */
   • Used to describe code functionality that is ignored when the browser parses the code.
4. CSS rules:
   
   • CSS code consists of a single rule, each specifying what style to apply to those elements.
   • For example: h1{color:red;}: The whole sentence is called a rule, where H1 is the selector (the main function is to indicate which elements the style rule applies to); {color:red;} is the declaration block (which indicates which style rules are available).
5. Selector Category: 
   
   • ① element selector:
     
     • Write format: Tag name {declaration block}
     • All elements that match the tag name will be applied to the rules in the declaration block.
   • ② class selector: &NBSP;
     
     • writing format:. class Name {/* declaration block */} (where class name is self-defined)
     • All the class attributes are elements of the specified class name, and the rules in the declaration block are applied.
     • &NBSP;
       
   • ③id selector:
     
     • Write: #id值 {/* declaration block */} (where ID value is self-named)
     • If the attribute ID is an element of the specified value, the rule in the declaration block is applied.
     • Note: The ID value of the same HTML element must be unique, that is, the same page ID value is unique.

Priority: ID Selector > class selector > Element selector

Initial knowledge of HTML and CSS