重点标签

a

属性：

href 链接
target:指定在哪个窗口打开链接 target="_blank": 新标签页打开
download：
rel=noopener

作用

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

a的href取值

网址：

baidu.com (https)
baidu.com ( http)
//google.com () a-href.html --->继承a的//google.com---->www.google.com ----> www.google.com

路径：

/a/b/c 以及a/b/c
index.html 以及./index.html

伪协议:

<a href="javascript:xxx;"></a> // xxx是可以执行的js代码,现在用来做点击之后，没有动作的a标签。
<a href='#xxx'></a> //跳转到id=xxx的标签
<a href='mailto:wtj123@123.com'>发邮件</a>
<a href='tel:13839992345'>可以随时打电话</a>

ps: 打开html文件的方式：进入文件夹，cmd输入http-server,使用http-server打开，或者，parcel： parcel index.html

a的target属性

<a href='https://google.com' target="_blank">google</a> //在新标签页打开
<a href='https://google.com' target="_self ">google</a> //多窗口（iframe）的话，在本窗口打开
<a href='https://google.com' target="_top">google</a> //多窗口（iframe）在top窗口（最上面的）打开
<a href='https://google.com' target="_parent">google</a> //多窗口（iframe）在父 窗口打开
<a href='https://google.com' target="XXX">google</a> //target=XXX 创建一个窗口，叫XXX （name=xxx），并且href新开的链接都在这个xxx打开

iframe

内嵌窗口

table

thead, tbody, tfoot
(两行两列)

<table> 
<tr> 
<td></td> 
<td></td> 
</tr> 
<tr> 
<td></td> 
<td></td> 
</tr> 
</teble>

和一样,也是需要嵌套在当中的,嵌套在当中

...

用于定义一个表格开始和结束 ... 定义表头单元格。表格中的文字将以粗体显示，在表格中也可以不用此标签，标签必须放在标签内 ... 定义一行标签，一组行标签内可以建立多组由或标签所定义的单元格 ... 定义单元格标签，一组标签将将建立一个单元格，标签必须放在标签内

<table>
      <thead>
        <tr>
          <th></th>
          <th>小红</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>数学</th>
          <td>12</th>
        </tr>
        <tr>
          <th>语文</th>
          <td>92</th>
        </tr>
        <tr>
          <th>语文</th>
          <td>92</th>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>综合</th>
          <td>190</td>
        </tr>
      </tfoot>
    </table>
    
    thead tbody tfoot 顺序变了，显示顺序不变

相关样式

table-layout:auto,fixed  
 border-spacing： 0 //border之间的距离 
 border-collapse：collapse //border合并

img标签

<img src='XXX.png' alt=''>

作用
发出get请求，展示一张照片
属性
alt:如果加载失败，显示的内容
height：只写高度，宽度自适应
width：只写宽度，高度自适应（宽高同时设置，会事图片变形）
src：图片地址
事件
onload:图片加载成功的回调： onerror：图片加载失败的回调

//xxx 是src的id
xxx.onload=function(){
    console.log('success')
}
xxx.onerror= function(){
    console.log('error')
    xxx.src='./404.png'  //当图片加载失败时的补救方法
}

响应式

* {
    margin:0;
    padding:0;
    border-size:border-box
}
img{
    max-width:100%
}

可替换元素 :面试会问

form标签

作用
发get 或者post请求，然后刷新页面
属性 action控制哪个请求路径
method控制post还是get
autocomplete="on":自动填充页面（建议一些用户名）
target:在哪个页面开请求刷新 *事件
type:submit ,提交 onsubmit

<input type='submit'></input>
<button type='submit'> <strong>提交</strong></button>
//区别
input 里不支持其他标签，只能有纯文本
button里可以有其他标签,任何东西
一个form里必须要有一个type= submit

input标签

type:
text(文本)
color(颜色)
password（密码）
radio（单选）：两个radio用同一个name表示单选
checkbox（多选）：拥有同一个name表示一组
file（文件），多个文件 multiple
hidden（看不见的input）

<body>
    <textarea style="resize:none"></textarea>
    <select>
        <option value="1"></option>
    </select>
</body>

textarea:style="resize:none"
select :选择
事件：
onchange：所有的 input 标签都有的事件，当 input 标签改变的时候所触发的事件
onfocus：当用户把鼠标集中在该标签上面的时候所触发的事件
onblur：当鼠标移出去时触发的事件
验证器： html5新功能 required
注意事项：
1）一般不监听input的click事件
2） form里面的input要有name
3） form里要放一个type=submit才能出发submit事件

其他标签

video,audio,canvas,svg