常用的标签

常用标签

1. 行标签：不独占一行，左右排布 不能直接设置宽高

• span.用来组合文档中的行内元素

<span>用来组合文档中的行内元素</span>

• a：超链接 实现页面跳转：target: _self在本页面显示。target: _blank在新的页面显示
  href链接的地址 target=“_blank” 设置连接在新窗口打开

<a target="_blank" href="https://www.baidu.com/index.php?tn=monline_3_dg">百度一下</a>

• strong：加粗标签

<strong> 加粗标签</strong>

• b：加粗标签

<b>加粗标签</b>`

• em：倾斜标签

<em>倾斜标签</em>

• i：倾斜标签

<i>这也是倾斜标签</i>

• del：删除线

<del>我是删除线</del>

• s：删除线

<s>我是删除线</s>

• ins：下划线

 <ins>我是下划线</ins>

• u:下划线

<u>我是下划线</u>

• sup上标

 <span>5 <sup>3</sup> </span>

• sub下标

<span>log <sub>2</sub>2 </span>

特点：1.同排序跟显示，遇到父级边界换行2.不支持宽高，内容撑开盒子。3.不支持上下外边距。4.不正常显示上下内边距。5.换行被解析

2. 块标签：独占一行，上下排序，可以直接设置宽高

• div：可定义文档中的分区

• h1~h6：标题标签：可以作为标题来使用，并且可以依据重要性递减

p：定义段落：文本在一个段落中根据浏览器窗口的大小自动换行，段落和段落之间保持空袭（&nbsp：小空格 &emsp：大空格）

• ul：无序列表

• ol：有序列表

• li：列表项目

 <!-- 无序列表 -->
    <ul>  
        <li>吃饭</li>
        <li>睡觉</li>
        <li>敲代码</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>敲代码</li>
        <li>改bug</li>
        <li>改bug</li>
    </ol>

特点：独占一行，默认宽度占满父级，高度为0，子级撑开高度

3. 行内块标签：默认水平排布，可以直接设置宽高

• img src：资源路径

• img title：鼠标悬停时提示文本

• img alt：图片不正常显示文本

• img特点：只给宽度或者高度，图片等比例变化

<img src="./1.jpg" alt="">
<!-- alt 图片加载失败时，显示的内容 -->
 <img src="2.jpg" alt="图片加载失败">

特点：1.同排序跟显示，遇到父级边界换行。2.换行被解析。3.没有宽高时，内容撑开盒子

• br：换行标签

• hr：分割线

• button：按钮

<input type="text" placeholder="手机号">
<input type="password" placeholder="密码">