html常用标签总结

html

• 标题标签：h1-h6

• <h1></h1>
  <h2></h2>
  <h3></h3>
  <h4></h4>
  <h5></h5>
  <h6></h6>

• 段落标签：

  <p></p>

• 换行标签：

  <br/>

• 文本格式化标签：

  • 粗体

     <strong></strong>、<b></b>

  • 斜体

    <em></em>、<i></i>

  • 删除线

     <del></del>、<s></s>

  • 下划线

     <ins></ins>、<u></u>

• div和span标签

• 图片标签

   <img src="" alt="替换文本" title="提示文本" width="200" height="200" border="10"/>

  属性	属性值	说明
  src	图片路径	必须属性
  alt	文本	替换文本。图像不能显示的文字
  title	文本	提示文本。鼠标放到图像上，显示的文字
  width	像素	设置图像的宽度
  height	像素	设置图像的高度
  border	像素	设置图像的边框粗细

  路径：

  目录文件夹（普通文件夹）和根目录（打开目录文件夹的第一层）

  相对路径：

  • 同一级路径

  • 下一级路径 /

  • 上一级路径 ../

  绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

• 超链接标签 anchor

  <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

  属性	作用
  href	用于指定链接目标的url地址，必须
  target	用于指定链接页面打开的方式，_self为默认值，_blank为新窗口打开

  链接类型：外部链接、内部链接、空连接#、下载链接

• 锚点链接 #id名

• 注释标签和特殊字符

  1. <!-- 注释字符 -->

  2. 特殊字符

  特殊字符	字符代码
  空格符	&nbsp
  小于号	&lt
  大于号	&gt
  和号	&amp
  版权	&copy
  注册商标	&reg

• 表格标签

  <table>
      <thead>
          <tr>
              <th>表头单元格</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>普通单元格</td>
          </tr>
      </tbody>    
  </table>
  ​
   表格属性：align、border、cellpadding、cellspacing、width、height。
   表格结构标签 <thead></thead>、<tbody></tbody>
   合并单元格
      跨行合并：rowspan="合并单元格的个数"
      跨行合并：colspan="合并单元格的个数"

• 列表标签

  1. 无序列表

     <ul>
         <li></li>
         <li></li>
         <li></li>
     </ul>

  2. 有序列表

     <ol>
         <li></li>
         <li></li>
         <li></li>
     </ol>

  3. 自定义列表

     <dl>
         <dt>关注我们</dt>
         <dd>新浪微博</dd>
         <dd>官方微信</dd>
     </dl>

• 表单标签

• <form action="" method="" >
  <!-- input输入表单元素-->
      <!-- type="属性值": text,password,radio,button,checkbox，file,hidden,image,reset,submit,text-->
      <label for="text">用户名</label><input type="text" name="username" value="请输入用户名" maxlength="6" id="text"></input>
      <input type="password" name="password" value="请输入密码" maxlength="6"></input>
      <!--单选按钮-->
      <input type="radio" name="sex" value="男" checked="checked"></input>
      <input type="radio" name="sex" value="女" ></input>
      <!--复选框-->
      <input type="checkbox" name="hobby" value="吃饭" id="nan"><label for="nan">男</label></input>
      <input type="checkbox" name="hobby" value="睡觉" checked="checked"></input>
      <input type="checkbox" name="hobby" value="撸猫" ></input>
      <!--文件域-->
      上传文件：<input type="file"></input>
      <input type="file"></input>
      <input type="button" value="发送短信验证码"></input>
      <input type="reset" value="点击提交"></input>
      <input type="submit" value="点击提交"></input>
  <!-- 下拉表单元素-->
      <select>
           <option selected="selected">河北</option>
           <option>天津</option>
           <option>北京</option>
      </select>
  <!-- textarea文本域表单元素-->
      <!-- cols:每行多少字符，rows:几行-->
      <textarea cols="50" rows="4"></textarea>
  </form>

• 注：学会查阅文档！！！ 推荐网址

  百度、W3school（w3school 在线教程）、MDN（MDN Web Docs）