認識html

時間 2019-11-06

標籤認識 html 欄目 HTML 简体版

原文原文鏈接

html：超文本標記語言html

Hyper text markup languageweb

超文本：超連接，實現頁面的跳轉webstorm

html結構標準工具

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>hello, world</p>
    <p>你好，世界</p>
</body>
</html>

聲明文檔類型：<!DOCTYPE html>開發工具

根標籤：<html>字體

頭標籤：<head>ui

標題標籤：<title>spa

主體標籤：<body>code

html和htm的區別？orm

html與htm是同樣的。

html標籤分類

是否成對出現

單標籤：<!doctype html>，<br />

雙標籤：<html></html>，<head></head>

包含（嵌套關係，父子）

好比<head><title></title></head>

並列關係（兄弟，姐妹）

好比<head></head><body></body>

開發工具

webstorm，由於IDEA已經用熟了

ctrl+/ 註釋一行

輸入標籤 tab 能夠補全標籤

ctrl+shift+上下箭頭可將當前行快速上移，下移

html標籤

註釋： ctrl+/

換行標籤：<br />

水平線標籤： <hr />

段落： <p></p>

標題標籤

<h1>一行白鷺上青天</h1>

<h2>一行白鷺上青天</h2>

<h3>一行白鷺上青天</h3>

<h4>一行白鷺上青天</h4>

<h5>一行白鷺上青天</h5>

<h6>一行白鷺上青天</h6>

由於SEO的緣由，h1在一個頁面中只能出現一次

字體標籤：<font></font>，已棄用

加粗：<strong></strong>，<b></b>，推薦用<strong></strong>

文字傾斜：<em></em>，<i></i>，推薦使用<em></em>

刪除線：<del></del>，<s></s>，推薦使用<del></del>

下劃線標籤：<ins></ins>，<u></u>，推薦使用<ins></ins>

使用<strong>，<em>，<del>和<ins>有語義化的效果。

練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--輸入標籤, 而後按tab能夠補全標籤-->
    <!--換行標籤-->
    你好，<br>世界
    <hr>
    <p>
        充分確定了5年來自貿試驗區建設取得的重大成就，並對下一步改革探索提出明確要求，
        爲把自貿試驗區建設成新時代改革開放新高地指明瞭方向，爲自貿試驗區建設注入新的強大動力。
    </p>
    <h1>一行白鷺上青天</h1>
    <h2>一行白鷺上青天</h2>
    <h3>一行白鷺上青天</h3>
    <h4>一行白鷺上青天</h4>
    <h5>一行白鷺上青天</h5>
    <h6>一行白鷺上青天</h6>
    <!--只能取值到h6-->
    <font size="6" color="red"></font>

    <strong>strong用來加粗的</strong><br />
    <b>這個也能夠加粗</b><br />
    <em>文本傾斜</em><br />
    <i>這個也能夠文本傾斜</i><br />
    <del>66.66</del><br />
    <s>55.55</s><br />
    <ins>我是下劃線</ins><br />
    <u>不推薦使用這個下劃線</u>
</body>
</html>

效果演示

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。