HTML中几种常用的标签

目录

1.标题类标签（六个）

2.DIV标签

3.行内标签

4.超链接标签

5.插入图片

6.插入列表 

7.插入表格

8.input系列（7个）

9.下拉框

10.多行文本

 

 

---

1.标题类标签（六个）

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

<h6>六级标题</h6>

• h1定义最大的标签，h6定义最小的标签
• h标签属于块级标签

2.DIV标签

<div> 内容</div>

• div标签属于块级标签，一人占一整行

3.行内标签

• 自己多大占多大，不会独占一行 

• <span>内</span>  # 换行时，会自动变为一个空格
  <span>容</span>  
  # 输出：内 容
  <span>内</span><span>容</span>  # 写在一行时，便没有那个空格
  # 输出：内容

4.超链接标签

<a href=" 需要跳转的网址">打开</a>

• 若想在新的tab页面打开网页时，可以添加target参数

• <a href="https://blog.csdn.net/weixin_73283213" target="_blank">点击跳转</a>

5.插入图片

 <img src="图片地址" />

• <div>
      <img src="https://userblink.csdnimg.cn/e34d8f4c645b4d78a195faa3d5d3b0b7.png" style="height:400px;"/>
  </div>  <!--若只规定高或者宽的像素大小，则图片等比例放大或缩小-->
  <div>
      <img src="https://userblink.csdnimg.cn/e34d8f4c645b4d78a195faa3d5d3b0b7.png" style="width:200px;"/>
  </div>
  <div>
      <img src="https://userblink.csdnimg.cn/e34d8f4c645b4d78a195faa3d5d3b0b7.png" style="height:400px;width:200px;"/>
  </div>
  <div>
      <img src="https://userblink.csdnimg.cn/e34d8f4c645b4d78a195faa3d5d3b0b7.png" style="width:10%;"/>
  </div>  <!--如果是百分比变大变小，只能对宽度width用，就比如这里的width：10%-->
  

   

6.插入列表 

<ul>
    <li>无序号列表第一点</li>
    <li>无序号列表第二点</li>
    <li>无序号列表第三点</li>
</ul>
<ol>
    <li>有序号列表第一点</li>
    <li>有序号列表第二点</li>
    <li>有序号列表第三点</li>
</ol>
 

 

7.插入表格

<table>
    <thead>
    <tr>               <!--横表头-->
        <th>序号</th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    </thead>
    <tbody>
    <tr>                
        <td>1</td>
        <td>老大</td>
        <td>男</td>
    </tr>
    <tr>
        <td>2</td>
        <td>赵二</td>
        <td>女</td>
    </tr>
    <tr>
        <td>3</td>
        <td>张三</td>
        <td>女</td>
    </tr>
    <tr>
        <td>4</td>
        <td>李四</td>
        <td>男</td>
    </tr>
    </tbody>
</table>

•  有边框表格需要引入border参数

• <table border="1">  <!--border参数代表边框类型-->
      <thead>
      <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>性别</th>
      </tr>
      </thead>
      <tbody>
      <tr>
          <td>1</td>
          <td>老大</td>
          <td>男</td>
      </tr>
      <tr>
          <td>2</td>
          <td>赵二</td>
          <td>女</td>
      </tr>
      <tr>
          <td>3</td>
          <td>张三</td>
          <td>女</td>
      </tr>
      <tr>
          <td>4</td>
          <td>李四</td>
          <td>男</td>
      </tr>
      </tbody>
  </table>
  

8.input系列（7个）

1. 普通输入框

   <input type="text"/>

2.  密码输入框

   <input type="password"/>

3. 选择文件

    <input type="file"/>

4. 圆形选择点（选择后再按一次不可取消选择）

   <input type="radio">
   <input type="radio">                <!--这时这两个选择点不互斥-->
   
   
   <input type="radio" name="n1">男
   <input type="radio" name="n1">女    <!--当参数name的值相同时，这两个选择点互斥-->

5. 方形选择点（选择后再按一次可以取消选择）

   <input type="checkbox">孙
   <input type="checkbox">朱
   <input type="checkbox">张
   <input type="checkbox">黄
   <input type="checkbox">姚
   <input type="checkbox">尤
   <input type="checkbox">徐
   <input type="checkbox">赵

6. 两种按钮

   <input type="button" value="普通按钮">
   <input type="submit" value="可以提交数据的按钮">

9.下拉框

<select>                <!--只能单选-->
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

•  多选下拉框

• <select multiple>        <!--按住shift键或ctrl键进行多选，这两种多选方法略有不同-->
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
  </select>

10.多行文本

<textarea></textarea>

•  rows参数可写可不写，用处是初始情况下可以输入文字的行数

• <textarea rows="10"></textarea>