工具

安装http-server yarn global add http-server
运行http-server http-server -c -1

最常用标签

最常用到的，几乎只要写html就要用到的，div、span、a、ul、li、form、input、lable、img
其他标签，h1、h2、h3、h4、h5、h6、<br/>、table、tr、td、th、thead、tbody等

a标签

a标签最常用的属性有href,target
href属性取值有：

baidu.com
baidu.com
//baidu.com
/a/b/c http中的根目录指的就是本文件夹下的
./html
javascript伪协议 a=href"javascript:;" 点击过后什么也不做
href="#id" 跳转到对应id，实现页面内部跳转
mailto:邮箱
tel: 手机号 target属性取值有
_blank,在空白页面打开
_self 在当前页面打开
_top 在最顶层页面打开
_parent 在当前页面的上一级打开

table标签

<!-- table-layout，auto 按内容分配宽度，fixed 尽量平均 -->
<style>
  table {
    width: 800px;
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0px;
  }
  td,
  th {
    border: 1px solid red;
  }
</style>
<table>
  <thead>
    <tr>
      <th></th>
      <th>语文</th>
      <th>数学</th>
      <th>英语</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>张三什么时候出现</th>
      <td>34</td>
      <td>66</td>
      <td>88</td>
    </tr>
    <tr>
      <th>李四</th>
      <td>76</td>
      <td>66999999</td>
      <td>99</td>
    </tr>
    <tr>
      <th>王五</th>
      <td>66</td>
      <td>87</td>
      <td>76</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>平均分</th>
      <td>77</td>
      <td>81</td>
      <td>56</td>
    </tr>
  </tfoot>
</table>

img标签

作用是发出get请求展示一张图片
属性有 src alt height width 事件有 onload onerror

<img id="tt" src="flowewr.jpg" alt="图片加载错误提示文案" /><br />
<img src="http://dabaoku.com/sucai/zhiwulei/hehua/hehua_046.jpg" alt="" />
<script>
  tt.onerror = function () {
    tt.src = "error.png";
  };
</script>

设置图片的最大宽度

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

form表单标签

作用是发出get或者post请求刷新页面
值得注意的是，form标签必须有type=submit的提交标签，input标签一定要有name属性，另外button标签默认type=submit

<!-- action 请求地址 -->
<!-- method 请求方式 -->
<!-- autocomplete 表单自动填充开启 -->
<!-- target 提交到哪个页面 -->
<!-- form标签必须有type=submit的提交标签，同样是表单提交标签，input submit 标签不能嵌套子标签，button 标签可以嵌套子标签 -->
<!-- required 是自带的验证器 -->
<form action="/xxx" method="post" autocomplete="on" target="_blank">
  <input name="account" type="text" required />
  <input type="button" value="确认" />
  <button type="submit"><strong>确认</strong></button>
</form>

input标签的不同类型,type=text等

<input id="username" type="text" />
<input type="submit" />
<!-- 文本框，在输入过后才能提交 -->
<input type="text" required />
<input type="color" />
<!-- 密码，不显示输入内容 -->
<input type="password" />
<!-- 单选按钮 ，用相同名称控制只能选一个-->
<input name="gender" type="radio" />男
<input name="gender" type="radio" />女
<!-- 复选框 -->
<input type="checkbox" name="hobby" />唱
<input type="checkbox" name="hobby" />跳
<input type="checkbox" name="hobby" />rap
<!-- 上传文件，多个文件加multiple -->
<input type="file" multiple />

input标签的事件

onchange
onfocus ，获取焦点
onblur ，失去焦点

textarea标签，多行文本

<!-- resize: none 标识不允许改变大小-->
<textarea
  style="resize: none; width: 50; height: 300px"
  name="tt"
  id="xx"
  cols="30"
  rows="10"
></textarea>

select+option标签，下拉选项框

<select name="week" id="ww">
  <option value="1">周一</option>
  <option value="2">周二</option>
</select>

HTML常用标签

工具