一、a标签

属性

href

hyper reference超链接

<p>
  <a href="//google.com">搜索</a>
</p>

可安装工具parcel，利用parcel打开链接，切勿双击html

λ yarn global add parcel
λ parcel index.html
Server running at http://localhost:1234 
√  Built in 4.43s.

a的href的取值：

1.网址

//google.com 书写此种网址，不用https或http防止报错

2.路径

/a/b/c.html及a/b/c.html（在同一根目录下，绝对路径和相对路径都相同）
index.html同于./index.html（同一根目录下）

3.伪协议

javascrip:代码; （可以制作一个没有反应的a标签，空代码）

<body>
  <a href="javascrip:alert(1);">javascrip伪协议，javascrip:填写代码；</a>
</body>

mailto:邮箱

<body>
  <a href="mailto:yudada1994@gmail.com">邮件联系YDZ</a>
</body>

tel:手机号

<body>
  <a href="tel:1384135xxxx">电话联系YDZ</a>
</body>

id
href=#xxx
HTML中a标签中href="#xxx"，当点击后，页面会跳转到标签中id="xxx"的地方。
target

指定在哪个窗口打开超链接

<p>
  <a href="http:google.com" target="_blank">搜索</a>
</p>

target的取值：

_blank

<body>
  <a href="//google.com" target="_blank">前往搜索</a>
</body>

在新的页面打开链接

_self

<body>
  <a href="//google.com" target="_self">前往搜索</a>
</body>

在当前页面打开链接

_top

<body>
  <a href="//google.com" target="_top">前往搜索</a>
</body>

如果没有框架，跟_self效果一样，在当前的浏览器窗口打开超链接；
如果有框架就跟_self不一样，_self会在超链接所在的框架中打开超链接，而_top会在所在浏览器窗口(浏览器窗口包含了框架)打开连接

_parent

<body style="background: yellow;">
    <a href="//google.com" target="_parent"></a>
  </body>

target="_parent" ，属性作用使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

自己命名window.name

<body>
  <a href="//google.com" target="YDZ">前往搜索</a>
  <a href="//baidu.com" target="YDZ">前往搜索</a>
</body>

命令会新打开页面并且命名为“YDZ”，可以让某些链接同样在YDZ页面打开（例如上图baidu）

自己命名iframe.name

<body>
  <a href="//google.com" target="YDZ">前往搜索</a>
  <a href="//baidu.com" target="DZY">前往搜索</a>
  <hr />
  <iframe src="" name="YDZ"></iframe>
  <hr />
  <iframe src="" name="DZY"></iframe>
</body>

上例在一个页面又可以谷歌又可以百度

download

下载当前页面（多数浏览器不支持）

rel=noopener

用于解决被恶意利用安全漏洞。利用target="_blank"打开新标签页面后，JS功能将会赋予新窗口一些权限来操作原Tab页，新页面的window对象上有一个属性opener，它指向的是前一个页面的window对象，恶意网站会利用window.opener.location.replace来更改原网站URL

HTML5的新属性一览

二、iframe标签

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。内嵌窗口。（现在很少用）

三、table标签

HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。

<body>
    <table>
      <thead>
        <tr>
          //table row
          <th></th>
          <th>班级</th>
          //table head
          <th>姓名</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>第一名</th>
          <td>高三八班</td>
          //table data
          <td>鱼大杂</td>
        </tr>
        <tr>
          <th>第二名</th>
          <td>高三八班</td>
          <td>马大哈</td>
        </tr>
        <tr>
          <th>第三名</th>
          <td>高三八班</td>
          <td>猴大雷</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>统计</th>
          <td>3名八班学生</td>
          <td>3名学生</td>
        </tr>
      </tfoot>
    </table>
  </body>

观察上述实例与注释（table、thead、tbody、tfoot、tr、td、th）

相关样式

table-layout

table-layout CSS属性定义了用于布局表格单元格，行和列的算法。
取值：

  <style>
      table{
          table-layout: auto;
      }
  </style>

大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。

  <style>
    table {
      table-layout: fixed;
    }
  </style>

表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。

使用 “fixed” 布局方式时，整个表格可以在其首行被下载后就被解析和渲染。这样对于 “automatic” 自动布局方式来说可以加速渲染，但是其后的单元格内容并不会自适应当前列宽。任何一个包含溢出内容的单元格可以使用 overflow 属性控制是否允许内容溢出。

border-collapse

<style>
    table {
      table-layout: fixed;
      border-spacing: 0px;
      border-collapse: collapse;
    }
    td,
    th {
      border: 1px blue;
    }
  </style>

border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

取值：

合并（collapsed ）模式下，表格中相邻单元格共享边框。在这种模式下，CSS属性border-style 的值 inset 表现为槽，值 outset 表现为脊。

分隔（separated）模式是 HTML 表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过CSS属性 border-spacing 来确定的。

border-spacing

border-spacing 属性指定相邻单元格边框之间的距离（只适用于边框分离模式）。相当于 HTML 中的 cellspacing 属性，但是第二个可选的值可以用来设置不同于水平间距的垂直间距。

