摘要：HTML標(biāo)記<hr width=”80%” size="10px" noshade>//水平線長80% 線粗10px 實體線字符控制標(biāo)記<b>…</b> 粗 <i>…</i> 斜 &
HTML
標(biāo)記
<hr width=”80%” size="10px" noshade>//水平線長80% 線粗10px 實體線
字符控制標(biāo)記
<b>…</b> 粗 <i>…</i> 斜 <s>…</s> 刪 <u>…</u> 下劃
<tt>…</tt> 電報 <sub>…</sub> 下標(biāo) <sup>…</sup> 上標(biāo) <address>…</address> 地址
<big>…</big> 大字 <del>…</del> 刪除 <ins>...</ins> 修改 <samll>…</small> 小字
<strong>…</strong> 加強語氣(加粗) <em>...</em> 加強語氣(傾斜)
格式化
<pre>…</pre>讓書寫的文字格式化！
引用文本
<blockquote cite="url">...</blockquote>
<table> 標(biāo)簽下的屬性
屬性名稱 屬性值 說明
border 像素 設(shè)置表格的邊線
cellspacing 像素/百分比 存儲格框線寬度
cellpadding 像素/百分比 數(shù)據(jù)與框線的距離
width 像素/百分比 表格寬度
height 像素/百分比 表格厚度
align left 表格往左靠(默認)
center 表格往中靠
right 表格網(wǎng)右靠
bgcolor 英文/十六 表格的背景顏色
background URL 表格的背景圖片
summary 字符串 用來描述表格數(shù)據(jù)說明(相當(dāng)于注釋，頁面上看不到效果)
bordercolor 英文/十六 邊框的顏色（不兼容）
bordercolorlight 同上 邊框的亮色（不兼容）
bordercolordark 同上 邊框的暗色（不兼容）
<table> 標(biāo)簽下的邊框設(shè)置（該屬性必須在 border的屬性值不為0 的狀態(tài)下!）
屬性名稱 屬性值 說明
frame void 不要顯現(xiàn)表格的邊線
above 只要顯現(xiàn)出表格的上邊線
below 只顯現(xiàn)出表格的下邊線
hsides 只顯示表格的上下邊線
vsides 只顯現(xiàn)表格的左右邊線
lhs 只顯現(xiàn)表格的左邊線
rhs 只顯現(xiàn)表格的右邊線
border/box 會顯現(xiàn)出表格的所有邊線
rules rows 只顯示出橫行的格框線
cols 只顯示出直行的格框線
all 顯示全部格框線
groups 表示列組合水平部分
none 不顯示任何格框線
（表格單邊框：border=1;border-collapse:collapse）
<tr><th><td>標(biāo)簽下的常用屬性
屬性名稱 屬性值 說明
width 像素/百分比 寬
height 像素/百分比 高
bgcolor 英文/十六 數(shù)據(jù)欄的顏色
align(水平方向) left 數(shù)據(jù)靠左
center 數(shù)據(jù)靠中
right 數(shù)據(jù)靠右
valign(垂直方向) top 數(shù)據(jù)靠上
middle 數(shù)據(jù)靠中
bottom 數(shù)據(jù)靠下
nowrap 無 在單元格中換行
拆分與合并單元格
屬性名稱 屬性值 說明
colspan 數(shù)字 向兩邊擴展欄位
rowspan 數(shù)字 向下擴展欄位
直列化格式：<colgroup>….</colgroup>
屬性名稱 屬性值 說明
align left 靠左
center 靠中
right 靠右
valign top 靠上
middle 靠中
bottom 靠下
span 數(shù)字 直列數(shù)目
width 像素/百分比 寬度
bgcolor 英文/十六 數(shù)據(jù)欄的顏色
個別直列設(shè)置
格式:<col>功能完全和<colgroup>一樣.
表格的標(biāo)題：
<table>
<caption>….</caption>
</table>
<caption>下的屬性值有:
屬性名稱 屬性值 說明
align top 標(biāo)題在表格上方
bottom 標(biāo)題在表格下方
為網(wǎng)站添加圖標(biāo)
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
超鏈接的基本格式
格式:
scheme://host[:post]/path/filename
scheme指的是 http,ftp,file,mailto,news,gopher,telnet 七種
host 指的是 IP 地址或計算機名稱
post 指的是服務(wù)器端口
path 指的是文件路徑
filename 指的是文件名
<a href=scheme://host[:post]/path/filename >…</a>
超鏈接的種類
1. http 聲明 <a href=http://www.163.com/images/logo.htm>網(wǎng)易 logo</a>
2. file 聲明 <a href=file:///e/images/img.jpg>圖片</a>
3. ftp 聲明 <a href=ftp://192.168.1.44/>進入</a>
4. mailto 聲明<a href=mailto:sctnl@163.com>E-MAIL</a>
書簽的鏈接
瞄點<a name=”ind”>…</a>或<a id=”ind”>…</a>
鏈接點<a href=”#ind”>…</a> 別的網(wǎng)頁的書簽項目鏈接點<a href=”index.htm#ind”>…</a>
為鏈接創(chuàng)建鍵盤快捷鍵
accesskey="w" (Alt+w) (Ctrl+w)
為鏈接設(shè)置制表符次序
tabindex="n"
表單的功能結(jié)構(gòu)：
主標(biāo)記結(jié)構(gòu)：<from>…</from>
屬性 值 說明
name 字符串 給這個表單起個名字
method get/post 表單的傳輸方式
action url 傳輸目標(biāo)
文本欄、密碼欄、隱藏欄
文本欄：<input type=”text” name=”欄位名稱” value=”欄位內(nèi)定值” size=”欄位顯示寬度” maxlength=”欄位數(shù)據(jù)輸入最大長度” readonly>
密碼欄：<input type=”password” name=”欄位名稱” value=”欄位內(nèi)定值” size=”欄位顯示寬度” maxlength=”欄位數(shù)據(jù)輸入最大長度” readonly>
隱藏性欄位：<input type=”hidden” name=”欄位名稱” value=”欄位值”>
復(fù)選欄、單選欄
多重勾選欄位 ：<input type=”checkbox” name=” 欄位 稱 ” value=” 內(nèi)定值” checked disabled>
單選欄位 :<input type=”radio” name=” 欄位名稱 ” value=”內(nèi)定值 ” checked disabled>
窗體欄位、區(qū)塊欄位
窗體選項欄位設(shè)置:
<select name=”欄位名稱” size=”數(shù)字” >
<option value=”選項值” selected>…
<option value=”選項值”>…
<option value=”選項值”>…
</select>
//分組<optgroup label="分組名稱"></optgroup>
//多選 multiple
文字區(qū)塊的設(shè)置:
<textarea cols=”設(shè)置長度” rows=”設(shè)置寬度” placeholder="內(nèi)定值" autofocus disabled form>………</textarea>
//禁止拖動：resize:none; //autofocus:頁面加載自動獲取焦點 //form：文本所屬表單
按鈕、圖像按鈕
按鈕設(shè)置: <input type=”submit” value=”按鈕中顯示的文字”>
<input type=”reset” value=”按鈕中顯示的文字”>
按鈕圖像:<button name=”欄位名稱” type=”圖象形態(tài)”>
<img src=”URL”>
</button>
圖像按鈕:<input type="image" src="url" alt="文本">
允許上傳文件
上傳欄位:<input type="file" name="file">
表單加上外框和標(biāo)題
外邊框:<fieldset>...</fieldset>
標(biāo)題:<legend>...</legend>
自動展示網(wǎng)頁內(nèi)容：
格式：<meta http-equiv=”refresh” content=”time;URL”>
1. meta 文件頭聲明
2. http-equiv=”refresh” 表示網(wǎng)頁要重新下載顯示
3. content=”time;URL” time 表示秒數(shù)，URL 網(wǎng)頁顯示內(nèi)容
例：<meta http-equiv=”refresh” content=”3;url=index.html”>
如何讓別人找到你的網(wǎng)頁：
<meta>下的屬性：
屬性名稱 屬性值 說明
name author 描述作者資料
description 描述網(wǎng)頁的內(nèi)容
keywords 關(guān)鍵字，多個可用逗號隔開
generator 描述網(wǎng)頁是通過那種軟件產(chǎn)生
revised 描述網(wǎng)頁的版本
others 可設(shè)置其他網(wǎng)頁信息
content 字符串 配合 name,http-equive 設(shè)置
例：<meta name=”author” content=”sctnl”>
<meta name=”description” content=”這是我的個人網(wǎng)站”>
<meta name=”keywords” content=”音樂，動漫，博客”>
<meta name=”generator” content=”sublime_text”>
<meta name=”revised” content=”html4.01”>
<meta name=”others” content=”這個我第一個網(wǎng)站，網(wǎng)站的主要內(nèi)容有動漫，音樂，文章，博客等等，歡迎大家光臨！”>
活動文字： <marquee> … </marquee>
屬性名稱 屬性值 說明
behavior scroll 從右到左移動
slide 從右到左停止
alternate 兩邊移動
direction left 向左移動
right 向右移動
up 向上移動
down 向下移動
bgcolor 英文/十六 背景顏色
height 像素/百分比 高度
width 像素/百分比 寬度
scrollamount 數(shù)字 播放的速度
vspace 像素 上下兩側(cè)間距
hspace 像素 左右兩側(cè)間距
demo:https://github.com/sctnl/html.git
