HTML常用标签

a标签的用法
- a标签的属性：
- a标签的作用：
img标签的用法
table标签的用法
form标签的用法
其他感想

a标签的用法

HTML <a> 元素（或称锚元素）可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

a标签的属性：

href。包含超链接指向的 URL 或 URL 片段。取值如下：
1. 网址。例如：
  1. https://google.com
  2. http://google.com
  3. //google.com(会自动适应http和https，实际开发中推荐此写法)
2. 路径。例如：
  1. /a/b/c以及a/b/c。/a/b/c是绝对路径的书写方式，如果开启http服务(比如http-server)，那么/a/b/c 的根目录就是 http 服务开启的目录，而不是硬盘的根目录。注意，不能双击打开html文件，绝对路径的书写方式会导致错误。a/b/c是相对路径的书写方式，表示从当前目录下打开文件。
  2. index.html以及./index.html。从当前目录打开index.html。
3. 伪协议。例如：
  1. javascript:代码;（可以写一个点击之后没有动作的a标签，不跳转也不刷新页面）
  2. mailto:邮箱（点击后，直接跳转到发邮件的页面，并且自动补全此邮箱地址）
  3. tel:手机号（点击后，会弹出一个界面，可直接拨打此手机号）
4. id。例如：
  1. href=#XXX （点击后，跳转到指定的XXX标签）
target。指定在何处显示链接的资源。取值如下
1. 内置名字。例如：
  1. _blank, 表示从新窗口中打开链接
  2. _top, 加载的响应成完整的，原来的窗口，取消所有其它frame，即在顶端打开窗口
  3. _parent, 加载响应到当前框架的父框架上
  4. _self, 此为默认值，即在当前页面加载链接，如果没有任何框架，_top, _parent行为方式与_self一致
2. 程序员命名。例如：
  1. window的name。比如一个链接target命名为XXX，此时链接会在新窗口中打开，并把该新窗口命名为XXX，此时如果另一个链接的target也是XXX，则该链接也会在XXX窗口打开。在控制台，输入 window.name，会出现’xxx’，也就是当前窗口的名字
  2. iframe的name。可以做一个GoogleBai页面，即链接的 target 为XXX，iframe 的 name 也为XXX，此时在也面试点击链接，框架里就会显示打开链接的网页。
download。此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。不是所有浏览器都支持，尤其手机浏览器可能不支持。
rel。该属性指定了目标对象到链接对象的关系。

a标签的作用：
跳转外部页面
跳转内部锚点
跳转到邮箱或电话等

img标签的用法

作用：
发出get请求，展示一张图片。

属性：
alt。包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，非常有用。如果由于某种原因无法加载图像，浏览器会在页面上显示alt 属性中的备用文本
width/height。指定图标的宽高尺寸，单位默认为px，实际书写时可以不写px，如果只写width或height，页面会自适应，但是如果width和height都指定的话，可能导致图片变形
src。指定想嵌入图片的文件路径，可以是绝对路径、相对路径或网络路径

事件：

onload/onerror。监听图片是否加载成功。

XXX.onload = function() {
  console.log("图片加载成功");
};
XXX.onerror = function() {
  console.log("图片加载失败");
XXX.src = "404.png";
};

响应式：

max-width:100%，页面宽度自适应，在移动设备上有很好的浏览体验

table标签的用法

相关的标签：
table
thead，表的头部
tbody，表的主体
tfoot，表的尾部
tr，表行
td，表的数据

th，表头

常用写法：

<table>
      <thead>
          <tr>
              <th></th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td></td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
              <th></th>
          </tr>
      </tfoot>
  </table>

table里可以只有thead和tbody，或者只有tbody，如果只写了tr和td，那浏览器具有很强的纠错能力，会自动在tr和td外层增加tbody标签。thead，tbody，tfoot三个标签的顺序不重要。

table相关样式：

table-layout，定义了用于布局表格单元格，行和列的算法
1. auto（表格及单元格的宽度取决于其包含的内容）
2. fixed （表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定，每一列尽量等宽）
border-collapse，控制表格的 border 是否合并，合并的取值是 collapse，默认是不合并。
border-spacing，控制 border 和 border 之间的距离，取值是数值，一般写 0，不希望表格之间有空隙

table样式一般都事先在 reset.css 里写好：

table {
    border-collapse: collapse;
    border-spacing: 0;
}

form标签的用法

作用与写法：

表示了文档中的一个区域，此区域包含有交互控制元件，用来向 Web 服务器提交信息。

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required>
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!">
  </div>
</form>

属性：

action。当表单提交时向何处发送表单数据，可以是绝对URL地址,如 action=”http://www.example.com/example.htm"，也可以是相对URL地址，如action="example.htm“
method。规定如何发送表单数据，常用取值有”get”和”post”。
1. get：表单数据可被作为 URL 变量的形式来发送，将表单数据以名称/值对的形式附加到 URL 中
2. post：表单数据作为 HTTP post 事务的形式来发送，表单数据会包含在表单体内然后发送给服务器（数据不显示在 URL 中）
target。指示在何处打开 action URL，即在何处显示提交表单后接收到的响应
1. _blank
2. _self
3. _parent
4. _top
autocomplete。规定表单是否应该启用自动完成功能
1. off。禁用自动完成功能。用户必须在每次使用时输入值到每个字段中，浏览器不会自动完成输入
2. on。默认。规定启用自动完成功能。浏览器会基于用户之前键入的值自动补全
  事件：

onsubmit。事件在提交表单时调用，指定执行的 JavaScript 代码

<html>
<head>
<script>
function greeting()
{
alert("Welcome!")
}
</script>
</head>
<body>
  What is your name?<br>
  <form name="frm1" action="submit.htm" onsubmit="greeting()">
      <input type="text" name="fname">
      <input type="submit" value="Submit">
  </form>
</body>
</html>

其他感想

对于每个html标签的属性和常用的写法，有任何疑问及时查阅mdn文档，或者请教老师和前辈

a标签的用法

a标签的属性：

a标签的作用：

img标签的用法

作用：

属性：

事件：