阿里矢量图标项目引入、表单元素（单选框、复选框、select标签、extarea标签、提交按钮）

阿里矢量图标项目引入

1.选完图标后点击购物车
2.选择添加至项目，点击加号按钮，新建项目，输入项目名称，点击确定
3.第一次新建项目之后，点击暂无代码，点此生成，此时在线链接就生成了
4.点击复制代码，用link标签引入，记住把协议 补全
5.跟下载代码引入图标一样了就
​
 <!-- 用link标签引入在线的css文件代码 ,记住要把协议补全，在代码前加上https:-->
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_3451487_klksa3ywk9f.css">
​
​
<!-- 注意：项目引入的时候， Unicode和Font class 引入的时候，要复制Font class里的css代码 //at.alicdn.com/t/font_3451487_klksa3ywk9f.css-->
​
​
  <!-- 记得写公共类名 iconfont-->
  <!-- Unicode -->
  <span class="iconfont">&#xe623;</span>
  <span class="iconfont">&#xe642;</span>
  
  <!-- Font class  -->
  <span class="iconfont icon-yingtao"></span>
  <span class="iconfont icon-caomei"></span>
​
​
  <!-- 1.用script标签引入js文件，记得补全协议https: -->
  <script src="https://at.alicdn.com/t/font_3451487_klksa3ywk9f.js"></script>
​
 <!-- 挑选相应图标并获取类名，应用于页面：-->
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-yingtao"></use>
  </svg>
​
​
项目引入---添加新的图标
1.选择添加的项目，点击确定
2.更新在线链接
3.把之钱的在线链接换成最新的在线链接，否则新添加的图标显示不出来
​
​
  <!-- 原来的在线css链接 -->
  <!-- <link rel="stylesheet" href="https://at.alicdn.com/t/font_3451487_klksa3ywk9f.css"> -->
​
  <!-- 最新的在线css链接 -->
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_3451487_aw1rdl2xxeh.css">
​
​
​
 <!-- 原来的在线js链接 -->
  <!-- <script src="https://at.alicdn.com/t/font_3451487_klksa3ywk9f.js"></script> -->
​
  <!-- 最新的在线js链接 -->
  <script src="https://at.alicdn.com/t/font_3451487_aw1rdl2xxeh.js"></script>

表单

1、单选框

单选框 只能选一个 type=radio
需要加name属性，而且name属性值必须一直，就可以实现真正意义上的单选，即选男不能选女，选女不能选男
​
性别：
<input type="radio" name="sex">男
<input type="radio" name="sex">女
 行内块标签
​
默认选中，checked
写在input标签中
​
  <input type="radio" name="sex" checked>男
​
  婚姻状况：
  <!-- 默认选中未婚 -->
  <input type="radio" name="sex1" checked>未婚
  <input type="radio" name="sex1">离婚
  <input type="radio" name="sex1">丧偶

2、复选框

多选框 可以选择多个 type=checkbox
​
    默认选中，checked
    写在input标签中
 行内块标签
​
  爱好：
  <input type="checkbox">吃饭
  <input type="checkbox">敲代码
  <input type="checkbox" checked>睡觉
  <input type="checkbox" checked>打豆豆

3、select标签

下拉列表
  value：代表列表项的值
  行内块标签
​
  默认展示第一项
​
  selected:默认选中
   <select>
     列表项
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="广州">广州</option>
    <option value="曹县">曹县</option>
​
  </select>
​
​
  <!-- 默认选中曹县 -->
  <select>
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="广州">广州</option>
    <option value="曹县" selected>曹县</option>
  </select>
​

4、textarea标签

  文本域
​
    写多行文字
    或
    留言
  
    可以给文本域设置宽高改变大小
    当文字的内容超过了文本域的大小会出现滚动条
 行内块标签
      禁止拉拽 
      resize: none;
<textarea></textarea>
​
​
/* 设置大小 */
    textarea {
      width: 200px;
      height: 200px;
​
    }
​
    .box {
      /* 禁止拉拽 */
      resize: none;
    }
​
​
      /* 居中  先转成块级标签 */
      display: block;
      margin: 30px auto;

5、提交按钮

提交按钮
  type:submit
  具有提交功能
  默认文字:提交
  通过value属性改里面的内容
​
  把信息提交给后台
​
行内块标签
​
  <input type="submit">
  <input type="submit" value="登录">