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 元素,比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。表單用於向服務器傳輸數據。
</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> 之間的所有文本都會從常規文本中分離出來,經常會在左、右兩邊進行縮進(增加外邊距),而且有時會使用斜體。也就是說,塊引用擁有它們自己的空間。