分類彙整:HTML

【HTML】disabled

説明

disabled是input相關屬性,可以讓input的內容無法編輯、修改。

  • 若text input裡面有文字(value內容),則使用者無法修改
  • 若radio button / checkbox預設為勾選,則使用者無法取消勾選
  • 若radio button / checkbox預設為不勾選,則使用者無法勾選他

範例

text

<input type="text" value="fixed text" disabled />

radio button

<input name="rd-dis" type="radio"checked disabled/>
<label>radio one</label>
<input name="rd-dis" type="radio" disabled/>
<label>radio two</label>




checkbox

<input type="checkbox" checked disabled/>
<label>checkbox one</label>
<input type="checkbox" disabled/>
<label>checkbox two</label>




select

<select disabled>
 <option>apple</option>
 <option>orange</option>
 <option>banana</option>
</select>

 

【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

木霊(こだま)

ATTR + JS 語系切換

原理

  1. 把其他語言 + 本來的語言存在屬性 attr 裡面
  2. 用 JS 的 dataset 將文字改為屬性的資料

範例

h3(data-en="Languages Changing", data-jp="言語を選択", data-ch="語系切換") Languages Changing
p(data-en="some text", data-jp="テキストです", data-ch="一段文字") some text
button#ch CH
button#en EN
button#jp JP
//選取有文字的元素
var texts=document.querySelectorAll("[data-en]");

//轉換語言函數
function changeLang(par,lan){
 par.innerHTML=lan;
}

document.querySelector("#ch").addEventListener("click",
 function(){
 texts.forEach(text => changeLang(text,text.dataset.ch));
 }
)

document.querySelector("#jp").addEventListener("click",
 function(){
 texts.forEach(text => changeLang(text,text.dataset.jp));
 }
)

document.querySelector("#en").addEventListener("click",
 function(){
 texts.forEach(text => changeLang(text,text.dataset.en));
 }
)

Display

Languages Changing

some text

JavaScript dataset

原理

將指定元素的屬性 (attr) ,顯示成物件形式

.el(data-color="green", data-name="element", data-birthday="0419", data-constellations="Aries")
//用dataset,會呼叫所有屬性資訊,並且以物件方式呈現
document.querySelector(".el").dataset;
/***console.log show below
{
birthday: "0419",
color: "green",
constellations: "Aries",
name: "element"
}
***/

//所以也可以利用物件方式,召喚子項目
document.querySelector(".el").dataset.color; //green

//也等於這種寫法
document.querySelector(".el").getAttribute("data-color"); //green

内部錨點 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'));
});

HTML表單 form

<input>  單行文字

type:類型
name:欄位名稱(取名)
placeholder:預設値
required:必填
<input type="text" name="firstname" placeholder="姓名" required="true">

Display

<textarea>  多行文字

<textarea name="comment" placeholder="意見" required="true">

Display

<input>  送出按鈕

type=””submit”(預設顯示文字為submit/提交)

<input type="submit" name="send" required="true">

Display

<input>  更改提交文字

value=”註冊”(把提交改為註冊)
<input type="submit" name="send" required="true" value="註冊">

Display

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>