a标签的用法

a标签是HTML中很常用的标签

属性

  • href（hyper reference）超链接

取值：
网址：
https://google.com
http://google.com
//google.com —> 无协议的网址，自动适应http，https，以后写链接就用//
路径：
绝对路径/a/b/c
image.png
相对路径a/b/c
image.png
index.html以及 ./index.html
image.png
伪协议：
javascript:代码;
image.png
<a`` ``href``=``"javascript:;"``>``查看``</a> 可以生成a标签并且点击什么都不做
mailto:邮箱
<a`` ``href``=``"mailto:xxx@gmail.com"``>发邮件给我</a>
tel:手机号
<a`` ``href``=``"tel:13782475737"``>call我</a>
id：
href=#xxx
<a`` ``href``=``"#xxx"``>``查看xxx``</a>

  • target

内置名字
_blank：在新标签也打开
<a`` ``href``=``"//baidu.com"`` ``target``=``"_blank"``>``超链接``</a>
_top：在最上打开
_parent：上一级窗口打开
_self：在当前页面打开
<a`` ``href``=``"//baidu.com"`` ``target``=``"_self"``>``超链接``</a>

  • download（实际上没有用）

作用：不是打开页面，而是下载页面
问题：不是所有浏览器都支持，尤其是手机浏览器可能不支持

  • rel=noopener

防止一个bug

作用

  • 跳转外部页面
  • 跳转内部锚点

  • 跳转到邮箱或电话等

    img标签的用法

    作用

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

    属性

  • alt：如果图片加载失败，就显示alt中的内容

  • height：只写高度，宽度会自适应
  • width：只写宽度，高度会自适应

⚠️不要同时设置宽高，图片会变形

  • src：图片地址

    事件

    监听图片是否加载成功，成功调用onload，失败调用onerror

  • onload

  • onerror

    响应式

    max-width: 100%

    可替换元素

    考试可能会问，概率为30%

    table标签的用法

    相关的标签

  • table

  • thread
  • tbody
  • tfoot
  • tr：table row表的一行
  • td：table data表的内容
  • th：表头

相关的样式

  • table-layout

    1. /* Keyword values */
    2. table-layout: auto;
    3. table-layout: fixed;
    4. /* Global values */
    5. table-layout: inherit;
    6. table-layout: initial;
    7. table-layout: unset;

  • border-collapse：合并border间隙

border-collapse: collapse;

  • border-spacing：控制border之间的距离

border-spacing: 0;

例子1:

  1.   <body>
  2.     <table>
  4.       <thead>
  5.         <tr>
  6.           <th>英语</th>
  7.           <th>翻译</th>
  8.         </tr>
  9.       </thead>
  11.       <tbody>
  12.         <tr>
  13.           <td>hyper</td>
  14.           <td>超级</td>
  15.         </tr>
  16.         <tr>
  17.           <td>target</td>
  18.           <td>目标</td>
  19.         </tr>
  20.         <tr>
  21.           <td>reference</td>
  22.           <td>引用</td>
  23.         </tr>
  24.       </tbody>
  26.       <tfoot>
  27.         <tr>
  28.           <td>空</td>
  29.           <td>空</td>
  30.         </tr>
  31.       </tfoot>
  33.     </table>
  34.   </body>

image.png
例子2:

  1.   <body>
  2.     <table>
  3.       <thead>
  4.         <tr>
  5.           <th></th>
  6.           <th>小红</th>
  7.           <th>小黄</th>
  8.           <th>小绿</th>
  9.         </tr>
  10.       </thead>
  12.       <tbody>
  13.         <tr>
  14.           <th>数学</th>
  15.           <td>79</td>
  16.           <td>56</td>
  17.           <td>65</td>
  18.         </tr>
  19.         <tr>
  20.           <th>语文</th>
  21.           <td>79</td>
  22.           <td>56</td>
  23.           <td>65</td>
  24.         </tr>
  25.         <tr>
  26.           <th>英语</th>
  27.           <td>79</td>
  28.           <td>56</td>
  29.           <td>65</td>
  30.         </tr>
  31.       </tbody>
  33.       <tfoot>
  34.         <tr>
  35.           <th>总分</th>
  36.           <td>200</td>
  37.           <td>300</td>
  38.           <td>200</td>
  39.         </tr>
  40.       </tfoot>
  41.     </table>
  42.   </body>

image.png

form标签

作用

发get或post请求，然后刷新页面

属性

  • action：请求哪个页面，相当与src

  • autocomplete：自动建议用户名

    1. <body>
    2.   <form action="/xxx" method="POST" autocomplete="on">
    3.     <input name="username" type="text" />
    4.     <input type="submit" />
    5.   </form>
    6. </body>

    image.png

  • method：用来控制get还是post

<form`` ``action``=``"/xxx"`` ``method``=``"POST"``>

  • target：点击提交哪个页面变成xxx

    事件

  • onsubmit：用户点提交的时候触发这个事件

    input和button区别

    input中不能有其他东西
    button可以有其他标签

    1. <button type="submit">
    2.  <strong>点击</strong>
    3. </button>

⚠️form中必须要有type=”submit”,否则表单不能提交

input标签

作用

让用户输入内容

属性

类型type：button/submit/hidden/password/tel/text/value/number/name/radio（单选）/checkbox（多选）/file（上传文件）/textarea（多行文本框）/select（选择框）

事件

  • onchange
  • onfocus

  • onblur

    注意事项

  • 一般不监听input的click事件

  • form里面的input要有name
  • form里面放一个type=submit才能触发submit事件

补充

访问HTML的时候别用双击文件的方法，会报错，用以下方法：

  1. 先安装http-server

    1. yarn global add http-server

  2. 在终端输入

    1. //-c表示缓存，-1表示不要缓存，.可以省略
    2. http-server . -c-1
    3. //或者缩写
    4. hs -c-1

  3. ctrl+单击网址即可在浏览器打开

image.png

另一种方法：

  1. 终端输入以下命令安装parcel

    1. yarn global add parcel

  2. 输入命令

    1. //后面是你的html文件的名字
    2. parcel a-href.html

  3. ctrl+单击网址打开

image.png

其他感想

学到了HTML中常用且重要的一些标签