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   規定滑動步長，本例中能取得值就只有一、四、七、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;