HTML中的body及可以再body中出現的標籤
網頁的主體標記body
需要顯示的瀏覽器網頁模組的內容,都必須要定義在body中,<body> 標籤,可以說是HTML檔案中,最為重要的一塊內容。
主體標記 以<body>開始,以</body>結尾
注意:在構建HTML檔案時,請不要將標記交叉使用,否則將會出現一些莫名其妙的錯誤
能夠出現在主體標記中的內容
1、註釋
HTML中註釋格式:<!-- 被註釋的內容 -->
<!-- 被註釋的內容 -->
2、文字資訊
文字資訊,可以分為2大類:普通文字,一些特殊字元文字
1)普通文字:漢字,英文或者在鍵盤上我們可以輸出的字元。
2)特殊字元文字: 特殊字元文字以&開頭,使用;結束。例如:大小括號……
在HTML中,特殊字元文字有:
  半大角的空白 一個代表半個漢字空   全形大的空白 一個代表一個漢字空 不斷行的空白格 一個代表一個漢字空間 > 大於符號 < 小於符號 ≥ 大於等於符號 ≤ 小於等於符號 & & " " © © 版權符號 ® ® 註冊商標 × 代表乘號× ÷ 代表除號÷
3、加粗、斜體
在文件中,經常會出現一些比較重要的文字:加粗,傾斜,上標,下標
在HTML中使用:
<b></b> 和<strong></strong> 都可以完成文字內容的加粗,
<em></em> 和 <i></i> 都可以完成文字的傾斜,
上述的標記進行重點標記。
4、P標籤,為段落標籤
<p>內容</p>,它的作用在於給頁面文字,進行段落分配。
5、上下標籤
<sup>內容</sup> 為上標標籤
<sub>內容</sub> 為下標標籤
sup 可以X的N次方,sub可以H2O,把2向下
6、換行
在瀏覽器中,瀏覽器在顯示網頁時,完全採用HTML標記來進行解釋的,會自動忽略多餘的空格以及空行!在HTML檔案中,無論你輸入多少空格,都只能識別1個空格。在HTML中如果需要換行,請使用<br/>,如果需要新增空格,請你輸入
7、分割線
<hr/> 用於定義文字分割線
8、內容標題定義
<h1></h1> 到 <h6></h6>主要用來定義文字內容標題的主體標記,<h1>級別最高,<h6>級別最低,HTML中,作為標題來講,每個標題的重要性有大有小,所以它認為<h1></h1>所定義的標題最重要,其他的依次遞減
9、排序列表
如果HTML中,需要對檔案或者圖片進行排序的,我們可以使用無序列表<ul>,有序列表<ol>兩種方案
說明:有序和無序可以交叉使用
1)無序列表:
<ul type=”square”>
<li>JAVA</li>
<li>c系語言
<ul>
<li>c++</li>
<li>java</li>
</ul>
</li>
<li>c++</li>
<li>c<sup>#</sup></li>
<li>php</li>
<li>.net</li>
</ul>
ul宣告無序列表,li宣告列表項
Type型別取值 |
|
disc |
專案符號顯示為實體圓心,預設值 |
square |
專案符號顯示為實體方心 |
circle |
專案符號顯示為空心圓 |
2)有序
<!-- 有序列表 Ordered List -->
<ol type=”A”>
<li>JAVA</li>
<li>c系語言
<ol>
<li>c++</li>
<li>java</li>
</ol>
</li>
<li>c++</li>
<li>c<sup>#</sup></li>
<li>php</li>
<li>.net</li>
</ol>
ol宣告有序列表,li宣告列表項;屬性start:start="c" 表示從哪個數字或者字母開始定義列表項,這裡從意思是c開始
Type型別取值 |
|
取值 |
說明 |
1 |
使用數字作為專案符號 |
A/a |
使用大寫/小寫字母作為專案符號 |
I/i |
使用大寫/小寫羅馬數字作為專案符號 |
3)自定義列表
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示資訊的裝置 ... ...</dd>
</dl>
dl宣告定義列表,dt宣告列表項,dd定義列表項內容
三種列表對比 |
||
無序列表 |
以<ul>標籤來實現 以<li>標籤表示列表項 |
通過type屬性設定專案符號 disc(預設)、square和circle |
有序列表 |
以<ol>標籤來實現 以<li>標籤表示列表項 |
通過type屬性設定專案順序 1(數字,預設)、A(大寫字母)、a(小寫字母)、I(大寫羅馬數字)和i(小寫羅馬數字) |
定義類表 |
以<dl>標籤是實現 以<dt>標籤定義列表項 以<dd>標籤定義內容 |
無專案符號和顯示順序 |
10、網頁中圖片
HTML中,除了可以新增文字之外,還可以新增圖片,當然新增圖片,需要使用標記是<img/>,在瀏覽器,可以支援的圖片格式,非常的多:GIF,JPEG,BMP,PNG,TIFF
支援最多的是GIF,JPEG
GIF格式最多隻能使用256色的影象,圖片大小都非常的小,下載速度比較快,幀數比較低 它是採用多張低幀數圖片組合完成動畫效果。JPEG圖片格式,是目前網際網路上最受歡迎的圖片格式,JPEG可支援16M顏色,它展現的效果非常高清,但是它也支援壓縮,但是它的壓縮,是以犧牲圖片的質量為代價的,壓縮比例越高,圖片越模糊。
HTML在使用圖片時,我們不是直接把圖片存入到HTML中,而是在HTML中使用某些屬性,指向圖片所在目錄位置
定位一個資原始檔的路徑,有兩種方式:1、絕對路徑,2、相對路徑
格式:
<img src="path" alt="text" title="text" width="x" height="y" /> |
|
src |
影象地址 |
alt |
影象的替代文字 |
title |
滑鼠懸停提示文字 |
width |
影象寬度 |
height |
影象高度 |
例子 |
<img src="image/hetao.jpg" width="160" height="160" alt="無漂白薄皮核桃" title="無漂白薄皮核桃"/> |
1)絕對路徑,是以碟符為參照點,來進行定址
<img src="d:/HTML/imgs/1.jpg" alt="比較性感的尤物!" width="300px" height="50px"/>
2)相對路徑,是以當前檔案來作為參照點,進行定址
<img src="../../imgs/2.jpg" alt="比較老的女人!">
*推薦大家,使用相對路徑
11、address標籤
該標籤的作用:就是用來定義網站聯絡人的相關資訊
<!-- address標籤制定在body之內, 它一般表示該網站的作者|聯絡人等一些聯絡資訊預設就是傾斜-->
<address>
聯絡人:胡歌
<br/>
聯絡方式:1339871223
<br/>
個人網站:<a href="http://www.baidu.com">胡帥的個人網站</a>
</address>
12、高亮顯示
<mark></mark>用於將文字高亮顯示
13、切換文字方向標籤
<bdo></bdo>或<bdi></bdi>用於定義與其他文字不同的方向
例:
<bdo dir="ltr">
HTML5 提供的新元素可以構建更好的文件結構
</bdo>
bdo 切換文字顯示方向的標籤,預設就是:ltr,表示從左至右
<bdo dir="rtl">
HTML5 提供的新元素可以構建更好的文件結構
</bdo>
Rtl表示從右至左
14、引用名人名句規範標籤
<q></q>標籤通常用於引用一些名人名句的短用語,它會自動在文字上加上雙引號
<blockquote></blockquote>用於引用一些名句,主要用於一大段語句的引用
15、預定格式標籤
<pre></pre>標籤,預定義格式標籤,可以按照你在標籤中指定的格式顯示,也就是你怎麼寫的它就怎麼顯示
16、刪除線和下線標籤
<del><del>標籤為刪除線標籤,一般代表文字已經過時了,現在已經不使用了
<ins><del>標籤為下劃線標籤,一般代表文字正在使用,由標籤中的文字內容替換了過時的內容
這兩個標籤一般是成對使用,一個代表過時內容,不使用;一個代表替代內容,正在使用。
17、u標籤(下劃線)
<u></u>標籤表示下劃線,可以給文字新增下劃線,但容易和超連結混淆
18、字型簡寫
<abbr></abbr>標籤用於對文字進行簡化顯示,效果:當滑鼠指向簡化字是會自動提醒
例子:
<!-- 頁面會顯示“進博會”,當我們用滑鼠指向“進博會”時,會浮現顯示“中國國際進口博覽會”-->
<abbr title=”中國國際進口博覽會”>進博會</abbr>
19、超連結
<a></a>標籤表示超連結,可以跳轉到指定網頁和位置
1)頁面間連結
<a href="path" target="目標視窗位置">連結文字或影象</a> |
|
href |
連結路徑,如果不想讓跳轉介面,在它的值設為”#” |
target |
連結在哪個視窗開啟 |
目標視窗位置 |
常用屬性: _blank 在新視窗去顯示 _self 跟a標籤,位於同一個視窗顯示,及本視窗顯示 _parent 表示在上一級視窗顯示內容 _top 在瀏覽器的最上級去顯示內容,忽略任何框架 |
連結文字或影象 |
就是在頁面顯示的字型或影象,點選這個字型或影象就會跳轉到指定頁面或位置 |
例子:
<a href="hetao.html" target="_blank">無漂白薄皮核桃</a>
<a href="hetao.html" target="_blank"><img src="image/hetao.jpg" alt="無漂白薄皮核桃" title="無漂白薄皮核桃"/></a>
2)錨鏈接
錨鏈接:
從A頁面的甲位置跳轉到本頁中的乙位置
從A頁面的甲位置跳轉到B頁面中的乙位置
建立步驟:
1.建立跳轉標記
<a name="marker">乙位置</a>
2.建立跳轉連結
<a href="#marker">甲位置</a>
一般情況下我們都用id屬性來指定跳轉位置,充當跳轉標記,比如:
<img id="xdd" src="imgs/3.jpg" alt="習大大的帥姿" border="5px" width="250px">
然後設定跳轉連線:
<a href="index.html?#xdd" target="_top">index網頁的習大大</a>
跳轉到本頁面的指定位置,直接在在href的值中用“#跳轉標記名”進行跳轉
跳轉到另外一個頁面的指定位置,在href的值中用“頁面名稱?#跳轉標記名”進行跳轉
3)功能性連結
如:QQ、郵箱、MSN
<a href="mailto:[email protected]">聯絡我們</a>
傳送郵件到某一個郵箱中去,但是要依賴微軟元件:outlook
檔案下載
<a href="res/學生資料.xlsx">下載Excel文件</a>
檔案下載:條件是瀏覽器,無法識別的檔案,它最終都會以下載的方式來體現
20、表格
<table></table>標籤用於製作表格
表格標籤
表格 |
描述 |
定義表格 |
|
定義表格標題。 |
|
定義表格的表頭。 |
|
定義表格的行。 |
|
定義表格單元。 |
|
定義表格的頁首。 |
|
定義表格的主體。 |
|
定義表格的頁尾。 |
|
定義用於表格列的屬性。 |
|
定義表格列的組。 |
caption 元素定義表格標題。
caption 標籤必須緊隨 table 標籤之後。您只能對每個表格定義一個標題。通常這個標題會被居中於表格之上。
1)基本語法:
<table>
<tr>
< th>第一列表頭</th>
<th>第二列表頭</th>
……
</tr>
<tr>
<td>第1個單元格的內容</td>
<td>第2個單元格的內容</td>
……
</tr>
<tr>
<td>第1個單元格的內容</td>
<td>第2個單元格的內容</td>
……
</tr>
</table>
table表示表格標籤,th表示表頭,tr表示行標籤,td表示單元格標籤
table屬性:使用width和border設定表格的寬度和邊框;cellpadding建立單元格內容與其邊框之間的空白、cellspacing增加單元格之間的距離, bgcolor設定整個表格的背景,更多屬性上網檢視
2)對齊方式:
表格對齊方式:
預設對齊、居中對齊、左對齊、右對齊
單元格對齊方式:
水平對齊方式、垂直對齊方式
屬性 |
值 |
說明 |
align 水平對齊方式 |
left |
左對齊 |
center |
居中對齊 |
|
right |
右對齊 |
|
valign 垂直對齊方式 |
top |
頂端對齊 |
middle |
居中對齊 |
|
bottom |
底端對齊 |
|
baseline |
基線對齊 |
3)合併單元格
跨列:
<table>
<tr>
<td colspan="n">單元格內容</td>
</tr>
<tr>
<td>單元格內容</td>
......
</tr>
......
</table>
colspan="n":所跨的列數
跨行:
<table >
<tr>
<td rowspan="n"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
rowspan="n":所跨的行數
21、form表單
定義:<form> 標籤用於為使用者輸入建立 HTML 表單。
表單能夠包含 input 元素,比如文字欄位、複選框、單選框、提交按鈕等等。
表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。
表單用於向伺服器傳輸資料。
總的來說:
<form></form>表單主要用於資料的提交獲取
HTML 表單用於收集使用者輸入
註釋:
form 元素是塊級元素,其前後會產生折行。
目前所有主流瀏覽器都不支援 <menu> 標籤
1)基本語法:
<form method="post" action="result.html">
<p> 名字:<input name="name" type="text" > </p>
<p> 密碼:<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交">
<input type="reset" name="Reset" value="重填">
</p>
</form>
method:規定如何傳送表單資料,值有:(GET POST PUT DELETE HEADER OPTION ),常用值:get | post
action:表示向何處傳送表單資料
在實際網頁開發中通常採用post方式提交表單資料
2)表單元素:
<input>元素標籤
<input type="text" name="fname" value="text">
屬性 |
說明 |
type |
指定元素的型別。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button,預設為 text |
name |
指定表單元素的名稱。 |
value |
元素的初始值。type 為 radio時必須指定一個值 |
size |
指定表單元素的初始寬度。當 type 為 text 或 password時,表單元素的大小以字元為單位。對於其他型別,寬度以畫素為單位 |
maxlength |
type為text 或 password 時,輸入的最大字元數 |
checked |
type為radio或checkbox時,指定按鈕是否是被選中 |
文字框
<input type="text" name="userName" value="使用者名稱" size="30" maxlength="20" >
text:表示文字框 name:指定文字框名稱 value:指定文字框初始值 size:指定文字框長度 maxlength:指定文字框可輸入最大字元
密碼框
<input type="password " name="pass" size="20" >
password:表示密碼框 name:指定密碼框名稱 size:指定密碼框長度
單選按鈕
<input name="gen" type="radio" value="男" checked="checked" >男
<input name="gen" type="radio" value="女" >女
type=”readio”表示單選按鈕框
name:多個readio單選按鈕指定的值必須相同,才能新增進同一組,進行單選
checked:表示目前單選按鈕選中的狀態,及是否預設被選中
value:指定單選按鈕的值,這個值不顯示,後面在<input>外的”男”和”女”供使用者觀看
複選框
<input type="checkbox" name="interest" value="sports">運動
<input type="checkbox" name="interest" value="talk" checked="checked" >聊天
<input type="checkbox" name="interest" value="play">玩遊戲
checkbox:表示複選框
name:多個checkbox複選框指定的值必須相同,才能新增進同一組,進行復選
checked:表示目前複選框選中的狀態,及是否預設被選中
value:指定複選框的值,這個值不顯示,後面在<input>外的”運動”和”聊天”和”玩遊戲”供使用者觀看
按鈕
<input type="reset" name="butReset" value="reset按鈕">
<input type="submit" name="butSubmit" value="submit按鈕">
<input type="button" name="butButton" value="button按鈕"/>
<input type="image" src="images/login.gif" />
resert:重置按鈕
submit:提交按鈕
button:普通按鈕,如果定義在表單之外的按鈕,直接用button
image:以圖片作為按鈕
value:按鈕上顯示的值
src:圖片路徑
檔案域
<form action="" method="post" enctype="multipart/form-data">
<p><input type="file" name="files" />
<input type="submit" name="upload" value="上傳" /></p>
</form>
file表示檔案,是一個檔案按鈕,點選就可以選擇檔案,name是在按鈕上顯示的文字
隱藏域
<input type="hidden" value="666" name="userid">
hidden表示隱藏域,主要是隱藏不可見,當滿足我們設定條件的時候可改變它的型別讓它可見
只讀和禁用
<input name="name" type="text" value="張三" readonly="readonly">
<input type="submit " disabled="disabled" value="儲存" >
readonly表示只讀,disabled表示禁用
------表單元素標註<lable>
定義:
<label> 標籤為 input 元素定義標註(標記)。
label 元素不會向用戶呈現任何特殊效果。不過,它為滑鼠使用者改進了可用性。如果您在 label 元素內點選文字,就會觸發此控制元件。就是說,當用戶選擇該標籤時,瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上。
<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。
使用<label>標籤的for屬性與表單元素的id屬性相結合控制單擊該標籤時,對應的表單元素自動獲得焦點或者被選中
如:
<label for="male">Male</label>
<input type="radio" name="sex" id="male" /><br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" /><br/>
for表示連線到的表單元素id,id是設定表單元素的id;這兩行程式碼相當於點選lable的內容就會和radio單選按鈕相關聯,radio單選按鈕就會相應的選中
<select>元素標籤(下拉框)
表示下拉框
語法:
<select name="列表名稱" size="行數">
<option value = “1”>大專</option>
<option value = “2”>本科</option>
<option value = “3” selected="selected”>碩士</option>
<option value = “4”>博士</option>
</select>
Size:表示下拉框預設顯示的行數,多餘的利用下拉檢視
selected:表示是否被選中
disabled 只能看不能摸
multiple="multiple" 表示該選擇框支援多選,ctrl+滑鼠點選可實現多選
更多屬性參見網路,屬性需要什麼選什麼
<textarea>元素標籤(文字域)
表示文字域
語法:
<textarea name=”userDesc” rows=”5” cols=”30” maxlength=”150”>文字內容 </textarea >
cols顯示的列數,rows顯示的行數,maxlength表示最多顯示字數
3)給表單新增圍欄
介紹:
fieldset 元素可將表單內的相關元素分組。
<fieldset> 標籤將表單內容的一部分打包,生成一組相關表單的欄位。
當一組表單元素放到 <fieldset> 標籤內時,瀏覽器會以特殊方式來顯示它們,它們可能有特殊的邊界、3D 效果,或者甚至可建立一個子表單來處理這些元素。
<fieldset> 標籤沒有必需的或唯一的屬性。
<legend> 標籤為 fieldset 元素定義標題。
語法:
<form>
<fieldset>
<legend>健康資訊</legend>
身高:<input type="text" />
體重:<input type="text" />
</fieldset>
</form>
<fieldset>要配合<legend>使用,legend表示外框顯示的內容
22、塊級元素和行內元素
區別:
1)塊級元素不能和其他元素共享1行,每一個塊級元素都必須要從新行中開始,而行內元素可以與其他元素共享一行
2)塊級元素的高度,寬度,內邊距,外邊距這些東西可以設定,而行內元素不可以設定
3)塊級元素的高寬,不設定的情況下,預設與根父容器保持一致(佔父容器寬度的100%),除非就是設定了寬度,而行內元素寬度跟內容相關,內容有多大,寬度就有多大。
塊級元素一覽
標籤名 |
作用 |
是否換行 |
H1-h6 |
文字加粗大小 |
是 |
Pre |
預格式化 |
是 |
p |
段落標籤 |
是 |
ol |
有序列表 |
是 |
Ul |
無序列表 |
是 |
Li |
有序無序必用 |
是 |
Dd |
定義列表描述 |
是 |
Table |
表格 |
是 |
Form |
表單 |
是 |
Fieldset |
分割槽 |
是 |
Legend |
分割槽提示 |
是 |
Marquee |
滾動 |
是 |
Blockquote |
引用塊 |
是 |
address |
設定聯絡人 |
是 |
行內元素標籤一覽
標籤名 |
作用 |
是否換行 |
Span |
範圍標籤 |
否 |
a |
超連結、快速定位 |
否 |
Strong\b |
字型加粗 |
否 |
Em\i |
字型傾斜 |
否 |
Sup |
上標 |
否 |
Sub |
下標 |
否 |
Textarea |
多行文字域 |
否 |
Select |
下拉列表 |
否 |
Option |
下拉列表選項 |
否 |
Code |
用於存放原始碼 |
否 |
行內塊級元素
標籤名 |
作用 |
換行否 |
Img |
影象 |
否 |
Input |
輸入框 |
否 |
23、內嵌框架(iframe標籤)
iframe 元素會建立包含另外一個文件的內聯框架(即行內框架)。
您可以把需要的文字放置在 <iframe> 和 </iframe> 之間,這樣就可以應對無法理解 iframe 的瀏覽器。
如:直接在ifram中顯示內容
<iframe src="h5.html" width="100%" height="300px"></iframe>
在本視窗顯示h5.html這個頁面
還可以讓超連結內容在ifram中顯示
如:
第一步:給ifram設定名字屬性
<iframe width="100%" height="300px" name="myIfram"></iframe>
第二部:個超連結新增target屬性
<a href="http://www.baidu.com" target="myIfram">百度</a>
new : HTML5 中的新屬性。
屬性 |
值 |
描述 |
|
不贊成使用。請使用樣式代替。 規定如何根據周圍的元素來對齊此框架。 |
|
|
規定是否顯示框架周圍的邊框。 |
|
|