HTML常用标签

（一）a

1.属性：

• href（hyper reference：超级链接）
• target
• download
• rel=noopener

2.作用

• 跳转到外部页面
• 跳转内部锚点
• 发邮件、打电话

3.取值：

• href：

  • 网址：①http(s)://www.baidu.com ②//google.com
  • 路径：① /a/b/c以及a/b/c ②index.html
  • 伪协议：①javascript: 代码 ; ②mailto: 邮箱 ③tel: 手机号
  • id：href="# xxx" （跳转内部锚点）

• target：

  • _blank：在新窗口打开
  • _top：在最上层的窗口打开
  • _parent：在上一层窗口打开
  • _self：默认设置，在当前窗口打开
  • xxx（自己命名）：原理：新建一个页面，命名为xxx，此后再打开一个target=“xxx”的网页时，会覆盖当前的xxx网页。
  • xxx 举例：

---

（二）table

• 相关标签：

      <table>
      <thead>
      <tbody>
      <tfoot>
      <tr>  table row
      <td>  table data
      <th>  table head
  

• 相关的样式：

     table-layout：
     auto：表格及单元格根据其包含的内容自动调整宽度
     fixed：表格和列的宽度通过表格的width值来设置
     border-collapse：
     collapse; 相邻单元格之间边缘合并
     border-spacing：单元格之间的空隙宽度

• 正确结构：

    <table>
        <thead>
            <tr>
                <th>title 1</th>
                <th>title 2</th>
            </tr>
            <tr>
                <td>sth 1</td>
                <td>sth 2</td>
            </tr>
        </thead>
        <tbody></tbody>
        <tfoot></tfoot>
    </table>

• 画表格的方法：先在纸上画出表格图形，再对照着敲代码。

---

（三）img

• 作用：发出GET请求，展示一张图片

  • 属性：

    • alt：若图片加载失败，则显示alt的内容
    • height：若只给定高度，则宽度自适应
    • width：若之给定宽度，则高度自适应
    • src（sourc）：图片地址

  • 事件：

    • onload：js相关
    • onerror：js相关

  • 响应式：

    • max-width：100%，则在移动端图片也会根据比例缩放，充满屏幕
  • 为img 可替换元素
  • ！！ 永远不要让图片变形

---

（四）form

• 作用：发送GET或POST请求，然后刷新页面

• 属性：

  • action：发送请求的路径
  • autocomplete（是否自动填充）：默认为off，给出取值建议
  • method（请求类型）：POST/GET，默认值为GET
  • target（打开方式）：_blank / xxx
• 基本格式：

<form action="/xxx">
    <input type="text">
    <input type="submit">
</form>

• 事件：onsubmit：
• <button type="submit">xxx</button>和<input type="submit" value="xxx">区别：
  前者双标签，中间可以加其他内容，后者单标签

（五）input：

• 作用：让用户输入内容

• 属性：

  • type：

    • text（默认）：普通文本
    • button：按钮
    • email

    • file：提交文件

      • <input type="file">上传一个文件
      • <input type="file" multiple>上传多个文件
    • hidden：供计算机使用，使用js输入提交
    • number
    • password：不展示具体内容（以小圆点代替）

    • radio：单选

      • （实现方法：多个type="radio" 的input标签，使用相同的name）

    • checkbox：多选

      • （实现方法：多个type="checkbox"的input标签并列，使用相同的 选项名称跟在标签后边 ）
      • 如：<input type="checkbox" name="hobby"> 唱 <input type="checkbox" name="hobby"> 跳
    • search：查找
    • submit：提交
    • tel
    • color：颜色
  • name:
  • autofocus
  • checked
  • disabled
  • maxlength
  • pattern
  • value
  • placeholder

• 事件：

  • onchange
  • onfocus
  • onblur
• 验证器：HTML5的新功能

• 注意事项：

  • 一般不监听input的click事件
  • form里的input要有name
  • form里要放一个type=submit才能触发submit事件

(六）一些感触

• HTML+CSS+JS是前端的三大支柱，从入门的第一天就重复不断的听到这句话，随着学习深入，越来越能体会到为什么说“HTML=结构，CSS=样式，JS=行为”。
• HTML提供了很好的web网页架构，但是其标签内置的属性风格单一，操作繁杂，而且与css共同使用易使得代码可读性变差，样式重叠，给后期修改造成很大负担，所以HTML尽量只用来进行网站结构的搭建，而对于外观的美化交由css和js来做。
• HTML不是一项难以理解的技术，它的难度在于布局的合理有效性，和大量标签的理解度、记忆度和运用程度，我认为HTML相关的学习是一个经验积累的过程，在不难的技术里重复打磨进而精通，也可称匠人。
• 越努力越幸运。