html初體驗#2

BreezingSummer發表於2018-03-18
HTML

碎碎念

  • 關於佈局

    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;

相關文章