Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h3>3/27學習紀錄</h3>

<h4>0.1 基本介紹</h4>
<ul>網頁的便當盒結構<ul>
<li>架 構:伺服器用於運行;Git用於版本維護</li>
<li>資料庫:儲存資料,ex:MySQL</li>
<li>邏 輯:運行邏輯,ex:Ruby Rails</li>
<li>前 端:畫面外觀,ex:Html,CSS,Javascript</li>
  </ul></ul>
<h4>0.2 開發工具</h4>
<ul>整合開發工具(IDE):較完整的開發環境</ul>
<ul><l>文字編輯器:功能較單純</ul>
<h4>0.3 網站是怎麼運作的</h4>
<ol>域名(DNS):從一級(tw)→二級(com)→三級(president)→...→IP地址(xxx.xx.x.x)</ol>
<ul>網頁型態
<ul>靜態網頁:單純一張html</ul>
<ul>動態網頁:結合資料庫等等</ul>
</ul>
<ol>通訊協定
  <ol>http :一般通訊協定,比較危險,資訊可輕易被截取</ol>
  <ol>https:加密通訊協定,比較安全,常用於金融網站</ol>
</ol>
<ol>cmd→nslookup(或ping)查詢網站IP位址
  <ol>網址得出未經授權的回答(看不懂解釋)</ol>
</ol>
<h4>0.4.1 Html</h4>
<ol>前端要員有三
<ol>1. Html是網頁的骨架</ol>
<ol>2. CSS是網頁的皮膚</ol>
<ol>3. Javascript是網頁的動作</ol>
</ol>
<ol>HTML(超文本標記語言)
<ol>瀏覽器閱讀HTML檔案渲染出人眼看到的網頁</ol>
</ol>
<h4>0.4.2 Html標籤(tag)</h4>
<ul>一些規則<ul>
<li>不分大小寫</li>
<li>巢狀標籤(nested tag)=前面一個<>後面一個</>為一組,中間可以再放標籤</li>
<li>帶有屬性(property)與(值value)</li>
  <li>單引號'雙引號"都可以,要成對使用</li>
<li><input type="text" id="name" placeholder="要放的字"><br><input type="text" id="test" placeholder="要放的字">
</li>
  <li><a href="網址">我的網址</a>
    <br><a href="www.eddi.lionfree.net">我的網站</a></li>
</ul>
</ul>

<ul>排序的語法<ul>
<li><ul>順序:有段落,有縮排</li>
<li><ol>無序:有段落,有縮排</li>
<li><li>列表:無段落,無分級</li>
</ul></ul>
<br>.li包li
  <li>測試
<li>測試</li>
<li>測試</li>
<li>測試</li>
  </li>
<br>.ol包ol
<ol>測試
<ol>測試</ol>
<ol>測試</ol>
<ol>測試</ol>
</ol>
<br>.ul包ul
<ul>測試
<ul>測試</ul>
<ul>測試</ul>
<ul>測試</ul>
</ul>
  <br>ul包li
  <ul>測試
   <li>測試</li>
   <li>測試</li>
   <li>測試</li>
</ul>
<br>ol包li
  <ol>測試
  <li>測試</li>
  <li>測試</li>
  <li>測試</li>
</ol>
<br>li包ol
  <li>測試
  <ol>測試</ol>
  <ol>測試</ol>
  <ol>測試</ol>
</li>
<br>li包ul
  <li>測試
  <ul>測試</ul>
  <ul>測試</ul>
  <ul>測試</ul>
</li>
4階層純li
<li>a
  <li>b
    <li>c
      <li>d</li>
    </li>
  </li>
</li>


4階層純ol
<ol>a
  <ol>b
    <ol>c
      <ol>d</ol>
    </ol>
  </ol>
</ol>
4階層純ul
<ul>a
  <ul>b
    <ul>c
      <ul>d</ul>
    </ul>
  </ul>
</ul>
4階層ol包li包ol包li
<ol>a
  <li>b
    <ol>c
      <li>d</li>
    </ol>
  </li>
</ol>
4階層ul包li包ul包li
<ul>a
  <li>b
    <ul>c
      <li>d</li>
    </ul>
  </li>
</ul>
4階層li包ol包li包ol
<li>a
  <ol>b
    <li>c
      <ol>d</ol>
    </li>
  </ol>
</li>
<h4>0.4.3字體</h4>
<p>
  lorem ipsum 亂數假文<br>
  <ul>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni aut <em>asperiores</em> quam nemo culpa impedit quibusdam autem modi voluptatem! <p>Animi, corrupti? Illum at, officia inventore iste ipsa iure molestias! Perspiciatis!</p>
