新手學習HTML筆記（一）第一個網頁
HTML：
超文本標記語言 HyperText Markup Language，是一種標記語言，用標記描述網頁，是一種前端語言
每一個網頁都有源碼，查看方式：Ctrl+U / F12
或許還能有意外發現
第一個簡單的HTML網頁：
HTML層理清晰，從上到下依結構描述即可得到簡單的網頁
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>
Hello World!
</title>
</head>
<body>
<h1>
This is the biggest title.
</h1>
<h2>
This is the smaller title.
</h2>
<p>
This is the first paragraph.
</p>
<p>
This is the second paragraph.
</p>
<a href="https://www.baidu.com">
Click here to Baidu.
</a>
<br/>
<img src="picture.jpg" alt="This is a picture" width="105" height="140"/>
</body>
</html>
網頁圖示：
思維導圖結構展示與實際觀察視角
主體
<!doctype html>
-
聲明文檔類型爲HTML5文檔
-
必須位於第一行,
<html>標籤之前 -
對大小寫不敏感，全大寫√全小寫√混合√
<html></html>
- 文檔起始和結束標記
- 一切內容位於兩個標記之間
子結構
< head></head>
- 文檔的開頭，不可見，包含文檔的屬性
<body></body>
- 網頁的主體，可視部分
內容
<head>
<title></title>網頁標題標籤<meta/>網頁原信息標籤
對於中文網頁，需提前聲明編碼方式，一般爲utf-8
<meta charset="utf-8"/>
另外某些瀏覽器默認爲GBK，根據瀏覽器修改
</head>
<body>
-
<h1></h1>標題標籤，從h1-h6共有六種大小樣式 -
<p></p>段落標籤 -
<a></a>超鏈接標籤
url以屬性的方式置於標籤頭內<a href=url>，而顯示詞位於標籤之間
URL分爲絕對、相對、錨 -
<br>換行標籤 -
<img/>圖像標籤
src爲url，alt爲註釋，width、height爲圖像大小屬性置於標籤內
<img src=url alt='xxx' width='xxx' height='xxx'/>
當圖片無法加載時，圖像呈空白並顯示alt的值，alt一般不省略
</body>
標籤格式
HTML的標籤嚴格封閉，分爲成對和獨立兩種，大部分爲成對標籤
-
成對標籤：包含起始標籤和結束標籤，結束標籤前置正斜槓，內容置中
<關鍵字 屬性1=“值1”……屬性n=“值n”>內容</關鍵字> -
獨立標籤：只有關鍵字和後置正斜槓，獨立使用
<關鍵字 屬性1=“值1”……屬性n=“值n”/>
一般要求標籤爲小寫字母組成，屬性爲字符串形式,單雙引號均可
標記補充
整理自菜鳥教程,便於複習和查閱
->原教程傳送門<-
標題段落相關標籤：
| 標籤格式 | 標籤含義 |
|---|---|
<!--xxx--> |
(註釋標籤) |
<hr> |
水平線標籤 |
文本格式化標籤：
| 標籤格式 | 標籤含義 |
|---|---|
<b></b> || <strong></strong> |
加粗標籤*1 |
<i></i> || <em></em> |
斜體標籤 *2 |
<big></big> && <small></small> |
縮放標籤 |
<sup></sup> && <sub></sub> |
上下標標籤 |
<ins></ins> && <del></del> |
插入字和 |
*1、*2：
雖然一般是將後者代替前者使用，即二者呈現的效果相同，但二者含義不同。後者實質是表示突出顯示，而前者只有改變外觀的含義。
計算機輸出標籤：
| 標籤格式 | 標籤含義 |
|---|---|
<code></code> |
計算機代碼標籤 |
<kbd></kbd> |
鍵盤碼標籤 |
<samp></samp> |
計算機代碼樣本標籤 |
<var></var> |
變量標籤 |
<pre></pre> |
預格式標籤 |
舉個栗子：
Hello world!
此文本便是由計算機代碼樣本標籤生成
引文、引用、標籤定義相關：
| 標籤格式 | 標籤含義 |
|---|---|
<abbr></abbr> |
縮寫註釋標籤 縮寫置於title屬性 |
<address></address> |
地址標籤 |
<bdo></bdo> |
文字方向標籤 方向置於dir屬性 方向：ltr rtl |
<blockquote></blockquote> && <q></q> |
長引用標籤 短引用標籤 引用URL置於cite屬性 |
<cite></cite> |
引用引證標籤 |
<dfn></dfn> |
定義項目標籤 |
完
謝謝觀看
XD