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>
<p>這是一個段落。</p>
<h2>標題1</h2>
<p>這是一個段落。</p>
<a href = "http://www.runob.com">runoob</a>
</body>
</html>
- 標題(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>-->