HTML的結(jié)構(gòu)一般包括<html><head><body>,一般包括html文檔、head頭部、body身體,很多個(gè)html文檔頁面就是網(wǎng)站。
<!DOCTYPE html> ? ? <!--文檔類型 html-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>我是頁面標(biāo)題</title>
</head>
<body>
正文
</body>
</html>
文本
#段落
正文標(biāo)題?<h1></h1> 到 <h6></h6>
段落?<p>直接寫</p>
換行 <br>
#特殊符號(hào)
時(shí)間 ? <time>9:00</time>
時(shí)間 ? <time datetime="2016-02-14">情人節(jié)</time>
下劃線 ?<u> </u>
刪除線 <del> </del>
上標(biāo) ??<sup> </sup>
下標(biāo) ??<sub> </sub>
聯(lián)系地址?<address> </address>
水平線?<hr>
注釋 ?<!-- 這是注釋 -->
版權(quán)號(hào) ©
注冊(cè)商標(biāo) ®
& ? ";
< ? ⁢
> ? >
寬度、隨著值變化 Width
像素絕對(duì)值、越大線越粗 Size ?
被CSS了的
空格 ?
左對(duì)齊 ?<p align=“Left”>…</p>
居中 ? ?<p align=“Center”>…</p>
右對(duì)齊? <p align=“Right”>…</p>
加粗 ? <b> </b>
加語氣 <strong> </strong>
傾斜 ? <i> </i>
縮小 ? <small> </small>
單句引用 <q> </q>
多句引用 <blockquote> </blockquote>
#列表
<ul>
<li>無序列表</li>
<li>無序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
</ol>
#代碼標(biāo)簽
防止瀏覽器誤認(rèn)為是要執(zhí)行代碼
單行<code></code>
多行<pre></pre>
#跳轉(zhuǎn)標(biāo)簽
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
表格
#table標(biāo)簽、tbody標(biāo)簽
table標(biāo)簽表示表格,tbody標(biāo)簽用它來將表格分段,可以一部分一部分的顯示
tr表示一行
th表示行內(nèi)表頭
td表示行內(nèi)表數(shù)據(jù)
border="1" 表格邊框大小
<table>
<tbody>
? <tr> <th>表格標(biāo)題</th> <th>表格標(biāo)題</th> </tr>
? <tr> <td>表格數(shù)據(jù)</td> <td>表格數(shù)據(jù)</td> </tr>
</tbody>
</table>
#摘要
摘要的內(nèi)容是不會(huì)在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化),使搜索引擎更好的讀懂表格內(nèi)容,還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容。
<table summary="表格簡介文本">
#標(biāo)題
用以描述表格內(nèi)容,標(biāo)題的顯示位置:表格上方。
<table>
<caption>標(biāo)題文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
</table>
#表格邊框
<style type="text/css">
table tr td,th{
border:1px solid #000;
}
</style>
超鏈接
#<a></a>標(biāo)簽
使用a標(biāo)簽可實(shí)現(xiàn)超鏈接
<a rel="external nofollow" target="_blank" >外部鏈接</a>
<a href="/html">本地鏈接</a>
<a href="/html"? target="_blank">新窗口打開</a>
導(dǎo)航鏈接
<nav>?
? <a href="/html/">HTML</a>|<a href="/css/">CSS</a>|? ? ?
</nav>
圖片鏈接
相當(dāng)于將圖片標(biāo)記語言放在了超鏈接下面
<a href="http://hgci.cn"> <img src="images\xxgk.jpg" alt="loge" width="258" height="39" /></a>
<mailto>標(biāo)簽
使用mailto能讓訪問者便捷向網(wǎng)站管理者發(fā)送電子郵件
用mailto做許多其它事情。下面一一進(jìn)行講解,請(qǐng)看詳細(xì)圖示:
注意:如果mailto后面同時(shí)有多個(gè)參數(shù)的話,第一個(gè)參數(shù)必須以“?”開頭,后面的參數(shù)每一個(gè)都以“&”分隔。
<a herf="mailto:yy@imooc.com?subject=我是郵件主題。&body=我是郵件內(nèi)容。">對(duì)此影評(píng)有何感想,發(fā)送郵件給我</a>
<a href="mailto:425389019@qq.com">郵件鏈接</a>
圖片
#<img>標(biāo)簽
用來插入圖片
1、src:標(biāo)識(shí)圖像的位置;
2、alt:指定圖像的描述性文本,當(dāng)圖像不可見時(shí)(下載不成功時(shí)),可看到該屬性指定的文本;
3、title:提供在圖像可見時(shí)對(duì)圖像的描述(鼠標(biāo)滑過圖片時(shí)顯示的文本);
4、圖像可以是GIF,PNG,JPEG格式的圖像文件。
靜態(tài)圖片 ? ?
<img src="圖片地址" alt="下載失敗時(shí)的替換文本" title = "提示文本">
<img src="images\xxgk.jpg" alt="loge" width="258" height="39" />
背景圖片
<body background=images\bg.jpg>
音樂視頻
音樂
定義了mp3與ogg兩個(gè)格式
<audio controls loop>
? <source src="music/大王叫我來巡山.MP3" type="audio/mpeg">
? <source src="horse.ogg" type="audio/ogg">
</audio>
視頻
<video width="320" height="240" controls>
? <source src="video/鷸.mp4"? type="video/mp4">
</video>
<embed src='http://player.youku.com/player.php/sid/XMjg2NjYzNzc1Mg==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
表單
<form></form>標(biāo)簽
使用表單標(biāo)簽,與用戶交互,網(wǎng)站怎樣與用戶進(jìn)行交互?答案是使用HTML表單(form)表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端,這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)。
method:數(shù)據(jù)傳送的方式(get/post),post/get的區(qū)別這一部分內(nèi)容屬于后端程序員考慮的問題。感興趣的小伙伴可以查看本小節(jié)的wiki,里面有詳細(xì)介紹。
action:服務(wù)器文件,瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁面(save.php)。
type: 表單樣式,文本框text 密碼框password 單選框radio 復(fù)選框checkbox 多行文本框comment
name:為文本框命名,以備后臺(tái)程序ASP 、PHP使用。
value:為文本輸入框設(shè)置默認(rèn)值。(一般起到提示作用)
placeholder:框內(nèi)的提示符
文本框:
<input type="text/password" name="名稱" value="文本" />
<form action="save.php" method="post" >
賬戶:
<input type="text" name="myName" value="zhangzexiang" placeholder='請(qǐng)輸入賬號(hào)'>
密碼:
<input type="password" name="pass">
<input type="submit" value="提交" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
多行文本框:
<textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>
<form action="save.php" method="post" >
<label>聯(lián)系我們</label>
<textarea cols="50" rows="10" >在這里輸入內(nèi)容...</textarea>
</form>
單選框:
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
復(fù)選框:
1、type:當(dāng)?type="radio"?時(shí),控件為單選框,當(dāng)?type="checkbox"?時(shí)控件為復(fù)選框
2、value:提交數(shù)據(jù)到服務(wù)器的值(后臺(tái)程序PHP使用)
3、name:為控件命名,以備后臺(tái)程序 ASP、PHP 使用
4、checked:當(dāng)設(shè)置 checked="checked" 時(shí),該選項(xiàng)被默認(rèn)選中
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
<form action="save.php" method="post" >
<label>性別:</label>
<label>男</label>
<input type="radio" value="1" name="gender" />
<label>女</label>
<input type="radio" value="2" name="gender" />
</form>
下拉框
selected="selected":
設(shè)置selected="selected"屬性,則該選項(xiàng)就被默認(rèn)選中。
<form action="save.php" method="post" >
<label>愛好:</label>
<select>
<option value="看書">看書</option>
<option value="旅游" selected="selected">旅游</option>
<option value="運(yùn)動(dòng)">運(yùn)動(dòng)</option>
<option value="購物">購物</option>
</select>
</form>
multiple="multiple"讓下拉框多選
<form action="save.php" method="post" >
<label>愛好:</label>
<select multiple="multiple">
<option value="看書">看書</option>
<option value="旅游">旅游</option>
<option value="運(yùn)動(dòng)">運(yùn)動(dòng)</option>
<option value="購物">購物</option>
</select>
</form>
<form>
<select>
<option>房子</option>
<option>車子</option>
<option selected>永久生命</option>????? <!-- selected>Fiat 是預(yù)選按鈕? -->
<option value="錢">金錢</option>
<input type="reset" value="重置">
</select>
</form>
form表單中的label標(biāo)簽
小伙伴們,你們?cè)谇懊鎸W(xué)習(xí)表單各種控件的時(shí)候,有沒有發(fā)現(xiàn)一個(gè)標(biāo)簽--label,這一小節(jié)就來揭曉它的作用。
label標(biāo)簽不會(huì)向用戶呈現(xiàn)任何特殊效果,它的作用是為鼠標(biāo)用戶改進(jìn)了可用性。如果你在 label 標(biāo)簽內(nèi)點(diǎn)擊文本,就會(huì)觸發(fā)此控件。就是說,當(dāng)用戶單擊選中該label標(biāo)簽時(shí),瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上(就自動(dòng)選中和該label標(biāo)簽相關(guān)連的表單控件上)。
語法:
<label for="控件id名稱">
注意:標(biāo)簽的?for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的?id 屬性值一定要相同。
<form action="save.php" method="post">
<label>你對(duì)什么運(yùn)動(dòng)感興趣:</label><br />
<label for="mal">慢跑</label>
<input type="checkbox" name="慢跑" id="mal"/><br />
<label for="mal">登山</label>
<input type="checkbox" name="登山" id="mal"/><br />
<label for="mal">籃球</label>
<input type="checkbox" name="籃球" id="mal"/><br />
</form>
更多建議: