Web front-End Basics-(i) HTML&CSS basic operations

First, the basic HTML operation

1. HTML Overview

HTML is an abbreviation for the English Hyper Text mark-up Language (Hypertext Markup Language), which is a standard language (tag) for making Web pages. The equivalent of a uniform set of rules, everyone to abide by him, so that you can let the browser according to the rules of the markup language to explain it.

The browser is responsible for translating the label into a user "readable" format, presented to the user! (Example: Djangomoan template engine)

Summary: HTML is actually a set of rules, a set of rules that the browser can recognize;

2. Preparation Instructions

Here you use the Pycharm editor to write HTML:

1) Open Pycharm, new HTML file;

<! DOCTYPE html>
2) HTML effect view:

 
 

  
  
 
   
After writing the HTML code, click on the browser icon displayed in the upper right corner of the HTML file in Pycharm to see the effect;
 
   
Find the HTML file path, click Open or select the browser to open the view effect;
 
  
 
 
3. DOCTYPE Standard
DOCTYPE tells the browser what HTML or XHTML specification to use to parse the HTML document;
The difference between having and not

 
 

  
  
 
   
Backcompat: Standard compatibility mode is not turned on (or is called "weird" mode [Quirks modes], promiscuous mode)
 
   
Css1compat: Standard compatibility mode is turned on (or called strict mode [standards Mode/strict mode])
 
  
 
 
This property will be recognized and used by the browser, but if your page does not have a DOCTYPE declaration, then compatmode default is Backcompat, which is the beginning of the devil-the browser in its own way to parse the rendered page, then the different browsers will show different styles. If your page is added, then it is equivalent to opening the standard mode, then the browser will have to honestly interpret the rendering page according to the standards of the Web, so that your page in all browsers will be displayed in a way.
What's the use?

 
 

  
  
 
   
DOCTYPE tells the browser what HTML or XHTML specifications are used to parse the HTML document, and the DTD file contains tags, attributes, properties, constraint rules
 
  
 
 
4. Head tag4.1 Meta Tags
Provide meta-information about the page, such as page encoding, refresh, jump, description and keywords for search engine and update frequency;

 
 

  
  
 
   
Page encoding
< meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
 
  
 
 
 
 

  
  

  
Refresh
< meta http-equiv= "Refresh" content= "+" >
  
  

  
Jump
<meta http-equiv= "Refresh" content= "5"; url= "http://www.autohome.com.cn"/>
  
  

  
Keywords
<meta name= "keywords" content= "HTML file, CSS style" >
  
  

  
Describe
Example: Cnblogs
  
  

  
IE compatible
 
 
Internet Explorer 8 provides tighter support for industry standards than any earlier browser version. As a result, sites designed for older browsers may not appear as expected. To help mitigate any problems, Internet Explorer 8 introduces the concept of document compatibility, which allows you to specify the version of Internet Explorer that your site supports. Document compatibility adds new patterns to Internet Explorer 8, which tells the browser how to interpret and render the site. If your site does not display correctly in Internet Explorer 8, you can update the site to support the latest WEB standards (preferred), or you can force Internet Explorer 8 to display content in the same way that you view the site in an older version of the browser. You can do this by adding the X-ua-compatible header to the Web page by using the META element.
When Internet Explorer 8 encounters a webpage that does not contain a x-ua-compatible header, it uses directives to determine how to display the Web page. If the directive is missing or does not specify a standard-based document type, Internet Explorer 8 displays the page in IE5 mode (Quirks mode).
4.2 title tag 
the <title> element defines the title of the document. 
The browser uses the caption in a special way, and usually places it in the title bar or status bar of the browser window. Similarly, when a document is added to a user's list of links or favorites or bookmarks, the title becomes the default name for the link to the document.
<title> Page Title </title>
4.3 link tag 
<!--css-->< link rel= "stylesheet" type= "Text/css" href= "Css/common.css" > <!--icon-->< link rel= " Shortcut icon "href=" Image/favicon.ico ">
4.4 Style label 
Write styles on the page;
< style type= "Text/css" >. bb{       background-color:red;        
4.5 Script tag 
<!--Introduction file-->< script type= "Text/javascript" src= "Http://www.googletagservices.com/tag/js/gpt.js" > </ Script > <!--write js code-->< script type= "Text/javascript" > ... </script >
5. Body Tag
Labels are generally divided into two types: in-line labels and block-level labels;
block-level tags: div (whiteboard), H-Series (enlarged bold), p label (spacing between paragraphs and paragraphs)
Inline Tags: span (whiteboard)

 
 

  
  
 
   
Tags can be nested between
 
   
The meaning of tag existence, CSS operation, JS operation
 
  
 
 
5.1 p and BR tags
<p> paragraph </p>        <!--p represents paragraphs, and there is an interval between the default paragraphs! --><br/>                <!--BR is line-and-
5.2 A label
Jump:
<a href= "http://www.baidu.com" target= "_blank" > Point me </a> <!--href means the address of the jump, target= "_blank" means the new window opens, Defaults to current page--
Anchor:
<body>    <a href= "#1" > First chapter </a><br/>    <a href= "#2" > Chapter II </a><br/>    <a href= "#3" > Chapter III </a><br/>    <a href= "#4" > Fourth Chapter </a><br/>     <div id= " 1 "style=" height:600px; " > The contents of Chapter one </div>    <div id= "2" style= "height:600px;" > Chapter II Content </div>    <div id= "3" style= "height:600px;" > content of chapter III </div>    <div id= "4" style= "height:600px;" > The fourth chapter of the content </div></body>
5.3 H Tag
Headings H1, H2, H3, H4, H5, H6, H7 represent different sizes;
5.4 div Tag
Block level Label-Whiteboard, you can set properties;
5.5 span label
Inline Labels-Whiteboard
5.6 Input Series
 
 

  
  

  
Text
<input type= "text" name= "user" value= "user"/>
  
  

  
Password
<input type= "password" name= "password" value= "passwd"/>
  
  

  
Submit
  
  

  
button
  
  

  
Radio
  
  

  
CheckBox
  
  

  
File
  
  

  
Reset
 
 
5.7 Form Label5.8 img Tag5.9 List5.10 Table5.11 Label Labels5.12 fieldset Label
Second, the basic operation of CSS
Web front-End Basics-(i) HTML&CSS basic operations