HTML 超文本標記語言（英語： ，簡稱：HTML）HTML 運行在瀏覽器上，由瀏覽器來解析。 1.HTML骨架
2.概念 標簽（開始/結束 成對出現）HTML元素:HTML 元素以開始標簽起始,以結束標簽終止 web瀏覽器：用于讀取HTML文件，并將其作為網頁顯示 3.HTML基礎 1.標簽： 1. 標題: < h1>-< h6> 2. 段落：< p>—< p>
A：瀏覽器在顯示 HTML 時html圓圈里顯示數字html圓圈里顯示數字，會省略源代碼中多余的空白字符（空格或回車等）。
3. 鏈接 < a>
A： “鏈接文本” 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。
B：HTML 鏈接 - 屬性：（打開方式：本頁面/新頁面）
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)title>
head>
<body>
<a href="https://www.runoob.com/" target="_blank">訪問菜鳥教程!a>
<p>如果你將 target 屬性設置為 "_blank", 鏈接將在新窗口打開。p>
body>
html>
C：HTML 鏈接- id 屬性：
? 可用于在當前頁面鏈接到指定位置：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)title>
head>
<body>
<p>
<a href="#C4">查看章節 4a>
p>
<h2>章節 1h2>
<p>這邊顯示該章節的內容……p>
<h2>章節 2h2>
<p>這邊顯示該章節的內容……p>
<h2>章節 3h2>
<p>這邊顯示該章節的內容……p>
<h2><a id="C4">章節 4a>h2>
<p>這邊顯示該章節的內容……p>
<h2>章節 5h2>
<p>這邊顯示該章節的內容……p>
body>
html>
D：創建圖片等鏈接：
? 在標簽a中href的值后面插入< img>標簽后再關閉標簽a
?
4. 圖像< img>：
? 【src屬性】：可以是絕對地址，也可以是基于< base>的相對地址
? 【alt屬性】：它給出了圖像的備選文本，供圖像無法顯示時采用。
1、*.html 文件跟 *.jpg 文件(f盤)在不同目錄下：
<img src="file:///f:/*.jpg" width="300" height="120"/>
2、*.html 文件跟 *.jpg 圖片在相同目錄下：
<img src="*.jpg" width="300" height="120"/>
3、*.html 文件跟 *.jpg 圖片在不同目錄下：
a、圖片 .jpg 在 image 文件夾中，.html 跟 image 在同一目錄下：
<img src="image/*.jpg/"width="300" height="120"/>
b、圖片 .jpg 在 image 文件夾中，.html 在 文件夾中，image 跟 在同一目錄下：
<img src="../image/*.jpg/"width="300" height="120"/>
4、如果圖片來源于網絡，那么寫絕對路徑：
<img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>
默認（align=）
align=“top//”
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一個帶圖片的段落，圖片浮動在這個文本的左邊。
p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一個帶圖片的段落，圖片浮動在這個文本的右邊。
p>
<p><b>注意:b> 在這里我們使用了 CSS float 屬性，在HTML 4 中 float 屬性已廢棄，HTML5 已不支持該屬性，可以使用 CSS 代替。p>
即圖像帶有可供點擊區域的圖像地圖。其中的每個區域都是一個超級鏈接。
中的 屬性可引用 area 元素永遠嵌套在 map 元素內部。area 元素可定義圖像映射中的區域。 shape值描述描述對應值
整片區域
無
rect
矩形區域
前兩個對應左上角，后兩個對應右下角
圓形區域
前兩個對應圓心，第三個對應半徑
poly
多邊形區域
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> //該圖像可以引用name或id為planetmap的map
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
map>
5. 表格< table >
----<p>
每個表格從一個 table 標簽開始。
每個表格行從 tr 標簽開始。
每個表格的數據從 td 標簽開始。
p>
<h4>兩行三列:h4>
<table border="1"> //border表示邊框像素
<tr>
<td>100td>
<td>200td>
<td>300td>
tr>
<tr>
<td>400td>
<td>500td>
<td>600td>
tr>
------------------------------------------------------------
<table border="1">
<tr>
<th>單價th> //th為表頭，大多數瀏覽器會把表頭顯示為粗體居中 的文本：
<th>數量th>
<th>總價th>
tr>
<tr>
<td>50td>
<td>2td>
<td>100td>
tr>
table>
table>
body>
html>
6. 列表< ol> < ul>
實例練習：HTML：My 列表 實例 | 菜鳥工具 ()
< ul> : 無序列表 ( List)
<h4>無序列表:h4>
<ul>
<li>Coffeeli> //list標簽
<li>Teali>
<li>Milkli>
ul>
?
< ol> : 有序列表 (Order Lsit)
<h5>有序列表h5>
<ol>
<li>Coffeeli> //有序無序都用list
<li>Teali>
<li>Milkli>
ol>
?
列表標簽屬性
start** ：規定有序列表起始序號
type:
小寫羅馬數字列表：< ol type=“i”>
?
自定義列表
自定義列表以 < dl> 標簽開始。
每個自定義列表項(list item)以 < dt> 開始。
每個自定義列表項的定義以 < dd> 開始。
<h4>一個自定義列表：h4>
<dl>
<dt>Coffeedt>
<dd>- black hot drinkdd>
<dt>Milkdt>
<dd>- white cold drinkdd>
dl>
?
嵌套列表
不需要再另起< li>，直接< ul>和< ol>
7. 區塊< div>
概要：HTML 可以通過 < div> 和 < span>將元素組合起來。
元素類型：
大多數 HTML 元素被定義為塊級元素或內聯元素。
塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。
實例: < h1>, < p>, < ul>, < table>
內聯元素在顯示時通常不會以新行開始。
實例: < b>, < td>, < a>, < img>
< div>布局實例
參考鏈接：Div布局實例 | 菜鳥工具 ()
8. 表單< form>
輸入元素< input tpye=“____”>
set
其中
?
<form action="__網址___"> //action屬性用于執行任務
<fieldset style="__文本居中、尺寸等___" > //制定邊框
<lengend>邊框說明lengend>
賬號<input type="text" name="賬號"><br>
密碼<input type="password" name="密碼"><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="botton" value="這是一個按鈕">
<textarea rows="10" cols="50">簡介：textarea>
fieldset>
form>
選擇按鈕
?
單選：(radio)
【ps】：單選的name值要相同才能實現單選！！
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
form>
多選：（）
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
form>
【ps】：默認勾選方法：加上 =“”
?
預選下拉列表（）
<form>
<select name="major">
<option value="人工智能" hidden>人工智能option>
<option value="大數據" disabled>大數據option>
<option value="軟件工程"selected>軟件工程option>
<option value="計算機">計算機option>
select>
form>
其中：
9. 框架< >
1. 功能：
通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。
2.語法:
< src=“URL” name=“___”>< />
該URL指向不同的網頁。
配合鏈接在框架中打開
< a=“URL” =“”>
10.腳本< > < > 標簽用于定義客戶端腳本，比如 。< > 元素既可包含腳本語句，也可通過 src 屬性指向外部腳本文件。 最常用于圖片操作、表單驗證以及內容動態更新。
<script>
document.write("Hello World!")
script>
<noscript>抱歉，你的瀏覽器不支持 JavaScript!noscript>
0. 空元素標簽 換行**：
(盡量使用
水平線： 2.屬性：
<a href="http://www.runoob.com">這是一個鏈接a>
Tips:
屬性和屬性值，盡量小寫，本來這樣做也方便些。class 屬性可以多用 （引號里面可以填入多個class屬性）id 屬性只能單獨設置（只能填寫一個，多個無效） 3.注釋： 4. 文本格式化
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)title>
head>
<body>
<b>加粗文本b><br><br>
<i>斜體文本i><br><br>
<code>電腦自動輸出code><br><br>
這是 <sub> 下標sub> 和 <sup> 上標sup>
body>
html>
PS：通常標簽 替換加粗標簽 來使用, 替換 標簽使用。
? 代表強調，你可以自定義任何樣式來代表強調。只是的默認樣式與b相同而已。em與i同理。
5. 字符實體
在 HTML 中，某些字符是預留的。
在 HTML 中不能使用小于號（），這是因為瀏覽器會誤認為它們是標簽。
如果希望正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符實體（ ）。
【PS】詳見：HTML ISO-8859-1 參考手冊 | 菜鳥教程 ()
4.頭部
###1. 元素
元素包含了所有的頭部標簽元素。在 元素中你可以插入腳本（）, 樣式文件（CSS），及各種meta信息。
可以添加在頭部區域的元素標簽為: ,
###2.元素
3.元素 4. 元素 5. ``` 6.HTML < meta> 元素
為搜索引擎定義關鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
為網頁定義描述內容:
<meta name="description" content="免費 Web & 編程 教程">