HTML 關於現代前端必要知識

2021-09-13 12:13:07 字數 1808 閱讀 8706

由vs code空.html檔案打出html:5!按下tab建後預設生成的.html基本框架**說起

第一行:

很慶幸,如今我們只需要這麼乙個自閉合標籤即可告訴瀏覽器,請使用html5的標準來解析下面的**
從第二行起, 我們就需要用到前端相關知識了, 以下將知識劃分四塊:

普通標籤

自閉合標籤

標籤的屬性

標籤的內容

html中的普通標籤就是形如abc這種形式的塊結構, 其中為開標籤,為閉合標籤簡稱閉標籤

普通標籤是可以巢狀其他標籤的

在最新的w3c標準中, 已經不推薦使用的形式來表明自閉合標籤, 使用即可

具體表述為, 某標籤只有開標籤並且沒有與之匹配的閉標籤, 則這種標籤稱之為自閉合標籤, 即自行閉合標籤

自閉合標籤是無法巢狀其他標籤的

以下即代表普通標籤的開標籤與自閉合標籤, 在屬性的表述上, 二者無差異

形如, 其中a與b即為標籤的屬性, 與之匹配的a1與b1即為屬性對應的屬性值, 注意屬性值使用""''括起來的, 如果沒有使用""''括起來, 也會被轉換成字串

標籤不同, 其對應的屬性不同, 如img標籤具有src屬性, 即, 而input具有value屬性等等, 即

所有標籤都具有的屬性即為通用屬性, 如: class, id, style等, 即

注意標籤的內容根據普通標籤與自閉合標籤不同而表現不同
形如abc, 開標籤與閉標籤之間的內容即為標籤的內容, 即本例中的abc.

若是自閉合標籤, 則內容體現在其相關屬性上, 如input標籤的內容則體現在屬性value上, 即

那麼現在再看文章頭部的**:

則從第二行可以分析如下:

乙個html普通標籤, 其屬性lang的屬性值是en, 這個html標籤包裹了head與body兩個普通標籤, 其中body普通標籤內容為空, 屬性也是空; 而head普通標籤屬性為空, 但是內容是包裹了三個meta自閉合標籤與乙個title普通標籤, 三個meta自閉合標籤各自有各自的屬性值, title普通標籤沒有屬性, 內容是"我是title"
div

塊標籤, 主要負責包裹作用, 形式如下:

```other...

```

a

錨點或鏈結標籤, 用來前往本頁某點或前往其他頁面
input

文字輸入標籤

``
img

標籤

`

other...

效果如下:

前端html知識

hhhhhhh hashai這是六級標籤 nbsp 字元實體 空格不太精確,這是p標籤 也就是段落 如果想要換行要用 或者知道嗎 10 5,容易誤認 故寫作10 5,10 79 em標籤 行內元素 表示語氣中的強調詞,效果是斜體 i標籤 行內元素 表示專業詞彙,效果是斜體 b標籤表示強調詞 stro...

HTML前端知識總結

html標籤大部分是成對出現的 也有部分少量標籤為單標籤.標題標籤,快速實現標題效果.使用f12開啟除錯介面,檢視 元素.段落標籤 塊級元素 適當用於標記一段文字,段與段間距較大.水平標籤 換行標籤 強制換行 塊級元素 下劃線 上標註 下標註 如 2 是文字傾斜.主要用來實現布局的控制,頁面內容,通...

Web前端知識總結 HTML

超文字標記語言 英語 hypertext markup language,簡稱 html 是一種用於建立網頁的標準標記語言。您可以使用 html 來建立自己的 web 站點,html 執行在瀏覽器上,由瀏覽器來解析。在本教程中,您將學習如何使用 html 來建立站點。html 很容易學習!相信您能很...