HTML 一、簡介 1.HTML是超文本標記語言，標準通用標記語言下的一個應用，解釋性語言。 2.“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程式等非文字元素。 3.超文本標記語言的結構包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關於網頁的信息，“主體 ...
HTML 基本認識
一、簡介
1.HTML是超文本標記語言，標準通用標記語言下的一個應用，解釋性語言。
2.“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程式等非文字元素。
3.超文本標記語言的結構包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關於網頁的信息，“主體”部分提供網頁的具體內容。
二、語言特點（內容摘抄自--百度百科）
1.簡易性：超級文本標記語言版本升級採用超集方式，從而更加靈活方便。
2.可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言採取子類元素的方式，為系統擴展帶來保證。
3.平臺無關性：雖然個人電腦大行其道，但使用MAC等其他機器的大有人在，超級文本標記語言可以使用在廣泛的平臺上，這也是萬維網（WWW）盛行原因之一。
4.通用性：另外，HTML是網路的通用語言,一種簡單、通用的全置標記語言。它允許網頁製作人建立文本與圖片相結合的複雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什麼類型的電腦或瀏覽器。
三、整體結構
HTML標準文件結構有一個基本的整體結構，即超文本標記語言文件的開頭與結尾標誌和超文本標記語言的頭部與實體兩大部分。有三個雙標記符用於頁面整體結構的確認。
1.文件代碼整體
標記符<html>,說明該文件是用超文本標記語言（本標簽的中文全稱）來描述的,<html></html>是超文本標記語言文件的開始標記和結尾標記。
2.頭部內容
<head></head>；這2個標記符分別表示頭部信息的開始和結尾。頭部中包含的標記是頁面的標題、序言、說明等內容，它本身不作為內容來顯示，但影響網頁顯示的效果。頭部中最常用的標記符是標題標記符和meta標記符，
其中標題標記符用於定義網頁的標題，它的內容顯示在網頁視窗欄中，網頁標題可被瀏覽器用作書簽和收藏清單。
HTML head 元素：
HTML當中的meta標簽
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML當中的meta標簽</title> 5 6 <!--設置網頁的編碼--> 7 <meta charset="utf-8"/> 8 9 <!--設置網頁的關鍵字--> 10 <meta name="keywords" content="頁面關鍵字"/> 11 12 <!--設置網頁的描述--> 13 <meta name="description" content="網頁相關描述信息" /> 14 15 <!--設置網頁的更新信息--> 16 <meta name="revised" content="更新信息,2017年3月2日09:55:00"/> 17 18 <!--設置網頁刷新頻率以及跳轉地址--> 19 <meta http-equiv="refresh" content="3,http://www.bing.com" /> 20 21 <!--設置標題處的ico小圖標--> 22 <link rel="shortcut icon" href="./my1.ico" type="image/x-icon"/> 23 24 <!--引入一個外部的css層疊樣式表--> 25 <link rel="stylesheet" href="./css.css" type="text/css"/> 26 </head> 27 <body> 28 </body> 29 </html>HTML當中的meta標簽
head標簽中的Script標簽和Style標簽
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>head標簽中的Script標簽和Style標簽</title> 5 <meta charset="utf-8"/> 6 7 <!--通常是寫js用的標簽--> 8 <script> 9 //在網頁打開的同時彈出了一個對話框 10 //alert('彈框內容'); 11 </script> 12 13 <!--引入一個外部的js文件--> 14 <script src="1.js"></script> 15 16 <!--在當前頁面來添加css樣式--> 17 <style> 18 font{ 19 color:red; 20 } 21 </style> 22 </head> 23 <body> 24 25 </body> 26 </html>head標簽中的Script標簽和Style標簽
3.主體內容
<body></body>；，網頁中顯示的實際內容均包含在這2個正文標記符之間。正文標記符又稱為實體標記。
HTML當中的文本標簽
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML當中的文本標簽</title> 5 <meta charset="utf-8"/> 6 </head> 7 <body> 8 <!--標題標簽--> 9 <h1>讓我們來看一下，<u>字體</u>字體的大小變化</h1> 10 <h2>讓我們來看一下，字體的大小變化</h2> 11 <h3>讓我們來看一下，字體的大小變化</h3> 12 <h4>讓我們來看一下，字體的大小變化</h4> 13 <h5>讓我們來看一下，字體的大小變化</h5> 14 <h6>讓我們來看一下，字體的大小變化</h6> 15 16 <!--水平線標簽--> 17 <hr/> 18 19 <!--b標簽：普通的加粗標簽--> 20 <b>文字加粗</b><br/> 21 22 <!--strong標簽：加粗強調的作用，SEO可以著重抓取到的內容--> 23 <strong>文字加粗（強調）</strong><br/> 24 25 <!--斜體、強調標簽--> 26 <em>斜體（強調）</em><br/> 27 28 <!--普通的斜體標簽--> 29 <i>讓你隨時<u>脈動</u>回來！</i><br/> 30 31 <!--普通的斜體標簽--> 32 <cite>讓你隨時脈動回來！</cite><br/> 33 34 <!--下標標簽--> 35 H<sub>2</sub>0<br/> 36 37 <!--上標標簽--> 38 2<sup>2</sup>=4 39 40 <!--段落標簽--> 41 <p>p標簽代表段落，一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p> 42 43 </body> 44 </html>HTML當中的文本標簽
文本標簽頁面展示效果：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML當中的文本標簽</title> 5 <meta charset="utf-8"/> 6 </head> 7 <body> 8 <h1>HTML當中的文本標簽</h1> 9 10 <!--定義文檔的輸出方向--> 11 <bdo dir="ltr">正大光明</bdo><br/> 12 <bdo dir="rtl">正大光明</bdo><br/> 13 14 <!--定義一個短的引用--> 15 沙僧說：<q>師傅，大師兄和二師兄被妖怪抓走啦~~</q><br/> 16 17 <!--表示一個縮寫的形式--> 18 <abbr title="United States">US</abbr><br/> 19 20 <!--刪除線標簽--> 21 測試刪除線測試刪除線測試刪除線測試刪除線測試刪除線<del>蒼老師？</del>，<del>被刪除了哈哈</del><br/> 22 23 <!--定義一段被隱藏的文字,summary標簽可以定義列表的標題--> 24 <details> 25 <summary>鬼吹燈系列叢書</summary> 26 鬼吹燈之精絕古城<br/> 27 鬼吹燈之黃皮子墳<br/> 28 鬼吹燈之雲南蟲谷<br/> 29 </details> 30 31 <!--對話標簽--> 32 <dialog open> 33 <dt>男：</dt><dd>我們分手吧~~</dd> 34 <dt>女：</dt><dd>為什麼？</dd> 35 <dt>男：</dt><dd>我懷孕了~~</dd> 36 <dt>女：</dt><dd>不，不可能，我不相信……</dd> 37 <dt>男：</dt><dd>你看你，我們連最起碼的信任都沒有了，還談什麼？</dd> 38 <dt>女：</dt><dd>…………</dd> 39 </dialog> 40 </body> 41 </html>HTML當中的文本標簽
HTML當中的列表標簽
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML當中的列表標簽</title> 5 <meta charset="utf-8"/> 6 </head> 7 <body> 8 <h1>HTML當中的列表標簽</h1> 9 <!--有序列表--> 10 <ol type="A"> 11 <li>有序列表1</li> 12 <li>有序列表2</li> 13 <li>有序列表3</li> 14 </ol> 15 16 <!--無序列表--> 17 <ul type="circle"> 18 <li>無序列表1</li> 19 <li>無序列表2</li> 20 <li>無序列表3</li> 21 </ul> 22 23 <!--格式化輸出標簽--> 24 <pre> 25 * 26 * * 27 * * * 28 * * * * 29 </pre> 30 </body> 31 </html>HTML當中的列表標簽
頁面顯示效果：
在<ol>標簽中增加 type 屬性，使其屬性值為 A or a or 1 會顯示不同的排序編碼，可視情況而定
HTML當中的超鏈接標簽
<a></a>：超鏈接標簽
屬性： 值：
href： 路徑或外部網站
title： 滑鼠移入鏈接時提示的內容
target： _self (預設，從當前標簽頁打開鏈接)
_blank (在新標簽頁中打開鏈接)
_parent (在父級框架中打開鏈接)
_top (在頂級框架中打開鏈接)
framename(在制定框架名的位置打開鏈接)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML當中的超鏈接標簽 a</title> 5 <meta charset="utf-8"/> 6 </head> 7 <body> 8 <!--相對路徑鏈接到本地的文件--> 9 <a href="./1.html">鏈接本地HTML文件</a><br/><br/> 10 11 <!--鏈接到了一個外部的網站--> 12 <a href="http://lol.qq.com" target="_blank">英雄聯盟官網</a> 13 14 <!--使用絕對路徑鏈接到本地文件--> 15 <a href="D:\Wamp\www\test\lesson_HTML\test.html" title="超鏈接信息">5.html</a> 16 17 </body> 18 </html>HTML當中的超鏈接標簽
頁面顯示效果：
a標簽的錨點功能
使 a 鏈接標簽可跳轉到頁面指定元素的位置
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>a標簽的錨點功能</title> 5 <meta charset="utf-8"/> 6 <style> 7 /*找到4個div添加了一些屬性*/ 8 div{ 9 /*設置一下div的寬度*/ 10 width:500px; 11 12 /*設置一下div的高度*/ 13 height:500px; 14 15 /*設置一下div的邊框：1像素寬，實線，紅色*/ 16 border:1px solid red; 17 } 18 </style> 19 </head> 20 <body> 21 <h1>a標簽的錨點功能</h1> 22 <a href="#one">第一章：三打白骨將</a><br/> 23 <a href="#two">第二章：倒拔垂楊柳</a><br/> 24 <a href="#three">第三章：火燒赤壁</a><br/> 25 <a href="#four">第四章：劉姥姥進大觀園</a><br/> 26 27 <!--第一章--> 28 <h2><a id="one"></a>第一章：三打白骨將</h2> 29 <div> 30 <p>胡八一（靳東飾）上山下鄉來到中蒙邊境的崗崗營子，帶上了家中僅存的一本書——《十六字陰陽風水秘術》①，閑來無事將書中文字背得滾瓜爛熟。之後參軍到西藏，遇上雪崩掉落一條巨大的地溝當中，胡八一利用自己懂得的墓葬秘術逃得不死。複員後，胡八一和好友王胖子（趙達飾）一起加入了一支前往新疆考古的考古隊。一行人歷經萬險來到了塔克拉瑪乾沙漠中的精絕古城遺址，進入了地下“鬼洞”。洞中機關重重、陷阱不斷，這神秘的鬼洞似乎在一位先知的掌控之中。 31 </p> 32 </div> 33 34 <!--第二章--> 35 <h2><a id="two"></a>第二章：倒拔垂楊柳</h2> 36 <div> 37 <p>胡八一（靳東飾）上山下鄉來到中蒙邊境的崗崗營子，帶上了家中僅存的一本書——《十六字陰陽風水秘術》①，閑來無事將書中文字背得滾瓜爛熟。之後參軍到西藏，遇上雪崩掉落一條巨大的地溝當中，胡八一利用自己懂得的墓葬秘術逃得不死。複員後，胡八一和好友王胖子（趙達飾）一起加入了一支前往新疆考古的考古隊。一行人歷經萬險來到了塔克拉瑪乾沙漠中的精絕古城遺址，進入了地下“鬼洞”。洞中機關重重、陷阱不斷，這神秘的鬼洞似乎在一位先知的掌控之中。 38 </p> 39 </div> 40 41 <!--第三章--> 42 <h2><a id="three"></a>第三章：火燒赤壁</h2> 43 <div> 44 <p>胡八一（靳東飾）上山下鄉來到中蒙邊境的崗崗營子，帶上了家中僅存的一本書——《十六字陰陽風水秘術》①，閑來無事將書中文字背得滾瓜爛熟。之後參軍到西藏，遇上雪崩掉落一條巨大的地溝當中，胡八一利用自己懂得的墓葬秘術逃得不死。複員後，胡八一和好友王胖子（趙達飾）一起加入了一支前往新疆考古的考古隊。一行人歷經萬險來到了塔克拉瑪乾沙漠中的精絕古城遺址，進入了地下“鬼洞”。洞中機關重重、陷阱不斷，這神秘的鬼洞似乎在一位先知的掌控之中。 45 </p> 46 </div> 47 48 <!--第四章--> 49 <h2><a id="four"></a>第四章：劉姥姥進大觀園</h2> 50 <div> 51 <p>胡八一（靳東飾）上山下鄉來到中蒙邊境的崗崗營子，帶上了家中僅存的一本書——
