一.HTML基礎
當網(wǎng)頁出現(xiàn)中文亂碼時,可以在<head>標簽之間添加<meta http-equiv="Content" context="text/html; charset=utf-8" />便可解決亂碼.
文字和段落標簽:
標題標簽: <h1></h1>~<h6></h6>
段落標簽:<p></p> align 對齊屬性 ?
換行標簽: <br/>
水平線: <hr/>
文字斜體:
<i></i> ? <em></em>
加粗:
<b></b> ?<strong></strong>
上標:
<sup></sup>
下標:
<sub></sub>
插入內(nèi)容:
<ins></ins>
刪除內(nèi)容:
<del></del>
特殊符號:
列表標簽:
無序列表:
<ul>
? ? <li>列表項</li>
????<li>列表項</li>
? ? ? ? ? ? ? ?...
</ul>
無序列表屬性值:
有序列表:
<ol>
????<li>列表項</li>
...
</ol>
有序列表屬性值:
用法:<li type="a"></li>
列表項:
<dl>
? ? <dt>定義列表項</dt>
? ? <dd>列表項描述</dd>
????<dd>列表項描述</dd>
? ? ? ? ? ? ...
</dl>
示例:
圖像標簽:
<img src="" ? alt="" .../>
img的屬性:
其中height和width可以使用像素px指定 ?也可以通過百分比%指定,一般更推薦后者,可以更好適配.
超鏈接:
<a href="">內(nèi)容</a>
超鏈接的屬性:
錨的定義:
同一頁面:
<a href="#錨名1">目錄1</a>
<a href="#錨名2">目錄2</a>
<a href="" name="錨名1">內(nèi)容</a>
xxxxxxxxxxxxxx
xxxxxxxxxxxxxx
<a href="" name="錨名2">內(nèi)容</a>
xxxxxxxxxxxxxx
xxxxxxxxxxxxxx
不同頁面:
<a href="網(wǎng)頁名稱#錨名">...</a>
郵件鏈接:
<a href="maileto:郵件地址">...</a>
二.表格
基本格式:
<table>
? ? <tr>
? ? <td></td>
? ? <td></td>
? ? ? ? ? ?...
????</tr>
</table>
其中<tr>代表行,<td>代表列,可以有多行多列,默認不帶邊框,如果需要加邊框可以在<table>中指明border=數(shù)字 ,數(shù)字越大邊框線越粗.
在實際開發(fā)中,由于表格是整個表格都加載完成后才渲染,這樣如果表比較大的話加載速度會比較慢,影響用戶體驗,為了解決這個問題,需要引入:表頭,主題,腳注三個部分.
通過表格的屬性來實現(xiàn)下表格式:
屬性:
cellspacing="數(shù)字",表示表格邊框間隙的值,當為0時顯示效果就如上圖.
align="center" 表示垂直水平居中
bgcolor="" 指明背景顏色
rowspan="數(shù)字" 表明跨行值,比如像:城市
colspan="數(shù)字" 表明跨列值,比如像:2014
表格嵌套:
上面的表格實現(xiàn)除了通過跨行跨列方式還可以通過表格嵌套來實現(xiàn),表格嵌套的格式如下:
<table>
????<tr>
? ? ? ? <td>
? ? ? ? ? ? <table>
? ? ? ? ? ? ? ?...
????????????</table>
? ? ? ? </td>
????</tr>
</table>
嵌套的表格只能放在<td>標簽內(nèi).
三.表單
<form>
表單元素
</form>
<input>標簽:
格式:<input type="" .../>單標簽.
圖像域:
功能跟button一樣,但可以更好看.
表單標簽:
下拉菜單和列表標簽:
文本域標簽:
<textarea>...</textarea>