HTML寒假學(xué)習(xí)總結(jié)(四)擴(kuò)展知識

全局屬性

HTML規(guī)范中規(guī)定的全局屬性:幾乎所有的元素都可以擁有這些屬性缀辩。

(1)accesskey
(2)class
(3)contenteditable
(4)dir
(5)title
(6)hidden
(7)id
(8)itemid
(9)itemprop
(10)itemref
(11)itemscope
(12)itemtype
(13)lang
(14)spellcheck
(15)style
(16)tabindex
(17)title

(1)accesskey && (16)tabindex
這是有關(guān)鍵盤的操作屬性鞋拟。
accesskey是指定元素缩宜,當(dāng)用戶按下 ctrl +alt+ key 的時候,相等于點擊這個元素【如何知道是指定哪個元素呢? 瀏覽器插件可以提示,也有瀏覽器插件會自動給所有元素分配key】
tabindex:通過tab鍵在頁面上導(dǎo)航。指定的值是導(dǎo)航的順序尿背。

(2)class &&(7)id && (15)style
1、id保證唯一性
2捶惜、class多用在css
3田藐、style指定內(nèi)聯(lián)樣式

(3)contenteditable
使得頁面的文本可以被修改。

(4)dir
語言書寫的方向吱七。
<p dir="rtl">【阿拉伯語就是從右到左的順序】

(6)hidden
HTML5新增屬性 hidden
<p hidden> hidden </p>
之前都是用css來隱藏元素汽久。 隱藏元素其實是適用在某個場景下,用戶動作之后把這個元素顯示出來踊餐。
這個元素有js接口的景醇。實際上是優(yōu)化了css中display的操作,用js的hidden的布爾型來控制元素是否顯示吝岭。

(13)lang
指定頁面語言(多語言網(wǎng)站需要注意)

(14)spellcheck
拼寫檢查

(17)title
把縮寫的解釋寫在title中三痰,用戶把鼠標(biāo)放上去就可以看到完整的文字吧寺。【但是原生title的使用感不好散劫,有一定的延遲稚机,一般都是自己去做】

無障礙性 Accessibility

或可訪問性,Accessibility获搏。確保任何人都有辦法獲取放在網(wǎng)頁上的媒體內(nèi)容赖条,不讓身體、心理或者技術(shù)上的問題成為獲取信息的障礙颜凯。

web開發(fā)者應(yīng)該做的事情
(1)WCAG(Web Content Accessibility Guidelines)2.0
(2)ARIA(Accessible Rich Internet Applications)

ARIA: 加上一些role屬性來說明谋币,或者是用hidden這樣的屬性增加可用性仗扬。

提升無障礙性

(1)為img提供alt屬性
(2)noscript
(3)input和label對應(yīng)
(4)圖形驗證碼與語音驗證碼
(5)文字和背景有足夠?qū)Ρ榷?br> (6)鍵盤可操作

noscript(小技巧):一些瀏覽器不支持jsp時(腳本被禁用)症概,需要一些替代方案。

語義化

HTML中的元素早芭、屬性及屬性值都擁有某些含義彼城。開發(fā)者應(yīng)該遵循語義來編寫HTML。

為什么語義化很重要退个?

  • 提升代碼可讀性募壕、可維護(hù)性
  • 搜索引擎優(yōu)化
  • 提升無障礙性

搜索引擎優(yōu)化 :一個itemscope表示一個實體。把一段普通的文字格式化语盈,對搜索引擎很有用舱馅。可以做一個更好的展示刀荒,可以聚合信息代嗤,關(guān)聯(lián)信息等等等。

擴(kuò)展

  • meta
  • data-*
  • microdata
  • RDFa
  • JSON-LD

microdata :HTML5中的一個規(guī)范缠借,在HTML中通過屬性嵌入格式化數(shù)據(jù)干毅,提供給搜索引擎、瀏覽器使用泼返。

HTML編碼規(guī)范

  • Google Coding Style
  • W3C Validator

推薦使用工具:

  • emmet (插件硝逢,更方便書寫)
  • markdown(以簡潔的格式表示html。文本相關(guān)的東西绅喉∏耄【可以用來做ppt】github上提交的markdown可以自動按照格式展示出來。)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末柴罐,一起剝皮案震驚了整個濱河市徽缚,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌丽蝎,老刑警劉巖猎拨,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件膀藐,死亡現(xiàn)場離奇詭異,居然都是意外死亡红省,警方通過查閱死者的電腦和手機额各,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來吧恃,“玉大人虾啦,你說我怎么就攤上這事『墼ⅲ” “怎么了傲醉?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長呻率。 經(jīng)常有香客問我硬毕,道長,這世上最難降的妖魔是什么礼仗? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任吐咳,我火速辦了婚禮,結(jié)果婚禮上元践,老公的妹妹穿的比我還像新娘韭脊。我一直安慰自己,他們只是感情好单旁,可當(dāng)我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布沪羔。 她就那樣靜靜地躺著,像睡著了一般象浑。 火紅的嫁衣襯著肌膚如雪蔫饰。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天融柬,我揣著相機與錄音死嗦,去河邊找鬼。 笑死粒氧,一個胖子當(dāng)著我的面吹牛越除,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播外盯,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼摘盆,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了饱苟?” 一聲冷哼從身側(cè)響起孩擂,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎箱熬,沒想到半個月后类垦,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體狈邑,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年蚤认,在試婚紗的時候發(fā)現(xiàn)自己被綠了米苹。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡砰琢,死狀恐怖蘸嘶,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情陪汽,我是刑警寧澤训唱,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站挚冤,受9級特大地震影響况增,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜你辣,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一巡通、第九天 我趴在偏房一處隱蔽的房頂上張望尘执。 院中可真熱鬧舍哄,春花似錦、人聲如沸誊锭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽丧靡。三九已至蟆沫,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間温治,已是汗流浹背饭庞。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留熬荆,地道東北人舟山。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像卤恳,于是被迫代替她去往敵國和親累盗。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,527評論 2 349

推薦閱讀更多精彩內(nèi)容

  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的突琳,因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體若债。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 3,871評論 0 0
  • 1. 瀏覽器頁面有哪三層構(gòu)成,分別是什么拆融,作用是什么? 構(gòu)成:結(jié)構(gòu)層蠢琳、表示層啊终、行為層分別是:HTML、CSS傲须、Ja...
    程序猿人王小賤閱讀 1,869評論 1 11
  • 問答題1 /72瀏覽器頁面有哪三層構(gòu)成孕索,分別是什么,作用是什么?參考答案構(gòu)成:結(jié)構(gòu)層躏碳、表示層搞旭、行為層分別是:HTM...
    _Yfling閱讀 1,215評論 0 23
  • 每種元素都能規(guī)定自己的屬性,這種屬性稱為:局部屬性菇绵。 屬性還有另一種類型:全局屬性肄渗。它們用來配置所有元素共有的行為...
    醬油啊_閱讀 1,292評論 0 1
  • 有些人喜歡回憶 比如我 現(xiàn)在過的開心嗎 嬌興的說一句不知道 初中四年很是安逸 高中三年很是輝煌 大學(xué)很是迷茫 不開...
    尉尉尉來閱讀 135評論 0 0