HTML基礎雜談

05-12

pre標籤可以讓文本按照本來的格式和內容在頁面中展示

contenteditable 全局屬性可以使元素內容變成可編輯

<p contenteditable> hello world！<p> 當這句話展現在頁面上時可以對其進行編輯

為什麼網頁中的內容會出現亂碼？

因為當用編輯器編輯文件保存好之後用瀏覽器去解析，如果瀏覽器解析的解碼方式和當時編碼時的編碼方式不一樣就會出現亂碼。。避免亂碼的方法就是在<meta charset="utf-8">標籤中告訴瀏覽器你編碼時候的編碼方式這樣就能保證瀏覽器解碼時候的解碼方式和編碼方式一致

設置 referer: <meta name="referrer" content="never">

應用場景就是如果複製百度的圖片地址在百度下能打開，，但是如果引用到本地的頁面上，當向百度的伺服器發送請求時，它會檢測我們的referer如果不是允許的那麼請求就會被拒絕圖片不會正常的顯示

添加頁面描述，利於搜索引擎優化

返回頂部鏈接

<a href="#">返回頁面頂部</a>

錨點

實現頁面之間的跳轉，當頁面中一個元素的id為A，一個超鏈接的地址為#A，那麼當點擊這個超鏈接的時候，頁面就會跳轉到id為A的元素上

a 鏈接的2個特別用處

<a href = "mailto:1030052539@qq.com">給我發郵件</a>如果點擊這個鏈接就會跳轉到給這個郵箱發郵件的界面
如果是在手機上<a href = "tel:13088888888">我的手機號</a>如果點擊這個鏈接就會給這個號碼自動撥號過去

如果a鏈接中加入 download 就會下載這個文件而不是跳轉

title 屬性，滑鼠懸停超鏈接，會出現title中的字作為提示

<a href="https://github.com/fe13" title="可能是未來中國最火的前端工程師的聚集地">FE 13</a>

圖片中alt屬性，當圖片無法正常載入的時候alt中的字會作為提示

<img src="https://vuejs.org/images/logo.png" alt="Vue.js logo" width_="200">

表格

<table> <thead> <tr> <th>球員</th> <th>號碼</th> <th>國籍</th> <th>出生地</th> <tr> </thead> <tbody> <tr> <td>勒布朗·詹姆斯</td> <td>23</td> <td>1984年12月30日</td> <td colspan="2">美國</td> </tr> <tr> <td>凱里·歐文</td> <td>2</td> <td>美國/澳洲</td> <td>澳洲</td> </tr> <tr> <td>凱文·樂福</td> <td>0</td> <td>1988年9月7日</td> <td colspan="2">美國</td> </tr> </tbody> </table>

常見瀏覽器有哪些？哪些內核？

IE: Trident 360 : Trident Firefox: Gecko Safari: WebKit Google Chrome: Blink Opera: Blink

doctype有什麼作用？怎麼寫？

doctype使瀏覽器按照dtd指定的渲染方式對頁面進行渲染 <!DOCTYPE html>

meta 有哪些常見的值？

1.<meta charset="UTF-8"> : 指定編碼方式

2.<meta name="keywords"content="meta總結,html meta,meta屬性,meta跳轉"> :告訴搜索引擎網頁的關鍵字是什麼

3.<meta name="viewport" content="width_=device-width, initial-scale=1.0">：適配移動頁面

4.<meta name="referrer" content="never"> : 設置refer

以下幾種情況checkbox都會被勾選，只要出現checked，不管是什麼格式，默認都會被勾選

<input type="checkbox" checked=false > <input type="checkbox" checked=true > <input type="checkbox" checked="" > <input type="checkbox" checked>

重要的工具

1.http-server

打開終端或者 gitbash，輸入npm install -g http-server即安裝成功（如果提示命令不存在，需要先下載安裝 nodejs），安裝後切換到對應目錄，啟動靜態伺服器，如：cd ~/Desktop/你的文件夾，然後 http-server ，拿到伺服器地址就可以預覽頁文件夾中的html

2.命令行翻譯工具(很實用，如果不行加上sudo試試)

打開終端或者 gitbash，輸入npm install -g fanyi，然後在終端下輸入fanyi hello 即可進行及時翻譯。(如果報錯：Error: spawn festival ENOENT ，則執行 sudo apt-get install festival festvox-kallpc16k 就可以了)