《HTML常用标签》

a 标签的用法

• 属性

  • href
    • Hypertext Reference的缩写。超文本引用。
  • target
    • 在哪一个窗口打开超链接，
    • 默认是在当前页面打开， 如果属性是 "_blank" 则会在新的空白页面打开。
  • download
    • 下载当前网页（很多浏览器不支持）
  • rel=noopener

• 作用

  • 跳转到外部页面
  • 跳转内部锚点
  • 跳转到邮箱或电话等

属性 href 的取值

• 网址
  • 尽量使用 //xxxx.com 因为它会自动去跳转到http或https打开此网址，减少一定的bug
• 路径
  • /a/b/c 或者 a/b/c
  • 1.html 或者 ./1.html
• 伪协议
  • JavaScript:代码; （会执行JavaScript里面的代码，如果为空，则什么都不执行）
  • mailto:邮箱
  • tel:手机号
• #xxx
  • 会跳转到id为xxx的标签的位置

属性target的取值

内置的取值

• _blank 在新的页面打开
• _top 在顶级窗口上打开，所有ifarme里面最上面的窗口打开
• _parent 在当前链接所在的ifarme上一级打开
• _self 默认值，在当前页面打开

Table表格的用法

  <table>
    <thead>
      <tr>   // tbale row
        <th>汉语</th>  
        <th>英语</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>苹果</td> // table data
        <td>apple</td>
      </tr>
      <tr>
        <td>香蕉</td>
        <td>banana</td>
      </tr>
    </tbody>
  </table>

  table {
  	// auto   大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。
  	// fixed  表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。
    table-layout: auto;
    // 合并表格
    border-collapse: collapse;
    // 设置每个格子之间的间隙
    border-spacing: 0;
  }

注意： 如果只写 tr td ，浏览器会默认多出tbody标签，将这些放在tbody标签内。

img 标签的用法

• 作用

  • 发出get请求，展示一张图片

• 属性

  • src 必选属性，
  • alt 在请求图片路径为404时，会显示alt属性中的值，
  • height
  • width

• 事件

  • onload / onerror

• 响应式

  • max-width : 100%

from 标签的用法

• 作用
  • 发get或post请求，然后刷新页面
• 属性
  • action 请求哪个页面
  • autocomplete
    • 用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 autocomplete 属性覆盖。 可能的值有：
      • off：浏览器可能不会自动补全条目（在疑似登录表单中，浏览器倾向于忽略该值，而提供密码自动填充功能，参见 自动填充属性和登录）
      • on：浏览器可自动补全条目
  • method 请求方式
  • target 和a标签的target属性一样
• 事件
  • onsubmit

    <input type="submit" value="提交">
    <button type="submit">提交</button>
    // 这俩个的区别是  button标签中还可以包含别的标签，而input不行

其他感想

之前学的时候，还真不知道 img标签中的src竟然是去使用get请求去请求图片的路径的，这确实有点惊讶到我，还有它的响应式 max-width 。