Tags in html can be divided into block-level tags and inline tags
Block-level tag features
1. Monopoly
2. Can wrap
3. You can set the width and height (width:/height:)
4. You can set the margin (margin and padding)
Label
div: box
p: paragraph
h1-h6: headings
hr: horizontal dividing line
ul>li: unordered list
ol>li: ordered list
dl>dt (header)>dd: definition list
table>th>tr>td: table (including table title caption tag, table header thead tag, table body tbody tag)
from: form
Inline Tag Features
1. It will not occupy a single line, but will be on the same line with other inline tags
2. No newline
3. Width and height cannot be set, and the height is expanded by the content. If there is no content, the height is empty
4. You can set the outer margin (margin) to take effect on the left and right (width), but not on the top and bottom (height), and the inner margin padding will take effect
Label
span: used to combine inline elements in the document
a: hyperlink
b/strong: bold font
small: font weakening
u: underscore
i/em: tilt
s/del: strikethrough
sup/sub: superscript/subscript
audio: audio
video: video
textarea: multi-line text box
select: drop-down menu
img: image
button: button
Special tags (inline block tags: belong to inline tags, but width, height and margins can be set:
img、audio、video、label、input、select、textarea、button
Label conversion:
The inline label is converted into a block label, and the width, height and margin can be set normally by adding display:block to the inline label, and it occupies a single line;
Convert block-level tags to inline tags, add display:inline to block-level tags
Add display:inline-block to block tags or inline tags to convert them to inline block tags
Example: block turned into inline block
<style>
.box1>div{
width: 50px;
height: 50px;
display:inline-block ;
border: 2px solid seagreen;
}
</style>
<body>
<div class="box1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
————————————————
Copyright statement: This article is an original article of CSDN blogger "lingjiaxiaozila", which follows the CC 4.0 BY-SA copyright agreement. For reprinting, please attach the original source link and this statement.
Original link: https://blog.csdn.net/lingjiaxiaozila/article/details/126172335