自閉和標籤和偽元素

2021-09-13 00:25:04 字數 4116 閱讀 9767

html 是 web 統一語言,這些容納在尖括號裡的簡單標籤,構成了如今的 web。1991 年,tim berners-lee編寫了乙份叫做 「html 標籤」的文件,裡面包含了大約20個用來標記網頁的 html 標籤。他直接借用sgml的標記格式,也就是後來我們看到的 html 標記的格式。本文講述了 html 這門 web 標記語言的發展簡史。
html4之後,出現了一些分歧。

htmlhtml 4.01之後的第乙個修訂版本就是xhtml 1.0,其中 x 代表「extensible」,擴充套件,當然也有人將之解讀為「extreme」,極端。xhtml 1.0是基於html 4.01的,並沒有引入任何新標籤或屬性,唯一的區別是語法,html對語法比較隨便,而xhtml則要求xml般的嚴格語法。

使用嚴格的語法規範並非壞事,要求開發者使用單一的**風格,比如,html 4.01允許你使用大寫或小寫字母標識標記元素和屬性,xhtml則只允許小寫字母。xhtml 1.0的推出剛好碰上了css的崛起,web 開發設計者們開始意識到 web 標準問題,基於xhtml的嚴格語法規範被視為編寫html**的最佳實踐。

於是,w3c 推出xhtml 1.1

如果說xhtml 1.0是 xml 風格的 html,xhtml 1.1則是貨真價實的xml。這意味著xhtml 1.1無法使用text/html mime-type直接輸出,然而,如果 web 開發者使用xml mime-type,則當時的主流瀏覽器,ie 則壓根不支援。看上去,w3c 似乎正在與當時的 web 脫節。

對 w3c 而言,到了html 4已經是功德圓滿,他們的下一步工作是xhtml 2,希望將 web 帶向 xml 的光明未來。雖然xhtml 2聽上去和xhtml 1類似,它們卻有很多差別,xhtml 2不向前相容,甚至不相容之前的 html。它是一種全新的語言,赤條條來去無牽掛。這實在是一場災難。

從一開始,whatwg就和w3c走不同的路線,w3c 對問題的討論是集體投票,而whatwg則由主筆ian hickson定度。表面上看,w3c 更民主,然而事實上,各種內部紛爭會使一些決議限於泥潭,在whatwg,事情的進展會更容易,不過,主筆的權力並非無限大,他們的委員會可以對那些過於偏執的主筆進行**。

whatwg致力於html5的同時,w3c 繼續他們的xhtml 2.0,然而,他們慢慢地陷入困境。

2023年10月,web 之父tim berners-lee發表了一篇部落格文章,表示,從 html 走向 xml 的路是行不通的,幾個月後,w3c 組建了乙個新的html工作組,他們非常明智地選擇了whatwg的成果作為基礎。這一轉變帶來一些困惑,w3c 同時進行這兩套規範,xhtml 2html 5注意,w3c 的 httml 5 在 5 之前有個空格,而 whatwg 的 html5 則沒有空格),而 whatwg 也在進行著同樣的工作。

這一混亂局面到了 2009 年開始變得清晰,w3c 宣布終止xhtml 2的工作,這是乙份關於xhtml 2的遲到的訃告。這一訊息被那些 xml 的反對者視為珍寶,他們藉此嘲笑那些使用 xhtml 1 規範的人,然而他們似乎忘記了,xhtml 1xhtml 2是截然不同的東西。於此同時,xhtml 1規範的制定者擔心,xhtml 1中的嚴格語法規範會被html5棄用,這種擔心後來證明是多餘的,html5既支援鬆散語法,也支援xhtml 1般的嚴格語法。

html5的現狀是,它不再象以前那樣讓人困惑,然而仍不夠明朗。有兩個組織在同時制定它的規範,這兩個組織有著完全不同的行事風格,whatwg是先買後嚐,w3c 是先嚐後買,他們形成了乙個不太靠譜的聯姻,最終人們必將面臨乙個html5還是html 5的問題。html5和其他的不一致的地方,可以檢視:檢視html5的區別

宣告位於文件中的最前面的位置,處於標籤之前。此標籤可告知瀏覽器文件使用哪種htmlxhtml規範。

html4的三種模式:html 4.01 規定了三種文件型別:strict、transitional 以及 frameset。

同樣xhtml1也有三種模式:xhtml 1.0 規定了三種 xml 文件型別:strict、transitional 以及 frameset。

不過目前而言,在html5中只有一種宣告:

目前的標準已經到了html5的第二版,檢視html5.3;

一般標籤由於有開始符號和結束符號,可以在標籤內部插入其他標籤或文字;自閉合標籤由於沒有結束符號,沒辦法在內部插入其他標籤或文字,只能定義自身的一些屬性。

常見自閉和標籤:

1、定義頁面的說明資訊,供搜尋引擎檢視。

2、用於連線外部的css檔案或指令碼檔案。

3、定義頁面所有鏈結的基礎定位。

4、用於換行。

5、水平線。

6、用於定義表單元素

7、

目前的html都是準守html5的標準,所以自閉和標籤也是需要準守html5的標準寫法,也就是推翻了xhtml中的嚴格模式,自閉和標籤不需要加斜槓結束。

// html規範寫法
偽元素新增到選擇器,但不是描述特殊狀態,它們允許您為元素的某些部分設定樣式;最為常見的就是::before-::after

試驗性_內嵌

對於很多自閉和標籤,其實應該是不支援偽元素,不過input元素有乙個特殊的偽元素,可以設定佔位符的樣式;

::-webkit-input-placeholder

::-moz-placeholder

:-ms-input-placeholder

::placeholder

使用這段**的時候它隨即帶來了乙個問題,-webkit-overflow-scrolling: touch; 所帶來的滾動條在未滾動的時候是隱藏狀態,而當手指嘗試去滑動滾動條就會顯示出來,然而這個控制項的樣式並非像桌面瀏覽器可以自定義,也就是說無法隱藏。

也就是這兩個屬性展不相容。

-webkit-scrollbar 

-webkit-overflow-scrolling: touch;

目前的解決方案:父容器設定固定高度h,並overflow:hidden,滾動容器高出父容器h+10px;滾動容器的子內容高度和父容器一樣,比滾動容器小10px,然後滾動條就會被父容器隱藏。

子元素

子元素子元素

對html標籤 元素 以及css偽類和偽元素的理解

標籤 這應該都知道。等都是標籤。元素 標籤開始到結束。比如 p之間的內容 紅色部分就是元素。元素的內容 標籤開始到結束之間的部分,上述紅色部分中的 p之間的內容 這就是元素的內容。偽類 針對的是特殊狀態的元素。偽元素 針對的是元素的內容。比較偽類和偽元素 這裡用偽類 first child和偽元素 ...

偽類和偽元素

偽元素 first letter向文字的第乙個字母新增特殊樣式 first line 向文字的第一行新增樣式 before 在元素之前新增內容 after 在元素之後新增內容 偽類 link 未被訪問的鏈結 visited 已訪問的鏈結 hover當滑鼠懸停到元素上方時 active被啟用的元素 注...

偽類和偽元素

定義 偽類和偽元素就是為文件中不一定存在的結構指定樣式,或者為某些元素 甚至文件本身 的狀態所指示的幻象類指定樣式。css引入偽類和偽元素概念是為了格式化文件樹以外的資訊。偽類的形式 選擇符 偽類 偽元素的形式 選擇符 偽元素 css3規範中要求使用雙冒號 表示偽元素,以此來區分偽元素和偽類。鏈結偽...