HTML<!DOCTYPE>聲明標籤
定義和用法：
<！DOCTYPE>聲明必須是HTML文檔的第一行，位於<html>標籤之前
<！DOCTYPE>聲明不是HTML標籤，它指示web瀏覽器關於頁面使用哪個HTML版本進行
編寫的指令。
在HTML4.01中，<！DOCTYPE>聲明引用DTD，因爲HTML4.01基於SGML。
DTD規定了標記語言的規則，這樣瀏覽才能正確地呈現內容。
HTML5不基於SGML，所以不需要應用DTD。
各版本的聲明：
HTML5：
<!DOCTYPE html>
<meta charset="utf-8">
HTML4.01：
HTML的基本架構
<html> 內容 </html>
解釋：HTML文檔的文檔標記，也稱爲HTML開始標記
功能： 這對標記分別位於網頁的最前段和在最後端
<html>在最前端表示網頁的開始 </html>在最後端表示網頁的結束
<head> 內容 <head>
解釋：HTML文件頭標記，也稱爲HTML頭信息開始標記
功能：用來包含文件的基本信息，比如網頁的標題、關鍵字、在<head></head>內可以放
<title></title> <meta></meta> <style></style>等等標記
注意：在<head></head>標記內的內容不會在瀏覽器中顯示
<title> 內容 </title>
解釋: HTML文件標題標記
功能: 網頁的”主題“，顯示在瀏覽器的窗口的左上角的標籤上
注意: 網頁的標記不能太長，要短小精悍，能具體反應頁面的內容，<title> </title>標記中不
能包含其他標記
<body> 內容 </body>
解釋: HTML文檔的主體標記
功能: <body>........ </body>是網頁的主體部分，在此標記之間可以包含如<p></p>(顯示段
落)，<h1>一級標題共六級</h1>、<br>換行</br>等等標記，正是由這些內容組成了
我們所看見的網頁主體。
body標記常見的屬性：
1、bgcolor 設置背景顏色 <body bgcolor = "red"> </body>
2、text 設置文本顏色 <body text = "green"> </body>
3、link 設置鏈接顏色 <body link = "yellow"> </body>
4、vlink 已經訪問了的鏈接顏色 <body vlink = "gray"> </body>
5、alink 正在被點擊的鏈接顏色 <body alink = "red"> </body>
<meta> 內容 </meta>
解釋: 頁面的元信息 （meta-information）
功能: 提供有關頁面的元信息，比如針對搜索引擎和更新頻度的描述和關鍵詞。
必須的屬性: content 值：some_text 定義name屬性相關的元信息
常見的屬性: 常用的name屬性
1、author 2、keywords 3、description 4、other
把content屬性關聯到一個名稱，比如描繪出網頁的關鍵字<meta name =
"keywords" content = "mjcc">
注意: meta標記必須放在head元素裏面
eg：
<!DOCTYPE html> 這裏說明是我們使用的是html5
<html>
一個html標記，尖括號中間的內容不會被顯示，有一個開始和結束
中間纔是HTML的頁面
<head>
<title> 這是擡頭</title>
這是一個html源代碼文件的頭，是放一些配置的，告訴這個頁面會顯示一些特殊的東西
<meta charset = utf-8> 這裏是告訴瀏覽器我用的是什麼編碼格式
</head>
<body>
<hgroup>
這個事來搞我們的一個結構的
<h1> 這是一個一級標題， 可以有6級， 並且在標題前後的文字都會被分割成遠離它的一行，這個是他自己的屬性<\h1>
<h2>這是一個二級標題</h2>
</hgroup>
<p>
這纔是用來顯示的正文的,但是顯示在這裏的文字是沒有段落的，並且會隨着頁面的大小自動的換行。所以需要有一些表示段落的一些標記來終結這樣的情況， this is an apple， But I love banana, It is a<wbr> beatiful</wbr> thing, 這個標籤是表示這個單詞是可以進行分開的
</p>
<p>
這就是表示一個段落的html的<br>標記， 但是，這只是劃分了段落，並且不是我們理想中那種每段段首空兩行，所以需要一些其他的標記."<br>"是用來在一段中進行換行的。“<br>”是沒有結束的標誌的。
</p>
</body>
</html>
HTML的文檔設置標記
一、格式標記
1、<br> 強制換行標記，讓後面的文字、圖片、表格等等顯示在下一行！
2、<p> </p> 換段落標記， 換段落，由於多個空格和回車在HTML會被等效爲一個空格，
所以HTML中要換段落就要用<p>,<p>段落中也可以包含<p>段落！
3、<center></center> 居中對齊標記， 讓段落或者文字相對於父標記居中顯示
4、<pre></pre>預格式化標記，會保留預先排版的格式
5、<li></li> 列表項目標記 每個列表使用一個<li>標記
6、<ul></ul> 無序列表標記 小圓點
7、<ol></ol> 有序列表標記 數字序號
可以顯示特定的一些順序
a、格式：<ol type = "符號類型">
<li type = "符號類型"> </li>
<li type = "符號類型"> </li>
</ol>
b、有序列表的type屬性值
1 ： 阿拉伯數字1.2.3等等 默認type的屬性值
A : 大寫字母A.B.C等等
a : 小寫字母a.b.c等等
Ⅰ : 大寫羅馬數字Ⅰ、Ⅱ、Ⅲ、Ⅳ、Ⅴ、Ⅵ、Ⅶ
i : 小寫羅馬數字(i,ii,iii,iv,v,vi,vii,viii,ix,x
)
c、value 指定一個新的序列數字的起始值
d、列表是可以嵌套的
8、<dl><dt><dd>
定義型列表
使用場合：對列表條目進行簡短的說明
格式：<dl>
<dt> 軟件說明：</dt>
<dd> 簡單介紹軟件的功能及基本應用 </dd>
<dt> 軟件界面 </dt>
<dd> 用於選擇軟件的外觀 </dd>
</dl>
9、<hr> 水平分割線標記 段落之間的分割線
10、<div> </div> 分區顯示標記、也稱之爲層標記，常用來編排一大段的HTML段落，也可
以用於格式化表，和<p>很相似，層可以多層嵌套使用
二、文本標記
1、<hn></hn> 標題標記 共有6個級別，n的範圍1~6，不同級別對應顯示大小不同的標
題，h1最大，h6最小。<h1>一級標題<h2>
2、<font></font> 字體設置標記 設置字體的格式
三個常用屬性
a、size(字體大小) <font size = '3'> 取值範圍1-7瀏覽器默認是3
b、color(字體顏色) <font color = 'red'>
c、face(字體) <font face = '宋體'>
3、<b></b> 加粗
4、<i></i> 斜體
5、<sub></sub> 文字下標字體標記
6、<sup></sup> 文字上標字體標記
7、<tt></tt>打印機字體標記
8、<cite></cite> 應用方式的字體，通常是斜體的
9、<em></em> 表示強調，通常顯示爲斜體字
10、<strong></strong> 表示強調，通常顯示爲粗體字
11、<small></small> 小型字體標記
12、<big></big> 大型字體標記
13、<u></u> 下劃線字體標記
<b> </b> 加粗字體
<i> </i> 斜體
<tt> </tt> 等寬的字體，打印字字體 西文字體
<small></small> 會將字變小
<del> </del> <ins> </ins>這個會將一個錯誤的詞中間加一條橫線，表示刪除它，然後用後面標籤中內容跟在後面表示替換了，替換的內容加了下劃線
<s></s>在文字的中間加上了一條線，這裏的含義和<del>的意義不一樣的，這裏指的是這些內容是不被提示的
<sup></sup> 表示上標
<sub></sub> 表示下標
<mark></mark> 表示高亮顯示
這些其實都是可以用CSS實現的，所以我們比較提倡使用CSS 的。
<em>表示強調</em>
<strong>表示着重</strong>
<dfn>表示定義的</dfn>
<code></code>表示的是源代碼
<samp>samp 例子代碼</samp>
<kbd> kbd用戶輸入 鍵盤 </kbd>
<var>variable 變量</var>
<cite>Cite引用</cite>
<address>表示地址的,這時候的字體會變成斜體</address>
<blockquote>這裏可以將它之間的文字進行縮進的</blockquote>
<q>就是給之間的文本加上小引用</q>
HTML的圖像標記
1、<img>
使用方法： <img src = "路徑/文件名.圖片格式" width = "屬性值" border = "屬性值" alt
="屬性">
注意：<img>爲單標記,不需要閉合 在加載圖像文件的時候，文件的路徑或者文件名文件格
式錯誤，圖片將無法加載。
<img>標記的屬性
a、src屬性 作用：指定我們要加載的圖片的路徑和圖片的名稱以及圖片的格式
b、width屬性 作用：指定圖片的寬度，單位px、em、cm、mm
c、height屬性 作用：指定圖片的高度，單位px、em、cm、mm
d、border屬性 作用：指定圖框的邊框寬度，單位px、em、cm、mm
e、alt屬性 作用： 當網頁上的圖片被加載完成後，鼠標移動上面去，會顯示這個圖片
的屬性文字
如果圖像沒有下載或者加載失敗，會用文字來代替圖像顯示。
搜索引擎可以通過這個屬性的文字來抓取圖片
HTML的超鏈接的使用
1、基本語法
<a href = "" target = "打開方式" name = "頁面錨點名稱">鏈接文字或者圖片</a>
2、屬性
a、href屬性：鏈接的地址，鏈接的地址可以是一個網頁，也可以是一個視頻、圖片、音樂
等等。
b、 作用：定義超鏈接打開方式
屬性值：
(1). _blank 在一個新的窗口中打開鏈接
(2). _seif(默認值) 在當前窗口打開鏈接
(3). _parent 在父窗口中打開頁面（框架中使用比較多）
(4). _top 在頂層窗口中打開文件（框架中使用比較多）
c、name屬性
指定頁面的錨點位置
HTML的表格的使用
1、基本格式 <table 屬性1=“屬性值1” 屬性2=“屬性值2” ... ...> 表格內容 </table>
2、<table></table> table標記
a、width屬性：表示表格的寬度，他的值可以是像素（px），也可以是父級元素的百分比%
b、height屬性：表示表格的高度，他的值可以是像素（px）,也可以是父級元素的百分比%
c、border屬性，表示表格外邊框的寬度。
d、align屬性：表格的顯示位置： left 居左顯示 right 居右顯示 center 居中顯示 默認值
left。
e、cellspacing屬性：單元格之間的距離，默認是2px，單位是px像素
f、cellpadding屬性：單元格內容與單元格邊框的顯示距離，單位像素
g、frame屬性：控制表格邊框最外層的四條線框
值：
void(默認值):表示無邊框
above：表示僅頂部有邊框
below：表示僅有底部邊框
hsides：表示僅有頂部邊框和底部邊框
lhs：表示僅有左邊邊框
rhs：表示僅有右邊邊框
vsides：表示僅有左右側邊框
box：包含全部4個邊框
boeder：包含全部四個邊框
h、rules屬性
作用：
控制是否顯示以及如何顯示單元格之間的分割線
屬性值：
none：（默認值）表示無分割線
all： 表示包括所有的分割線
rows： 表示僅有行分割線
clos：表示僅有列分割線
groups：表示僅在行組和列之間有分割線
3、<caption></caption>
什麼時候使用？ 當表格需要標題的時候。
如何正確使用？<caption>屬性插入的位置，直接位於<table>屬性之後<tr>表格行之前
a、align屬性：
屬性值：
top：標題放在表格的上部
bottom：標題放在表格的底部
left：標題放在表格的左部
right：標題放在表格的右邊
4、<tr></tr>
定義表格的一行，對於每一個表格行，都由一對<tr>...</tr>標記表示，每一行<tr>標記可以
嵌套多個<td>或者<th>標記。
a、bgcolor 設置背景顏色
格式： bgcolor = “顏色值”
b、align屬性 設置垂直方向對齊方式 align=“值”
屬性值：
top：靠頂端對齊
bottom：靠底端對齊
middle：居中對齊
c、valign屬性 設置水平方向對齊方式
屬性值：
left：靠左對齊
right：靠右對齊
center：居中對齊
5、<td></td> <th></th>
<td>和<th>都是單元格的標記，必須嵌套在<tr>標籤內，是成對出現的。
<th>是表頭標記，通位於首行或者首列，<th>中的文字會被默認的加粗，而<td>不會。
<td>是數據標記，表示該單元格的具體數據
兩者標記屬性都是一樣的
屬性列表：
bgcolor：設置背景顏色
align：設置單元格的對齊方式
valign：設置單元格垂直對齊方式
width：設置單元格的寬度
height：設置單元格高度
rowspan：設置單元格所佔的行數
colspan：設置單元格所佔的列數
HTML的表格的簡單佈局
eg:
<html>
<head>
<title> Lesson 8 </title>
<meta charset="utf-8">
</head>
<body bgcolor="grey" topmargin="0" leftmargin="0" rightmargin="0">
<table border="0" width="960" align="center" cellspacing="0" cellpadding="0">
<tr height="90" bgcolor="yellow" align="center">
<td><font size="6" color="green"><b>網頁的頭部</b></font></td>
</tr>
<tr height="500">
<td>
<table bgcolor="blue" width="30%" height=500 align="left">
<tr align="center"><td>網頁的左部</td></tr>
</table>
<table bgcolor="green" width="70%" height=500 align="left">
<tr align="center"><td>網頁的右部</td></tr>
</table>
</td>
</tr>
<tr height="90" bgcolor="yellow" align="center">
<td><font size="5" color="green"><b>網頁的底部</b></font></td>
</tr>
</table>
</bod>
</html>
HTML的框架
1、什麼是框架
框架就是將瀏覽器劃分成不同的部分，每一個部分加載不同的網頁，實現在同一個瀏覽
器加載多個頁面的效果。
2、框架標籤
a、<frameset>...</frameset>
屬性：
(1). cols
使用“像素數”和“%”分割左右窗口，” * “表示剩餘部分，如果使用“ * ”，“ * ”
表示框架平均分爲2個部分，如果使用“ * ”、“ * ”，“ * ”將表示將框架分爲3個部分
(2). rows
使用“像素數”和“%”分割上下窗口，‘ * ’表示剩餘部分。
(3). frameborder
指定是否顯示邊框，0不顯示、1顯示。
(4). border
設置邊框的大小，默認值5像素。
b、<frame/>
<frameset>中使用了幾個窗口，就必須對應使用幾個<frame/>框架，而且還必須
使用src屬性指定一個網頁。
屬性：
(1). src
加載網頁文件的URL地址
(2). name
框架名稱，是鏈接標記的target所要的參數
(3). noresize
表示不能調整框架大小，沒有設置時就可以調整。
(4). scrolling 是否需要滾動條
auto：更具需要自動出現
yes：有
no ： 無
(5). frameborder 是否需要邊框
1：顯示邊框
0：不顯示邊框
HTML的表單
1、表單標記
<form></form>定義表單的開始位置和結束位置，表單提交時的內容就是<form>表單中
的內容。
基本格式：
<form action="服務器端地址（接受表單內容的地址）" name="表單名稱"
method="post|get">.....</form>
常用屬性：
a、name：表單名稱
b、method：傳送數據的方式，分爲post和get兩種方式
get方式：這種方式提交時，會將表單的內容附加在URL地址的後面，所以限
制了提交的內容的長度，不超過8192個字符，且不具備保密性。
post方式：這種方式提交，將表單中的數據一併包含在表單主體中，一起傳送
到服務器中處理。沒有數據大小的限制，並且具有加密性。
c、action：表單數據的處理程序的URL地址，如果爲空則使用當前文檔的URL地
址，如果表單中不需要使用action屬性也要指定其屬性爲no。
d、enctype：設置表單的資料編碼方式
c、target：和超鏈接的屬性類似，用來指定目標窗口的。
2、文本域和密碼
作用：<input>標記沒有結束標記
基本格式：<input type=" " name=" " value=" " size=" " maxlength=" ">
屬性：
a、type屬性：type屬性有兩個取值
text：當type=“text”的時候，<input>表示一個文本輸入域
password：當type=“password”時，<input>表示一個密碼輸入區域
b、name屬性：定義控件的名稱
c、value屬性：初始化值，打開瀏覽器時，瀏覽框中的內容。
d、size屬性：設置控件的長度
e、maxlength屬性：輸入框中最大允許輸入的字符數
3、提交、重置、普通按鈕
當<input type="submit">時，此時爲提交按鈕。
當<input type="reset">時，此時爲重置按鈕。
當<input type="button">時，此時爲普通按鈕。
4、單選框和複選框
單選按鈕：當<input type="radio">時，爲單選框
複選框：當<input type="checkbox">時，爲複選框
注意：單選框和複選框都可以使用“checked”屬性來設置默認選中項
5、隱藏域
當<input type="hidden">時，爲隱藏表單域，但是信息還是會被帶出去
6、多行文本域
用法：使用<textarea>標記可以實現一個，能夠輸入多行文本的區域。
語法格式：<textarea name = "name" rows="value" value="value">...<textarea>
rows屬性和cols屬性分別用來指定、顯示的行數和列數，單位是字符個數。
7、菜單下拉列表域
語法格式：
<select name="" size="value" multiple>
<option value="value" selected>選項1</option>
<option value="value">選項2</option>
<option value="value">選項3</option>
<select>
屬性：
option標記：
<opton>...</option>
這個標記用來指定列表中的一個選項，需要放在<select></select>之間
value：給選項賦值，指定傳送到服務器上的值
selected：指定默認的選項。