什么是HTML
HTML是用來描述網(wǎng)頁(yè)的一種語(yǔ)言
* HTML是超文本標(biāo)記語(yǔ)言，不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言
* 標(biāo)記語(yǔ)言是一條標(biāo)記標(biāo)簽
* HTML是使用標(biāo)記標(biāo)簽來描述網(wǎng)頁(yè)
HTML標(biāo)簽
HTML標(biāo)簽通常被稱為HTML標(biāo)簽
* HTM標(biāo)簽由尖括號(hào)擴(kuò)起來的 例如 <htlm>
* 標(biāo)簽通常是成對(duì)出現(xiàn)<b></b>
* 標(biāo)簽第一個(gè)是開始標(biāo)簽，第二個(gè)是結(jié)束標(biāo)簽
* 開始和結(jié)束標(biāo)簽稱為開放標(biāo)簽和閉合標(biāo)簽
* 自動(dòng)換行的叫做塊級(jí)標(biāo)簽，不自動(dòng)換行的叫做行級(jí)標(biāo)簽
web游覽器的作用是讀取HTML，并以網(wǎng)頁(yè)的形式顯示他們
資源全部用相對(duì)路徑，資源全部存放在工程中
亂碼解決方案，title屬性設(shè)置
<html>
<head>
<title>
網(wǎng)站的標(biāo)題
</title>
<meta charset="UTF-8"> <!--運(yùn)行過程中出現(xiàn)亂碼 HTML5.0解決方案-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <!--運(yùn)行過程中出現(xiàn)亂碼 HTML4.0解決方案-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.comm"> <!--5秒后刷新到某個(gè)指定頁(yè)面，如果不寫url 5秒刷新當(dāng)前頁(yè)-->
<meta name="keywords" content="java,c#,net,php"> <!--屬性,設(shè)置網(wǎng)頁(yè)關(guān)鍵字-->
<meta name="description" content="網(wǎng)頁(yè)的描述">
<!-- ../表示返回上一級(jí)文件，資源全部用相對(duì)路徑，資源全部存放在工程中 -->
</head>
<body>
網(wǎng)站的內(nèi)容
</body>
</html>
常用的文本圖片屬性標(biāo)簽
* <h1></h1> 標(biāo)題標(biāo)簽
* <p></p> 換行標(biāo)簽
*  空格符號(hào)
* © 版權(quán)所有標(biāo)簽
* <ul><li></li></ul>無序列表
* <ol><li></li></ol>有序列表
* <strong>加粗</strong>
* <b>加粗</b><br>
* <em>斜體</em><i>斜體</i><br>
* <dl><dt></dt><dl>定義列表
* <img src="images/2.jpg" width="40" height="40" title="這個(gè)是圖片,鼠標(biāo)懸停時(shí)顯示" alt="圖片無法顯示時(shí)顯示"/>
* <pre>段落標(biāo)簽<pre>
* <hr/>分隔符
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<>
<head>
<title>標(biāo)簽練習(xí)</title>
</head>
<>
<!--標(biāo)題標(biāo)簽-->
<h1>標(biāo)簽一</h1>
<h2>標(biāo)簽二</h2>
<h3>標(biāo)簽三</h3>
<h4>標(biāo)簽室</h4>
<h5>標(biāo)簽五</h5>
<h6>標(biāo)簽六</h6>
<!--控制字體屬性-->
<font color="aqua" size="100">測(cè)試字體</font>
<!--換行標(biāo)簽-->
<p>自動(dòng)換行，表示一個(gè)段落</p>
<p>自動(dòng)換行，具有行間距</p>
換行書寫，表示一個(gè)段落，不具有行間距<br>
一個(gè)新的段落<br>
<!--空格符號(hào)-->
有好多的空格 有三個(gè)空格<br>
<!--大于小于符號(hào)-->
a<b a>b<br>
XXXX版權(quán)所有©
<!--無序列表 如果type值等于null則去掉項(xiàng)目符號(hào)<ul type="">-->
<ul>
<!-- li 排序列表 -->
<li>吃飯</li>
<li>睡覺</li>
<li>打豆豆</li>
</ul>
<!--無序列表嵌套書寫-->
<ul>
<li>吃飯</li>
<ul>
<li>吃肉</li>
<li>吃菜</li>
<li>吃面條</li>
</ul>
</ul>
<!--有序排序-->
<ol>
<li>吃飯</li>
<li>睡覺</li>
<li>打豆豆</li>
</ol>
<!--y有序排序，修改項(xiàng)目符號(hào)-->
<ol type="A">
<li>吃飯</li>
<li>睡覺</li>
<li>打豆豆</li>
</ol>
<!--字體加粗，斜體字體-->
<strong>加粗</strong>
<b>加粗</b><br>
<em>斜體</em><i>斜體</i><br>
<!--定義列表-->
<dl>
<dt>咖啡</dt> <!--這是標(biāo)題-->
<dd>這是一杯咖啡</dd> <!--這是內(nèi)容-->
</dl>
<!--圖片標(biāo)簽，自帶結(jié)束,也可以只設(shè)置寬度px自動(dòng)調(diào)整高度，設(shè)置寬度百分百，是游覽器所占屏幕的半分比。高度只能用像素控制，無百分百-->
<img src="images/2.jpg" width="40" height="40" title="這個(gè)是圖片,鼠標(biāo)懸停時(shí)顯示" alt="圖片無法顯示時(shí)顯示"/>
<!--pre標(biāo)簽，標(biāo)簽區(qū)域里的內(nèi)容不會(huì)編譯-->
<pre>
a < b a > b
</pre>
<!--分割線-->
<hr/>
</body>
</html>
<a>錨點(diǎn)定位超鏈接，表格
* <a href="常用的標(biāo)簽01.html" target="_blank">超鏈接</a>
* <table><tr><td></td></tr><table> 表格標(biāo)簽
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<!--超鏈接標(biāo)簽 href表示需要跳轉(zhuǎn)的連接，#表示本頁(yè)，target表示打開方式， blank表示新窗口打開，self表示當(dāng)前窗體打開-->
<a href="常用的標(biāo)簽01.html" target="_blank">超鏈接</a>
<!--錨點(diǎn)定位,快速跳轉(zhuǎn)-->
<ol>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
<!--定位超鏈接去向，#表示本頁(yè)的four-->
<li><a href="#four">第四章</a></li>
<!--跳轉(zhuǎn)其他頁(yè)面的快速定位，#表示需跳轉(zhuǎn)的頁(yè)面的five-->
<li><a href="常用的標(biāo)簽01.html#five">第五章</a></li>
</ol>
<!--定義超鏈接名字-->
<h1><a name="four">第四章</a></h1>
<!--表格標(biāo)簽 ，border屬性代表邊框?qū)傩?，align表示表格位置，wideth是相對(duì)游覽器，tr代表行,td代表列-->
<!--rules 表示邊框規(guī)則-->
<table border="1" align="center" width="100%" style="height: 500px;">
<!--tr中的align表示文本居中，水平位置;valign表示垂直位置-->
<tr align="center" >
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<tr>
</tr>
</table>
</body>
</html>
去掉表格的間隙 border
<table align="center" style="border-collapse:collapse;">
table表格垮行垮列合并
* 行合并使用rowspan
* 列合使用colspan
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<!--表格標(biāo)簽 ，border屬性代表邊框?qū)傩裕琣lign表示表格位置，wideth是相對(duì)游覽器，tr代表行,td代表列-->
<!--rules 表示邊框規(guī)則-->
<table border="1" align="center" width="100%" style="height: 500px;">
<!--tr中的align表示文本居中，水平位置;valign表示垂直位置-->
<tr align="center" >
<td>姓名</td>
<td>科目</td>
<td>分?jǐn)?shù)</td>
<td>總分</td>
</tr>
<!--單元格合并 rowspan 垮行三行，垮的行數(shù)需要?jiǎng)h除不書寫-->
<tr align="center" >
<td rowspan="3">張三</td>
<td>語(yǔ)文</td>
<td>80</td>
<td rowspan="3">xxxx</td>
</tr>
<tr align="center" >
<td>數(shù)學(xué)</td>
<td>90</td>
</tr>
<tr align="center" >
<td>英語(yǔ)</td>
<td>70</td>
</tr>
<tr align="center" >
<td rowspan="3">李四</td>
<td>第5行第二列</td>
<td>第5行第三列</td>
<td>第5行第四列</td>
</tr>
<tr align="center">
<td>第6行第二列</td>
<td>第6行第三列</td>
<td>第6行第四列</td>
</tr>
<tr align="center" >
<td>第7行第二列</td>
<td>第7行第三列</td>
<td>第7行第四列</td>
</tr>
<!--垮列合并，用colspan，垮列也需刪除-->
<tr>
<td colspan="4">總結(jié)：xxxxxxxxxxxxxxxx</td>
</tr>
</table>
</body>
</html>
form表單標(biāo)簽
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>表單標(biāo)簽</title>
</head>
<body>
<!--表單標(biāo)簽 還有method屬性有g(shù)et和post方法，get網(wǎng)頁(yè)會(huì)跟上內(nèi)容，post提交網(wǎng)頁(yè)不會(huì)跟內(nèi)容-->
<form action="registerSuc.html">
<!--input標(biāo)簽為行級(jí)標(biāo)簽文本框?qū)傩? readonly="readonly"表示文本框只讀 disabled=“disabled”表示禁用，用到按鈕表示按鈕無法觸發(fā)-->
用戶名:<input type="text" value="請(qǐng)輸入用戶名"/><br>
<!--maxlength表示最大長(zhǎng)度-->
密碼:<input type="password" maxlength="8"/>
<!--網(wǎng)頁(yè)實(shí)現(xiàn)互斥效果，名字相同就為一組,checkde為設(shè)置為默認(rèn)選擇-->
性別:<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女
<!--input標(biāo)簽提交按鈕 disabled=“disabled”表示禁用，用到按鈕表示按鈕無法觸發(fā)-->
<input type="submit" value="注冊(cè)">
<!--為了達(dá)到自動(dòng)對(duì)其效果可以使用表格-->
<table align="center">
<tr>
<td align="left">用戶名：</td>
<td><input type="text" value="請(qǐng)輸入用戶名"></td>
</tr>
<tr>
<td align="left">密碼：</td>
<td><input type="password" ></td>
</tr>
<tr>
<td align="left">性別:：</td>
<td><input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女</td>
</tr>
<tr>
<td align="left">婚姻狀況:：</td>
<td><input type="radio" name="marriage" checked="checked">已婚<input type="radio" name="sex">未婚</td>
</tr>
<tr>
<td align="left">興趣愛好：</td>
<td >
<!--復(fù)選框-->
<input type="checkbox">吃飯
<input type="checkbox">睡覺
<input type="checkbox">打豆豆
</td>
</tr>
<tr>
<td>上傳圖片</td>
<!--選擇文件屬性，按鈕提交-->
<td><input type="file"/></td>
</tr>
<tr>
<!--圖片標(biāo)簽-->
<td ></td>
<td><input type="image" src="1.jpg"/></td>
</tr>
<tr>
<td><input type="reset" value="清空"/></td>
<td><input type="button" value="按鈕"/></td>
</tr>
<tr>
<td>郵箱：</td>
<td><input type="email"/></td>
</tr>
<tr>
<td>請(qǐng)選擇地址</td>
<td>
<!--下拉框-->
<select>
<option>--請(qǐng)選擇--</option>
<option>四川</option>
<option>云南</option>
<option>貴州</option>
</select>
<select>
<option>--請(qǐng)選擇--</option>
<option>四川</option>
<option>云南</option>
<option>貴州</option>
</select>
</td>
</tr>
<tr>
<td>自我介紹</td>
<td>
<!--文本域 row設(shè)置初始行數(shù) cols控制寬度-->
<textarea rows="10" cols="30">XXXXXXXXXXXXXXXXXXXXXXXXXXXX</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注冊(cè)"></td>
</tr>
</table>
</form>
</body>
</html>
雜項(xiàng)標(biāo)簽
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<!--對(duì)元素進(jìn)行分組-->
<fieldset>
<legend>必填選項(xiàng)</legend>
<table>
<tr>
<td>姓名</td>
<td><input type="text"/></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>選填選項(xiàng)</legend>
<table>
<tr>
<td>電話</td>
<td><input type="text"/></td>
</tr>
</table>
</fieldset>
<!--范圍標(biāo)簽-->
價(jià)格：<span style="color: red;font-size: 24px">99元</span>
<!--lable標(biāo)簽可以用for屬性選擇服務(wù)位置 ,id為唯一的不可重復(fù)的-->
<label for="userName">姓名：</label><input type="text" id="userName" />
<!--滾動(dòng)標(biāo)簽 direction屬性控制方向-->
<marquee>系統(tǒng)公告：xxxxx活動(dòng)開始</marquee>
</body>
</html>
簡(jiǎn)單的注冊(cè)頁(yè)面練習(xí)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>注冊(cè)頁(yè)面</title>
</head>
<body>
<form action="../../Project/registerSuc.html">
<table align="center">
<tr>
<td>賬號(hào)：</td>
<td><input type="text" value="請(qǐng)輸入用戶名"/></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>確認(rèn)密碼：</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>用戶昵稱：</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>頭像：</td>
<td><input type="file" value="選擇頭像"/></td>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>性別：</td>
<td><input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女<input type="radio" name="sex"/>保密</td>
</tr>
<tr>
<td>手機(jī)號(hào)碼：</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>郵箱</td>
<td><input type="email"/></td>
</tr>
<tr>
<td>安全提題：</td>
<td>
<select>
<option>--請(qǐng)選擇提示問題--</option>
<option>你第一次坐飛機(jī)去什么地方</option>
<option>你讀的小學(xué)交什么名字</option>
<option>你最喜歡的歌曲是什么</option>
</select>
</td>
</tr>
<tr>
<td>問題回答</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>會(huì)員協(xié)議</td>
<td><textarea rows="5" cols="20">W3School 提供的內(nèi)容僅用于培訓(xùn)。我們不保證內(nèi)容的正確性。通過使用本站內(nèi)容隨之而來的風(fēng)險(xiǎn)與本站無關(guān)。W3School 簡(jiǎn)體中文版的所有內(nèi)容僅供測(cè)試，對(duì)任何法律問題及風(fēng)險(xiǎn)不承擔(dān)任何責(zé)任。
當(dāng)使用本站時(shí)，代表您已接受了本站的使用條款和隱私條款。版權(quán)所有，保留一切權(quán)利。贊助商：上海贏科投資有限公司。 蒙ICP備06004630號(hào)</textarea></td>
</tr>
<tr>
<td colspan="2" align="center">我已經(jīng)同意此協(xié)議<input type="checkbox"/></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit" value="注冊(cè)"/> <input type="reset" value="重寫填寫"/></td>
</tr>
</table>
</form>
</body>
</html>
