超文本標記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用於創建網頁的標準標記語言。
這是一個系列,會持續更新
1.標題
HTML5共有6個級別的標題,h1定義最大標題,h6定義最小標題。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
</body>
</html>
2.註釋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--這是一個 註釋-->
</body>
</html>
3.段落
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>這是一個段落</p>
<p>這是另一個段落</p>
</body>
</html>
4.文本格式化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>粗體</b>
<em>着重文字</em>
<i>斜體</i>
<small>小號字</small>
<strong>加重語氣</strong>
<sub>下標字</sub>
<sup>上標字</sup>
<ins>插入字</ins>
<del>刪除字</del>
</body>
</html>
5.鏈接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
</body>
</html>
6.換行、分割線
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>第一行<br>第二行</p>
<p>分割線</p><hr>
<p>分割線</p>
</body>
</html>
7.頭部信息
<head> 元素包含了所有的頭部標籤元素。在
<head>元素中你可以插入腳本(scripts), 樣式文件(CSS),及各種meta信息。
可以添加在頭部區域的元素標籤爲: <title>, <style>,
<meta>, <link>,
<script>, <noscript>, and <base>.
<head>定義了文檔的信息
<title>定義了文檔的標題
<base>定義了頁面鏈接標籤的默認鏈接地址
<link>定義了一個文檔和外部資源之間的關係
<meta>定義了HTML文檔中的元數據
<script>定義了客戶端的腳本文件
<style>定義了HTML文檔的樣式文件
8.插入圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>插入的圖片</p>
<img src="加油.gif" alt="come on!">
</body>
</html>
9.表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
height: 5cm;
width: 10cm;
text-align: center;
color: blue;
border-color: aquamarine;
}
</style><!--設置表格大小,文字位置,顏色-->
</head>
<body>
<table border="1">
<caption>student data</caption><!--表格名稱-->
<tr><th>name</th><th>age</th></tr><!--表頭-->
<tr><td>tom</td><td>18</td></tr>
</table>
</body>
</html>
align可以設置位置,left:居左;right:居右;center:居中
height:高度;width:寬度
在stytle中可以設置相關屬性。