<a>标签

• 属性
  • href
  • target
  • download：下载href所指向的网页。很多浏览器不支持这个功能。
  • rel=nooperner
• 作用
  1. 跳转外部页面
  2. 跳转内部锚点
  3. 跳转到邮箱或电话等

<a>标签的href属性

• a标签所指向的地址。
• href的取值
  • 网址
    • https://google.com
    • http://google.com
    • //google.com（推荐）
  • 路径
    • /a/b/c（绝对路径）以及a/b/c（相对路径）。
    • index.html以及./index.html，两者都是从“当前目录”寻找文件。
  • 伪协议
    • href="javascript:伪代码"：早期用于执行JS代码，现在一般不用了。
      • 现在一般用于设置一个空的、不会对页面当前状态做出改变的伪协议href="javascript:;"，来应对产品经理的奇葩需求。
    • href="#id名"：跳转到id指定的标签。
    • href="mailto:邮箱"：给指定邮箱发送邮件。
    • href="tel:手机号"：主要用于手机端，呼起拨号界面并填充电话号码。
• <a>标签的跳转流程（以google为例）
  • 依次跳转顺序
    1. <a>标签所在地址：http://localhost:1234
    2. 继承上一个网页的http，跳转到google.com：http://google.com
    3. 补全www：http://www.google.com
    4. 补全https，google的最终地址：https://www.google.com
  • 历史原因，网址规范的迭代。

<a>标签的target属性

• 在哪一个窗口打开超链接，默认取值为_self。
• 内置取值
  • _self：在当前窗口打开。
  • _blank：新建一个窗口并打开。
  • _top：在最顶层页面打开。需要与<iframe>标签搭配才有效果，但很多网页并不支持<iframe>。
  • _parent：在当前页面的父级页面打开。需要与3层以上的<iframe>标签搭配才有明显效果。
• target=“窗口名”
  • 设置一个自定义的值，例如target="xxx"，会新建一个窗口并将之命名为xxx，此后所有target="xxx"的超链接都会在xxx窗口打开。
  • 窗口名可以通过window.name来检测。
  • 此功能要在当前页面没有相同name名的<iframe>元素存在。
• target=“iframe名”
  • 设置一个当前页面的<iframe>的name名，如name="xxx"，此后所有target="xxx"的超链接都会在name相同的<ifame>元素中打开。
  • 例：

    <a href="//google.com" target="xxx">google</a>
    <iframe src="./a-target-iframe.html" frameborder="0" name="xxx"></iframe>
    

<iframe>标签

• 内嵌窗口。
• 已经过时，现在一般采用Ajax的方式实现相同需求。

<table>标签

<table>相关的标签

<table>
  <thead>
	<tr>
	  <th></th>
	  <th>小红</th>
	  <th>小明</th>
	  <th>小黄</th>
	</tr>
  </thead>
  <tbody>
	<tr>
	  <th>语文</th>
	  <td>90</td>
	  <td>91</td>
	  <td>89</td>
	</tr>
	<tr>
	  <th>数学</th>
	  <td>80</td>
	  <td>82</td>
	  <td>90</td>
	</tr>
  </tbody>
  <tfoot>
	<tr>
	  <th>总分</th>
	  <td>170</td>
	  <td>173</td>
	  <td>179</td>
	</tr>
  </tfoot>
</table>

• <table>：表格本身。
• <thead>：表格头部，可以没有，里面包括<tr>和<th>。
• <tbody>：表格主体，里面包括<tr>和<td>。如果源码中没有<tbody>，浏览器会自动加上<tbody>。
• <tfoot>：表格尾部，可以没有。
• <tr>：table row。表格中的一行。
• <th>：table head。表头，主要在一些情况下替代<td>，默认样式会给字体加粗。
• <td>：table data。表格数据。
• 注：<thead>、<tbody>、<tfoot>的实际展示顺序和源码中的顺序无关，在浏览器中一定是按照头、身体、脚的顺序排列的。

<table>相关的样式

• table-layout：用于布局表格单元格、行和列的算法。
  • table-layout: auto;：根据表格内容自动计算表格及单元格的宽度。
  • table-layout: fixed;：根据表格自身宽度（table.width）来平均分配单元格的宽度。
• border-collapse：决定表格的边框是分开的还是合并的。
  • border-collapse: collapse;
  • border-collapse: separate;
