Summary of inline elements and block-level elements of html

I hope you can add some common block-level elements and inline elements~
If there are errors, please point out in the comment area and make progress together!

One, the difference

	Occupation situation	Width Height	Margin
Elements in the line	In line with other elements	Cannot be set	Margin and padding in the horizontal direction are useful, but not in the vertical direction
Block element	Exclusive party	The width and height can be set, when the width is not set, the default is 100%	margin、padding

2. Common block-level elements:

p: paragraph tag

div: Think of DIV as a container, the container is used to contain content

h1, h2... …: Title

form: form

ul: unordered list, bound to li

ol: ordered list, bound to li

hr: separated

Three, common in-line elements:

a: anchor

b: bold

i: Italics

img: picture

input: input box

label: table label

select: drop-down list

span: used to combine inline elements in the document

textarea: multi-line text input box

Four, display:

（一） a 、 b 、 i 、 em 、 img

<a href="http:/www.baidu.com">a是链接，例：跳转百度链接</a>
<b>b是加粗</b>
<i>i是斜体</i>
<em>em也是斜体</em>
<img src="#" alt="这是图片" title="咦，没有">// alt是图片未加载出来时展示的说明，可以理解为图片揭开后，下面的字； title是鼠标经过图片时的说明

Show off

(Two) input

The input tag specifies the input fields where the user can enter data. According to different type attributes, the input field has many forms. Input fields can be text fields, checkboxes, password fields, radio buttons, buttons, etc.

<input type="text" value="input表单">
<input type="checkbox" value="">西瓜
<input type="checkbox" value="">苹果
输入密码：<input type="password" value="12345">
<input type="radio" value="">单选
<input type="button" value="按钮">

Insert picture description here
(Three) label

The label element and the input element of the corresponding id are bound to each other, that is to say, clicking the label is equivalent to clicking the input

<label FOR="aaa">点这里也能选中</label><input ID="aaa" type="radio">

Insert picture description here
（四）select、textarea

   <!-- 与option同时使用，option定义选项 -->
        <select>
            <option value ="a1">a1</option>
            <option value ="b2">b2</option>
            <option value="c3">c3</option>
            <option value="d4">d4</option>
        </select>
    
        <textarea name="" id="" cols="10" rows="5">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</textarea>

Insert picture description here
(5) Span

css:

p.tip span {
font-weight:bold;
color:#ff9955;
}

<p class="tip"><span>提示：</span>可单独给提示加颜色</p>

Insert picture description here
(6) Partial display of block-level elements

     <p>当遇到br标签时换行，我要换行了</br>我换成功了</p>
    <div class="a">div块</div>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>
   <hr>
   <ol>
       <li>有序列表</li>
       <li>有序列表</li>
       <li>有序列表</li>
   </ol>

Insert picture description here