Home > Developer > Web Develop
In the Web front-end development has been in touch with HTML, CSS, JavaScript.
In this process, you often use the span, div element, and CSS selectors in HTML.
To make it easy to find the basics of these things, record them here.
First, HTML <div> and <span>html <div> elementsHTML <div> elements are block-level elements that are containers that you can use to combine other HTML elements.
The <div> element has no specific meaning. In addition, because it belongs to a block-level element, the browser displays the folded line before and after it.
If used with CSS, the,<div> element can be used to set style properties on large chunks of content.
Another common use of the <div> element is the document layout. It replaces the old-fashioned way of using tables to define layouts. Using the <table> element for document layout is not the correct use of the table. The function of the <table> element is to display tabular data.
HTML <span> ElementsHTML <span> elements are inline elements that can be used as containers for text.
The <span> element also has no specific meaning.
When used with CSS, the,<span> element can be used to set style properties for some text.
Second, the HTML class attribute definition and usageThe class attribute specifies the name of the element (classname).
The class attribute is used most of the time to point to classes in a style sheet (class). However, it can also be used to change the HTML element with the specified class by using JavaScript.
Third, HTML id attribute definition and UsageThe id attribute specifies the unique ID of the HTML element.
The ID must be unique within the HTML document.
The id attribute can be used as a link anchor (link anchor) to change or add a style to an element with a specified ID through JavaScript (HTML DOM) or through CSS.
Elements of HTML can be CSS selected through class and ID. Through the class code as follows
<HTML><Head><styletype= "Text/css">H1.intro{Color:Blue;}p.important{Color:Blue;}</style></Head><Body><H1class= "Intro">Header 1</H1><P>A paragraph.</P><Pclass= "Important">Please pay attention to this important paragraph. :)</P></Body></HTML>
The results are as follows
Change the style code by ID as follows
<HTML><Head><style>#myHeader{Color:Red;text-align:Center;}</style></Head><Body><H1ID= "MyHeader">W3school is the best!</H1></Body></HTML>
Four, HTML list label
<HTML><Body><h4>An unordered list:</h4><ul> <Li>Coffee</Li> <Li>Tea</Li> <Li>Milk</Li></ul></Body></HTML>
Run results
About HTML vs. CSS and class
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
