Significance of similar elements --- HTML & CSS, element meaning --- html
1. <q>
Effect:Tell the browser that this is a short reference, so that the browser can display it in an appropriate way
Note:<Q> cannot be directly replaced by double quotation marks, because some Browsers Do not use double quotation marks.
Do not forget that mobile devices and voice browsers are not as simple as double quotation marks.
Benefits:Search engines can search for webpages with references.
You can use CSS to set a style for reference, for example, to reference a gray italic.
2. <blockquote>
Effect:A long reference is displayed separately to make it a part of its own
Note:Some browsers indent it slightly, but some do not.
3. Block and inline Elements
4. <a>The block element is exclusive, and the inline element streams along with the stream.
Block elements are usually used as the main building modules in web pages. inline elements are usually used to mark small pieces of content.
When designing a page, we usually start with a large block, and then add inline elements when improving the page.
The browser inserts a line feed only when you start a new block element. Active line feed is required. <br>
<Ol> and <li> are block elements.
Title:<A href = "..." title = "...">... </a>
The title has a value that provides link information.
Target:<A href = "..." title = "..." target = "_ blank">... </a>
New window opening Link
The target cannot be used excessively for people with visual impairment.
Note:Make sure that the link tag is concise and you can provide additional information in the title.
Make sure the label is meaningful. Do not "click Next" when using the class"
Do not put links together
5. id & class
To use a certain style for multiple attributes, you can use class
However, if there is only one element, the id should be used.
The id attribute is used to uniquely name an element.
For example, if there are multiple <p> in <body>, we only need to set one <p> style.
6. img
Note:The browser downloads the image only after the html file is downloaded and the page is displayed.
AltReplace undisplayed images with alt
You never know what browsers and devices the customer will use, as well as the network speed.
Width & heightWidth and height are actually used to help the browser reserve space for the image to be loaded.
If this attribute is used, their values should be the same as the actual width and height of the image.
Thumbnail Link
<A href = ".../..html"> <a>
It is not recommended to directly link to the image, because the browser will display the image on a blank page.
However, it is usually necessary to provide context for the image to be displayed.
Transparent GraphIf you want to put a transparent image on a web page, make sure that the mask color of the image is the same as the background color of the web page.
7. HTML5
Basic format requirements:1 <!DOCTYPE html> 28. Box Model Diagram
9. div & span
Div usageMultiple elements can indeed belong to a class.
However, when you need to add these elements to a large border
If you use. Cat {}, a border will be added to all the elements that belong to the Cat class. Obviously this is not what we want.
Therefore, we need to use div to enclose all elements and set a border for the entire div box.
SpanSpecify a style for a bunch of small elements
10. Image Layout
When the browser places two images side by side, the margins of the two images are added.
The maximum margin height is the final distance between top and bottom columns.
The outer margin is folded. When the vertical outer margin of the two elements is met, the elements are folded.
11. float)
Purpose:Freeze DesignFloat attributes first float the elements left or right as much as possible
Then all the content under it will flow around this element.
Behind-the-scenes principle:The browser normally imports elements to the page
When a floating element is encountered, it will be placed on the left or right as much as possible, and the paragraph will be deleted from the stream, just as it floats on the page.
As this floating element has been deleted from the normal stream, all other elements will still fill the page, just as there is no floating element.
However, when an inline element is located, the boundary of the floating element is considered.
Requirements:There is a requirement for all floating elements: the width must be specified.
Clear:Floating content is not allowed on the left, right, or both sides of the element. It is often used to handle the case where the floating element covers the bottom of the page.
What:Gel LayoutThe content width is fixed and does not expand or contract with the window.
However, when the browser is wide, there will be a lot of blank space on the right side of the browser
Note:Put the main content in an id and design the width.
Eg:1 #allcontent{2 width: 800px;3 }
What:The content width is fixed, but the margin will expand or contract with the browser window. The content is usually placed in the center.
HowSurrounded by a fixed size <div>, all the content of the page is then allowed to expand the margin using the auto property value.
Eg:1 #allcontent{2 width: 800px;3 margin-left: auto;4 margin-right: auto; 5 }
12. Positioning
Position:Static (static/default), absolute (absolute), fixed (fixed), relative (relative)
Absolute Positioning
What:Fixed PositioningAllows elements to be placed anywhere on the page. By default, absolute positioning is placed relative to the page boundary.
Note:When an element is absolutely positioned, the browser first deletes it from the stream, and then places this element at the position specified by the top and right attributes (or bottom and left)
Under the element to be absolutely located, all elements in the normal page stream do not know that this absolutely positioned element exists on the page, including the inline element.
Achieve the coverage effect.
The width of the absolute positioning element is not required. However, if there is no width, the block element occupies the entire width of the browser by default (minus the offset you specified from the left or right)
Eg:1 #sidebar{2 position: absolute;3 top: 100px;4 right:200px;5 width: 280px;6 }
What:Relative positioningLet the element be at the position you specified, and this position is always relative to the browser window location
Once placed, it will remain at the specified position and no longer move, even if you scroll the page, it will not change
Other elements on the page will scroll normally under these fixed positioning elements.
Eg:1 #coupon{2 position: fixed;3 top: 300px;4 left: 100px;5 }
Static locationThe relative positioning element first enters the page normally, and then offset by the specified amount.
When relative positioning is used, left, top, right, and bottom indicate the offset from the position of the element in the normal stream.
Place the elements in a normal document stream.
13. CSS table layout
Create a table structure with one row and two columnsSample Code:
1 <div id="tableContainer">2 <div id="tableRow">3 <!-- ... -->4 </div>5 <div id="sidebar">6 <!-- -->7 </div>8 </div>1/* table */2 div # tableContainer {3 display: table; 4} 5/* row */6 div # tableRow {7 display: table-row; 8} 9/* column 1 */10 # main {11 display: table-cell; 12} 13 14/* column 2 */15 # sidebar {16 display: table-cell; 17}
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
