摘要:之小白初入江湖超文本標(biāo)記語(yǔ)言簡(jiǎn)稱是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。描述了一個(gè)網(wǎng)站的結(jié)構(gòu)語(yǔ)義隨著線索的呈現(xiàn),使之成為一種標(biāo)記語(yǔ)言而非編程語(yǔ)言。是塊級(jí)元素,是行內(nèi)元素。層疊樣式表簡(jiǎn)稱是一種用來(lái)為結(jié)構(gòu)化文檔如添加樣式的工具。
HTML & CSS之小白初入江湖 1. HTML
1.1 HTML語(yǔ)義化超文本標(biāo)記語(yǔ)言(HyperText Markup Language, 簡(jiǎn)稱HTML)是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。HTML是一種基礎(chǔ)技術(shù),常與CSS、JavaScript一起被眾多網(wǎng)站用于設(shè)計(jì)令人賞心悅目的網(wǎng)頁(yè)、網(wǎng)頁(yè)應(yīng)用程序以及移動(dòng)應(yīng)用程序的用戶界面。網(wǎng)頁(yè)瀏覽器可以讀取HTML文件,并將其渲染成可視化網(wǎng)頁(yè)。HTML描述了一個(gè)網(wǎng)站的結(jié)構(gòu)語(yǔ)義隨著線索的呈現(xiàn),使之成為一種標(biāo)記語(yǔ)言而非編程語(yǔ)言。
——維基百科
在HTML中語(yǔ)義化是一個(gè)非常重要的概念。
語(yǔ)義化就是配位,其含義就是用正確的標(biāo)簽做正確的事情。HTML語(yǔ)義化就是通過(guò)正確使用標(biāo)簽構(gòu)建頁(yè)面以達(dá)到使頁(yè)面結(jié)構(gòu)化得目的;便于瀏覽器和搜索引擎解析。搜索引擎的爬蟲依賴于標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重,利于 SEO。并且使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊,便于閱讀維護(hù)理解。
用于顯示圖像,常用屬性有
alt 圖像替代文本
width, height 寬和高
ismap 圖像映射
用于構(gòu)造一個(gè)表格
Name: | Age: | Sex: |
---|---|---|
張 | 10 | ? |
趙 | 15 | ? |
王 | 20 | ? |
定義超鏈接實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)
定義錨點(diǎn)實(shí)現(xiàn)書簽功能
點(diǎn)擊跳轉(zhuǎn)到網(wǎng)頁(yè)的底部 這里是網(wǎng)頁(yè)的底部
type屬性相關(guān)屬性值
button
file
hidden
text
password
radio
checkbox
image
reset
submit
文本輸入?yún)^(qū)使用標(biāo)簽
下拉菜單標(biāo)簽:
em 強(qiáng)調(diào)
strong 比em強(qiáng)調(diào)級(jí)別更高
address 定義地址元素
blockquote 定義塊引用,通常情況下會(huì)產(chǎn)生縮進(jìn)
cite 通常情況下某段/句話引自某著作,使用此標(biāo)簽
ins 定義被插入文本
del 定義被刪除文本
帶有一定樣式的標(biāo)簽(同時(shí)也帶有語(yǔ)義)b 定義粗體文本
i 斜體
big 大號(hào)字體文本
small 小號(hào)字體文本
bdo 定義問(wèn)本顯示方向
sup 上標(biāo)文本
sub 下標(biāo)文本
輸出類標(biāo)簽pre 代碼中樣式原樣輸出
code 代碼文本
var 定義變量
h1~h6標(biāo)簽用于設(shè)置標(biāo)題
div span一級(jí)標(biāo)題
...六級(jí)標(biāo)題
div與span兩個(gè)標(biāo)簽都是無(wú)意義的容器標(biāo)簽。常用于頁(yè)面的布局。
div是塊級(jí)元素,span是行內(nèi)元素。
層疊樣式表(Cascading Style Sheet,簡(jiǎn)稱CSS)是一種用來(lái)為結(jié)構(gòu)化文檔如HTML添加樣式的工具。
使用方式CSS使用方式分為三種,它可以直接寫在HTML標(biāo)簽內(nèi)
內(nèi)容
或者寫在style標(biāo)簽內(nèi)
或者通過(guò)link標(biāo)簽引入樣式表
選擇器
基本選擇器
id選擇器: #element ?{}
類(class)選擇器: .element ?{}
類型(HTML標(biāo)簽)選擇器: div ?{}
通配符: ? {}
綜合選擇器
后代選擇器:div ?p ?{}
交集選擇器:div.p ?{}
并集選擇器:div,p ?{}
子選擇器: div>p ?{}
相鄰兄弟選擇器:div+p ?{}
普通兄弟選擇器:div~p ?{}
序列選擇器: ul li:last-child; ?ul li:last-child
權(quán)重當(dāng)有不同選擇器的不同樣式作用在同一標(biāo)簽上,通過(guò)比較幾個(gè)選擇器的權(quán)重來(lái)確定由哪個(gè)選擇器決定顯示的樣式。下面是不同選擇器的權(quán)重量級(jí)大小關(guān)系
id選擇器 > 類選擇器 > 類型選擇器
權(quán)重比較過(guò)程如下:
id選擇器數(shù)量多的權(quán)重大
id選擇器數(shù)量相等時(shí)類選擇器多的權(quán)重大
前兩個(gè)選擇器數(shù)量各自相同時(shí)類型選擇器數(shù)量多的權(quán)重大
沒(méi)有選中標(biāo)簽的選擇器權(quán)重為0
帶有!important屬性的選擇器權(quán)重?zé)o限大(濫用會(huì)導(dǎo)致權(quán)重混亂問(wèn)題)
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/112179.html
摘要:之小白初入江湖超文本標(biāo)記語(yǔ)言簡(jiǎn)稱是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。描述了一個(gè)網(wǎng)站的結(jié)構(gòu)語(yǔ)義隨著線索的呈現(xiàn),使之成為一種標(biāo)記語(yǔ)言而非編程語(yǔ)言。是塊級(jí)元素,是行內(nèi)元素。層疊樣式表簡(jiǎn)稱是一種用來(lái)為結(jié)構(gòu)化文檔如添加樣式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本標(biāo)記語(yǔ)言(HyperText Markup Language, 簡(jiǎn)稱HTML)是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言...
摘要:拿舉例子只想說(shuō)明你總會(huì)在一些陰暗的角落遇到正則表達(dá)式,為了到時(shí)候不至于一頭霧水,我們最好簡(jiǎn)單的了解一下正則表達(dá)式的使用。 為什么要學(xué)正則表達(dá)式 很多人對(duì)正則表達(dá)式的認(rèn)知只是在進(jìn)行表單驗(yàn)證的時(shí)候在網(wǎng)上搜一段正則表達(dá)式進(jìn)行copy,實(shí)際工作上好像很難遇到大段的正則表達(dá)式 我第一次看到大量的正則使用是在jQuery源碼中,當(dāng)時(shí)看的頭疼只好草草的看下大概思路不了了之,但是到今天我依然不認(rèn)為這種...
摘要:軟件測(cè)試江湖也是江湖,也有一些小技巧。以上是在過(guò)往測(cè)試江湖中個(gè)人總結(jié)的三條小技巧,技巧雖小,但是可以幫助初入測(cè)試江湖的小白少走一些彎路,讓個(gè)人的職業(yè)發(fā)展更加順利。 有人的地方就有江湖,有江湖的地方就有恩怨。有的恩怨避無(wú)可避,有的本可以避免,只是因?yàn)槟贻p不懂事,不懂得江湖的規(guī)矩,惹下許多的是非。軟件測(cè)試江湖也是江湖,也有一些小技巧。 1)Bug記錄技巧showImg(https://se...
摘要:軟件測(cè)試江湖也是江湖,也有一些小技巧。以上是在過(guò)往測(cè)試江湖中個(gè)人總結(jié)的三條小技巧,技巧雖小,但是可以幫助初入測(cè)試江湖的小白少走一些彎路,讓個(gè)人的職業(yè)發(fā)展更加順利。 有人的地方就有江湖,有江湖的地方就有恩怨。有的恩怨避無(wú)可避,有的本可以避免,只是因?yàn)槟贻p不懂事,不懂得江湖的規(guī)矩,惹下許多的是非。軟件測(cè)試江湖也是江湖,也有一些小技巧。 1)Bug記錄技巧showImg(https://se...
閱讀 3067·2021-11-02 14:40
閱讀 869·2019-08-30 15:53
閱讀 1298·2019-08-30 15:53
閱讀 3286·2019-08-30 13:53
閱讀 3337·2019-08-29 12:50
閱讀 1162·2019-08-26 13:49
閱讀 1892·2019-08-26 12:20
閱讀 3694·2019-08-26 11:33