• border-spacing：指定相邻单元格边框之间的距离，默认值为0。
• 注：border-collapse优先级比border-spacing要高，能覆盖后者。

<img>标签

• 发出GET请求，展示一张图片。
• 属性
  • src：图片地址。
  • alt：在图片加载失败的情况下显示的文字。
  • height
  • width
• 只赋值height，width会自适应；只赋值width，height会自适应。
• 事件
  • onload：<img>如果加载成功，则调用onload事件。
  • onerror：<img>如果加载失败，则调用onerror事件，从而实现在图片加载失败时的挽救。
• 响应式：max-width: 100%，能适应不同窗口/屏幕的大小，自动改变图片的大小始终为屏幕宽度的100%。

表单标签

<form>标签

• 发出GET或POST的请求，然后刷新页面。

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

• 属性
  • action：其属性值决定了在发出get/post后，会请求到哪个页面。
  • autocomplete：用于指示<input>元素是否能够拥有一个默认值，默认值为off。可改为on，但要配合input.name来使用。
  • method：决定是使用GET还是POST请求，默认值为GET。
  • target：发出请求后，在哪个窗口刷新页面，同<a>标签的target属性基本一致。
• 事件
  • onsubmit：当用户提交的时候，触发事件。
• 注：一个<form>表单内一定要有一个type="submit"的按钮，才能触发submit事件。

<input>标签

• 让用户输入内容。
• 属性
  • 类型 type
    • type: text：文本框。
    • type: button：没有默认行为的按钮。
    • type: radio：单选框。
      • 当多个radio类型的input为同一个name时，能够实现多选一。
    • type: checkbox：多选框。
      • 一般会将同一组的多个checkbox设为同一个name。
    • type: color：指定颜色的控件，激活时会打开取色器。
    • type: file：用于上传文件，默认只能选一个文件。如果要选两个文件，要添加布尔属性multiple。
    • type: password：单行的文本区域，其值会被遮盖。
    • type: hidden：不显示的控件，其值仍会提交到服务器。可用于提交用户ID、字符串等内容。
    • type: submit：用于提交表单的按钮。
• 事件
  • onchange：当用户输入值，改变<input>内容时。
  • onfocus：当用户把鼠标移动到上面。
  • onclur：当用户把鼠标移开
• 验证器：HTML5新内容，验证<input>内容。
• 注
  • <form>里面的<input>要有name。
  • 一般不监听<input>的click事件。

<textarea>标签

• 在网页中可输入多行文本的表单控件。
• 属性
  • cols：规定了文本域内可见宽度。
  • rows：规定了文本域内可见行数。
• 右下角可以拖拽改变大小，一般通过CSS禁用<textarea style="resize: none"></textarea>。

<select>标签

• <select>：下拉菜单的整体。
• <option>：下拉菜单的每一项。
• <option>的属性
  • value：选项的实际值。
  • selected：下拉菜单的默认选中。

拓展

用http-server打开本地网页

• 安装http-server：yarn global add http-server
• 获取项目地址：http-server . -c-1
  • 例：http://192.168.1.104:8080
  • 可能会有多个地址，哪个地址都行。
• 打开本地网址：项目地址/HTML路径
  • 例：http://192.168.1.104:8080/a-href.html
• 同一个局域网下，不同设备可以直接访问以上地址。

用parcel打开本地网页

• 安装parcel：yarn global add parcel
• 获得网页地址：parcel HTML文件路径

HTTP协议与file协议

• 通过文件路径打开网页，遵循的是file协议；通过链接打开网页，遵循的是HTTP协议。
• file协议中，根目录是本地硬盘的根目录。在HTTP协议中，根目录是项目的目录。
• 如果通过file协议打开网页，可能会导致文件位置识别错误，从而产生BUG。因此强烈不推荐使用通过本地HTML文件来打开网址。

<input type="submit">和<button type="submit">的区别

• input为单标签，中无法在添加元素。
• button为双标签，中可以添加任何元素，如<strong>、<img>等。
• 注：button.type默认值为submit，如果不为submit则无法用于提交表单。

可替换元素

• 呈现效果不是由CSS来控制的元素，他们的外观渲染是独立于CSS的，如<img>、<iframe>、<video>等。

方方の敦敦教诲

• 其一：永远不要用HTML文件直接打开网页。
• 其二：永远不要让img变形。