HTML 标签重难点

`<a>` 链接标签

作用：

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

属性：

href：规定超链接指向的网址
target ：在哪个窗口打开链接
download：表明当前链接用于下载。
rel = "noopener" ：目前理解不了，学了JS再回答

【注】a 的 download

作用：不是打开页面，而是下载页面。
问题：不是所有浏览器都支持，尤其是手机浏览器可能不支持

href 属性

网址

<a href="https://goole.com">跳转到谷歌</a>
<a href="http://goole.com">跳转到谷歌</a>
<a href="//goole.com">跳转到谷歌（无协议网址）</a>

WEB解惑-URL双斜杠开头

路径

/a/b/c 以及 a/b/c

【注】如果我们开了HTML服务，那么它的根目录就不是硬盘的根目录，而是你在哪里开启了服务，哪里就是根目录。

这也是为何强调不要双击文件打开HTML的原因，双击打开绝对路径容易出错。

index.html 以及 ./index.html 在当前目录打开index.html页面。

<a href="/a/page.html">跳转到根目录下的 a 目录中的 page.html</a>
<a href="a/page.html">跳转到当前目录下的 a 目录中的 page.html</a>
<a href="index.html">跳转到当前目录中的 index.html</a>
<a href="./index.html">跳转到当前目录中的 index.html</a>

<a href="#xxx">跳转到id为xxx的元素处</a>

【注】href+id的作用就是跳转到指定的一个标签。

伪协议

javascript:代码;

<a href="javascript:alert('JS!')">JavaScript伪协议</a>
<a href="javascript:;">点击后什么也不做</a>

【注】如果想做一个 a 标签，又想它不做任何操作就写javascript:；

mailto ：邮箱

<a href="mailto:xxx@163.com">发邮件</a>

tel ：手机号

<a href="tel:136xxxx8888">直接拨号</a>

target 属性

内置属性值

_blank
_top
_parent
_self

<a href="//google.com" target="_blank">在新的窗口中打开</a>
<a href="//google.com" target="_top">在当前顶层窗口中打开</a>
<a href="//google.com" target="_parent">在上层窗口中打开</a>
<a href="//google.com" target="_self">在当前窗口中打开（默认值）</a>

程序员命名

window 的name
iframe 的 name

<a href="//google.com" target="window-xxx">在新的窗口中打开</a>
<a href="//google.com" target="iframe-xxx">在新的iframe中打开</a>

iframe 标签（内嵌窗口）

`<table>` 表格标签

相关的标签

table 表格（table标签里只能有3个标签）
thead 表头
tbody 表内容
tfoot 表尾
tr （table row）表行
td （table data）表数据
th （table head）表头

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>英语</th>
      <th>数学</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>小王</th>
      <td>90</td>
      <td>86</td>
    </tr>
    <tr>
      <th>小李</th>
      <td>82</td>
      <td>88</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>平均分</th>
      <td>82</td>
      <td>95</td>
    </tr>
  </tfoot>
</table>

HTML超强纠错，如果没写tbody、thead、tfood的时候，写的<tr>会直接变成tbody的内容。

相关的样式

table-layout : 记住两个值auto，fixed
border-collapse : 控制border是否合并，默认是不合并，用collapse 让它合并。
border-spacing： 0，控制 border 和border 之间的距离，使距离为0。

`<img>` 图片标签

作用

发出 get 请求，展示一张图片

属性

alt：(alternative)图像的替代文本
src：(source)嵌入图片的文件路径
height ：设置图像高度
width：设置图像宽度

【注】只设置图片宽或高图片会自适应，宽和高同时设置容易导致图片变形。

永远不要让图片变形！！!

事件

onload：在图片加载完成后执行
onerror：在图片加载出错时执行 响应式

max-width : 100% 用于设置手机端宽度满足于屏幕

max-width: 100%

可替换元素

可替换元素

`<form>` 表单标签

作用：发get或post请求，然后刷新页面。

属性

action ：控制请求哪个页面
autocomplete ：是否启用自动完成功能，取值为off（不自动填写）或on（自动填写）
method ：提交数据的 HTTP 方法，值有post和get
target ：规定在何处打开action的URL 事件
onsubmit ：提交表单后触发指定事件

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

input 标签里不能加有内容
button 里可以加任何内容

`<input>` 标签

作用：用户输入数据

属性

type ：button / checkbox / email / file / hidden / number /password / radio / search / submit / tel / text
name ：名称
autofocus ：页面加载时，自动聚焦到该input
checked ：针对checkbox和radio
disabled ：禁用
maxlength ：最大字符数
pattern ：验证格式（是否符合正则表式)value ：指定值
placeholder ：提示信息

事件

onchange ：内容改变时执行
onfocus ：获得聚焦时执行
onblur：失去焦点时执行

验证器（HTML5新特性）

其他输入标签

select+option ：下拉选框
textarea ：段落输入
label ：绑定表单元素

注意事项

—般不监听input的click事件,
form里面的input要有name
form里要放一个type=submit才能触发submit事件

其他标签

video
audio
canvas
svg

部分资料来源：饥人谷

HTML 标签重难点

HTML 标签重难点

<a> 链接标签

href 属性

target 属性

iframe 标签 （内嵌窗口）

<table> 表格标签

<img> 图片标签

<form> 表单标签

<input> 标签

其他输入标签

其他标签

`<a>` 链接标签

iframe 标签（内嵌窗口）

`<table>` 表格标签

`<img>` 图片标签

`<form>` 表单标签

`<input>` 标签