Front-End CSS usage properties

The head tag is placed between the header parts. This includes: <title>、 <meta> ,<link>，<style>

• <title>: Specifies the title of the entire page, displayed at the top of the browser.
• <meta>: Provides basic information about the page
• <link>: Defines the relationship between a document and an external resource.
• <style>: Defining the relationship between an internal style sheet and a Web page

The element can provide the original information about the page (mata-information), a description of the search engine and the frequency of updates, and keywords.

The label is located in the header of the document and does not contain any content.

The information provided is not visible to the user. Meta tag composition: Meta tags have two attributes, which are the Http-equiv property and the Name property, and different properties have different parameter values, these different parameter values to achieve a different page function.

Common META Tags:

(1) Http-equiv property

It is used to convey some useful information to the browser, to help the browser to correctly display the content of the Web page, and the corresponding property value of content,content content is actually the variable value of each parameter.

<!--redirect 2 seconds after jumping to the corresponding URL, note the semicolon--><meta http-equiv= "Refresh" content= "2; Url=http://www.luffycity.com "><!--Specify the content type and encoding type of the document--><meta http-equiv=" Content-type "content=" text/ Html;charset=utf-8 "/><!--tell IE Browser to render the current page in superlative mode--><meta http-equiv=" x-ua-compatible "content=" IE=edge " >

　　

(2) Name property

Mainly used for page keywords and descriptions, is written to the search engine to see, the key word can have a number of ', ' separated, with the corresponding property value for content,content content is easy to search engine robots to find information and classification information.

<name= "Keywords"  content= "NetEase, email, games, news, sports, entertainment, women, Asian Games, forums, SMS" />

View Code

These keywords, is to tell the search engine, this page is why, can improve the search hit rate. Let others find you, search.

<meta name= "Description" content= "NetEase is China's leading internet technology company, to provide users with free mailbox, games, search engine services, open news, entertainment, sports and more than 30 content channels, and blogs, videos, forums and other interactive exchanges, The power of the web-gathering man. "/>

　　As long as the set description page description, then Baidu search results, you can display these statements, this technology is called SEO(search engine optimization, SEO).

The effect is as follows:

<meta name=viewport content= "width=device-width, initial-scale=1" >

Above this tag, is to let our web support mobile, mobile device first

There are two types of tags in the HTML tag:

1. Font labels

2. Layout labels

First, the font label

Font tags include: h1~h6, <font>, <u>, <b>, <strong><em>, <sup>, <sub>

Title

The title is defined using the to label. defines the maximum caption, which defines the smallest title. With the Align property, the property value can be: Left, center, right.

　　
 
    
 
     
 
      
color="红色"or color="#ff00cc" or color="new rgb(0,0,255)" : Sets the font color. How to set: Word #ff00cc rgb (0,0,255)
 
     
 
    
 
    
 
     
 
      
size: Sets the font size. The value range can only be: 1 to 7. Value, if the value is greater than 7, then according to 7来, if the value is less than 1, then follow the calculation. If you want a larger font, you can only use CSS styles to solve
 
      
face="微软雅黑": Sets the font type. Note that the word "Microsoft Jas" cannot be written incorrectly when writing fonts.
 
     
 
    
Instance:
<font face= "Microsoft Jas Black" color= "green" size= "8" > Fonts </font>
Bold label <b> or <strong> (abandoned)
Example:
Pony <b> Pony brothers </b><strong> Pony Brothers </strong>
Effect:
Underline mark<u>Mark in underline<s>(OBSOLETE)
Example:
<u> Pony Brothers </u><s> Pony </s>
Effect:
Italic marker<i>Or<em>(OBSOLETE)
Example:
Pony <i> Pony brothers </i><em> Pony Brothers </em>
Effect:
Superscript <sup> subscript <sub>
These two labels are easy to confuse, how to remember? bThe meaning of this note isbottom：底部
Example:
5<sup>2</sup>8<sub>2</sub>
Effect:
Special characters 
    
 
     
 
      
