详细介绍HTML的a,img,table和form标签

HTML入门笔记2

详细介绍HTML的a,img,table和form标签

一 a标签

a标签属性：href，taiget，download，rel=noopener。
a标签作用：主要是用来跳转到外部页面，内部页面或者电话邮箱等等。
代码类似这样<a href=""></a>
i

1 href

注释：href是输入地址，可以输入 1.1 网址，1.2 路径，1.3 伪协议，1.4 id锚点，1.5 邮箱等

注意：永远也不要双击打开html，用户都是输入网址进去，我们要像用户一样使用网页输入打开。

用输入网址打开，方法一：终端输入安装yarn gloal add http-server
安装好后输入 http-server . -c-1
这里"."可忽略，-c是缓存，-1是不要缓存。推荐用yarn。
然后会出现几个地址，复制地址或直接打开后在地址栏接上要打开的文件。

方法二：终端输入安装yarn global add parcel
安装好后直接parcel xxx.html
xxx是打开文件名称

1.1 网址

href可输入网址，取值例如：

https://baidu.com
http://baidu.com
//baidu.com

注意：最好选用//baidu.com，即无协议网址，点击链接时，会自动跳转选择适用http还是https，防止选错http，还是https而出错。
查看具体怎么传的可以打开网页开发工具(F12)在netwok里选中Preserve log进行查看

1.2 路径

href可输入路径，例如：

/a/b/c
a/b/c

注意：/a/b/c，"/"难道不是根目录吗？

答：当我们使用http后就不再是文件了，在哪里开的服务，哪里就是根目录。

开发时，如果双击打开链接页面的话，是以文件形式，会在file根目录下寻找，链接失效，绝对路径就错了。要用网页形式打开

1.3 伪协议

什么是伪协议呢，是点击a标签就会执行href里的代码，叫JavaScript伪协议。

<a href="javascript:alert(1);">javascript伪协议</a>

1.4 id锚点

可以通过点击a标签内容实现页内跳转

 	<p id="xxx">你点击了查看</p>


 	<a href="">查看（页面会刷新）</a>
    <a href="#">查看(页面不会刷新，会跳到页面顶部)</a>
    <a href="#xxx">查看（通过id跳转到指定的标签，锚点)</a>
    <a href="javascript:;">查看（这才是什么也不会做的a标签）</a>

1.5 邮箱等

跳转邮箱

 <a href="mailto:[email protected]">发邮件给我</a>

效果：发邮件给我

跳转电话

<a href="tel:13258378250">请打电话给我</a>

效果：请打电话给我

2 a的 target 属性

target是"目标"的意思。target有以下几种常用取值：

2.1 _blank

新打开个窗口打开

2.2 _top

有多个网页嵌套的情况下，会在最顶层上的窗口打开。可以用~~iframe~~嵌套网站。

2.3 _parent

在当前链接的上一层打开

2.4 _self

在自己这一层打开

2.5 xxx

注释：xxx是taiget="xxx"时，xxx是id，可以随便取，有xxx时就打开，没有xxx时就创建一个窗口，把它叫做xxx。
注意：有两个链接都叫xxx时，点击相同xxx不同链接，每一次点击都会在xxx窗口执行点击的链接。

二 img标签

img标签的作用：发出get请求，展示一张图片。
属性有：alt / height / width / src
事件：onload / onerror
响应式：max-width: 100%;
可替换元素

1 属性

1.1 alt

alt是图片加载失败时，显示alt内容的文字来提示用户

1.2. height和width

图片高宽。只写宽或高，图片的高或宽就会自适应，宽高一起写会让图片变形。

注意:永远不能让图片变形

1.3. src

英文source，来源。图片地址。

2 事件

onload和onerror
用来监听图片是否加载成功 ,成功就执行onload，失败就执行onerror。是一种用户补救措施。

 <body>
    <img id="xxx" width="400" src="1.gif" alt="加油动图" />

    <script>
      xxx.onload = function () {
     
     
        console.log("图片加载成功");
      };
      xxx.onerror = function () {
     
     
        console.log("图片加载失败");
        xxx.src = "/图片加载失败.png";
      };
      // id测试时用，平时别用
    </script>
  </body>

成功效果如下：

图片加载成功

失败效果如下：

3 响应式

响应式添加一下图片的 max-width: 100%;样式图片就可以适应手机了

<style>
      * {
     
     
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      img {
     
     
        max-width: 100%;
      }
    </style>

三 table标签

1 属性值

table标签里能用的只有三个标签，分别是thead，tbody和tfoot，三者写的顺序无关，排列只会是头，身体和脚。三者里又可以写tr(table row，表示table里的一行)，td(内容数据)，th(表示表头).

话不多说看代码

  <body>
    <table>
      <thead>
        <tr>
          <th>英语</th>
          <th>翻译</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>hyper</td>
          <td>超级</td>
        </tr>
        <tr>
          <td>target</td>
          <td>目标</td>
        </tr>
        <tr>
          <td>reference</td>
          <td>引用</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>空</td>
          <td>空</td>
        </tr>
      </tfoot>
    </table>
  </body>

效果如图：

2 相关样式

相关样式：table-layout,table-collapse,border-spacing。一般用来清楚table样式。

    <style>
      table {
     
     
        table-layout: auto; /*计算每行宽高，由内容大小决定宽高*/
        /* table-layout: fixed;尽量每一行平均 */
        border-collapse: collapse;
        /* collapse合并边框 */
        border-spacing: 0;
        /* border和border之间的距离 */
      }
    </style>

四 form表单

作用：发送get或者post请求，然后刷新页面。
属性：action / autocomolete / method / target
事件：onsubmit

注意:一个form表单必须要含有type等于"submit"才可以提交，如果写了按钮不写submit，默认就是submit。
如果type=“button”,则提交不了。input每一个都要有name。

1 input属性

1.1 action

相当于img的src，是请求往哪发。用来控制到哪个页面，action里面写什么，请求就到哪个页面。

<body>
	<form action="/xxx">
      	<input name="username" type="text" />
      	<input type="submit"/>
	</form>
</boody>

type="text"类型是一个文本框，type="submit"是个提交。

1.2 method

用来控制请求是post还是get。

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

1.3 autocomplete

自动填充。鼠标移入后会有历史输入提示。

    <form action="/xxx" method="POST" autocomplete="on">
      <!-- on是打开提示，off是关闭提示 -->
      <input name="username" type="text" />
      <input type="submit" />

效果如下：

1.4 target

提交到哪个页面，哪个页面就会刷新。

type属性有很多，type=color(改变颜色)，password(输入为*号的输入框)，checkbox和raido(多选框和单选框，要让拥有同一个name的表示一组)，file(可加multipe表示可以选择多个文件)，hidden(隐藏)

2 textarea

<textarea style="resize: none; width: 50%; height: 300px"></textarea>

可以不加样式，可自由拉动。

3 select

<select>
        <option value="">-请选择-</option>
        <option value="1">一</option>
        <option value="2">二</option>
        <hr />
        <input type="text" required />
      </select>

选择框，value是真正的值。一，二是给用户看的值