2. 程式人生 > >HTML中的body及可以再body中出現的標籤

HTML中的body及可以再body中出現的標籤

阿新 • • 發佈：2018-11-15

網頁的主體標記body 

需要顯示的瀏覽器網頁模組的內容，都必須要定義在body中，<body> 標籤，可以說是HTML檔案中，最為重要的一塊內容。

主體標記 以<body>開始，以</body>結尾

注意：在構建HTML檔案時，請不要將標記交叉使用，否則將會出現一些莫名其妙的錯誤

 

能夠出現在主體標記中的內容 

1、註釋

HTML中註釋格式：<!-- 被註釋的內容 -->

<!-- 被註釋的內容 -->

 

2、文字資訊

文字資訊，可以分為2大類：普通文字，一些特殊字元文字

1）普通文字：漢字，英文或者在鍵盤上我們可以輸出的字元。

2）特殊字元文字： 特殊字元文字以&開頭，使用；結束。例如：大小括號……

在HTML中，特殊字元文字有：

&ensp;  半大角的空白     一個代表半個漢字空
&emsp;  全形大的空白      一個代表一個漢字空
&nbsp;  不斷行的空白格    一個代表一個漢字空間
&gt;    大於符號
&lt;    小於符號
&ge;    大於等於符號
&le;    小於等於符號
&amp;   &
&quot;  "
&copy;  © 版權符號
&reg;   ® 註冊商標
&times; 代表乘號× 
&divide;   代表除號÷  

 

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>標籤用於製作表格

表格標籤

表格

描述

<table>

定義表格

<caption>

定義表格標題。

<th>

定義表格的表頭。

<tr>

定義表格的行。

<td>

定義表格單元。

<thead>

定義表格的頁首。

<tbody>

定義表格的主體。

<tfoot>

定義表格的頁尾。

<col>

定義用於表格列的屬性。

<colgroup>

定義表格列的組。

 

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 中的新屬性。

屬性

值

描述

align
  • left
  • right
  • top
  • middle
  • bottom

不贊成使用。請使用樣式代替。

規定如何根據周圍的元素來對齊此框架。

frameborder
  • 1
  • 0

規定是否顯示框架周圍的邊框。

height