HTML_關於現代前端必要知識

時間 2019-12-05

標籤 html 關於現代前端必要知識欄目 HTML 简体版

原文原文鏈接

由VS Code空.html文件打出html:5或!按下tab建後默認生成的.html基本框架代碼提及html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>我是title</title>
    </head>
    <body>

    </body>
</html>

第一行: <!DOCTYPE html>前端

很慶幸,現在咱們只須要這麼一個自閉合標籤便可告訴瀏覽器,請使用html5的標準來解析下面的代碼

從第二行起, 咱們就須要用到前端相關知識了, 如下將知識劃分四塊:html5

普通標籤
自閉合標籤
標籤的屬性
標籤的內容

普通標籤

HTML中的普通標籤就是形如<x>abc</x>這種形式的塊結構, 其中<x>爲開標籤, </x>爲閉合標籤簡稱閉標籤git

普通標籤是能夠嵌套其餘標籤的github

自閉合標籤

在最新的W3C標準中, 已經不推薦使用<y />的形式來代表自閉合標籤, 使用<y>便可瀏覽器

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

自閉合標籤是沒法嵌套其餘標籤的ide

標籤的屬性

如下 <z>即表明普通標籤的開標籤與自閉合標籤, 在屬性的表述上, 兩者無差別ui

形如<z a="a1" b="b1">, 其中a與b即爲標籤的屬性, 與之匹配的a1與b1即爲屬性對應的屬性值, 注意屬性值使用""或''括起來的, 若是沒有使用""或''括起來, 也會被轉換成字符串spa

標籤不一樣, 其對應的屬性不一樣, 如img標籤具備src屬性, 即<img src='xxx'>, 而input具備value屬性等等, 即<input value='yyy'>

全部標籤都具備的屬性即爲通用屬性, 如: class, id, style等, 即<any id='id' class='class1' style='style1: value1'>

標籤的內容

注意標籤的內容根據普通標籤與自閉合標籤不一樣而表現不一樣

形如<x>abc</x>, 開標籤與閉標籤之間的內容即爲標籤的內容, 即本例中的abc.
如果自閉合標籤, 則內容體如今其相關屬性上, 如input標籤的內容則體如今屬性value上, 即<input value='我是input的內容'>

那麼如今再看文章頭部的代碼:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>我是title</title>
    </head>
    <body>

    </body>
</html>

則從第二行能夠分析以下:

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

一下介紹四種常見標籤(HTML5標準的標籤種類百來種)

div

塊標籤, 主要負責包裹做用, 形式以下:

```
<div>
    other...
</div>
```

錨點或連接標籤, 用來前往本頁某點或前往其餘頁面

`<a href="https://www.baidu.com/">我是前往百度的錨點</a>`

input

文本輸入標籤

`<input type="password" placeholder="請輸入密碼">`

img

圖片標籤

`<img src="http://img4.imgtn.bdimg.com/it/u=2626080281,1039691735&fm=27&gp=0.jpg" alt="當圖片連接無效時候我會顯示出來">`

將例子融合成最終代碼

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>我是title</title>
    </head>
    <body>
        <div>
            other...
        </div>
        <a href="https://www.baidu.com/">我是前往百度的錨點</a>
        <input type="password" placeholder="請輸入密碼">
        <img src="http://img4.imgtn.bdimg.com/it/u=2626080281,1039691735&fm=27&gp=0.jpg" alt="當圖片連接無效時候我會顯示出來">
    </body>
</html>

效果以下: