a标签

属性

href 超链接
target 目标在哪个窗口打开链接
download
rel=noopener

作用

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

注意：检查时避免双击打开html文件，因为正常使用不会直接打开html文件，避免产生bug，我们可以使用以下两种方法。
使用终端运行以下代码：

yarn global add http-server

安装完成
然后输入:

http-server . -c-1
也可以简写为：
hs -c-1

-c 表示缓存，-1表示否定，所以-c-1的意思为不缓存。

命令框回复IP地址，然后复制其中一个IP地址到浏览器，后面加上需要访问文件路径，回车打开就好了，这里我做了一个百度的链接，

第二种方法为：
安装parcel

yarn global add parcel

访问语句为：

parcel 文件路径

然后窗口会回复一个网址，点开就是你访问的html文件。

a标签使用样式

    <a href="//baidu.com" target="_blank">百度</a>

这段代码表示通过一个新建空白页面去打开百度。

a 标签 href 取值

网址

路径

/a/b/c 或者 a/b/c
index.html 或者 ./index.html

伪协议

javascript:代码;
<a href="javascript:alert(1);">javascript</a>
执行javascrept语句，如果想有一个a标签，又让他什么都不做，则写：
<a href="javascript;">javascript</a>
mailto:邮箱
<a href="mailto:123456789@qq.com">发送邮件</a>
tel:手机号 <a href="tel:18299999999">打电话</a>

id <a href="#xxx">查询id为xxx的标签内容</a>

a 标签 target 取值

内置名字

_blank 在新的空白页面打开
_top 在最顶层页面打开
_parent 在父级窗口打开
_self 在当前页面打开
xxx target="xxx" 在xxx窗口打开页面，如果没有xxx窗口则创建xxx窗口，其他链接只要target指向xxx窗口，则在xxx窗口打开

程序员命名

window 的 name
iframe 的 name

table 标签

一个完整table应该head,body,foot三个部分组成，下面是他们所对应的标签：

head	`<thead>`
body	`<tbody>`
foot	`<tfoot>`

其他相关的标签有：tr , td , th

相关的样式：

table-layout table-layout: fixed;每个表格长度相等
table-layout:auto;表格长度跟随内容长度变化
border-collapse border-collapse: collapse;单元格之间没有空隙
border-spacing border-spacing: 20px; 每个单元格之间间隔20像素

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        width: 600;
        table-layout: fixed;
        border-spacing: 0px;
        border-collapse: collapse;
      }
      td,
      th {
        border: 4px solid seagreen;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>小红</th>
          <th>小绿</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>数学</th>
          <td>92</td>
          <td>78</td>
        </tr>
        <tr>
          <th>语文</th>
          <td>88</td>
          <td>95</td>
        </tr>
        <tr>
          <th>英语</th>
          <td>98</td>
          <td>87</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>总分</th>
          <td></td>
          <td></td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

img 标签

作用发出get请求，展示一张图片
属性

alt 替换。如果图片加载失败，则显示alt内容
height 高度，只写高度宽度自适应
width 宽度只写宽度高度自适应
src 地址

事件监听图片是否调用成功

onload
onerror

响应式 max-width:100% 适宜设备屏幕

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img id="xxx" src="pic1.jpg" width="800" alt="图片" />
    <script>
        xxx.onload=function(){
            console.log("图片加载成功");
        };
        xxx.onerror=function(){
            console.log("图片加载失败");
            xxx.src="oner.jpg;"
        };
    </script>
  </body>
</html>

from 标签与 input 标签

from标签

作用发get或post请求，然后刷新页面
属性 action/autocomplete/method/target
事件 omsubmit

<input type="submit" >与<button type="submit"><strong>登录</strong></button>区别？
答： input 里面不能有其他样式，button可以添加其他样式

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="/xxx" method="post" autocomplete="on" target="_blank">
      <input name="username" type="text" />

      <hr />
      <input type="color" />
      <hr />
      <input type="password" />
      <hr />
      <input name="gender" type="radio" />男
      <input name="gender" type="radio" />女
      <hr />
      <input type="checkbox" name="water" />可乐
      <input type="checkbox" name="water" />雪碧
      <input type="checkbox" name="water" />美年达
      <input type="checkbox" name="water" />苏打水
      <hr />
      <input type="file" />
      <input type="file" multiple />
      <hr />
      <textarea style="resize: none; width: 50%; height: 300px"></textarea>
      <hr />
      <select>
        <option value=" ">--请选择--</option>
        <option value="1">星期一</option>
        <option value="2">星期二</option>
        <option value="3">星期三</option>
      </select>
      <hr />
      <input type="submit" value="登录" />
    </form>
  </body>
</html>

HTML入门笔记 二

a标签

table 标签

img 标签

from 标签 与 input 标签

HTML入门笔记二

from 标签与 input 标签