HTML 基礎用法-菜鳥教程學習筆記2
時間：2023-08-29 22:48:02 | 來源：網站運營
時間：2023-08-29 22:48:02 來源：網站運營
HTML 基礎用法-菜鳥教程學習筆記2：
<body>1.HTML 標題（Heading）是通過<h1> - <h6> 標簽來定義的。
2.HTML 段落是通過標簽 <p> 來定義的。
3.HTML 鏈接是通過標簽 <a> 來定義的。
實例：
<a href="https://www.runoob.com">這是一個鏈接</a>提示:在 href 屬性中指定鏈接的地址。不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。
默認情況下，鏈接將以以下形式出現(xiàn)在瀏覽器中：
- 一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。
- 訪問過的鏈接顯示為紫色并帶有下劃線。
- 點擊鏈接時，鏈接顯示為紅色并帶有下劃線。
注意：如果為這些超鏈接設置了 CSS 樣式，展示樣式會根據(jù) CSS 的設定而顯示。
鏈接屬性：
a.使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。下面的這行會在新窗口（target="_blank"）打開文檔:
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">訪問菜鳥教程!</a>b.
id 屬性可用于創(chuàng)建一個 HTML 文檔書簽。
提示: 書簽不會以任何特殊方式顯示，即在 HTML 頁面中是不顯示的，所以對于讀者來說是隱藏的。
在HTML文檔中插入ID:
<a id="tips">有用的提示部分</a>在HTML文檔中創(chuàng)建一個鏈接到"有用的提示部分(id="tips"）"：<a href="#tips">訪問有用的提示部分</a>或者，從另一個頁面創(chuàng)建一個鏈接到"有用的提示部分(id="tips"）"：<a href="https://www.runoob.com/html/html-links.html#tips">訪問有用的提示部分</a>更多實例:圖片鏈接
如何使用圖片鏈接。
在當前頁面鏈接到指定位置
如何使用書簽
跳出框架
本例演示如何跳出框架，假如你的頁面被固定在框架之內。
創(chuàng)建電子郵件鏈接
本例演示如何鏈接到一個郵件。（本例在安裝郵件客戶端程序后才能工作。）
創(chuàng)建電子郵件鏈接 2
本例演示更加復雜的郵件鏈接。
4.HTML 圖像是通過標簽 <img> 來定義的.
實例:
<img src="/images/logo.png" width="258" height="39" />注意： 圖像的名稱和尺寸是以屬性的形式提供的
5. HTML 元素（一般是開始標簽（可含屬性）+內容+結束標簽）
語法：
HTML 元素以開始標簽起始
HTML 元素以結束標簽終止
元素的內容是開始標簽與結束標簽之間的內容
某些 HTML 元素具有空內容（empty content）
空元素在開始標簽中進行關閉（以開始標簽的結束而結束）
大多數(shù) HTML 元素可擁有屬性
元素可嵌套
小注：
（1）即使您忘記了使用結束標簽，大多數(shù)瀏覽器也會正確地顯示 HTML。能正常顯示因為關閉標簽是可選的。但不要依賴這種做法。忘記使用結束標簽會產生不可預料的結果或錯誤。
（2）沒有內容的 HTML 元素被稱為空元素?？赵厥窃陂_始標簽中關閉的。
<br> 就是沒有關閉標簽的空元素（<br> 標簽定義換行）。
在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關閉。
在開始標簽中添加斜杠，比如 <br />，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠的保障。
（3）使用小寫標簽
HTML 標簽對大小寫不敏感：<P> 等同于 <p>。許多網站都使用大寫的 HTML 標簽。
菜鳥教程使用的是小寫標簽，因為萬維網聯(lián)盟（W3C）在 HTML 4 中推薦使用小寫，而在未來 (X)HTML 版本中強制使用小寫。
6. HTML 屬性 完整的HTML屬性列表: HTML 標簽參考手冊
屬性可以在元素中添加附加信息
屬性一般描述于開始標簽
屬性總是以名稱/值對的形式出現(xiàn)，比如：name="value"。
7. HTML 水平線
<hr/> 標簽在 HTML 頁面中創(chuàng)建水平線。hr 元素可用于分隔內容。
8. HTML 注釋
<!--這是一個注釋，注釋在瀏覽器中不會顯示-->
9.HTML 輸出使用提醒
我們無法確定 HTML 被顯示的確切效果。屏幕的大小，以及對窗口的調整都可能導致不同的結果。對于 HTML，您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。
當顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行。所有連續(xù)的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續(xù)的空行（換行）也被顯示為一個空格。
10. HTML 格式化標簽
HTML 使用標簽 <b>("bold") 與 <i>("italic") 對輸出的文本進行格式, 如：粗體 or 斜體
這些HTML標簽被稱為格式化標簽（請查看底部完整標簽參考手冊）。
Remark通常標簽 <strong> 替換加粗標簽 <b> 來使用, <em> 替換 <i>標簽使用。
然而，這些標簽的含義是不同的：
<b> 與<i> 定義粗體或斜體文本; <strong> 或者 <em>意味著你要呈現(xiàn)的文本是重要的，所以要突出顯示。
文本格式化
此例演示如何在一個 HTML 文件中對文本進行格式化
預格式文本
此例演示如何使用 pre 標簽對空行和空格進行控制。
"計算機輸出"標簽
此例演示不同的"計算機輸出"標簽的顯示效果。
地址
此例演示如何在 HTML 文件中寫地址。
縮寫和首字母縮寫
此例演示如何實現(xiàn)縮寫或首字母縮寫。
文字方向
此例演示如何改變文字的方向。
塊引用
此例演示如何實現(xiàn)長短不一的引用語。
刪除字效果和插入字效果
此例演示如何標記刪除文本和插入文本。
HTML 文本格式化標簽| 標簽 | 描述 |
|---|
| <b> | 定義粗體文本 |
| <em> | 定義著重文字 |
| <i> | 定義斜體字 |
| <small><big> | 定義小號字 定義大號字 |
| <strong> | 定義加重語氣 |
| <sub> | 定義下標字 |
| <sup> | 定義上標字 |
| <ins> | 定義插入字 |
| <del> | 定義刪除字 |
HTML "計算機輸出" 標簽| 標簽 | 描述 |
|---|
| <code> | 定義計算機代碼 |
| <kbd> | 定義鍵盤碼 |
| <samp> | 定義計算機代碼樣本 |
| <var> | 定義變量 |
| <pre> | 定義預格式文本 |
HTML 引文, 引用, 及標簽定義| 標簽 | 描述 |
|---|
| <abbr> | 定義縮寫 |
| <address> | 定義地址 |
| <bdo> | 定義文字方向 |
| <blockquote> | 定義長的引用 |
| <q> | 定義短的引用語 |
| <cite> | 定義引用、引證 |
| <dfn> | 定義一個定義項目。 |
<head><head> 元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。
可以添加在頭部區(qū)域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
1. <title> - 定義了HTML文檔的標題
使用 <title> 標簽定義HTML文檔的標題
2.<base> - 定義了所有鏈接的URL
使用 <base> 定義頁面中所有鏈接默認的鏈接目標地址。
<base href="http://www.runoob.com/images/" target="_blank">3.<meta> - 提供了HTML文檔的meta標記
使用 <meta> 元素來描述HTML文檔的描述，關鍵詞，作者，字符集等。
<meta>標簽描述了一些基本的元數(shù)據(jù)，元數(shù)據(jù)也不顯示在頁面上，但會被瀏覽器解析。
META 元素通常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數(shù)據(jù)。使用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他Web服務
為搜索引擎定義關鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">為網頁定義描述內容:
<meta name="description" content="免費 Web & 編程 教程">定義網頁作者:
<meta name="author" content="Runoob">每30秒鐘刷新當前頁面:
<meta http-equiv="refresh" content="30">4. <link>標簽-定義了文檔與外部資源之間的關系，通常用于鏈接到樣式表:
<head><link rel="stylesheet" type="text/css" href="mystyle.css"><!--rel：relationship的英文縮寫·REL屬性用于定義鏈接的文件和HTML文檔之間的關系。StyleSheet，的意思就是樣式調用，REL=StyleSheet指定一個固定或首選的樣式而REL="Alternate StyleSheet"定義一個交互樣式。--></head>5. <style>標簽-定義了HTML文檔的樣式文件引用地址.在<style> 元素中你也可以直接添加樣式來渲染 HTML 文檔:
<head><style type="text/css">body {background-color:yellow}p {color:blue}</style></head>6. <script>標簽-用于加載腳本文件，如： JavaScript
小注：a. <title>元素不僅可以顯示文本，也可以在
左側顯示logo等圖片。舉例：顯示時，要將<link>標簽放入<head>里。
<!doctype HTML><html><head><link rel="shortcut icon" href="圖片url"><title>這是一個帶圖片的標簽</title></head><body>……</body></html>b.head 標簽和 header 標簽的不同head 標簽用于定義文檔頭部，它是所有頭部元素的容器。<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。
header 標簽用于定義文檔的頁眉（介紹信息）。
如：
<html> <body> <header> <p>段落</p> <h1>一級標題</h1> </header> </body></html>注意千萬不要弄混。
在線咨詢