</ul>
</p>
<ul>關於寫文章的語法<ul>
  <li><br>:換行,可單獨使用<br><br>測試</li>
  <li><p>:段落,換行效果<br><p>測試</p></li>
  <li><b>:粗體效果<br><b>測試</b></li>
  <li><strong>:因加重而使用粗體效果,屬語意化標籤<br><strong>測試</strong></li>
  <li><i>:斜體效果
  <br><i>測試</i></li>
  <li><em>:因強調而使用斜體效果,屬語意化標籤<br><em>測試</em></li>
  </ul>
</ul>
<ul>為何使用語意化標籤?
<ul>除了呈現畫面效果外,對於電腦來說有額外的意思bonus,除了可友善視障者的瀏覽體驗外,可增加搜尋引擎(SEO)權重。應由CSS控制畫面效果。</ul></ul>

<h4>0.4.4 註解</h4>
<ul>
  <ul>
<!---寫註解益於程式碼區塊的理解或可暫時關掉一些區塊--->
<!--練習寫註解--->
</ul></ul>
<b4>0.4.5 多媒體</b4>
<ul>圖片
  <ul>
    <li>標籤:<img src="路徑" alt="替代文字" width="寬度" height="高度"></li><br>
    <img src="https://www.articlelike.com/manage/0/product/43658/43658_0.jpg" alt="早上好" width="200px" height="200px"><img src="https://www.articleke.com/manage/0/product/43658/43658_0.jpg" alt="早上好" width="200px" height="200px">
    <li>雖然html標籤不分大小寫,但檔案路徑可能因為瀏覽器設定不同而有大小寫的區分</li>
    <li>絕對路徑:長長一條</li>
    <li>相對路徑:短短一條<ul>
      <li>./=表示同層資料夾</li>
    <li>../=表示上層</li>
    <li>/下層資料夾=表示下層資料夾</li>
    <li>依此類推...</li></ul></li>
    <li>早期的網頁的確很喜歡放音樂檔,flash,影片...等等,但想想都是時代的眼淚了,不免感傷一陣</li>
    <li>播放mp3<br><audio controls><source src="路徑" type="audio/mp3"><a href="路徑">無法播放時供下載</a><br><audio controls><source src="http://taira-komori.jpn.org/sound_os/cookingeating01/pouring1.mp3" type="audio/mp3"><a href="http://taira-komori.jpn.org/sound_os/cookingeating01/pouring1.mp3">下載</a></audio></li>
    <li>播放影片<br><video controls><source src="http://xx.com/aaaaa.mp4" type/mp4></video></li>
   
  </ul>
</ul>


<br>
<h3>其他東東</h3>
<a href="https://dotblogs.com.tw/im_sqz777/2017/07/26/220713">介紹絕對路徑與相對路徑</a>
<br>
<a href="
https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation
">調整列表縮排</a>


<p>
		<!---兔子(h1)
1. 兔子的習性(5項)(第三項加粗)
2. 養兔應注意事項 (3項)(第3項斜體)

白兔子(h2) 介紹
(圖)(影片)(網站連結)
---中間註解放一段廢話----
黑兔子(h2)介紹
(圖)(影片)(網站連結)--->

<h1>兔子</h1>
<ol>
  <li>兔子的習性
    <ol>
      <li>很笨</li>
      <li>很兇</li>
      <li><strong>喜歡咬主人</strong></li>
      <li>便便很臭</li>
      <li>很容易因為某個原因死亡</li>
    </ol>
  </li>
  <li>養兔注意事項
    <ol>
      <li>要採買蔬果烘乾機</li>
      <li>用烘乾機可以把水分減少</li>
      <li><em>兔子不宜攝取太多水分</em></li>
    </ol>
  </li>
</ol>
<h2>白兔子</h2>介紹<br>
<img src="https://www.toomuchtimeonmyhands.co.uk/img/rabbits/1-450-s.jpg" alt="白兔子照片" width="200" height="200">	

		<br><audio controls><source src="http://taira-komori.jpn.org/sound_os/cookingeating01/pouring1.mp3" type/mp3><a href="http://taira-komori.jpn.org/sound_os/cookingeating01/pouring1.mp3">下載</a></audio><br>
<a href="http://eddi.lionfree.net/">白兔子的網站</a>
		<!----其實是我自己的網站---->
<h2>黑兔子</h2>介紹<br>
		<img src="https://upload.wikimedia.org/wikipedia/zh/thumb/a/a8/PlayboyLogo.svg/225px-PlayboyLogo.svg.png" width="200" height="200"><br>
		<video controls><source src="www.xxx.tw/video.mp4" type/mp4><a href="www.xxx.te/video.mp4">生猛</a></video>
		<br><a href="https://zh.wikipedia.org/wiki/%E8%8A%B1%E8%8A%B1%E5%85%AC%E5%AD%90">黑兔子的家</a>
		<p>
		
              
            
!

CSS

              
                body {
  background-color: #A3D5D0;
}

              
            
!

JS

              
                document.getElementsByTagName("h1")[0].style.fontSize = "80px";
              
            
!
999px

Console