HTML基礎標籤

05-01

一、第一單元

網站：在萬維網上根據規則使用HTML工具製作的網頁的集合，是web的基礎。
網頁：網站由網頁組成，是構成網站的基本元素。網頁元素包括：文字、圖片、動畫音樂程序等。
WEB主流瀏覽器（調試工具）：IE 、谷歌、火狐、opera、safari
WEB常用的開發工具：Webstorm、Dreaweaver、Phpstorm、Hbuilder、Sublime

WEB標準的組成：結構、表現、行為
HTML：Hyper Text Markup Language的縮寫，超文本標記語言。是一種標記語言

二、第二單元

HTML文件的基本結構

<!DOCTYPE html> <html>  <head lang="en">  <meta charset="UTF-8">  <title></title>  </head>  <body>  ......  </body> </html> 

基礎標籤的認識

1). <p>段落標籤</p> ：用來定義網頁中的一段文本，段落與段落之間換行。屬性：align ；定義段落中的文本水平方向的對齊方式。屬性值：left（左對齊）、right（右對齊）、center（居中對齊）
2).<br/> ：換行標籤，指行與行之間換行，他是一個單標籤。

兩者的區別：
<br/>：是單標籤，小行換行提行；<p></p> ：是雙標籤，大行換行分段；
3). <h1></h1>---<h6></h6>：<h1></h1>：代表一級標題，級別高，字體也最大，其他依次遞減。<h6></h6>：級別最小，字體最小屬性：align ；定義標題中的文本水平方向的對齊方式。屬性值：left（左對齊）、right（右對齊）、center（居中對齊）

4). <blockquote>文欄位落縮進</blockquote>：在標籤中包含塊級標籤，而不是純文本。
<blockquote> <p>自動縮進p標籤內的文本</p></blockquote>

5). 建立無序列表
<ul type="circle"> <li>列表項</li> <li>列表項</li></ul>
屬性：type ；定義列表項的符號。
屬性值：circle（空心圓）、disc（實心圓）、square（實心方塊）

6). 建立有序列表
<ol type="a"> <li>列表項</li> <li>列表項</li> </ol>
屬性：type ；定義列表項的符號。 start：用來設置列表編號的起始數值。
屬性值：a、A、i、I

7). 建立自定義列表
<dl> <dt>列表標題</dt> <dd>列表項</dd> <dd>列表項</dd></dl>

8). 文字特殊樣式
<b>加粗</b><i>傾斜</i><u>下劃線</u><s>刪除線</s><big>放大</big><small>縮小</small><strong>加強強調</strong><em>強調傾斜</em>

三、第三單元

1. <img/> ：圖片標籤
屬性：
src：指定圖片源文件；

alt ：圖片未載入成功的提示文字；
width：指定圖片的寬度；
height：指定圖片的高度；
border：指定圖片的邊框樣式；
alghr：top/bottom/middle；圖片位於兩端文字在垂直方向的一個上/中/下的對齊方式；

2. <a></a>：超鏈接
屬性：
href：連接地址；空連接可以用"#"代替；
target ：_self/_blank;打開方式；_self在當前頁面中打開，_blank在新的空白窗口打開。

3. URL的格式

URL定義：每一信息資源都有統一的且在網上唯一的地址，改地址就叫做統一資源定位符；
URL的組成：資源類型、存放資源的主機域名、資源文件名；
URL的語法格式一般為：（帶方括弧[]的為可選項）;
絕對路徑：包含文件的所有信息；
相對路徑：指向相對於原文檔統一伺服器或者同一文件夾中的文件；
"../"：返回上級目錄；"/" :表示下一級目錄；
4. <a>標籤製作錨點、錨記
<a href="#C3">查看 Chapter 3</a> (錨點)href裡面的#是固有格式c3是隨便起的名字；
<h2><a name="C3">Chapter 3</a></h2> 錨記）name里的名字與#後面相同

四、第四單元

<table></table>：表格基本結構

<table> <caption>表格標題</caption> <tr> <td>我是第一行的第一個單元格</td> <td>我是第一行的第二個單元格</td> </tr> <tr> <td>我是第二行的第一個單元格</td> <td>我是第二行的第二個單元格</td> </tr></table>
表格的表頭<th>是<td>單元格的一種變體，實質上是一種單元格加粗和居中

table的屬性：
width：表格的寬度
height：表格的高度
align：表格的對齊方式
border：表格的邊框
bordercolor：邊框的顏色
cellspaning：單元格之前的距離
csllpadding：單元格與內容之間的距離
bgcolor：表格的背景顏色
background：表格的背景圖片

tr的屬性：
height：行的高度
bordercolor：邊框的顏色
bgcolor：表格的背景顏色
background：背景圖片
align：文本水平對齊方式
valign：文本垂直對齊方式
tr的屬性：
width：單元格的寬
height：單元格的高度

bordercolor：邊框的顏色
bgcolor：背景顏色
background：表格的背景圖片
align：文本水平對齊方式
valign：文本垂直對齊方式
colspan：水平合併單元格（跨列）
rowspan：垂直合併單元格（跨行）
完整的表格標記
如果使用thead、tfoot、tbody元素，就必須使用全部的元素，

五、第五單元

表單（form）輸入類型

單選按鈕（checked默認）
<input type="radio" name=" " checked /> <input type="radio" name=" " />
複選按鈕（checked默認）
<input type="checkbox" name=" " checked /> <input type="checkbox" name=" " />
密碼輸入框
<input type="password" />
提交按鈕
<input type="submit" />
重置按鈕
<input type="reset" />
普通按鈕
<input type="button" />
圖片按鈕（有提交功能）
<input type="image" />
多行文本框
<textarea cols="一行多少字元" rowa="多少行"><textarea>
列表框
<select size="一次顯示多少個" multiple="可多選"><option selected>默認的下拉菜單1</option><option>下拉菜單2</option></select>
單行文本框
<input type="text" size="文本框顯示的長度" maxlength="最長字元數"/>
隱藏域

<input type="hidden"/>
文件域
<input type="file"/>