在预览自己写的页面时，为了减少BUG，不要用双击打开链接的方式开启页面，
用以下方式打开：

安装 http-server
- 用命令行http-server -c-1. 通过ctrl+点击链接打开
- 并在开启的地址后加上文件名
安装 parcel
- 命令行 parcel 文件名打开

a标签

a标签的属性

1.href(hyper ref)的取值

网址
- https://google.com
- http://google.com
- //google.com (无协议网址)，浏览页面时，需先在浏览器打开开发者工具->Network->preserve log 勾选，这种方法会自动选择适用http还是https，防止bug
路径
- 绝对路径 /a/b/c
- 相对路径 a/b/c 用http开启服务，在哪里开启，哪里就是根目录
- index.html和./index.html 在当前目录下找文件
伪协议
- javascript:代码;
  - 用途
  1. javascript:;空的伪协议，点击之后什么事都不会发生，不刷新也不会返回顶部
  2. 执行一段没有意义的JS代码
- mailto:邮箱
  - 发送邮件给指定邮箱
- tel：手机号
  - 打电话给指定号码
id
- href=#xxx 跳转到指定标签

2.target的取值

内置名字
- _blank 新的页面打开
- _self 默认值，当前页面打开
- _top 当引用iframe(内嵌窗口)时，不在内嵌窗口打开，而是在最顶部窗口打开
- _parent 当引用多个iframe时，点击链接会在该链接所在窗口的父级窗口打开
  - PS.不是所有网页都支持iframe
程序员命名
- window的命名
  - 一个页面同时有多个链接时，给这些标签同时添加属性target="xxx"
  - 点击这些链接时，都会在同一个窗口打开
- iframe的命名
  - <iframe src="" name="xxx"></iframe>
  - 对应上面的``target="xxx"`,便可点击上面链接时，在内嵌窗口打开

3.其他

a的download
- 作用：不是打开页面，而是下载页面
- 问题：不是所有浏览器都支持，尤其是手机浏览器可能不支持
rel=noopener
- 作用：防止BUG

a标签的作用

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

table标签

相关标签

thead
- th(table head)表头
- tr(table row) 一行
tbody
- tr
- td(table data) 数据
tfoot
- tr
- td 以上三个标签的位置顺序可以随意，html会自动更改

简单示例

<table>
        <thead>
          <tr>
             <th>英语</th>
             <th>翻译</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>frame</td>
            <td>边框</td>
          </tr>
          <tr>
            <td>canvas</td>
            <td>画布</td>
          </tr>
          <tr>
            <td>reference</td>
            <td>引用</td>
          </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>空</td>
                <td>空</td>
              </tr>  
        </tfoot>
      </table>

实现如下效果

简单table.png

两个表头

<table>
        <thead>
            <tr>
                <th></th>
                <th>王小明</th>
                <th>小红</th>
                <th>小刚</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>数</th>
                <td>61</td>
                <td>91</td>
                <td>85</td>
            </tr>
            <tr>
                <th>语</th>
                <td>79</td>
                <td>82</td>
                <td>92</td>
            </tr>
            <tr>
                <th>英</th>
                <td>100</td>
                <td>97</td>
                <td>87</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总分</th>
                <td>240</td>
                <td>270</td>
                <td>264</td>
            </tr>
        </tfoot>
    </table>

表头用<th>表示，数据用<td>表示效果如下：

两表头.png

img标签

作用

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

属性

src 图片地址
alt 图片加载失败时，会显示出alt里添加的内容以备用
height 只写高度，宽度会自适应
width 只写宽度，高度会自适应
- 如果两者都写图片尺寸可以自定义，但图片会变形，所以一般写其一即可

事件

onload JS监听加载成功
onerror JS监听加载失败

例子(测试时使用)

<img src="picture.jpg" alt="">
<script>
  xxx.onload=function(){
    console.log("加载成功")
  };
  xxx.onerror=function(){
    console.log("加载失败")
    xxx.src="Alternate-picture.jpg";
  };
</script>

可以在控制台查看加载成功还是失败，当失败时，会通过xxx.src="Alternate-picture.jpg";加载出一张备用图片

响应式

max-width:100% 自适应不同屏幕大小

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  img {
      max-width: 100%;
  }

form标签

作用

发get或post请求，然后刷新页面

属性

action 控制请求哪个页面
method 控制请求方式用get还是POST
target 与a标签用法类似
autocomplete 自动填充
- <input name="username" type="text">在input里加上username之后
- <form action="/xxx" autocomplete="on">
- 会根据用户之前填写过的内容给出提示
- autocomplete="off" 则不会

Input的submit和button的submit区别

input 里面不能含其他标签
button 里面可以包含其他标签

<form action="/xxx" autocomplete="on">
<input name="username" type="text">
<input type="submit" value="这是input">
<button type="submit">
    <strong>这是button</strong>
</button>

效果如图：

input标签

作用

让用户输入内容

常用属性

text 输入文本
color 选择颜色
password 输入密码
radio 单选
- 二选一：给两个input相同的name,例：

<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女

checkbox 复选
- 也需给相同的name

<input type="checkbox" name="hobby" id="">琴
<input type="checkbox" name="hobby" id="">棋
<input type="checkbox" name="hobby" id="">书
<input type="checkbox" name="hobby" id="">画

hidden 隐藏
- 给JS自动填充一些id,字符串用的
file 上传文件
- <input type="file"> 上传一个文件
- <input type="file" multiple> 上传多个文件

事件

onchange 用户输入改变触发
onfocus 把鼠标集中在标签上面时触发
onblur 把鼠标从标签上移开时触发

验证器

HTML5新增功能
- <input type="text" required>
- 用户必须填写该栏内容，才能提交

其他标签

select+option 选择

<select name="week" id="">
    <option value="">- 请选择 -</option>
    <option value="1">星期一</option>
    <option value="2">星期二</option>
    <option value="3">星期三</option>
</select>

效果如图

选择.png

textarea 多行文本输入
- 默认可拖动文本框大小，可用CSS固定大小

<textarea style="resize:none; width:50%; height:300px;"></textarea>

注意事项

一般不监听input的click事件
form里面的input要有name
form里面要放一个含有type=submit属性的标签，才能触发submit事件

HTML常用标签

a标签