<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題欄文檔</title> </head> </head> </html>
1，代碼意思
<!doctype>：標記於文檔最前面，用於向瀏覽器說明當前文檔使用哪種HTML標准規范。
<html>:標記於<!doctype>標記之后，也成為根標記，用於告知瀏覽器其自身是一個HTML文檔
<html>標記標志着html文檔的開始，</html>標志着html文檔的結束。
<head>:標記用於定義html文檔的頭部信息，也成為頭部標記，緊跟在<html>標記之后，主要用來封裝其他位於文檔頭部的標記。
<head>標記標志着頭部開始，</head>標記標志着頭部的結束。
<body>：標記於定義html文檔所要顯示的內容，也成為主題標記（一個html文檔只能含有一對<body>標記，切<body>標記必須在<html>標記內位於<head>頭部標記之后，與<head>標記是並列關系。）
<hr />:為單位標記，用於定義一條水平線。
<!doctype html > <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>傳智博客雲課堂</title> </head> <body> <h2 >傳智博客雲課堂上線了</h2> <p >更新於：2019年07月28日14時08分 來源：傳智博客</p> <hr /> <p > 傳智雲課堂是傳智博客在線教育平台，可以實現晚上在家學習，在線直播教學，實現互動輔助等多種功能，專注於網頁，平面，ui設計以及web前端培訓。 </p> <p > 傳智博客在線教育平台，可以實現晚上在家學習，在線直播教學，實時互動輔導等多種功能，專注於網頁，平面，ui設計以及web前段的培訓 </p> </body> </html>
這個代碼效果圖如下。
2，注釋語句
<!-- 注釋語句 -->
注釋內容雖然不會顯示在瀏覽器窗口中，但是作為html文檔內容的一部分，可以被下載到用戶的計算機上，查看源代碼時就可以看到。
3，標記的屬性
使用html5制作網頁時，可以提供更多信息
<標記名 屬性1 =“屬性值1”屬性2 =“屬性值2”...>內容</標記名>
比如語句
<h1 align="center">標題文本</h1>
期中align為屬性名，center為屬性值，表示標題文本這四個字居中對齊，還可以設置左對齊右對齊，對應屬性值分別是left和right，但是如果省略align則會自動默認為左對齊
例如
<!doctype html > <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>傳智博客雲課堂</title> </head> <body> <h2 align="center" >傳智博客雲課堂上線了</h2> <p align="center" >更新於：2019年07月28日14時08分 來源：傳智博客</p> <hr size="2" color="CCCCCC" /> <p align="center" > 傳智雲課堂是<strong>傳智博客</strong>在線教育平台，可以實現晚上在家學習，在線直播教學，實現互動輔助等多種功能，專注於網頁，平面，ui設計以及web前端培訓。 </p> <p align="center" > 傳智博客在線教育平台，可以實現晚上在家學習，在線直播教學，實時互動輔導等多種功能，專注於網頁，平面，ui設計以及web前段的培訓 </p> </body> </html>
這個運行效果為
其中<hr>中的下划線顏色還有粗細都可以自己定義
二，HTML5文檔頭部相關標記
1. 設置頁面標題標記<title>
<title>網頁標題名稱</title>
<title>標記用於定義HTML頁面的標題，就是說給網頁起個名字，必須位於<head>標記之內，（文檔只能包含一對<title></title>標記）
<!doctype html> <html> <head> <meta charset="utf-8"> <title>style標記的使用</title> <style type="text/css"> h2{color: blue;} p{color: black;} </style> </head> <body> <h2>設置h2標題為紅色字體</h2> <p>設置p段落為藍色字體</p> </body> </html>
效果如下
（顏色可以自己任意定義）
2. 文本控制標記
為了是網頁更具有語義化，我們經常會在頁面用到標題標記。HTML5提供了6個標記的標題即<h1><h2><h3><h4><h5><h6>,但是從<h1>到<h6>重要性遞減
<!doctype html> <html> <head> <meta charset="utf-8"> <title>style標記的使用</title> <style type="text/css"> h2{color: red;} p{color: black;} </style> </head> <body> <h2>設置標題為紅色字體</h2> <p>設置p段落為藍色字體</p> <h1>標題1</h1> <h2>標題2</h2> <h3>標題3</h3> <h4>標題4</h4> <h5>標題5</h5> <h6>標題6</h6> </body> </html>
效果圖為（在此可以看到<h1>-<h6>是遞減的）
（從上圖可以看出 默認情況文字是加粗左對齊的，但是如果想要標題文字右對齊或者中間對齊的話 就要使用align屬性設置對其方法
left：設置標題左對齊（默認方式）
center：設置標題文字居中對齊
right：設置標題文字右對齊
（align屬性設置 對齊方式 效果）
3.段落標記
網頁中要報文字有條例的顯示出來，離不開段落標記(代碼如下)
<p align="對齊方式">段落文字</p>
下面通過一個案例來掩飾
代碼為
<!doctype html> <html> <head> <meta charset="utf-8"> <title>段落標記的用法和對齊方式</title> </head> <body> <p align="center">“IT問答精靈”為計算機愛好者提供java，net，pht，c/c++，網頁設計，平面設計。UI設計</p> <p align="left">java學院</p> <p align="center">網頁平面設計學院</p> <p align="right">php學院</p> </body> </html>
從上圖很容易看出通過使用<p>標記，每個段落都會獨占一行，並且段落之間拉開了一定的距離
4.水平線<hr />
水平線是將段落與段落之間隔開的，是得每一個段落結構清晰
<hr 屬性=“屬性值” />
| 屬性名 | 含義 | 屬性值 |
| align | 設置水平線對齊方式 | 可選擇left，right，center三種值，默認為center，居中對齊 |
| size | 設置水平線粗細 | 以像素（px）為單位，默認2像素 |
| color | 設置水平線的顏色 | 可用顏色名稱，十六進制#rgb，rgb（r，g，b）表示 |
| width | 設置水平線的寬度 | 可以使去定的像素值，也可以是瀏覽器窗口的百分比（100%） |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>水平線標記的用法和屬性</title> </head> <body> <p align="center">“IT問答精靈”為計算機愛好者提供java，net，pht，c/c++，網頁設計，平面設計。UI設計</p> <hr /> <p align="left">java學院</p> <hr color="red" align="center" width="600"/> <p align="center">網頁平面設計學院</p> <hr color="#0066FF" align="left" width="100"/> <p align="right">php學院</p> <hr align="center" color="red" width="right"> </body> </html>
效果圖為
）