html初体验#2

碎碎念

• 关于布局

  css布局：横向、纵向
  2019年新进展：css grid

• git bash 上安装 http server

  目的在于不使用 file:// 打开自己写的文件，使用 http:// 打开
  npm i -g http-server    安装 http-server
  http-server -c-1        不带缓存的（-c-1）运行 http-server

• git bash 上卸载 http server

  npm uninstall -g http-server

一些常见标签的基本用法与点

• 弹框用<button>
  跳转页面用<a>

• <iframe>用于在页面嵌套页面（可能导致程序变卡）

  1. <iframe>的常用方法

     <iframe src="" frameborder="" width="" height="" name="xxx">

  2. <iframe>设置name后，然后通过<a>标签的target=xxx，来指定新窗口开启位置

  3. <iframe>的更多属性见：

     https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe

• <a>标签用于指定跳转超链接

  1. <a>标签的常用方法：

     <a href="" target="_blank\_self\_parent\_top" download></a>

  2. 属性target的四种值

     _blank:新窗口
     _self:本页面（可以是iframe页面）
     _parent:父辈页面
     _top:最上层页面

  3. 属性download用来标识该标签<a>是用来下载

  4. 属性href的几种值

     绝对路径
     相对路径
     javascript:;
     javascript:js代码
     #
     #xxx
     ？name=xxx            发送name=xxx请求；

  5. <a>标签href值的具体例子

     <a href="#"></a>          让页面跳到页面顶部，在location.href后面增加#号
     
     <a href="#none"></a>      页面里面有id为none的元素，会执行锚点机制跳转到这个元素上缘
     
     <a href="###"></a>        不跳转，可以阻止默认的跳转行为。但在后端代码中容易识别成注释，慎用
     
     <a href="javascript:"></a>           忘记加分号啦
     
     <a href="javascript:;"></a>          执行JavaScript为协议，这里意思为不执行任何命令
     
     <a href="javascript:void(0)"></a>    忘记加分号啦
     
     <a href="javascript :void(0);"></a>  执行JavaScript为协议，这里意思为不执行任何命令

• <form>标签也用于跳转页面，但必须有按钮（<button>或者<input type="button">）点击才能跳转

  1. 完整样式

     <form action="网址" method="post" target="同<a>标签">
         <input type="text" name="">
         <input type="password" name="">
         <input type="submit" value="提交">
     </form>

  2. input必须写name属性才能被提交。事实上，所有内容都需要写name属性才能被提交

• <input>常用的样式

  1. 复选框

     • 形式

       <label><input type="checkbox" id="xxx" name="" value="爱"></label>

     • 通过添加<label>...</label>标签，这样点击 “爱” 也可勾选复选框
       通过添加name ，使它能被提交，并且提交名为 name
       通过添加value，呈现复选框的选项，并使它提交内容为 value

  2. 单选框

     • 形式

       <label><input type="radio" name="" value=""></label>

     • 通过给多个单选框同样的name，使它变成【真正的】单选框（不添加 name， 多个单选框都能选中）
     • <label>的用处和【复选框】里讲的一样

  3. 滑动条

     • 形式

       <input type="range" name="points" min="1" max="10" step="2" value="3">

     •    min    规定滑动的最小值
          max    规定滑动的最大值
          step   规定滑动步长，本例中能取得值就只有1、4、7、10
          value  规定默认值

     • 去取range的值时，取出来的值是字符串类型，不是数字类型！！！和别的值做操作的时候会有影响！！！

• <select><option>下拉菜单

  <select name="" multiple>
      <option value=""></option>
      <option value="" disabled></option>
      <option value="" selected></option>
  </select>

  multiple   表示能否多选
  disabled   表示该选项不可选
  selected   表示该选项默认选中

• <textarea>多行文字

  <textarea cols="" rows="" name="">

  可以用css控制大小           width:--px;
                             height:--px;
  可以用css控制大小是否可变    resize:none;