HTML5學習
HTML5
目錄
1、基本結構
| 標籤 | 說明 |
|---|---|
| DOCTYPE | 聲明爲HTML文檔 |
| html | lang:設置網頁的語言 |
| head | 文檔說明部分，對搜索引擎提供信息或加載CSS、JS等 |
| title | 網頁標題 |
| keyword | 向搜索引擎說明你的網頁關鍵 |
| description | 向搜索引擎描述網頁內容的摘要信息 |
| body | 頁面主體內容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keyword" content="html5,web前端">
<meta name="description" content="html5的基本結構學習">
<title>Document</title>
</head>
<body>
</body>
</html>
2、嵌套關係
3、內容標題
標題使用h1~h6 來定義，用於突出顯示文檔內容。html
- 從h1到h6對於搜索引擎權重來講會愈來愈小
- 在一個頁面中儘可能只有一個h1標籤
- 標題最好不要嵌套如h1內部包含h2
對於默認樣式的效果，等掌握了CSS後咱們就能夠隨意美化了。前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內容標題</title>
</head>
<body>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
</body>
</html>
4、頁眉頁腳
1. header
header標籤用於定義文檔的頁眉，下圖中的紅色區域均可以使用header標籤構建。html5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁眉</title>
</head>
<body>
<header>
<ul>
<li><a href="">系統學習</a></li>
<li><a href="">視頻庫</a></li>
</ul>
</header>
</body>
</html>
2. footer
footer標籤訂義文檔或節的頁腳，頁腳一般包含文檔的做者、版權信息、使用條款連接、聯繫信息等等。程序員
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁腳</title>
</head>
<body>
<footer>
<ul>
<li>©2021 Baidu </li>
<li>(京)-經營性-2017-0020</li>
<li>京公網安備11000002000001號</li>
<li>京ICP證030173號</li>
</ul>
</footer>
</body>
</html>
五. 導航元素
在Html中使用nav設置導航連接。web
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>導航元素</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">新聞</a></li>
<li><a href="#">hao123</a></li>
<li><a href="#">地圖</a></li>
<li><a href="#">視頻</a></li>
<li><a href="#">貼吧</a></li>
<li><a href="#">學術</a></li>
<li><a href="#">更多</a></li>
</ul>
</nav>
</header>
</body>
</html>
六. 主要區域
Html5中使用main標籤表示頁面主要區域，一個頁面中main元素最好出現一次。ide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主要區域</title>
</head>
<body>
<main>
<ul>
<li>內容一</li>
<li>內容二</li>
<li>內容三</li>
<li>內容四</li>
</ul>
</main>
</body>
</html>
七. 內容區域
使用article標籤規定獨立的自包含內容區域。學習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內容區域</title>
</head>
<body>
<!-- 主要區域 -->
<main>
<!-- 內容區域 -->
<article>
<ul>
<li>新聞一</li>
<li>新聞二</li>
<li>新聞三</li>
</ul>
</article>
</main>
</body>
</html>
八. 區塊定義
使用section定義一個區塊，通常是一組類似內容的排列組合。搜索引擎
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>區塊定義</title>
</head>
<body>
<main>
<article>
<section>
拼勁每一刻
</section>
<section>
2021男子手球錦標賽
</section>
<section>
氧氣般小清新教主
</section>
</article>
</main>
</body>
</html>
九. 附加區域
使用aside用於設置與主要區域無關的內容，好比側面欄的廣告等。code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>附加區域</title>
</head>
<body>
<!-- 附加區域 -->
<aside>
附加區域
</aside>
<main>
<!-- 內容區域 -->
<article>
內容區域
</article>
</main>
</body>
</html>
十. 通用容器
div通用容器標籤是較早出現的，也是被大多數程序員使用最多的容器。不過咱們應該更傾向於使用有語義的標籤，如： article（內容區域）、section（區塊定義）、aside（附加區域）、nav（導航元素）等。視頻
有些區域這些有語義的容器很差表達，這時能夠採用div容器，好比輪播圖效果中的內容。
十一. 圖像
用做文檔中插圖的圖像。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>figure </title>
</head>
<body>
<!-- 頁眉 -->
<header>這是頁眉</header>
<!-- 主要區域 -->
<main>
<!-- 內容區域 -->
<article>
<!-- 插入圖像 -->
<figure>
<!-- 給插入圖像添加一個標題 -->
<figcaption>圖像標題</figcaption>
<img src="../images/timg.gif" alt="圖片加載失敗">
</figure>
</article>
</main>
<!-- 頁腳 -->
<footer>這是頁腳</footer>
</body>
</html>
十二. meter
meter標籤訂義度量衡。僅用於已知最大和最小值的度量。
好比：磁盤使用狀況，查詢結果的相關性等
注意：meter不能做爲一個進度條來使用。
<meter value="3" min="0" max="10"></meter>
十三. progress
progress標籤訂義運行中的任務進度。
注意：progress標籤不適合用來表示度量衡（例如，磁盤空間使用狀況或相關的查詢結果）。
<progress value="3" max="10"></progress>
相關文章
- 1. html5學習
- 2. HTML5+CSS3學習
- 3. HTML5 CSS3學習
- 4. html5 canvas 學習
- 5. HTML5 Canvas學習
- 6. HTML5 -- API學習
- 7. html5學習——canvas
- 8. HTML5 Geolocation學習
- 9. html5學習01
- 10. Html5 學習
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. html5學習
- 2. HTML5+CSS3學習
- 3. HTML5 CSS3學習
- 4. html5 canvas 學習
- 5. HTML5 Canvas學習
- 6. HTML5 -- API學習
- 7. html5學習——canvas
- 8. HTML5 Geolocation學習
- 9. html5學習01
- 10. Html5 學習