html 基本标签 ｜ 青训营

在青训营的开始，我准备夯实一下基础，在自己复习三件套基础的过程中，跟着课程拓展一下认知。

1_html基本标签（body中）

1.1_文本

• 生成html5文件，先写！再回车

• 保存ctrl+s

• 标题标签 h1~h6，如果超过如h7，就失效

• title标题

• 标题标签：标题标签 h1~h6，如果超过如h7，就失效。

  <h1>1</h1>
  <h2>2</h2>
  <h3>3</h3>
  <h7>4</h7>
  

• 段落标签：段落标签，文字没有加粗，
  为回车 空格 

  <p>hello <br>hello,wo&nbsp;111</p>
  <strong>我是加粗</strong>
  <b>我也很粗</b>
  <i>我是斜的</i>
  <s>我是删除线</s>
  

1.2_表格

• 在表格中要记住colspan与rowspan的应用（合并单元格），通过这个也可以实现一个简单的布局。

• 表格:tr 行,td 列 colspan 跨列;rowspan 跨行 caption 标题;th 小标题

  <table border="1">
      <caption>表格</caption>
      <tr>
          <th>姓名</th>
          <th>学号</th>
          <th>电话号码</th>
      </tr>
      <tr>
          <td colspan="1">1-1</td>
          <td>1-2</td>
          <td>1-3</td>
      </tr>
      <tr>
          <td rowspan="1">2-1</td>
          <td>2-2</td>
          <td>2-3</td>
      </tr>
      <tr>
          <td>3-1</td>
          <td>3-2</td>
          <td>3-3</td>
      </tr>
  </table>
  

1.3_图片

•  图片标签:img

•  src:资源路径

• 绝对路径(盗链):直接写图片路径,会有找不到图片的风险 

•  相对路径: 当前目录: ./ 

•  下级目录: / 

•  上级目录: ../ 

•  alt:图片未正常显示时显示的文字 

•  width/height:控制宽高,如果只设置其中一项

• title:当鼠标悬浮时显示的文本文字

  <img src="./img/zz.png" alt="ggbond">
  <img width="300" height="300" title="点击一下,了解更多" src="./img/shuai.png" alt="sb">
  

1.4_列表

• 有序列表

  <ol>
      <li>农药</li>
      <li>刺激战场</li>
      <li>彩虹六</li>
      <li>原神</li>
  </ol>
  

• 无序列表

  <ul>
      <li>钟离</li>
      <li>sb</li>
      <li>岩儿</li>
  </ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  

1.5_表单

• form表单：action 提交地址

• 文本框 placeholder:站位符，没有输入时表现为它;maxlength:最大长度

• 密码框

• 提交按钮

• 重置按钮

  重置

• 普通按钮

  普通

• 日期

• 文件

• 单选框,必须加上value，否则传输的值都为on,加了label以后点击文字也可以选择成功

  男
  女

• 多选框

  唱歌
  跳舞
  rap
  打篮球
  

• 下拉框

  重庆 澳门 云南

    html的基础复习就先告一段落了，明天着手CSS的基础复习