&nbsp;: Space (non-breaking spacing, keep playing space)
 
      
&lt;: Less than number (lesser than)
 
      
&gt;: Greater than sign (greater than)
 
      
&amp;: Symbols&
 
      
&quot;: double Quotes
 
      
&apos;: Single quotation mark
 
      
&copy;: Copyright?
 
      
&trade;: Trademarks?
 
     
 
    
Special characters required to be memorized:&nbsp;, &lt;, &gt;, &copy
For example, you want to <p> display as a text on the page, write directly <p> is definitely not possible, because it represents a paragraph tag, so it is necessary to use the escape character . It should be written like this:
This is an HTML-language &lt;p&gt; tag
Effect Display:
If you still want to know other HTML special characters: HTML Special character reference table
Second, the layout label paragraph label <p>
Paragraph: is the abbreviation of English paragraph.
Property:
 
    
 
     
 
      
Align= ' attribute value ': Alignment. Property values include: Left, center, right
 
     
 
    
Example:
<p> This is a paragraph </p><p align= "center" > This is another paragraph </p>
Effect:
OK, the following words, we must firmly remember. HTML tags are graded. HTML divides all the tags into two categories:
 
    
 
     
 
      
Text-level Tags: p, span, a, B, I, U, EM. text, images, and form elements can only be placed in the label.
 
      
Container-level Tags: div, h-series, Li, DT, DD. You can put anything in a container-level label.
 
     
 
    
From the beginning of the first day of learning p, we must remember:p tag is a text-level label, p can only put text, pictures, table elements . The others are not to be put.
Wrong wording: (Put the H-series label in P)
<p>    I am a paragraph    
The effect is as follows:
Display, the browser does not allow you to do so. We use Chrome's F12 review element to find out that the browser has closed the P itself and won't allow you to package the H2.
Ps:chrome Browser is the best browser in the world for HTML5 support. Provides a very good development tool that is ideal for our developers to use. The shortcut key for reviewing element functionality is F12.
Block-level labels <div> and <span>
Div and span are very important tags, the semantics of Div is division "segmentation", and the semantics of span is span "scope, span". In the CSS course you will know that these two things are the most important "boxes".
Div: Treats the contents of the tag as a block (division). Must occupy a single row.
Attributes of the div tag:

 
     

  
      
 
       
align="属性值": Sets the position of the block. Property values can be selected: left, right, center
 
      
 
     
 <span> and <div> The only difference is that there <span> is no line break, but a <div> newline.
If you insert these two elements separately in a Web page, you will not have any effect on the page. These two elements are specifically designed to define a CSS style. Or, div+css to implement various styles.
Example:
<body>    <div>        navigation bar    </div>    <div>        Center banner    </div>    <span> Road Fly </span>    <span>alex</span>    </body>
Effect:
Div in the browser, the default is not to add any effect, but the semantics change, the div is a small area of all elements.
A div tag is a container-level label, where everything can be put, or even a div itself.
Span is also a label that expresses "small areas, small spans," but is a text-level label.
That is, span can only place text, pictures, form elements. Span inside can not put P, H, UL, DL, OL, Div.
Span Examples:
<p>        Product Brief:        <span>            <a href= "" > Details </a>            <a href= "> Production date </a>        </span></p>
div Example:
<div class= "header" >    <div class= "logo" ></div>        <div class= "NAV" ></div>    </div>    <div class= "Content" >        <div class= "Guanggao" ></div>        <div class= "Shop" ></div>    </div><div class= "Footer" ></div>
So, we affectionately call this model "div+css". DIV tags are responsible for the layout, responsible for the structure, and are responsible for chunking. CSS is responsible for styling .
PS: This class attribute name is very much related to CSS, and the CSS module will detail this piece of content.
Line wrap label <br> (deprecated)
Labels come in handy when you're going to end a line and don't want to start a new paragraph <br> . Regardless of where you place it, the <br> label produces a forced line break.
Example:
This <br> was a para<br>graph with line breaks
Effect:
The  <p> <br> difference between a label and a label is that the label <p> automatically inserts a blank line before and after the paragraph, and the label has <br> no blank line, and the <br> label has no properties.
Note that <br> there is no end tag, and the <br> label is written as <br/> a future-proof practice, both XHTML and XML accept the idea of closing tags inside open tags.
Horizontal line Label(OBSOLETE)
Horizontal divider (horizontal rule) visually separates documents into sections
Example:
<p> Pony </p>    
The effect is as follows:
Content Center Label<center>
At this point the center represents a label, not a property value. As long as the content in this tag, will reside in the middle of the browser.
Example:
<center>       <p> Pony Brothers </p></center>    
The effect is as follows:
The center tag is not recommended for use in H5.
Predefined (pre-formatted) Tags:<pre>
Meaning: All of the white space characters (spaces, line breaks) are preserved, and the output is unchanged (tell the browser not to ignore spaces and blank lines)
Description: The label is virtually unnecessary during a real row of pages <pre> . However, it is used in PHP to print an array.
Example:
   <pre> Goose and Goose            Li bai poems        to Heaven song        white hair floating            green water </pre>
The effect is as follows:
, it seems that the pre tag part of the font is smaller, and there is indentation, OK, this is actually the browser of the ghost.
Why do you have to have <pre> this label? The answer is:
All browsers ignore spaces and blank lines by default.
Well, it's a little bit of a label, actually. The layout label will be introduced to you here.
Third, hyperlinks
There are three forms of hyperlinks:
1. External link : Link to external file. Example:
<a href= "new.html" > Click to go to New page </a>
A is the anchor meaning of English "anchor", as if this page throws an anchor to another page. is a text-level label.
HREF is an hypertext reference abbreviation for English hypertext address. Read "Drink Rafe", do not read as "drink husband".
Effect:
Of course, we can also directly click on the link to access a URL. examples are as follows;
<a href= "http://www.baidu.com" target= "_blank" > enter Baidu </a>
2. Anchor Chain Connection :
Refers to a hyperlink to a name, the role of this page or other pages in different locations to jump . For example, at the bottom of the page there is an upward arrow, click the arrow back to the top, this is the use of the anchor link.
First we create an anchor point , that is, use name a property or id attribute to give a name to that particular location. The effect is as follows:
Explained in:
11 lines of code indicate that the top of the anchor is named top.
The hyperlink is then set at the bottom and will go back to the top when clicked (at this point, the end of the URL in the page also appears #top ). Note that the number in the Red box section # should not be forgotten , indicating that jumping to a specific location named top is a rule. If the number is missing # , clicking on it will jump to the top file or the top folder.
If we write the 23rd line of code in:
<a href= "New.hhml#top" > Back to Top </a>
Then, click to jump to the .html top of the new page 锚点 .
Description: The Name property was previously used by HTML4.0, and the id attribute was HTML4.0 before it was used. For forward compatibility, both the name and ID properties are written, and the values are the same.
3. Mail link :
code example:
<a href= "Mailto:[email protected" > Contact us </a>
Effect: After clicking, it will pop up Outlook, which is not very useful.
Prerequisite: The mail client must be installed on the computer, and the message related information is configured
Special few links:
Return to location at the top of the page
<a href= "#" > Jump to Top </a>
Related to JS:
<a href= "Javascript:alert (1)" > Content </a>  <a href= "javascript:;" > Content </a>
 
       

  
        

        
JavaScript: Indicates that nothing is done, so there is <a> no response when clicked. For example: <a href="javascrip:;"> content </2
  
        

        
JavaScript: Indicates that a piece <a> of JavaScript code is executed when the default action is triggered. For example:<ahref="javascript:alert()">内容</a>
 
       
Properties of a hyperlink
 
       

  
        
 
         
href: Destination URL
 
         
title: hover text.
 
         
name: used primarily to set the name of an anchor point.
 
         
target: tells the browser how to open the target page. targetthe properties have the following values: 
          
 
           
_self: Displayed in the same Web page (default value)
 
           
_blank: opens in a new window .
 
           
_parent: Display in parent window
 
           
_top: Display in the top-level window
 
          
 
        
 
       
Blank is the meaning of "white space", which means creating a new blank window. Why there is a _, is the rule, there is no good explanation.
That is, if you do not write target=”_blank” then it is open in the same tab, if it target=”_blank” is written, it is opened in a new blank tab.
Ps:a is a text-level label
For example, if all the text in a paragraph can be clicked, it should be p containing a;
<p>    <a href= "" > Paragraph Paragraph paragraph paragraph paragraph paragraphs </a></p>
Instead of a package p:
<a href= "" > <p> Paragraph Paragraph paragraph paragraph paragraph paragraphs    </p></a>
The semantics of a is less than p,a is can be treated as text, so p is equivalent to put in plain text.
Four, the picture label 
IMG: Represents a picture. is a unilateral mark.
IMG is a self-enclosing tag, also known as a single label.
Types of images that can be inserted:
 
       

  
        
 
         
The types of images that can be inserted are: JPG (JPEG), GIF, PNG, BMP. What is the difference between a type and a type, the CSS class says.
 
         
Image formats that cannot be inserted into a Web page are: PSD, AI
 
        
 
       
The HTML page does not insert the image directly, but instead inserts the image's reference address, so you upload the image to the server.
srcProperties: Relative and absolute paths to pictures
Here is an attribute of the picture:

 
       

  
        
 
         
srcProperties: Refers to the path of the picture.
 
        
 
       
There are two ways to write a path to a picture : relative path, absolute path
1.One: relative path
Relative to the path where the current page is located. Two tokens . and .. tables represent the current directory and the parent path.
Example 1:
<!--the picture in the current directory--> <!--the picture-->
IMG is shorthand for image "image", and SRC is the abbreviation for English source "resource".
Example 2:
The above code means that the current page has a side-by-side folder images , and a picture is stored in the folder images .1.jpg
2, two:Absolute Path
(1) Absolute path starting with the drive letter. Example:
(2) Network path. Example:
Summary of relative paths and absolute paths
The benefit of relative paths: The relative path relationship between files and pictures is constant regardless of where the site is copied.
Relative path usage There is a premise that the Web file and your picture must be on a server.
Question: My page is in the C drive, but the picture is in D, can I insert it?
Answer: With relative path cannot, with absolute path also cannot.
Note: You can use file://to insert, but this method doesn't make any sense! Because there is no so-called C-drive, D-Disk on the server.
The following method is line, but there is no engineering significance, because the server does not have a drive letter, the Linux system does not have a drive letter:
To summarize:

 
       

  
        
 
         
We are now either in the A tag, img tag, if you want to use the path. Only two paths are available, that is, the relative path and the absolute path.
 
         
The relative path is: /image/this path. Start from yourself and find someone else;
 
         
The absolute path is the path that starts with http://.
 
         
Absolutely not allowed to use the file://beginning of the thing, this is completely wrong!
 
        
 
       
Common other properties of the IMG tag
 
       

  
        
 
         
width: Width
 
         
height: Height
 
         
title: prompt text . Public properties. The text that appears when the mouse hovers over it.
 
         
align: Refers to the horizontal alignment of the picture, the property value can be: Left, center, right
 
         
alt: When the picture does not appear, instead of the picture display content. Alt is the meaning of English alternate "substitution". (Some browsers do not support)
 
        
 
       
Example:
Example:
Hey 
Text-level labels appear on the browser, no matter how high your picture, it will always align the bottom, this is a phenomenon, "height is not aligned, the bottom is aligned."
At this point, you can set the Align property for the picture, to see the effect!
Precautions:
(1) If you want to make sure that the picture is scaled, set only one of the width and height.
(2) If you want to achieve the effect of graphics and text mix, use the Align property, the value is left or right
If you want to click on the image to jump to a link, it should be:
<a>   </a>

Front-End CSS usage properties