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;
    原文作者:BreezingSummer
    原文地址: https://segmentfault.com/a/1190000013810191
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