Html5 small note

-


  • 一定要有DOCTYPE宣告。



    • EX: <!doctype html>






  • 記得要宣告編碼，不是所有瀏覽器都會猜到你用的編碼。



    • EX: <meta charset="utf-8">






  •  一個最基本的html網頁





  • 注解 : <!-- ... ... ... ... -->


  •  <Script><Link>現在不需要type="text/javascript"







    • In HTML4

      <script type="text/javascript" src="file.js"></script>

      In HTML5

      <script src="file.js"></script>

      --

      In HTML4

      <link rel="stylesheet" type="text/css" href="file.css">

      In HTML5

      <link rel="stylesheet" href="file.css">








  • <i> 所代表的文字，有"alternate voice" or "mood"。


  • <b>所代表的文字有"stylistically offset"。


  • <em> 所代表的文字有 “stress emphasis”


  • <strong> 所代表的文字有 “strong importance”


  • 一個table









    • 1


      2


      3


      4


      5


      6


      7


      8


      9


      10


      11


      12


      13


      14


      15


      16


      17


      18


      19


      20


      21


      22




      <table>

        <thead>

          <tr>

            <th></th>

            <th></th>

          </tr>

        </thead>

        

        <tbody>

          <tr>

            <td></td>

            <td></td>

          </tr>

        </tbody>

        

        <tfoot>

          <tr>

            <td></td>

            <td></td>

          </tr>

        </tfoot>

      </table>
















  • 網頁的區塊結構(以下皆為區塊元素)






    • <div> #套用樣式。


    • 大綱(以下會輸出大綱)



      • <article>(本文) #定義文章內容或文章區塊


      • <section>(通用區段)


      • <nav>(導覽列)


      • <aside>(側邊欄)


      • 區段根元素(保有自己的大綱，但不會列入其父元素的大綱)



        • <body>


        • <blockquote>


        • <fieldset>


        • <figure>


        • <td>


        • <details>










    • <header>(頁首) #該區塊開始的地方


    • <footer>(頁尾) #該區塊結束的地方






  • 表單<form>的元素



    • <input>(輸入)



      • --屬性--


      • [type=""]



        • text #單行文字方塊


        • password #密碼


        • raido #選擇


        • checkbox #勾選方塊


        • submit #送出按鈕


        • reset #重新輸入按鈕


        • file #提交檔案


        • image #圖片提交按鈕


        • hidden #穩藏欄位


        • button #按鈕


        • --HTML5 新增--(Html5 會自動驗證資料是不是正確，★不支援Html5的瀏覽器將會視為type的預設直text★)


        • email #電子郵件的地址



          • multiple #可以用逗號分隔多個電子郵件






        • url #網址


        • search #搜尋欄位


        • number #數字



          • min #最小值


          • max #最大值


          • step #上小增加的大小，預設是1






        • tel #電話號碼


        • range #指定範圍內的數字(滑桿的樣子)



          • min #最小值，預設是0


          • max #最大值，預設是100


          • step #上小增加的大小，預設是1






        • color #顏色(提供介面選色)


        • date #日期(提供介面選幾月幾號幾年)


        • time #時間(提供介面選幾時幾分)


        • datetime #UTC 世界標準時間 (提供介面選幾月幾日幾年幾時幾分)★2014/09/13我用的googhe chrome不支援這個


        • month #月份(提供介面選幾月幾年)


        • week #一年的地幾週(提供介面選幾週幾年)


        • datetime-local #本地的日期時間(提供介面選幾月幾日幾年幾時幾分)








      • [required] #該欄位必塡










  • 只是名子



    • <address>(聯絡資訊)






  • 有點功能







      • 可以互相包含使對方成為子元素，父元素的<h>標籤會比子元素的<h>標籤大。






    • <time>(日期時間)



      • --屬性--


      • [datetime="YYYY-MM-DD[THH:mm[:SS[.xxx]]]"]  #給機器分辯時間用的


      • [pubdate] #表示這個時間是發布日期












  • IE的麻煩



    • 如果使用如 header, footer, nav ... 等等的元素且又使用style元素來改變其樣式時，尤於IE並沒有這些元素，所以只好用一些小計巧。






    • <script>

        document.createElement("header");

        document.createElement("footer");

        document.createElement("nav");

        .

        .

        .

      </script>












HTML LEARNING





display



CSS treats HTML elements like boxes. A box can be "block" or "inline".



  • Block elements display on a new line (e.g., h1,p, ul, li).


  • Inline elements display on the same line as their neighboring elements (e.g., img, a)




It's possible to change whether a box is block or inline by using the display property.





Bootstrap is a collection of prewritten CSS rules used to build web pages faster. Bootstrap provides styles out of the box for several common components on a web page, such as grid layouts, navigation, showcases, and much more.




The grid



A grid is a useful way to create page layouts. Rather than create layouts from scratch, HTML elements can be aligned to a grid in different ways to create custom layouts.



Bootstrap comes with a grid that is made up of 12 equal-sized columns. HTML elements are arranged to span different numbers of columns in order to create custom page layouts.





Tabs



Tabs are a common navigation technique that give links to different parts of a site. Tabs are seen in sites like Gmail and Codecademy.



Bootstrap makes it easy to create tabbed navigation. Let's see how to do this.





Pills



Pills are a set of buttons that give links to different parts of a site. Pills are seen in sites like Google's search results page.



Bootstrap makes it easy to create pill navigation. Let's see how to do this.





Jumbotron



Many sites have a large showcase area featuring important content. Showcases are seen on sites likeGoogle Mobile and Apple.



