本文連結
前人報告
各組自行上來填寫,在備註部分放上預計剪接的軟體 2
HTML(Hypertext Markup Language),中文全名為「超文字標示語言」,是一種用來組織架構並呈現網頁內容的程式語言。網頁內容的組成,可能包含了段落、清單、圖片或表格
HTML分為「內容」 「標籤」 「元素」
起始標籤:先打角括弧,也就是大於、小於的符號「< >」,裡面再放入元素名稱,如上面的例子「< p>」。起始標籤代表這個元素從這裡開始。
結束標籤:與起始標籤一樣,只是在元素名稱前面多了個前置斜線「/」。很容易理解地,內容的最後加上結束標籤,代表這個元素的尾端。在寫 HTML 時,很容易忘了最後的結束標籤,提醒大家要多注意唷!
內容:這個元素的內容,以上面的例子來說,內容就是這句文字。
元素:由起始標籤、結束標籤、內容所組成。
元素還可以有「屬性(Attribute)」
屬性能提供更多的資訊(當然,這個資訊是方便編輯,不會呈現在網頁上),屬性包含了屬性名稱與值,你可以利用屬性設定這個元素的色彩、對齊方式、圖表的格線等等。
屬性的組成包含:
巢狀元素
元素裡面可以在放進元素,我們稱之為「巢狀元素(nesting element)」。例如這個句子:「我的貓有夠無敵臭臉」,若你想強調「有夠無敵」,我們就可以把「有夠無敵」這四個字自成一個顯示為粗體的元素 <strong> (en-US) :
<strong>
要注意的是,每個元素都有自己的起始和結束標籤,一層一層的包覆。所以最外層是<p> ,接著<strong> ;先結束 strong 元素,所以先寫</strong>,最外面才是 </p>。
如果元素的起始和結束標籤錯置(如上方),那麼瀏覽器只能自行判斷你想呈現的樣子,可能會完全不如預期!所以在做巢狀元素時要多注意唷!
open
scrollIntoView 的使用
document.addEventListener("DOMContentLoaded", function() { var links = document.querySelectorAll('nav a'); links.forEach(function(link) { link.addEventListener('click', function(e) { e.preventDefault(); var targetId = this.getAttribute('href').substring(1); var targetElement = document.getElementById(targetId); targetElement.scrollIntoView({ behavior: 'smooth' }); }); }); });
<script></script> 要貼在body的最下面,才能全部都用到