border-spacing 值也适用于表格的外层边框上，即表格的边框和第一行的、第一列的、最后一行的、最后一列的单元格之间的间距是由表格相应的（水平的或垂直的）边框间距（border-spacing）和相应的（上，右，下或左）内边距之和。

该属性只适用于 border-collapse 值是 separate 的时候。

取值：

length
描述单元格之间的水平和垂直距离的一个<length>值。它只在单值语法下使用。
horizontal
描述相邻两列的单元格之间的水平距离的一个 <length>值。它只在双值语法下使用。
vertical
描述相邻两行的单元格之间的垂直距离的一个 <length>值。它只在双值语法下使用。
inherit
一个表示父元素的 border-spacing的计算值的关键字，其父元素必须应用了border-spacing。

四、img标签

HTML <img> 元素将一份图像嵌入文档。它可以发出一个get请求，然后展示图片。

属性：

<img class="fit-picture"
     src="/media/examples/grapefruit-slice-332-332.jpg"
     alt="Grapefruit slice atop a pile of other slices">

src 属性是必须的，它包含了你想嵌入的图片的文件路径。

alt 属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时。

其他的属性：

Referrer/CORS 控制，保证安全与隐私：详见 crossorigin属性和 referrerpolicy属性。

使用 width、height和 intrinsicsize（不常使用）设置原始分辨率：这将设置图像应占用的空间，以确保图像被加载之前页面的布局是稳定的。

使用 sizes 和 srcset设置响应式图像（亦可参考 <picture> 元素和我们的响应式图像教程）。

事件

onload/onerror

<body>
    <img id="xxx" width="800" src="1234.jpg" alt="这是加载失败的耳朵照片" />
    <script>
      xxx.onload = function () {
        console.log("图片加载成功");
      };
      xxx.onerror = function () {
        console.log("图片加载失败");
        xxx.src = "/备用图片.png";
      };
    </script>
  </body>

可以在图片加载失败后用备用图片显示

响应式

max-width:100%
max-width 属性用来给元素设置最大宽度值. 定义了max-width的元素会在达到max-width值之后避免进一步按照width属性设置变大

注：max-width 会覆盖width设置, 但 min-width设置会覆盖 max-width。

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>img</title>
    <style>
      * {                               //所有元素
        margin: 0;                      //外边距为0
        padding: 0;                     // 内边距为0
        box-sizing: border-box;         //见注
      }
      img {
        max-width: 100%;
      }
    </style>
  </head>

上代码可以使手机用户浏览图片有更好的体验

注：box-sizing 属性可以被用来调整这些表现：
content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

五、form标签

HTML <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

此元素拥有全局属性

提交表单的属性

action

<body>
    <form action="/xxx" method="POST">
      //后台提供的地址，method用来控制用GET还是POST
      <input type="text" />//输入框 
      <input type="submit" />//提交按钮
    </form>
  </body>

处理表单提交的 URL。这个值可被 button、input type="submit"或 input type="image"元素上的 formaction属性覆盖。

autocomplete

用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 autocomplete 属性覆盖。

<body>
    <form action="/xxx" method="POST" autocomplete="on">
      <input name="username" type="text" />
      <input type="submit" />
    </form>
</body>

能够显示用户的用户名，自选

method

浏览器使用这种 HTTP 方式来提交表单. 可能的值有：

post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器.
get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的 URL 中，并以 '?' 作为分隔符，没有副作用时使用这个方法。
dialog：如果表单在 <dialog> 元素中，提交时关闭对话框。

target

表示在提交表单之后，在哪里显示响应信息。在 HTML 4 中, 这是一个 frame 的名字/关键字对。在 HTML5 里，这是一个浏览上下文的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义：
_self：默认值。在相同浏览上下文中加载。
_blank：在新的未命名的浏览上下文中加载。
_parent：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。
_top：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致。

  <body>
    <form action="/xxx" method="POST" autocomplete="on" target="a">
      <input name="username" type="text" />
      <input type="submit" />
      <iframe name="a" src="index-demo-0.html" frameborder="0"></iframe>
    </form>
  </body>

onsubmit

  <body>
    <form action="/xxx" method="POST" autocomplete="on" target="a">
      <input name="username" type="text" />
      <input type="submit" value="Let's Go" />
      <button type="submit">Let's Go</button>
      <iframe name="a" src="index-demo-0.html" frameborder="0"></iframe>
    </form>
  </body>

若要提交必须有type=submit，如若没有则默认type=submit

button与input都用来书写提交按钮，区别是input中只能有纯文本，button中可以有任何标签

六、input标签

HTML <input> 元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件，具体取决于设备和user agent。
<input>的工作方式相当程度上取决于type属性的值，不同的 type 值会在各自的参考页中进行介绍。如果未指定此属性，则采用的默认类型为 text。

可用的值包括：

图1

图2

点击查看具体<input>

前端探索 | 重点标签【HTML】

前端探索 | 重点标签【HTML】

一、a标签

属性

href

a的href的取值：

target

target的取值：

download

rel=noopener

二、iframe标签

三、table标签

相关样式

table-layout

border-collapse

border-spacing

四、img标签

属性：

事件

响应式

五、form标签

此元素拥有全局属性

提交表单的属性

action

autocomplete

method

target

onsubmit

六、input标签