HTML5基礎知識（一）
HTML是一個超文本標記語言，它不屬于一種編程語言，
基本框架如下：
<!-- 宣告該檔案為HTML型別 -->
<!DOCTYPE html>
<!-- <html></html>指定了html陳述句的范圍，lang="en"指的是語言為英文，中文為"zh" -->
<html lang="en">
<!-- <head></head>規定了一些基本屬性 -->
<head>
<!-- 字符編碼格式為UTF-8,萬國碼可兼容一切語言 -->
<meta charset="UTF-8">
<title>標題</title>
</head>
<!-- 主體部分，文字圖片等資源或演算法在這里面實作 -->
<body>
</body>
</html>
一、基本標簽
<>單標簽用于宣告一些屬性
<></>雙標簽決定了范圍
1.<h1>標題</h1>，
有h1~h6 六種格式，h1字體最大，h7及其以后的標簽相當于沒寫
2.<p></p>
表示里面的內容為一個文欄位落
3.<br>換行標簽
4.<hr>水平線
以上四個標簽都默認獨占一行，不用單獨加上換行標簽
以下標簽不獨占一行
5.<em></em>傾斜標簽
6.<strong></strong>加粗
實體如下：
<!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>
<strong>作者：</strong><br>
<em> 李白</em>
<hr>
<p><em>窗前明月光</em></p>
<p><strong>疑是地上霜</strong></p>
<p><strong><em>舉頭望明月</em></strong></p>
<p>低頭思故鄉</p>
</body>
</html>
結果：
二、注釋和特殊符號
1.空格： ；
在HTML中連續的多個空格默認為一個空格，如果需要打出多個空格的效果則需要使用 ；來表示一個空格，
2.大于號和小于號：> < <和>直接寫在標簽中有可能被識別為標簽的左右結束范圍的標志,所以有時候我們需要使用這兩個符號
3.引號："；理由同上
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>
<!-- 注釋，不顯示在頁面中 -->
<p>空格1 空格結束</p>
<p>空格2 空格結束</p>
<p>大于號和小于號 > < </p>
<p>引號 "" ""</p>
<p>著作權符號 ©</p>
</body>
</html>
結果：
三、圖片標簽
基本格式：
<img src=“路徑” alt="“圖片出錯的備注” width=“300 px” height=“500px”>
注：圖片標簽也是一個不獨占一行的標簽
實體如下：
<!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>
<!-- ./表示當前目錄 -->
<img src="./img/yangsheng_14.gif" alt="養生圖片1" width="300 px">
<!-- 不存在的路徑 -->
<img src="./img/yangsheng_15.gif" alt="養生圖片2" width="300 px">
</body>
</html>
運行結果：
四、超鏈接和錨鏈接
1.超鏈接
可以實作頁面間的跳轉
格式如下：
按鍵內容，可以為文字或圖片
實體：
<!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="http://www.baidu.com">百度一下</a><br>
<a href="./測驗02_圖片.html">點我看圖</a><br>
<a href="./測驗02_圖片.html"><img src="./img/養生_02.gif" alt="商家名稱">點圖看圖</a>
</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>
<h1>標題</h1>
<a href="#base"><h2>點我直達底部</h2></a>
<h3>文字</h3>
<h3>文字</h3>
<h3>文字</h3>
<h3>文字</h3>
<h3>文字</h3>
<h3>文字</h3>
<h3>文字</h3>
<h3>文字</h3>
<h3>文字</h3>
<h3>文字</h3>
<h3>文字</h3>
<h3>文字</h3>
<h3>文字</h3>
<h3>文字</h3>
<h3 id="base">文字</h3>
<a href=""><h2>點我回到頂部</h2></a>
</body>
</html>
結果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/248592.html
標籤：其他
上一篇：計算機科學導論學習（一）
下一篇：《計算機組成原理》筆記