整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
例
被標(biāo)記的縮寫詞如下：
The<abbrtitle="World Health Organization">WHO</abbr> was founded in 1948.
瀏覽器支持
所有主流瀏覽器都支持 <abbr> 標(biāo)簽。
注釋：IE 6 或更早版本的 IE 瀏覽器不支持 <abbr> 標(biāo)簽。
標(biāo)簽定義及使用說明
<abbr> 標(biāo)簽用來表示一個(gè)縮寫詞或者首字母縮略詞，如"WWW"或者"NATO"。
通過對縮寫詞語進(jìn)行標(biāo)記，您就能夠?yàn)闉g覽器、拼寫檢查程序、翻譯系統(tǒng)以及搜索引擎分度器提供有用的信息。
提示和注釋
提示：在某些瀏覽器中，當(dāng)您把鼠標(biāo)移至帶有 <abbr> 標(biāo)簽的縮寫詞/首字母縮略詞上時(shí)，<abbr> 標(biāo)簽的 title 屬性可被用來展示縮寫詞/首字母縮略詞的完整版本。
HTML 4.01 與 HTML5之間的差異
無。
全局屬性
<abbr> 標(biāo)簽支持 HTML 的全局屬性。
事件屬性
<abbr> 標(biāo)簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
者:極客小俊
一個(gè)把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主
引言
我們平常在項(xiàng)目開發(fā)當(dāng)中, 利用調(diào)試工具來調(diào)試CSS相關(guān)的代碼, 它可以幫助我們了解哪些CSS 功能被使用，CSS代碼效率，以及CSS代碼的執(zhí)行情況，而這些都是 CSS 代碼檢查與調(diào)試的核心, 它在某種情況下，會(huì)影響我們整個(gè)網(wǎng)站應(yīng)用程序的整體性能, 所以掌握必要的調(diào)試技巧是很有必要的!
我們平常可以使用chrome瀏覽器自帶的Chrome DevTools調(diào)試工具 來檢查與調(diào)試CSS代碼!
可以在chrome瀏覽器打開頁面中按下快捷鍵F12 打開chrome開發(fā)調(diào)試工具,然后使用箭頭工具 在Element選項(xiàng)中直接選擇html代碼 , 最后在右側(cè)的Style中就可以看到當(dāng)前這個(gè)元素的顏色、字體、大小等CSS相關(guān)信息
如圖:
概念
在我們選擇好元素節(jié)點(diǎn)之后, 右側(cè)的 Styles 選項(xiàng)卡中，出現(xiàn)的當(dāng)前元素的 CSS屬性, 旁邊的鏈接文件可以直接點(diǎn)擊打開定義CSS規(guī)則外部樣式表 可以查看樣式的源文件
概念
這種方法相當(dāng)于向html標(biāo)簽的 style 屬性一樣的原理!
當(dāng)我們在Element選項(xiàng)中直接選擇html代碼中的一個(gè)元素之后 , 在右側(cè)的Style中, 點(diǎn)擊 element.style 就可以給當(dāng)前選擇的這個(gè)元素增加行間CSS樣式了!
這個(gè)方法在實(shí)際應(yīng)用開發(fā)當(dāng)中很實(shí)用， 根據(jù)添加的行間css屬性我們就很容易快速判斷并且檢測出元素的CSS屬性的問題出在什么地方!
如圖
概念
平常在開發(fā)當(dāng)中 也會(huì)用到這個(gè)小技巧, 來快速檢測自己寫的CSS是否有誤!
添加CSS聲明
當(dāng)我們在Element選項(xiàng)中直接選擇html代碼中的一個(gè)元素之后 , 在右側(cè)的Style中單擊要添加聲明的樣式規(guī)則的{}大括號中間部分, 就可以出現(xiàn)光標(biāo)，輸入CSS屬性名，最后輸出完成后 按 enter 鍵即可!
修改CSS聲明
我們只需要在原有樣式上雙擊鼠標(biāo)，修改樣式規(guī)則，并按 Enter 鍵就可以了!
如圖
概念
當(dāng)我們在Element選項(xiàng)中直接選擇html代碼中的一個(gè)元素之后 , 在右側(cè)的Style選項(xiàng)卡中有一個(gè) .cls 的按鈕,點(diǎn)擊這個(gè)按鈕會(huì)顯示一個(gè) Add new class 的輸入框，輸入想要添加的class類名之后按 enter 鍵就可以了
這樣就可以直接點(diǎn)擊 添加好的class類 復(fù)選框可以來回切換樣式 進(jìn)行CSS屬性的測試
小提示: 前提是你最好是把要添加的class 先寫好!
我們在Element選項(xiàng)右側(cè)的Style選項(xiàng)卡中編輯CSS屬性值的時(shí)候，可以使用鍵盤上的快捷鍵將值遞增/遞減的操作
概念
一般可以使用拾色器來快速修改元素的顏色
在Style選項(xiàng)卡中,選中目標(biāo)html元素后 將鼠標(biāo)懸停在目標(biāo)元素的顏色屬性小圖標(biāo)上點(diǎn)擊一下，就可以出現(xiàn)拾色器了 , 如果你很會(huì)搭配顏色這個(gè)小工具還是挺有用的!
如圖
這個(gè)功能還是非常強(qiáng)大的! 但是chrome開發(fā)調(diào)試工具 默認(rèn)是沒有開啟的, 所以需要我們手動(dòng)去開啟
如何在chrome開發(fā)調(diào)試工具中開啟CSS Overview功能
步驟
打開chrome瀏覽器---->F12進(jìn)入調(diào)試工具----->點(diǎn)擊調(diào)試工具右上方的小齒輪setting圖標(biāo)進(jìn)入設(shè)置---
---->選擇Experiments----->勾選CSS Overview 選項(xiàng)即可!
如圖
注意: 開啟之后要重新開啟一下調(diào)試工具!
CSS Overview的作用
這個(gè)功能可以給開發(fā)者展示出當(dāng)前頁面 CSS 屬性的所有信息，比如顏色、字體、對比度問題、未使用的聲明和media查詢, 通常用這個(gè)工具來判斷當(dāng)前CSS 代碼的質(zhì)量。
CSS Overview功能包含五個(gè)信息板塊
重點(diǎn)可以顯示出一些當(dāng)前頁面中的CSS的使用情況!
可以顯示出當(dāng)前頁面中使用到的所有顏色信息 包括 背景、 字體、 等等...
在這里可以顯示出當(dāng)前頁面中 所使用到的字體以及字體css屬性相關(guān)的所有信息!
也就是可以在這里看到每一種使用到的字體所設(shè)置的css字體相關(guān)屬性
在這里可以查看到當(dāng)前頁面中使用到的媒體查詢相關(guān)信息
這個(gè)功能主要是可以用來檢測CSS或JS 文件的代碼數(shù)量以及使用評率, 也就是說它可以提示項(xiàng)目應(yīng)用中加載的每個(gè)文件使用多少CSS
打開步驟
打開chrome瀏覽器---->F12進(jìn)入調(diào)試工具----> Ctrl + shift + P 快捷鍵，輸入Coverage，然后再選擇: Show Coverage，最后點(diǎn)擊刷新的小圖標(biāo) 就可以了!
小提示 可以在 URL Filter輸入框中過濾出 .css文件, 只要輸入.css 就可以專門顯示 CSS文件了
如圖
這些數(shù)據(jù)看似不重要，但可能有些時(shí)候可以幫助你 建立優(yōu)化思維以及策略!
聽名字就知道它的作用是跟CSS效果渲染有關(guān)系的, 平常使用它 來檢測代碼的渲染時(shí)間以及渲染過載的區(qū)域!
關(guān)于css渲染涉及到瀏覽器構(gòu)成,這里就不過多提及，以后我會(huì)出一篇詳細(xì)做講解!
Rendering Panel (渲染面板) 打開步驟
打開chrome瀏覽器---->F12進(jìn)入調(diào)試工具----> Ctrl + shift + P 快捷鍵----->輸入Rendering---->然后選擇 Show Rendering項(xiàng), 然后回出現(xiàn)很多復(fù)選框功能
平常我會(huì)用到的選項(xiàng)如下表:
復(fù)選項(xiàng) | 描述 |
Paint flashing | 當(dāng)頁面上有重繪效果的地方,會(huì)顯示綠色矩形的區(qū)域進(jìn)行標(biāo)注! 可以簡單理解為有動(dòng)態(tài)效果的頁面區(qū)域, 這些效果區(qū)域 往往瀏覽器渲染的時(shí)間會(huì)長一些! |
Frame Rendering Stats | 這個(gè)選項(xiàng)勾選上之后可以顯示GPU 和幀的一些實(shí)時(shí)情況, 用來判定一些效果動(dòng)畫是否卡頓還是比較有用的! |
如圖
渲染面板中我們可以獲取到 一些常規(guī)檢查中沒有的數(shù)據(jù)信息, 這些信息對于了解 CSS 代碼 或者是 JS代碼的性能以及消耗設(shè)備的資源等 都提供了很多依據(jù)和參照, 在深度優(yōu)化的時(shí)候或許能給你帶來一絲啟發(fā)!
故名意思就是用來查看代碼運(yùn)行的性能監(jiān)視界面,
打開步驟
打開chrome瀏覽器---->F12進(jìn)入調(diào)試工具----> Ctrl + shift + P 快捷鍵----->輸入Performance Monitor---->最后選擇 Show Performance Monitor 項(xiàng) 即可打開,
在這個(gè)面板當(dāng)中可以勾選一些選項(xiàng)如下
當(dāng)前CPU的使用率,也就是CPU占用率
指的是JS對象堆的占用的內(nèi)存大小
內(nèi)存中DOM節(jié)點(diǎn)個(gè)數(shù)，這個(gè)會(huì)隨著頁面的效果變化而增加或減少
JS事件偵聽器個(gè)數(shù)
如圖
在用戶查看頁面的過程當(dāng)中，頁面中的布局元素重排
頁面中的樣式重繪
以上兩個(gè)選項(xiàng)通常也是用于檢測與分析我們的CSS代碼性能, 例如我們在CSS中使用了left或top屬性那么就會(huì)產(chǎn)生一些布局上的重繪, 那么如果將這些屬性加載到JS動(dòng)畫中，則可能每秒都觸發(fā)幾十甚至是上百次重繪操作
處于性能優(yōu)化考慮 , 我們?nèi)绻褂昧?/span>CSS3中的transform屬性中的translateX/Y來做動(dòng)畫效果 ,那么會(huì)發(fā)現(xiàn)它并不會(huì)觸發(fā)重繪的流程,而只是組合畫面 而這些都是基于顯卡GPU, 而CPU 的使用率會(huì)大大降低!
所以我們平常在開發(fā)JS效果的過程當(dāng)中使用 translate()來移動(dòng)元素，而不用 top或left來移動(dòng)元素的根本原因!
我們可以來看一下對比圖:
小結(jié): 所以通過 Layouts/sec與Style recalcs/sec 兩個(gè)選項(xiàng)展示了在頁面中觸發(fā)重繪和布局的CSS相關(guān)信息
以上這些在平常前端開發(fā)當(dāng)中可以幫助你獲取一些實(shí)時(shí)應(yīng)用程序的性能數(shù)據(jù),在判斷性能優(yōu)劣的時(shí)候也是非常有幫助的!
Performance Panel跟之前的Performance Monitor的區(qū)別就是 我們先通過 Performance Monitor性能監(jiān)視器來把控每一個(gè)環(huán)節(jié)的性能, 然后再使用Performance Panel進(jìn)行整體的性能分析!
打開步驟
打開chrome瀏覽器---->F12進(jìn)入調(diào)試工具----> Ctrl + shift + P 快捷鍵----->輸入Performance---->然后我們選擇 Show Performance項(xiàng), 最后點(diǎn)擊重新加載的圖標(biāo),或者按下快捷鍵 ctrl + shift + e
并且我們也可以反復(fù)按下快捷鍵(ctrl + shift + e)重新加載繪制頁面性能信息, 在最下面的餅圖中顯示了繪制頁面和渲染頁面的總體時(shí)間!
如圖
從上圖中就可以看到 當(dāng)我們打開性能面板加載之后就可以獲取到 加載頁面的時(shí)間/毫秒、 CSS、JS、DOM節(jié)點(diǎn)、事件監(jiān)聽等所需要的渲染總體時(shí)間!
概述
Specificity Visualizer個(gè)人覺得是一款國外非常不錯(cuò)的在線css檢測工具
在線地址: https://isellsoap.github.io/specificity-visualizer/
如圖
我們只需要打開訪問地址后 粘貼你想要檢測的CSS代碼, 然后點(diǎn)擊Visualize it按鈕進(jìn)行檢測, 然后回在下面顯示出特殊樣式選擇器 以及選擇器的權(quán)重等相關(guān)信息
操作圖
標(biāo)記為紅色的地方說明這些選擇器還可以優(yōu)化得更好!
概述
這款國外在線的CSS檢測工具 可以幫助你檢測 CSS代碼中的 選擇器是如何按特定樣式組織
在線地址: https://jonassebastianohlsson.com/specificity-graph/
如圖
它會(huì)提示波峰值高那么是不好的, 總的趨勢應(yīng)該是在樣式表的后面有更高的特異性
如下圖
以上就是平常我在工作與學(xué)習(xí)當(dāng)中會(huì)使用到的一些CSS代碼檢測調(diào)試工具, 希望能給你帶來一點(diǎn)幫助!
感謝你的閱讀!
"點(diǎn)贊" "評論" "收藏"
大家的支持就是我堅(jiān)持創(chuàng)作下去的動(dòng)力!?
?如果以上內(nèi)容有任何錯(cuò)誤或者不準(zhǔn)確的地方，歡迎在下面 留個(gè)言指出、或者你有更好的想法，歡迎一起交流學(xué)習(xí)?
自學(xué)的話，首先要理解html的作用。html，hypertext markup language，超文本標(biāo)記語言，用來展示網(wǎng)頁中的內(nèi)容。同時(shí) HTML 也是我們學(xué)習(xí)前端開發(fā)的基礎(chǔ)。隨著 web 前端技術(shù)的飛速發(fā)展，HTML 和 CSS 也成為了編程者的必備技能。而要想做一個(gè)網(wǎng)頁光會(huì)這一門語言是不夠的，還需要自學(xué)css，JavaScript。其中html和css較JavaScript容易。
可以這樣理解，HTML，是一個(gè)文件類型，可以被瀏覽器解析。如果不使用瀏覽器打開，我們看到的將是一行行代碼，在瀏覽器中打開以后呢，就會(huì)出現(xiàn)一些靜態(tài)效果了。下面介紹一下初步的一些HTML語法知識(shí)。
HTML 標(biāo)簽非常注重語義化，很多標(biāo)簽都是通俗易懂的，大大降低了我們學(xué)習(xí)的難度。這套 HTML 教程更是為了避免初學(xué)者走太多的彎路，指出了許多其它 HTML 教程中沒有提到的學(xué)習(xí)誤區(qū)，并且給初學(xué)者提供了一個(gè)具體的學(xué)習(xí)思路，除了注重 HTML 知識(shí)點(diǎn)的講解，更加注重 web 前端開發(fā)技巧和思維。幫助大家快速入門，其中包含大量的實(shí)踐經(jīng)驗(yàn)，將知識(shí)系統(tǒng)化，濃縮為精華，用通俗易懂的語言直指網(wǎng)頁設(shè)計(jì)初學(xué)者的痛點(diǎn)。
學(xué)海無涯，苦做舟，學(xué)習(xí)如同修行，只有潛心才可以領(lǐng)悟真諦。HTML 中的每一個(gè)小知識(shí)點(diǎn)都可以讓頁面發(fā)生不同的變化，現(xiàn)在就讓我們行動(dòng)起來，跟著 HTML 教程的步伐，讓我們一起走進(jìn) HTML 的世界。
超級文本標(biāo)記語言文檔制作不是很復(fù)雜，但功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)耄@也是萬維網(wǎng)（WWW）盛行的原因之一，其主要特點(diǎn)如下：
● 簡易性：超級文本標(biāo)記語言版本升級采用超集方式，從而更加靈活方便。
● 可擴(kuò)展性：超級文本標(biāo)記語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。
● 平臺(tái)無關(guān)性：雖然個(gè)人計(jì)算機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在，超級文本標(biāo)記語言可以使用在廣泛的平臺(tái)上，這也是萬維網(wǎng)（WWW）盛行的另一個(gè)原因。
● 通用性：另外，HTML是網(wǎng)絡(luò)的通用語言,一種簡單、通用的全置標(biāo)記語言。它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或?yàn)g覽器。
B（Browser）/S（Server）架構(gòu)方向，也是我們以后主攻方向
我們以后主要為企業(yè)內(nèi)部提供解決方案，例如：企業(yè)內(nèi)部的辦公系統(tǒng)、供應(yīng)鏈管理系統(tǒng)、客戶關(guān)系管理系統(tǒng)等，而這些系統(tǒng)通常對界面的表現(xiàn)要求較低，對業(yè)務(wù)處理和數(shù)據(jù)處理要求較高，并且要求降低升級維護(hù)的成本，B/S架構(gòu)可以更好的被企業(yè)接受，所以我們以后主要的方向是開發(fā)基于B/S架構(gòu)的應(yīng)用，B/S架構(gòu)的開發(fā)通常又被叫做Web開發(fā)，Web開發(fā)通常包括Browser瀏覽器端的開發(fā)以及Server服務(wù)器端的開發(fā)。
雖然我們是學(xué)習(xí)Java后臺(tái)服務(wù)器編程，但是前端頁面編寫要了解，能看懂，簡單的頁面效果可以實(shí)現(xiàn)即可；
創(chuàng)建一個(gè)以 .html或 .htm 結(jié)尾的文件，用文本編輯器打開就可以開發(fā)
用瀏覽器打開以.html或.htm的文件就可以自上而下解析執(zhí)行，不需要編譯
● <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
● DTD文件的作用
● 幫助你編寫合法的代碼
● 它讓瀏覽器正確地顯示器代碼，或者說DTD只是寫給檢查器看的
HTML規(guī)范是由w3c負(fù)責(zé)制定的，W3C是世界萬維網(wǎng)聯(lián)盟（World Wide Web:www）
FireFox、Google、IE
<>表示開始標(biāo)記
</>表示結(jié)束標(biāo)記
<html>開始標(biāo)簽
</html>結(jié)束標(biāo)簽
html為元素
HTML 元素指的是從開始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼。
● HTML 元素以開始標(biāo)簽起始
● HTML 元素以結(jié)束標(biāo)簽終止
● 元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容
● 某些 HTML 元素具有空內(nèi)容（empty content）
● 空元素在開始標(biāo)簽中進(jìn)行關(guān)閉（以開始標(biāo)簽的結(jié)束而結(jié)束）
● 大多數(shù) HTML 元素可擁有屬性
大多數(shù) HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文檔由嵌套的 HTML 元素構(gòu)成。
上面的例子包含三個(gè) HTML 元素。
● <p> 元素：
這個(gè) <p> 元素定義了 HTML 文檔中的一個(gè)段落。
這個(gè)元素?fù)碛幸粋€(gè)開始標(biāo)簽 <p>，以及一個(gè)結(jié)束標(biāo)簽 </p>。
元素內(nèi)容是：This is my first paragraph。
● <body> 元素：
<body> 元素定義了 HTML 文檔的主體。
這個(gè)元素?fù)碛幸粋€(gè)開始標(biāo)簽 <body>，以及一個(gè)結(jié)束標(biāo)簽 </body>。
元素內(nèi)容是另一個(gè) HTML 元素（p 元素）。
這個(gè)元素?fù)碛幸粋€(gè)開始標(biāo)簽 <html>，以及一個(gè)結(jié)束標(biāo)簽 </html>
元素內(nèi)容是另一個(gè) HTML 元素（body 元素）。
即使您忘記了使用結(jié)束標(biāo)簽，大多數(shù)瀏覽器也會(huì)正確地顯示 HTML：
上面的例子在大多數(shù)瀏覽器中都沒問題，但不要依賴這種做法。忘記使用結(jié)束標(biāo)簽會(huì)產(chǎn)生不可預(yù)料的結(jié)果或錯(cuò)誤。
注釋：未來的 HTML 版本不允許省略結(jié)束標(biāo)簽。
有一些元素必須使用單個(gè)標(biāo)簽表示。這些被稱為空元素。
一個(gè)這樣的元素是 hr 。
hr 是一個(gè)分組元素，用于表示一個(gè)段落級別的內(nèi)容。
您可以使用以下兩種方式之一使用void元素 - 第一種方法是僅指定開始標(biāo)記，如以下代碼所示。
瀏覽器知道hr是一個(gè)void元素，因此不希望看到結(jié)束標(biāo)記。
您可以使元素與空元素一致，如下面的代碼所示。
注釋是關(guān)于HTML元素的有用信息。注釋使HTML文檔更易讀和可理解。
HTML中的注釋以標(biāo)簽<！-- 開頭，并以 --> 結(jié)尾。
瀏覽器將忽略您在這些標(biāo)記中放置的任何內(nèi)容。
以下代碼具有HTML注釋。
超文本標(biāo)記語言（外國語簡稱：HTML）標(biāo)記標(biāo)簽通常被稱為HTML標(biāo)簽，HTML標(biāo)簽是HTML語言中最基本的單位，HTML標(biāo)簽是HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）最重要的組成部分。
HTML標(biāo)簽的大小寫無關(guān)的，例如“主體”<body>跟<BODY>表示的意思是一樣的，推薦使用小寫。
實(shí)例
<html> 標(biāo)簽告知瀏覽器這是一個(gè) HTML 文檔。
<html> 標(biāo)簽是 HTML 文檔中最外層的元素。
<html> 標(biāo)簽是所有其他 HTML 元素（除了 <!DOCTYPE> 標(biāo)簽）的容器。
所有瀏覽器都支持 <html> 標(biāo)簽。
段落標(biāo)簽：<p></p>
定義：可以把 HTML 文檔分割為若干段落
標(biāo)題字：<h1></h1>至<h6></h6>
標(biāo)題是通過 <h1> - <h6> 等標(biāo)簽進(jìn)行定義的
<h1>定義最大標(biāo)簽，<h6>定義最小標(biāo)簽
換行：<br>
定義：<br> 可插入一個(gè)簡單的換行符
<br> 標(biāo)簽是空標(biāo)簽，它沒有結(jié)束標(biāo)簽
注釋：<!-- 這是HTML注釋 -->
水平線：<hr/>
預(yù)留格式<pre>內(nèi)容</pre>
定義：頁面中輸入什么樣式就顯示什么樣式
實(shí)例：< >
搭配視頻效果更佳~~
https://www.ixigua.com/690746767030039398
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
