標籤彙整:html

【HTML】ruby tag 注音表記

説明

顯示國字的注音(或是日文的假名)

範例

基本用法

  • 文字主體ーrb tag (ruby body)
  • 注音標示ーrt tag (ruby text)
ruby
 rb 木霊 //文字主體
 rt こだま //注音標示

Display

木霊こだま

跨瀏覽器用法

有瀏覽器無法讀取ruby tag時,可以使用以下方法解決

  • rp tag (ruby parentheses)包覆rt tag
ruby
 rb 木霊
 rp (
 rt こだま
 rp )

Display

木霊(こだま)

内部錨點 Internal Link

結構

  1. 製作錨點
  2. 用jQuery做出滑順滑動效果

範例

button
 //加smooth,對應下面的js
 a.smooth(href="#next") click it
.blank
#next the next box
#next
 width: 200px
 height: 100px
 border: 1px solid #000
 text-align: center
 padding-top: 70px
 
.blank
 height: 100vh
function scrollToElement (selector) {
 $('html, body').animate({
 scrollTop: $(selector).offset().top
 }, 2000); 
};

$(document).on('click', 'a.smooth', function () {
 scrollToElement($(this).attr('href'));
});

JADE

屬性

a(href="https://goo.gl/AQjiva")
<a href="https://goo.gl/AQjiva"></a>

元素内文

a this-is-link
<a>this-is-link</a>

有些跟EMMET差不多

div+class

.namecard
<div class="namecard"></div>

div+多class

.circle1.circle2
<div class="circle1 circle2"></div>

比較需要注意的是

包覆:縮排

.namecard
  .circle.circle1
  .circle.circle2
  h2
   span
<div class="namecard">
 <div class="circle circle1"></div>
 <div class="circle circle2"></div>
 <h2><span></span></h2>
</div>

文字太多,程式碼換行

找到換行處,按Enter換行,再按Tab確保換行後的東西包覆在父元素下,然後加上【|】

p this is a paragraph with a lot of
 |text and we would like to cut them so that we cat
 | view it more clearly.
<p>
 this is a paragraph with a lot of text and we would like to cut them so that we cat view it more clearly.
</p>

EMMET

EMMET大全

輸入多元素

h2+hr+p+TAB button

<h2></h2>
<hr />
<p></p>

包覆

div>h2+hr+p+TAB button

<div>
 <h2></h2>
 <hr />
 <p></p>
</div>

div省略

.card>h2+hr+p+TAB button

<div class="card">
 <h2></h2>
 <hr />
 <p></p>
</div>

重複

.card*2>h2+hr+p+TAB button

<div class="card">
 <h2></h2>
 <hr />
 <p></p>
</div>
<div class="card">
 <h2></h2>
 <hr />
 <p></p>
</div>

内有文字

.card>h2{標題}+hr+p{内文}+TAB button

<div class="card">
 <h2>標題</h2>
 <hr />
 <p>内文</p>
</di

重複 + 顯示數字

ul>li{選項$}*6+TAB button

<ul>
 <li>選項1</li>
 <li>選項2</li>
 <li>選項3</li>
 <li>選項4</li>
 <li>選項5</li>
 <li>選項6</li>
</ul>

img内部屬性

img[src=”https://goo.gl/AQjiva”]+TAB button

<img src="https://goo.gl/AQjiva" alt="" width="500" />

跳出上面的父元素

h2>span^h5

<h2><span></span></h2>
<h5></h5>

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標籤。