1. 程式人生 > >HTML——常用標籤

HTML——常用標籤

head中常見的標籤

  1. 檔名必須是 *.html或者 *.htm
  2. 標籤表示是網頁的標題;
<title>網頁標題</title>
  1. 告訴瀏覽器 請用這個字元編碼顯示網頁內容
<meta charset="字元編碼">
  1. 用來包含網頁尾本
<script></script>
  1. 用來包含外部樣式
<link></link>

body中的標籤

標題標籤

<h1><h2>...<
h6
>

正文標籤

  1. 段落標籤
    不同段落之間可以自動換行
<p>
  1. 段落內換行
<br>
  1. 分隔線
<hr>

特殊文字
需要轉義顯示

 < : &lt;
 > : &gt;
 ©  : &copy;

超連結標籤

<a href="連結地址">連結名字</a>

例子:

<a href="www.baidu.com">跳轉百度</a> 	//絕對路徑
<a href="2.html"
>
跳轉本地</a> //相對路徑

圖片標籤

<img src="圖片地址" width="寬度" height="高度">

寬高都是畫素
讓圖片有連結功能

<a href="圖片跳轉連結"><img src="圖片地址"></a>

頁面內的連結(錨)
首先在目的地標籤新增"id=“唯一編號”,id後的內容不能以數字開頭
然後在超連結的href="#唯一編號"

<h1 id="t1">標題</h1>
//內容
<a href="#t1"> 回到頂部</a>

列表標籤

有序列表

<ol>
	<li>列表項1</li>
	<li>列表項2</li>
	<li>列表項3</li>
</ol>
ol>li*3

無序列表

<ul>
	<li>列表項1</li>
	<li>列表項2</li>
	<li>列表項3</li>
</ul>

表格標籤

<table>
	<thead></thead>
	<tbody>
		<tr>
			<td></td> <!-- td代表列
		</tr> <!-- tr代表行
	</tbody>
	<tfoot></tfoot>
</table>

快捷生成表格
按Tab鍵

table>(thead>tr>td*2)+tbody>tr*3>td*3

表格合併單元格

和並列:colspan
合併行:rowspan

 	<tr>
        <td rowspan="2">張三</td>
        <td>10</td>
        <td></td>
		</tr>
    <tr>
        <td>20</td>
        <td></td>
    </tr>

 	<tr>
        <td colspan="2">王五</td>
        <td></td>
    </tr>

表單標籤

//文字框
<input type="text">

//密碼框
<input type="password">

//按鈕
<input type="button" value="文字">

<!--單選框:name用來劃分組-->
<!--checked預設選中-->
male <input type="radio" name="sex" checked> female<input type="radio" name="sex">


<!--複選框-->
sing<input type="checkbox" name="hobby">
dancing<input type="checkbox" name="hobby">
shopping<input type="checkbox" name="hobby">
learning<input type="checkbox" name="hobby">
jumping<input type="checkbox" name="hobby">

//檔案選擇框
<input type="file">

//日期
<input type="date">

//提交
<input type="submit" value="提交">
//重置
<input type="reset" value="重置">

form表單
傳送給伺服器的內容必須有name屬性
把資訊收集起來發給伺服器


iframe
內嵌頁面

	自己的頁面<br>
	<iframe src="http://www.baidu.com"></iframe>