html的实战性介绍
生活随笔
收集整理的這篇文章主要介紹了
html的实战性介绍
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Html 簡(jiǎn)介
超文本結(jié)構(gòu)語(yǔ)言
html并非一種編程語(yǔ)言， 而是一種描述超文本文檔的標(biāo)記語(yǔ)言，用html編寫的超文本文檔成為html文檔。
超文本文檔指的是，可以加入圖片、聲音、動(dòng)畫、影視等內(nèi)容，并可以利用超鏈接方便的從一個(gè)文件跳轉(zhuǎn)到網(wǎng)絡(luò)上其他主機(jī)的另一個(gè)文件。
Html標(biāo)簽結(jié)構(gòu)形態(tài)
Html的標(biāo)簽主要有三種形態(tài)，如下所示：
<標(biāo)簽>元素</標(biāo)簽>
是開始標(biāo)簽，中間元素，結(jié)束標(biāo)簽
<標(biāo)簽 屬性名=“屬性值”>元素</標(biāo)簽>
屬性表示標(biāo)簽的信息，其中多個(gè)屬性時(shí)候，無先后之分，而且需要使用空格分隔，注意是空格分隔
<標(biāo)簽 屬性名=“屬性值” />
既是開始標(biāo)簽，也是結(jié)束標(biāo)簽，也成為了單標(biāo)簽，空標(biāo)簽，也可以后跟屬性
Html的文檔結(jié)構(gòu)
- Html主要分文檔頭和文檔體兩個(gè)，文檔頭是對(duì)文檔的必要定義，文檔體才是要顯示的各種文檔信息。
demo：
<html><head>頭部信息，例如標(biāo)題等等。 是文件頭</head><body>正文部分。 是文件體</body> </html>其中 <html>在最外層，表示中間內(nèi)容是HTML文檔，一些HTML文檔可忽略<html>標(biāo)簽
文件頭可以根據(jù)需要就行忽略，文件體常常不會(huì)被忽略。
Html的常用標(biāo)簽
<html>標(biāo)簽
- <html>或者是</html>任意刪除一個(gè)或者是全部是允許的，但是在<html>前或者是在</html>后面任意加入一些字符是錯(cuò)誤的。
<body>標(biāo)簽
<hn>標(biāo)簽
- <hn> 標(biāo)題內(nèi)容 </hn>, 其中 n 為標(biāo)題的等級(jí)，n 在 1~6之間。
- 可以具有 align 的屬性，用法和 p 的align 一樣
結(jié)果展示:
<p>標(biāo)簽和<br>標(biāo)簽
- <br>標(biāo)簽的作用是換行，是一個(gè)空標(biāo)簽，即為<br></br>， 等價(jià)于<br />，相當(dāng)于我們平時(shí)的 ‘\n’
- <p>是為了使得文檔排列的整齊，<p>意味著文檔開始，</p>表示文檔的結(jié)束。
- <p>便簽有一個(gè)屬性 align，對(duì)齊一般有ceter, left, right三種
- 有些是時(shí)候align在部分瀏覽器上不兼容
顯示效果展示：
-
<p>和<br>標(biāo)簽的區(qū)別
- <br>會(huì)強(qiáng)迫調(diào)至下一行
- <p>會(huì)產(chǎn)生一行空白
- <br>會(huì)強(qiáng)制換行，一行， 多個(gè)<br>效果會(huì)累加，但是<p>會(huì)換行，而且多跳一行，但是多個(gè)<p>效果同一個(gè)<p>是相同的。
運(yùn)行結(jié)果：
- 主要是設(shè)置文檔的字體，非常好用，他的屬性如下所示
- size 屬性， 有效值為 1~7，其中default=“3”
- color屬性，可以使"#RRGGBB", 如#1e00ff–>天藍(lán)色， 也可以使用顏色的單詞, "red"等等
- face屬性，用來設(shè)置問題的字體，如 黑體， 宋體，華文彩云
運(yùn)行結(jié)果
<a>標(biāo)簽(超文本鏈接) 打開有問題
-
<a>表示連接開始，</a>表示鏈接的結(jié)束，他有兩個(gè)屬性href和target
-
href 定義了這個(gè)鏈接所指的地方， 如 href=“www.baidu.com”
-
target屬性指明了在何處打開鏈接文檔，有兩個(gè)屬性值，_blank, _self 一個(gè)表示新建標(biāo)簽頁(yè)， 一個(gè)表示在當(dāng)前頁(yè)。
運(yùn)行結(jié)果
Html的表格
- 表格就是由行和列組成的柵格，每個(gè)單元格可以用來放置 文本或者是圖片
- 表格由 <table>標(biāo)簽開始，</table>標(biāo)簽結(jié)束，內(nèi)容由<tr>, <th>, <td>標(biāo)簽定義，分別表格的行，表格的頭，以及單元格的具體數(shù)據(jù)
- 其中，<td> 與 <th>標(biāo)簽類似，但是<th>標(biāo)簽定義單元格的內(nèi)容會(huì)被 居中加粗顯示?
- tr, th 可以設(shè)計(jì) width， height
設(shè)置表格的大小、邊框
- 設(shè)置表格的大小
- 一般情況下表格的寬度和長(zhǎng)度會(huì)根據(jù)各行各列的總和進(jìn)行自動(dòng)調(diào)整，倘若固定時(shí)格式如下：
- <table width=“w” height=“h”>，需要補(bǔ)上table 的屬性
- 比如<table width=“300” height=“100”> 這里的300,100都指的是像素
- 比如<table width=“50%” height=“10%”>
- 設(shè)置表格的邊框
- 表格邊框可以通過 border屬性來調(diào)整 0 ~ 多少，自己 可以試試。
- 表格也可以設(shè)置居中，不是內(nèi)容居中，而是總體表格的居中
- align屬性
跨行、列表格的設(shè)計(jì)（行列同時(shí)未成功）
設(shè)置表格的大小，邊框用到的是 table上面的屬性 width height border
但是要設(shè)計(jì)到跨行、跨列的表格需要使用的是單元格的屬性 <th> 或者是 <td>的屬性 colspan 或者 rowspan，屬性值域就是要合并的個(gè)數(shù)。
表格設(shè)計(jì)展示
<html><head><title>測(cè)試table的使用方法</title></head><body><font size=5 color=#1e00ff> <p align="left"> 表格一 col 合并 </p></font> <table width="300" height="150" border="3"><tr> <th rowspan="4"> 表格測(cè)試1</th><th>姓名</th><th>年齡</th></tr><tr> <td>xyg</td><td>21</td></tr><tr> <td>xm</td> <td>20</td></tr><tr> <td>xy</td> <td>50</td></tr></table><font size=6 color=#b22222> <p align="left"> 表格二 row 合并</p></font> <table width="50%" height="25%" border="2"><tr> <th colspan="2"> 表格測(cè)試2</th> </tr><tr> <th>姓名</th><th>年齡</th> </tr><tr> <td>xyg</td><td>21</td> </tr><tr> <td>xm</td> <td>20</td> </tr><tr> <td>xy</td> <td>50</td> </tr></table><font size=6 color=#b22222> <p align="left"> 表格三 col row 合并 </p></font> <table width="50%" height="25%" border="1"><tr> <th colspan="2" rowspan="2"> 表格測(cè)試3</th> </tr><tr> <th>姓名</th><th>年齡</th> </tr><tr> <td>xyg</td> <td>21</td> </tr><tr> <td>xm</td> <td>20</td> </tr><tr> <td>xy</td> <td>50</td> </tr></table></body> </html>結(jié)果展示，可惜行列沒能一塊合并了
Html的表單
- HTML的表單用于收集用戶的輸入，用戶填好信息后通過點(diǎn)擊提交按鈕上傳至服務(wù)器。
| text | 單行文本框 |
| password | 密碼框 |
| radio | 單選按鈕 |
| checkbox | 多選按鈕 |
| textarea | 多行文本框 |
| select | 下拉列表 |
| submit | 提交按鈕 |
| reset | 重置按鈕 |
單行文本框text
- 功能：內(nèi)容本身較短，只有一行，需要用戶輸入
- 屬性有 size 和 value，size屬性用來設(shè)置文本框的顯示長(zhǎng)度，默認(rèn)為20， value 用來設(shè)置文本框初始值
- 如果不希望內(nèi)容被編輯(一直顯示初始值value)，可以使用屬性 readonly = “readonly”
密碼框password
- 輸入的內(nèi)容是看不到的
- 可以有 size value屬性
結(jié)果顯示
單選按鈕radio
- 功能呢就是單項(xiàng)選擇
- 為了實(shí)現(xiàn)單選的效果，同一列要求 name 屬性一致
- 想要默認(rèn)選中需要屬性 checked，可以不加屬性值
- 一定要注意示例中 value = “工人”， 外面又有了個(gè)工人
運(yùn)行結(jié)果
復(fù)選框checkbox
-
仍舊是需要一組復(fù)選框選項(xiàng) name 屬性一致。
-
感覺除了 checkbox 的type和 radio 不同，其余都差不多
運(yùn)行結(jié)果
多行文本框textarea
-
有兩個(gè)常用屬性 rows cols 分別表示文本框的行數(shù)和列數(shù)
-
文本框初始內(nèi)容需要寫在標(biāo)簽體中，而不是value中
-
雖然沒有type，不是上面的 input，也沒有value，但是依舊需要 name
結(jié)果展示
下拉列表select 配合optioin
- 為了實(shí)現(xiàn)下拉列表的多項(xiàng)選擇可以使用multiple屬性
- 支持多項(xiàng)選擇時(shí)候size 需要大于1
- option標(biāo)簽中selected屬性表明默認(rèn)被選中，option常常僅僅用value,selected屬性，表示數(shù)值和被選中
- 列表select常用屬性為size name，用于表示選項(xiàng)的數(shù)量和 服務(wù)器端的name
提交按鈕
- 完成表單提交
重置按鈕
- 將表單元素恢復(fù)至原始狀態(tài)
表單
- 一個(gè)包含表單元素的區(qū)域
- 主要有兩個(gè)屬性method和action，method表示表單的提交方式，分為get和post兩種，默認(rèn)為get提交， action=“deal.jsp"表明表單元素信息是提交給服務(wù)器上面的deal.jsp文件來處理
- 表單元素在<form>和</form>之間
- 一個(gè)頁(yè)面可以有多個(gè)表單，表單之間不可以嵌套重疊
下拉列表、提交按鈕、重置按鈕、表單的綜合演示
<html><head><title>小測(cè)試</title></head><body><form method="post" action="deal.jsp"><select size="1" name="mysite"><option value="136" selected> 網(wǎng)易 </option><option value="souhu"> 搜狐 </option><option value="sina"> 新浪 </option></select><br /><input type="submit" value="提交" name="b1"><br /><input type="reset" value="重置" name="b2"><br /></form></body> </html>結(jié)果顯示
項(xiàng)目開發(fā)1:用戶注冊(cè)頁(yè)面
目標(biāo)開發(fā)效果
html代碼與運(yùn)行結(jié)果
<html><head><title> 用戶注冊(cè)界面test </title></head><body><p align="center"><font face="宋體" size=5> 用戶注冊(cè) </font></p><p align="center"<form><table border="1"><tr><td>姓名</td><td><input type="text" name="username" size="30"></td></tr><tr><td>密碼</td><td><input type="password" name="ps" size="30"></td></tr><tr><td>確認(rèn)密碼</td><td><input type="password" name="ps2" size="30"></td></tr><tr><td>性別</td><td><input type="radio" name="sex" value="男" checked> 男<input type="radio" name="sex" value="女" > 女</td></tr><tr><td>職業(yè)</td><td><select size="1" name="identity"><option value="worker" selected>公司員工</option><option value="student">學(xué)生</option><option value="teacher">教師</option></select></td></tr><tr><td>電話號(hào)碼</td><td><input type="text" name="tel" size="30"></td></tr><tr><td>電子郵箱</td><td><input type="text" name="email" size="30"></td></tr><tr><td>興趣愛好</td><td><input type="checkbox" name="favor" value="Sport"> sport <br /><input type="checkbox" name="favor" value="Reading"> Reading <br /><input type="checkbox" name="favor" value="Travelling"> Travelling <br /><input type="checkbox" name="favor" value="Eating"> Eating <br /></td></tr><tr><td>自我簡(jiǎn)介</td><td><textarea rows="5" cols="30" name="tarea"> </textarea></td></tr><tr><td colspan="2"><input type="submit" name="btn1" value="submit"></td></tr></table></form></p></body> </html>細(xì)節(jié)上還是差一點(diǎn)，下面我們改進(jìn)一下
細(xì)節(jié)修改
- 將表格 table, td, th進(jìn)行align即可
- 同時(shí)hn 標(biāo)題也是可以 align 的
項(xiàng)目開發(fā)2:圖書管理系統(tǒng)靜態(tài)頁(yè)面
作業(yè)
1.定義一個(gè)期末考試成績(jī)的表格，包括，姓名，學(xué)號(hào)，成績(jī)等列。
2.創(chuàng)建一個(gè)登錄表單，輸入用戶名和密碼登錄系統(tǒng)。
作業(yè)一：
<html><head><title>期末考試成績(jī)表格</title></head><body><p align="center"><font size="5" color="#1e00ff"> 作業(yè)一：期末考試成績(jī)表格</font><br /></p><p>定義一個(gè)期末考試成績(jī)的表格,包括姓名，學(xué)號(hào)，成績(jī)等列。<font color="#b22222" size="4">不及格使用紅色標(biāo)記</font></p><p align="center"><table border="2" width="60%" height="30%"><tr><th rowspan="5">18級(jí)計(jì)算機(jī)成績(jī)單</th><th>姓名</th><th>學(xué)號(hào)</th><th>成績(jī)</th><th>班級(jí)</th></tr><tr><td>邢佑廣</td><td>2018113</td><td>100</td><td>class_4</td></tr><tr><td>小妖怪</td><td>2018114</td><td>100</td><td>class_4</td></tr><tr><td>luckylight</td><td>2018115</td><td>100</td><td>class_4</td></tr><tr><td><font color="#b22222" size="4">掛科</font></td><td>2018116</td><td>59</td><td>class_4</td></tr></table></p></body> </html>結(jié)果展示:
作業(yè)二：
<html><head><title>登錄表單</title></head><body><p align="center"><font color="#1e00ff" size="6"> 作業(yè)二：創(chuàng)建一個(gè)登錄表單</font></p><p>創(chuàng)建一個(gè)登錄表單，輸入用戶名和密碼登錄系統(tǒng)。</p><h1>作品如下</h1><br /><form><p align="center"><font size="5" color="#b22222"> 歡迎來到本系統(tǒng) </font> <br /> <br />賬號(hào):<input type="text" name="UserName" size="20" value="請(qǐng)輸入ID"> <br />密碼:<input type="password" name="ps" size="20"> <br \>身份:<input type="radio" name="ident" value="游客" checked> 游客 <input type="radio" name="ident" value="管理"> 管理 <input type="radio" name="ident" value="學(xué)生"> 學(xué)生 <input type="radio" name="ident" value="教師"> 教師 <br /><input type="reset" name="reset1" value="重置"><input type="submit" name="submit1" value="提交"> <br /><a href="www.ysuregister.com" target="_blank">沒有賬號(hào)？點(diǎn)擊此處馬上進(jìn)行注冊(cè)</a></p></form></body> </html>結(jié)果展示
總結(jié)
以上是生活随笔為你收集整理的html的实战性介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据分析常用Python库：数值计算、可
- 下一篇： 无连接网络通信程序UDP