Bootstrap calls this large showcase a jumbotron. A jumbotron is used to call extra attention to important content on the site. Let's see how to use it.





JS



var main = function() {



};



$(document).ready(main);

留言

張貼留言

這個網誌中的熱門文章

成人剪舌繫帶聽過嗎？我剪了！！

-
圖片
最近我去開刀，把舌繫帶(舌頭與下顎連結的那一片)切掉了！！ 我的舌頭一直都短短，往外伸出牙齒0.5cm就是極限了， 你能想像不能舔冰淇淋的痛苦嗎？！ 這個問題困擾我26年了，終於決定去掛號，約個時間把它給切了… 星期一的早上，口膣外科就跟以前來拔知齒的時候一樣很多人，等待一個小時的我還是成功見到了牙醫。 「我是要來看舌繫帶的，舌頭伸不出來，有些發音蠻困難的…」 「好，我來看看…」 「你這是小手術，現在就可以做，做嗎？」 「好。」 (！！！！ 居然就要切了嗎？原本想好的預約呢！？) 剛打完麻醉，醫生才想到還沒給我簽同意書，一邊等麻藥生效一邊簽著同意書和聊著為什麼會想要切除舌繫帶，過了些許的時間"小手術"要開始了。 「來嘴巴張開，阿~」 「阿~」 剪剪剪… 「你這個傷口有點大，等等要縫起來不然傷口又會長回去喔。」 「好。」(還要縫！！！，深呼吸，Nimo你可以的) ... 「痛痛痛」(揮手示意) 「可能是麻藥不夠，只剩一點點了，你要補麻藥還是直接做完？」 「做。」(阿阿阿阿阿。感覺我可以爆氣變成賽亞人了) 以下痛苦省略一萬字。 ..... 於是我在上班前終於做完了這個小手術。 復原大約需要一週的時間，其間吃飯就會用到舌頭，很痛。 有拍照但是蠻噁的，就不放上來了XD。 你是否該剪舌繫帶？ 先講結論： 如果你覺的他不影響你的生活，目前這樣也過的很好，那不建議你剪。 如果你還想要提升一下的話，參考下面的優缺點再決定吧！ 優點： 可以捲舌。 發音更容易。 舌頭清菜渣能力up。 唱歌更好聽(誤。 可以添冰淇林了。 嘿嘿嘿嘿嘿。 缺點： 痛一星期。 要重新適應。 一開始講話會怪怪的。 剪舌繫帶注意事項 傷口好了之後要多使用舌頭來習慣它喔！ 舌頭要放到正確的位置(上顎後方，不碰到牙齒)才不會讓變成小爆牙喔！ 剛做完手術不可以吃刺激性的食物喔！ 記得做好麻醉 ;) 剪舌繫帶費用 剪舌繫帶要多少錢？健保有給付喔，只需要掛號費 ，記得跟你的醫生確認一下。 你的留言可以讓文章更完整，更好！ 對了，如果你不知道什麼是舌繫帶，看一下圖片吧！
閱讀完整內容

Scp - ssh 的遠端檔案傳輸指令

-
  官方概要: scp   [-1246BCpqrv ]   [-c   cipher ]   [-F   ssh_config ]   [-i   identity_file ]           [-l   limit ]   [-o   ssh_option ]   [-P   port ]   [-S   program ]           [ [user @ ]host1 : ]file1   [ . . . ]   [ [user @ ]host2 : ]file2 看不懂對嗎？ 沒關系，我們只要會簡單的用法就好！ 1.系統需求： 本地這邊需要安裝     openssh-client 伺服器那邊需要安裝 openssh-server 2.指令： 從本地傳到遠端 : $ scp 要傳的檔案 遠端的帳號@遠端的位置(可以是ip，也可以是網址):遠端要傳檔案的資料夾。 1   $    scp   FileName   "User" @server :server-location /   {enter } EX : 以limiu的使用者身份把當前目錄下的*(所有檔案)傳到203.64.125.XX伺服器中的/home/limiu/資料夾位置 1   $    scp   . / *   "limiu" @203 .64 .125 .XX : /home /limiu /   {enter } PS : 輸入後如果遠端的帳號有密碼會要求您輸入。 User那邊的雙引號可加可不加(如果您的帳號沒有順殊字元的話。   從遠端傳到本地 : $ scp 遠端的帳號@遠端的位置(可以是ip，也可以是網址):遠端要傳的檔案 傳回來的資料夾位置。 1   $    scp   "User" @server :server-location /FileName   local-location /   {enter } EX : 以limiu的使用者身份把203.64.125.XX伺服器中的/home/limiu/這個位置下的*(所有東西)下載到本地端的.(當前目錄) 1 $    scp   "limiu" @203 .64 .125 .XX : /home /limiu / *   . ...
閱讀完整內容

睡覺使你更有效率

-
圖片
markdown # 睡覺使你更有效率 ## 自我對話 我們都知道，所以我有個想法，因為我總是讓自己睡的很少，我想是因為我認為我的時間變少了，我要讓自己知道充足的睡眠->更有效率的做事->更多的時間。 我要讓自己認為睡覺是很重要的，其實我原本就知道睡覺是很重要的，但我還是睡的很少。 我要讓這個想法更具體一點，我覺的睡滿八小時是很重要的，所以我要在`起床前九小時入睡，睡到自然醒即可`，這件事情很重很重要！ ## 助眠的建議 * 低溫 * 規律的起床時間與睡眠時間 * 冥想 * 起床之後馬上接觸太陽光或任何足夠強的光線 5~10 分鐘 * 在睡覺前都做一樣的事情 (儀式)
閱讀完整內容