HTML 學習筆記（2）基礎內容
阿新 • • 發佈：2019-01-05
轉載： HTML 簡介
例項
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<img src="/images/logo.png" width="258" height="39" />
<h1>標題1</h1>
<p>這是一個段落。</p>
<h1>標題1</h1> - 標題（Heading）是通過
<h1> - <h6>標籤來定義的 - 段落是通過標籤
<p>來定義的 - 連結是通過標籤 來定義的.
- 影象是通過標籤
來定義的
<img scr = " *.png" width = " *" height = " *" />
元素
- <起始標籤（+屬性）>+元素內容+</ 閉合標籤>
<p>****</p><a href = "default.htm">***</a><br>換行
屬性
- 元素可以設定屬性
- 屬性一般屬於開始標籤
e.g.
<a href = "http://www.runoob.com">這是一個連結</a>
- 要求：使用小寫和""雙引號，不過單引號也可以。
- HTML屬性列表
HTML 標籤參考手冊 - 主要屬性：
class: 為html元素定義一個或多個類名名（classname）
id：定義元素的唯一ID
style：規定元素的行內樣式
title：描述了元素的額外資訊
標題（heading）
<h1>-<h6>- 請確保將 HTML 標題 標籤只用於標題。不要僅僅是為了生成粗體或大號的文字而使用標題。
水平線
<hr>
註釋
<! -- 這是一個註釋 -->
如何檢視原始碼
- 單機網頁右鍵
- 檢視原始檔（IE）或者檢視頁面原始碼（firefox）
段落
<p>這是一個段落</p>
換行
<p>這個<br>段落<br>演示了分行的效果</p>
輸出-使用提醒
- 多餘的空格和空行，都會被顯示為一個空格
<DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>runoob.com</title>
<head>
<body>
<h1>春曉</h1>
<p>
春眠不覺曉，
處處聞啼鳥。
夜來風雨聲，
花落知多少。
</p>
<p>注意，瀏覽器忽略了原始碼中的排版（省略了多餘的空格和換行）。</p>
</body>
</html>
文字格式化
- 加粗
<b></b> - 斜體
<i></i> - 下標*(subscript)
<sub></sub> - 上標( superscript)
<sup></sup> - 縮小
<small></ small> - 插入字
<ins></ ins> - 刪除字
<del></ del>
- 電腦自動輸出
<code></code>
引用，引文及標籤定義 - 短引用
<q></q> - 長引用
<blockquote></ blockquote> - 定義專案
<dfn></dfn> - 定義縮寫
<abbr></ abbr>
<p>The <abbr title = "World Health Organization">WHO </abbr> was found in 1948.</p>
- 定義地址
<address></ address>
連結
- HTML 使用
<a>設定超文字連結 - 連結將以以下形式出現在瀏覽器中：
- 一個未訪問過的連結顯示為藍色字型並帶有下劃線。
訪問過的連結顯示為紫色並帶有下劃線。 - 點選連結時，連結顯示為紅色並帶有下劃線。
- 注意：如果為這些超連結設定了 CSS 樣式，展示樣式會根據 CSS 的設定而顯示。
<a href = "url">連結文字</ a>- “連結文字” 不必一定是文字。還可以是圖片或其他 HTML 元素。
- 使用 target 屬性，你可以定義被連結的文件在何處顯示:
<a href = "https://blog.csdn.net/baby_superman" target = "_blank">連結名稱</ a>
- id屬性
- id屬性可用於建立在一個HTML文件書籤標記。
提示: 書籤是不以任何特殊的方式顯示，在HTML文件中是不顯示的，所以對於讀者來說是隱藏的。
<!--在HTML文件中插入ID:-->
<a id="tips">有用的提示部分</a>
<!--在HTML文件中建立一個連結到"有用的提示部分(id="tips"）"：-->
<a href="#tips">訪問有用的提示部分</a>
<!--或者，從另一個頁面建立一個連結到"有用的提示部分(id="tips"）"：-->
<a href="https://blog.csdn.net/baby_superman#tips">
<!--訪問有用的提示部分</a>-->