1. a 标签的用法

属性

• href(超链接)

网址: //google.com

路径: /a/b/c以及a/b/c ; index.html以及./index.html

伪协议: javascript:代码 ; mailto:邮箱 ; tel:手机

id: href=#xxx

• target(指定页面打开)

内置名字: _blank ; _top ; _parent ; _self

程序员命名: window的name ; iframe的name

• download(下载页面)
• rel=noopener

2.table标签(表格)

相关的标签

• table
• thead
• tbody
• tfoot
• tr (table row的缩写,表行)
• td
• th
• tr+th (表头)
• tr+td (表内容)

<table>
      <thead>
        <tr>
          <th></th>
          <th>小红</th>
          <th>小明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>数学</th>
          <td>90</td>
          <td>88</td>
        </tr>
           <tr>
          <th>语文</th>
          <td>81</td>
          <td>90</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>总分</th>
          <td>171</td>
          <td>178</td>
        </tr>
      </tfoot>
    </table>

	小红	小明
数学	90	88
语文	81	90
总分	171	178

相关的样式

• table-layout (auto/fixed)
• border-collapse (控制表格不分开,collapse/separate)
• border-spacing (边框间隔,0px)

3.img标签(图片)

作用: 发出get请求,展示一张图片

属性: alt / height / width / src

<img src = 'dog.png' alt = "一只狗子">

事件: onload / onerror

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

响应式:max-width:100%

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

4.form标签(表单)

作用:发get或post请求,然后刷新页面

属性: action / autocomplete(自动补全,on/off) / method(请求方式) / target

事件:onsubmit

必须type="submit"

5.input标签

作用:让用户输入内容

属性

类型type: button / checkbox / email / file / hidden / number / password / radio / search / submit / tel / text

其他: name / autofocus / checked / disabled / maxlength / pattern / value / placeholder

• text 输入文本
• password 输入密码
• radio 单选
  • 怎么样实现两个radio类型的Input二选一
  • 让这两个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="">rap
<input type="checkbox" name="hobby" id="">篮球

唱 跳 rap 篮球

• file 上传文件
  • 上传一个文件：<input type="file">
  • 上传多个文件<input type="file" multiple>

事件: onchang(输入改变) / onfocus(鼠标点击) / onblur(鼠标出来)

Input里的submit和button里的submit有什么区别？

Input标签里不能再有其他的标签,只能纯文本

button标签里可以有其他的标签

<form action="/yyy" method="POST" autocomplete="on" target="a">
      <input name="username" type="text" />
      <button type="submit"><strong>gaoqian</strong></button>
      <input type="submit" value="想要的文字" />
    </form>

注意:1. form里提交必须有type = "submit" ; 2. required自带验证,必须传

6.其他输入标签

• textarea 文本区元素
  • 需要文本框不能自由拖动，固定大小

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

• select+option 选择菜单

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

• label 元素的说明

<label for="cheese">Do you like cheese?</label>

注意事项

1. 一般不监听Input的click
2. form里的Input要有Name
3. form里必须有一个type=submit的input或者button才能出发submit事件