分類彙整:HTML

div與span

DIV tag

  • 用來分隔的標籤,幾乎沒有任何預設樣式
  • 預設:display: block
<p>這是一段内文,我想要用分隔標籤特化<div>這段文字</div>並且利用div標籤。</p>
div{
font-style: italic;
}

Display
這是一段内文,我想要用分隔標籤特化

這段文字
並且利用div標籤。

SPAN tag

  • 用來分隔的標籤,幾乎沒有任何預設樣式
  • 預設:display: inline
  • 適合内文
<p>這是一段内文,我想要用分隔標籤特化<span>這段文字</span>並且利用span標籤。 </p>
div{
 font-style: italic;
}

Display
這是一段内文,我想要用分隔標籤特化這段文字並且利用span標籤。

HTML&CSS

HTML/CSS tag Meaning
id #
class .
target=”_blank” 彈出新視窗<a内部屬性>
内部超連結 用id,<ahref=”idtext”>
z-index:1 最下方
span class
div id
overflow-y=auto 有滾輪
overflow-x=hidden 無滾輪
float/clear
1rem 16px
1em 20px
display: flex 子項目平行
flex-wrap: wrap 不超出視窗大小
justify content:center 子項目置中
<hr> 底線,水平線
<span> 不換行
border: 樣式 粗細 顏色 框線
* CSS 選擇全部的元素

sublime快速鍵

sublime快速鍵
Ctrl+Click 同時編輯
選取+Ctrl+D 同時選取下一個相同的字
選取一坨+TAB 整陀往右跳
選取一坨+Ctrl+[ 整陀往左跳
Ctrl+L 選取一行程式碼
選取+Ctrl+/ 變成註解
Shift+↓ 往下選取
打標籤字+TAB 自動生出完整標籤
div.static + tab鍵 <div class=”static”></div>
Ctrl + F
再按Ctrl + G
搜尋目標字,找到後再找下一個
Ctrl + F
再按Ctrl + Shift + G
搜尋目標字,找到後再找上一個