摘要:標簽用于表示代碼塊。而所有行的單元格都是表格的主要內容,因此都在標簽中。引入表格結構標簽,是為了更好的區分出各個單元格的含義。
本篇文章已授權微信公眾號 dasu_Android(大蘇)獨家發布
本系列文章內容全部梳理自以下四個來源:
作為一個前端小白,入門跟著這四個來源學習,感謝作者的分享,在其基礎上,通過自己的理解,梳理出的知識點,或許有遺漏,或許有些理解是錯誤的,如有發現,歡迎指點下。
本文接著來學習 HTML 的基本標簽,下面是我自己對標簽進行的劃分,《HTML權威指南》中將標簽類別劃分成了很多種,比如:內容分組,文檔分節,表單七七八八等等。
但我按照自己個人的理解習慣,對總的標簽劃分成三類:修飾文檔結構的標簽、修飾文本內容標簽、容器類標簽。
修飾文檔結構的標簽大多用于表示一份標準、完整的HTML文檔的一些標簽,以及可放于
內的一些標簽。修飾文本內容標簽,大意是說,這些標簽是直接用于標記文本內容,賦予文本內容某些語義行為,比如 賦予超鏈接語義, 賦予了一級標題語義等等。這個類別有些類似于 Android 中表示某個 View 的標簽,通俗來講,這些標簽可直接使用在文本內容上了。
容器類標簽,并不是真正意義上的容器,而是說,這類標簽主要的作用是用來包含其他標簽的,但并不是說,只能用來包含其他標簽,也可直接對文本內容標記。如
我自己個人將其常用的標簽劃分成三大類,當然不是很準確,書中劃分得更細,但結合 Android 中一些共性的概念,我個人覺得劃分成這三類后,我較容易理解各個標簽用途:
首先來看份 HTML 的大體上的基本結構:
所以,這些標簽用途基本就是用于構建一份基本的 HTML 文檔結構,下面看看具體介紹:
準確的說, 并不是 HTML 標簽,它是聲明 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。
在 HTML 4.01 中, 聲明引用 DTD,因為 HTML 4.01 基于 SGML。DTD 規定了標記語言的規則,這樣瀏覽器才能正確地呈現內容。
HTML5 不基于 SGML,所以不需要引用 DTD。
如 H5中用法:
HTML 4 中用法:
每一份 HTML 文檔內容的根節點,表示文檔內容的開始
文檔內容包括兩部分:頭部聲明
和文本內容HTML 文檔的頭部聲明,用于聲明該文檔的一些屬性,以及一些元數據,
內部的內容是用于給瀏覽器看的,并不是用于給用戶看的,瀏覽器通過 信息,知曉這份文檔引用了哪些外部資源文件,使用的哪些屬性。可在
中使用的標簽并不多:
Title
標簽用于聲明文本內容,該標簽內的內容都是用于展示給用戶看的,所以基本所有標簽都可以在 內,瀏覽器解析相應的標簽,并根據 CSS 作用到每個對象上,生成網頁呈現給用戶。
元數據標簽,可用于聲明文檔所使用的一些元數據,用途蠻多,如下:
標簽用于指定 HTML 文檔使用了哪些外部資源文件,可以是外部的 CSS 文件,或者網頁圖標,或者說明文檔等等,如下:
--外部CSS
-網頁圖標
--預先加載page2.html文件
…
標簽的作用是引導用戶從一張頁面鏈接到另一張頁面,互聯網說到底就是一張張網頁通過超鏈接 互相關聯起來的。
所以,只要不是單個頁面,只要頁面支持跳轉,那么 HTML 文檔中就肯定有 標簽的存在,用于指定下個頁面的跳轉。
百度
首頁
標題5
以上是 標簽的三種用法,指定絕對路徑的鏈接,指定相對路徑的鏈接,指定文檔內的鏈接。
也就是說, 標簽既可以用于指定頁面間的跳轉關聯,也可以指定頁面內的跳轉。
另外新頁面的打開方式也支持多種形式配置,如:
百度
通過 target 屬性來聲明新頁面的打開方式,target可以取值如下:
target | 含義 |
---|---|
_blank | 在新頁面或標簽頁中打開文檔 |
_parent | 在父窗框組(frameset)中打開文檔 |
_self | 在當前窗口中打開文檔(默認行為) |
_top | 在頂層窗口打開文檔 |
在指定窗框中打開文檔 |
換行標簽
:表示將后續內容轉移到新行上
兩者都是換行,前者是強制換行,后者是建議在這里換行,但什么時候換行,由瀏覽器根據當前窗口大小決定,后者通常用于指定單詞的換行。
I am dasu, and i am coding.
I am ...
標簽用于表示段落,標簽圍起來的文本內容表示一個段落。
因為瀏覽器會忽略所有的空格、縮進、換行,最多只會解析成一個空格,所以,即使文本內容的段落結構很好,但經由瀏覽器解析出來后的文本內容全部都擠到一堆。
因此,
段落標簽還是很有必要的。
可以用此來標記哪些文本內容作為一個段落。
用法見上例。
&
標簽用于保留源文檔中的格式。
標簽用于表示代碼塊。
由于瀏覽器會合并空白字符,忽略掉換行,導致如果文檔中含有代碼塊時顯示不符合開發工具下的代碼格式風格。
此時,可以借助
標簽和一起使用,來阻止瀏覽器合并空白字符,達到保留代碼格式的目的。
- 用法
protected final void setMeasuredDimension(int measuredWidth, int measuredHeight) { boolean optical = isLayoutModeOptical(this); if (optical != isLayoutModeOptical(mParent)) { Insets insets = getOpticalInsets(); int opticalWidth = insets.left + insets.right; int opticalHeight = insets.top + insets.bottom; measuredWidth += optical ? opticalWidth : -opticalWidth; measuredHeight += optical ? opticalHeight : -opticalHeight; } setMeasuredDimensionRaw(measuredWidth, measuredHeight); }
&
標簽用于表示有序列表,
- 標簽用于表示列表中的每一項。
- 用法
既然是有序列表項,那么序號的起始以及樣式是支持通過屬性設定的,如下:
通過 start 屬性設置起始的編號,通過 type 屬性設置編號的樣式,可設置的 type 樣式如下 :
如果要實現編號是非連續的,那么可以借助
- 標簽的 value 屬性實現 :
注:每個 ol 列表項都是獨立存在,編號默認都從 0 開始,如果想實現不同列表項的編號連貫,或者想以跨度 2 或其他數遞增,那么只用標簽屬性實現局限很多。這時,可考慮通過 CSS 的 ::before 選擇器實現,具體實現后續再說。
&
標簽用于表示無序列表,
- 標簽表示列表里的每一項.
- 用法
因為是無序列表,所以用法比起有序列表
簡單很多,無需使用任何屬性,直接用無序標簽
包含一系列子項
- 即可。
至于,每一項前的樣式,可通過 CSS 樣式,通過 list-style-type 屬性實現,以上樣式對應的 CSS:
ul { list-style-type: disc}
~
標題標簽,對應一級到六級標題。
至于每個標題具體字號樣式如何,取決于各個瀏覽器或者網站。
表格標簽,但貌似現在不常用了。
HTML 文檔做一個表格挺復雜的,涉及的標簽很多,如 ,
, 等等。但根節點總是
,一份表格無外乎就是各種單元格組成,而單元格標簽為
,另外,瀏覽器解析表格文本時,是以行為單位來構建表格,并不是列,所以每個單元格都需要指定位于哪一行中,行標簽為 。而所有行的單元格都是表格的主要內容,因此都在 標簽中。以上是表格的最基本要素,因此一張最簡單的表格,至少需要
,,
, 時,會將 省略,但這并不是說就可以不用 標簽,而是很多瀏覽器會自動將 填補上,所以如果有省略 的場景下,使用 css 選擇器時得稍微注意一下。三種標簽。 有時候,寫表格標簽時,如果沒有其他表頭 部分,或者表腳
& & 由于瀏覽器是以行為單位構建表格,所以一個表格有多少行就是通過
標簽來控制,哪些單元格屬于哪一行,就放在那一行的 標簽中。 雖然說表格都是由一個個的單元格組成,但單元格之間還可以繼續劃分含義,有些單元格是表示內容,而有些單元格則是表示屬性值,或者說列頭或行頭。
通常來說,這些標題類型的表格都是在第一行或第一列的單元格:
這是一個很常見的二維表格,通過
和 來將表格的單元格含義區分開。 :標簽用于表示單元格的表頭 :標簽用于表格單元格的內容 既然是單元格,那么就會存在合并單元格的現象,通俗的講也就是有些表格的大小并不是只占據一格,而是有可能多行多列。此時,可通過屬性來實現:
屬性 含義 colspan 單位數值,如1表示占據1列 rowspan 單位數值,如2表示占據2行
- & &
類似于 HTML 文檔有一些專門用于表明文檔結構的標簽,表格同樣有一些用于指示表格結構的標簽。引入表格結構標簽,是為了更好的區分出各個單元格的含義。
比如,
標簽用來表示表頭類型的單元格,但不管是第一行的表頭,還是第一列的表頭,用的都是 ,那如果還想繼續劃分這個表頭是屬于第一行或者第一列時該怎么做呢? 所以,引入了一些結構性標簽有便于對表格各個單元格更加具體的細分,以滿足各種復雜場景。
: 是表格的根節點
: 用來標記表格的標題行
: 用來標記組成腳的行。不用 ,表格最終效果也一樣,但用了 之后,如果 CSS 想分別作用第一行,或者第一列,這時就可以很容易的通過 thread th 以及 tbody th 來達到目的了。
所以,結合表格結構性標簽的使用,可以讓表格的結構更加明確。
表格除了一張表格內容外,通常還會需要有表格的標題,此時用
標簽來標記。
- 完整示例
工作記錄表 日期 姓名 記錄 2018-07-24 suxq 單元格 2018-07-25 單元格