html部分常用標簽的含義及作用


1.a 超鏈接

<a> 標簽定義超鏈接,用於從一張頁面鏈接到另一張頁面。<a> 標簽中必須提供 href 屬性或 name 屬性,它指示鏈接的目標。

例如:點擊 百度一下 跳轉到www.baidu.com

<a href="http://www.baidu.com.cn/" target="_blank">百度一下</a>

如果把鏈接的 target 屬性設置為 "_blank",該鏈接會在新窗口中打開。

            將圖片作為鏈接

<a href="http://www.baidu.com.cn/"><img src="baidu.jpg" /></a>

            鏈接到同一頁面的不同位置,這里是鏈接到C4區域

<p><a href="#C4">查看 Chapter 4。</a><p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

 

2.div 

 

<div> 是一個塊級元素,常配合CSS使用,為網頁中最常用的分區標簽。它的內容會自動地開始一個新行。實際上,換行是 <div> 固有的唯一格式表現。可以通過 <div> 的 class 或 id 應用額外的樣式。不必為每一個 <div> 都加上類或 id,雖然這樣做也有一定的好處。<div> 標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具,並且不使用任何格式與其關聯。

 

可以對同一個 <div> 元素應用 class 或 id 屬性,但是更常見的情況是只應用其中一種。這兩者的主要差異是,class 用於元素組(類似的元素,或者可以理解為某一類元素),而 id 用於標識單獨的唯一的元素。在css中,用#xxx{ }來為id xxx添加屬性,用.xxx{ }來為class xxx添加屬性。

 

3.span

<div>與<span>區別<div>是一個塊級(block-level)元素,它包圍的元素會自動換行。而<span>僅僅是一個行內元素(inline element),在它的前后不會換行。

<span>沒有結構上的意義,純粹是應用樣式,當其他行內元素都不合適時,就可以使用<span>元素。可以對同一個 <span> 元素應用 class 或 id 屬性,然后在css中為其添加屬性。

例如:          div會讓每張圖片各占一行,span則會讓三張圖片排列在一行中

<p>div標記不同行</p>

<div><img src="0550372.jpg" border="0"/></div>

<div><img src="0550372.jpg" border="0"/></div>

<div><img src="0550372.jpg" border="0"/></div>

<p>span標記在同一行</p>

<span><img src="0550372.jpg" border="0" /></span>

<span><img src="0550372.jpg" border="0" /></span>

<span><img src="0550372.jpg" border="0" /></span>

            span可以在一段內容中賦予自己的屬性,這里是讓文字顯示不同的顏色

<p>我的母親有 <span style="color:blue">藍色</span> 的眼睛,我的父親有 <span style="color:darkolivegreen">碧綠色</span> 的眼睛</p>

 

 4.form

<form> 標簽用於為用戶輸入創建 HTML 表單。

表單能夠包含 input 元素,比如文本字段、復選框、單選框、提交按鈕等等。

表單還可以包含 menustextareafieldsetlegend 和 label 元素。表單用於向服務器傳輸數據。

 例如:            創建一個密碼域
<form>
用戶:<input type="text" name="user"><br />
密碼:<input type="password" name="password">

</form>

            創建一個復選框,用戶可以選中或取消選取復選框。

<form>
我喜歡自行車:
<input type="checkbox" name="Bike">
<br />
我喜歡汽車:
<input type="checkbox" name="Car">
</form>

           創建一個單選摁鈕,用戶可以選擇其中某一選項。

<form>

男性:<input type="radio" checked="checked" name="Sex" value="male" /><br />

女性:<input type="radio" name="Sex" value="female" />

</form>

           簡單的下拉摁鈕,點擊會彈出所有選項,用戶可以選擇某一項,然后會收回,並顯示選擇項

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option> 
<option value="audi">Audi</option>
</select>
</form>

selected="selected"使摁鈕帶有預選值,讓Fiat變成默認選項

         創建一個文本域,用戶可以在文本域中寫入文本,寬度為30高度為10

<p>
This example cannot be edited
because our editor uses a textarea
for input,
and your browser does not allow
a textarea inside a textarea.
</p>

<textarea rows="10" cols="30">
The cat was playing in the garden.

         創建一個摁鈕,可以給摁鈕附加各種屬性

<input type="button" value="Hello world!">

value顯示摁鈕上的內容

         創建一個帶有提交摁鈕的表單
<form action="http://www.baidu.com.cn/">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

如果點擊提交,表單數據會被發送到百度的頁面。

 

5.table

<table> 標簽定義 HTML 表格。

簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。

tr 元素定義表格行,th 元素定義表頭,td 元素定義表格單元。

更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

例如:在表格中可以加入表格或列表

<table border="1">
<tr>
<td>
<p>這是一個段落</p>
<p>這是另一個段落</p>
</td>
<td>這個單元格包含一個表格:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>這個單元格包含一個列表
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>

         跨兩格或跨兩列的表格

<h4>單元格跨兩格:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h4>單元格跨兩列:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

6.nav

<nav> 標簽定義導航鏈接的部分。

例如:

<nav>
<a href="https://www.baidu.com/">百度</a> |
<a href="https://www.sogou.com/">搜狗</a> |
<a href="http://www.google.cn/">谷歌</a> |
<a href="https://www.qq.com/">騰訊</a>
</nav>

7。blockquote

<blockquote> 標簽定義塊引用。

<blockquote> 與 </blockquote> 之間的所有文本都會從常規文本中分離出來,經常會在左、右兩邊進行縮進(增加外邊距),而且有時會使用斜體。也就是說,塊引用擁有它們自己的空間。

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM