元素分類
雖然平時不怎么會注意這一點，但是元素會按他們的功能和語義進行一定的分類。下面列舉一下基本的分類。
劃重點：使用標簽的關(guān)注點不是他們的默認樣式，而是語義！不要一股腦全用div！！
- 根元素：html，所有元素的祖先元素
- 文檔元數(shù)據(jù)：定義了渲染方式
- 內(nèi)容分區(qū)：分割了頁面區(qū)域
- 分組元素：組織body中的內(nèi)容，標示元素結(jié)構(gòu)
- 文本級語義：為局部文本賦予意義
- 嵌入內(nèi)容：多媒體內(nèi)容
- 表格元素
- 表單元素
- 腳本
文檔標題
在瀏覽器頂端的tab中我們旺旺可以看到這個頁面的標題。這個標題依賴于<head>，中的<title>
小細節(jié)
一個文檔只有一個title，title中的內(nèi)容一概當做純文本處理
有的時候，我們的文檔是由代碼片拼接而成，title可能出錯。我們可以通過腳本來設(shè)置title
document.title = "新的title"
應(yīng)用場景
-
進度提示
在title上會有一個進度提示，一般用在有上傳下載功能的網(wǎng)頁。
有進度的title
簡單實現(xiàn)
<script>
// 定義進度，title
let percent = 0;
let title = "demo1";
// 開啟定時器
let timer = setInterval(()=>{
// 調(diào)用方法獲得進度
let percnet = getPercent()
// 判斷
if(percent>=100){
// 完成就直接顯示標題
document.title = title;
clearInterval(timer);
}else{
// 沒有完成就顯示進度和標題
document.title = `[${percent}%]${title}`;
}
},1000);
</script>
- 怎么給title添加小圖標
先用工具制作一個ico格式的小圖標，然后在head中加入如下代碼
<link rel=“icon" href="demo.ico" type="image/x-icon"/>
下一篇寫各種元數(shù)據(jù)
