HTML tags
HTML elements refer to all the code from the start tag to the end tag.
- Tags do not appear on the page, only the contents of the tag appear on the page: i.e
< HTML > Here is the content </ HTML >
- Tags are case insensitive, but lower case is recommended :(X) lower case is mandatory in the HTML version for more rigor
- Labels are classified into closed labels and empty labels. A closed label is a pair of labels consisting of a start label and an end label. This label allows you to nest and carry content, for example:
< HTML > < / HTML >, < p > < / p >
; An empty label is a label with no content. It is automatically closed in the start label. For example:<img />, <br />, <hr />
Etc.
HTML tag classification
HTML tags, also known as HTML elements, are divided into block-level elements and inline elements (also known as inline elements), which are concepts in the HTML specification.
Block-level elements
A block-level element is a display:block element; The element. Because of its nature, we often use block-level elements to build large layouts (large structures).
Characteristics of block-level elements
- A single row is occupied, and each block-level element starts over from the new row, arranged from top to bottom
- You can directly control the width, height, and related CSS properties of the box model
- Without setting the width, the width of a block-level element is the width of its parent element content
- Without setting the height, the height of a block-level element is the height of its own content
Common block-level elements
The label | describe |
---|---|
div | Commonly used block-level container, is the main label of CSS layout |
h1 | The headlines |
h2 | subtitle |
h3 | Level 3 title |
h4 | Level 4 titles |
h5 | Five titles |
h6 | Six levels of headings |
hr | Horizontal dividing line |
menu | Menu list |
ol | An ordered list |
ul | Unordered list |
li | The list items |
dl | Define a list |
dt | Define the term |
dd | Definition description |
table | form |
p | The paragraph |
form | Interactive form |
Inline element
An inline element is a display:inline element; The element. Because of its nature, we often use block-level elements for text and small ICONS (small structures).
Features of inline elements:
- And other inline elements are displayed on a line from left to right
* cannot directly control the width, height and related CSS properties box model, but direct set about value of the inner and outer margin can be * inline element high width is determined by the size of the content itself (text, pictures, etc.) * inline element can contain text or other inline elements (note here, not in the inline elements nested block level elements)Copy the code
Commonly used inline elements
The label | describe |
---|---|
span | Commonly used inline containers define blocks within text |
a | The anchor |
b | bold |
strong | Bold emphasize |
i | italics |
em | Italics stressed |
s | Dash (not recommended) |
strike | In the line |
del | The text in the document that has been deleted |
br | Forcing a newline |
u | The underline |
textarea | Multi-line text input box |
input | Input box |
select | The drop-down list |
label | Input elements define annotations (tags) |
img | Introduction of pictures |
sub | The subscript |
sup | superscript |
big | Large text |
small | Small text |
In addition, Dog has collected some source notes of CSS, HTML, FLUTTER, vue, etc. If you need them, you can get them from me
Conclusion:
I have to say that the front end is so extensive, please pay more attention to the front end Dog in the update of this article