HTML入门笔记2-重点标签1. 常用属性 2. a href的取值 3. target的取值 1. 标签 2. 属性

一、a标签

1. 常用属性

href：用于跳转外部页面、内部锚点、邮箱或者电话 <a href="https://gogle.com" target="_blank">超链接</a>
target：用于指定窗口打开页面，默认在当前窗口打开，加上_blank则在新窗口打开页面 <a href="https://gogle.com" target="_blank">超链接</a>

2. a href的取值

网址

    <a href="https://gogle.com">超链接</a>
    <a href="http://gogle.com">超链接</a>
    <a href="//gogle.com">超链接</a>
    <!--三种写法效果一致-->

路径

<!--绝对路径 就是硬盘上文件的路径-->
<a href="/a/b/c.html"></a>
<!--相对路径 就是相对于当前文件的路径。-->
<a href="c.html">同目录下文件间互相链接</a>

伪协议:

<!--执行js，可能会用到空的：javascrip:;-->
<a href="javascrip:;">空的伪协议</a>

<!--跳转到XXX：XXX为元素的id-->
<a href="xxx">查看XXX</a>

<!--发送邮件：mailto:邮箱-->
<a href="mailto:991376602@qq.com">发邮件给andy</a>

<!--tel:手机号-->
<a href="tel:1234567989">打电话给andy</a>

id:href=#XXX

<!--跳转到XXX：XXX为元素的id-->
<a href="#xxx">查看XXX</a>

3. target的取值

<!--target="_blank" 在新窗口打开页面-->
 <a href="http://baidu.com" target="_blank">百度</a>
 
<!--target="_self" 默认值，在当前页面打开-->
<a href="http://baidu.com" target="_self">百度</a>

<!--target="_top" 有内嵌窗口时，在最高层级的窗口打开，即当前页面-->
<a href="http://baidu.com" target="_top">百度</a>

<!--target="_parent"  有多个内嵌窗口时，当前链接所在的上一个窗口打开。-->
<a href="http://baidu.com" target="_parent">百度</a>

<!--target="xxxx"  如果有一个叫xxx的窗口，就在xxx窗口打开，如果没有就创建一个-->
<a href="http://google.com" target="xxx">谷歌</a>
<a href="http://baidu.com" target="xxx">百度</a>

二、table标签

1. 标签

<!--tr为表格的一行 th为表头 td为内容 要填两个表头时，将td换成th即可-->

<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>空</td>
            <td>空</td>
        </tr>
    </tbody>
    <tfoot>
    <tr>
            <td>空</td>
            <td>空</td>
        </tr>
    </tfoot>
</table>
<!--thead\tbody\tfoot与代码顺序无关，显示内容肯定是头-身体-脚-->

2. 属性

<style>
               table {
          width: 600px;
           table-layout: auto;
           /*auto;表格及单元格的宽度取决于其包含的内容.fixed:平均宽度*/
           
           border-collapse: collapse;
           /*用来决定表格的边框是分开的还是合并*/
           
           border-spacing: 0;
           /*指定相邻单元格边框之间的距离*/
       }

    </style>

三、img标签

作用发出get请求，展示一张图片
属性 <img width="400" src="images/1.jpg" alt="图1">

alt图片加载失败后会显示的提示文字
width 如果给图片只设置宽度，高度会为自适应
height 如果给图片只设置高度，宽度会为自适应

事件

<!--onload/onerror图片加载失败可替换其他图片-->
<body>
  <img width="400" src="images/1.jpg" alt="图1" id="xxx">
  <script>
    xxx.onload = function () {
        console.log('图片加载成功');

    }
    xxx.nerror = function () {
        console.log('图片加载失败');
        xxx.src = '2.jpg';
  }
  </script>
</body>

响应式

<!--max-width: 100%;图片自适应所有浏览器页面-->
<style>
        img{
            max-width: 100%;
            }
    </style>

四、form标签和input标签

作用

form发get或post请求，然后刷新页面
input让用户输入内容

属性

<body>
    <form action="/xxx" method="GET" autocomplete="on" target="_blank">
    <input name="username" type="text">
    <input type="submit">
    <button type="submit"><strong>搞起</strong></button>
    </form>
</body>

action 请求到路径的页面
method 用来控制发起的是gethi还是post请求
autocomplete="on"根据用户之前在表单里输入的值自动补全
target="_blank"指示在提交表单之后，在新窗口刷新页面