Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
讀本文約需要10分鐘,您可以先關(guān)注我們,避免下次無(wú)法找到。
HTML基礎(chǔ)教程上篇介紹了HTML的基礎(chǔ)知識(shí)及一些常用的標(biāo)簽,本篇文章主要介紹HTML的樣式、表單、Table、框架等內(nèi)容。下面我們就一起來(lái)了解吧!
所有的HTML可以通過(guò)設(shè)置其style屬性來(lái)設(shè)置標(biāo)簽的樣式,下面我們就來(lái)演示幾個(gè)常用的HTML樣式設(shè)置。
1)設(shè)置標(biāo)簽寬度與高度
我們創(chuàng)建一個(gè)div標(biāo)簽,然后設(shè)置其高度與寬度,但由于div標(biāo)簽?zāi)J(rèn)沒有顏色我們看不到效果,所以在設(shè)置其高度與寬度時(shí),同時(shí)為其設(shè)置一個(gè)背景顏色,具體示列如下:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <!-- 給div寬度設(shè)置為一個(gè)長(zhǎng)寬都為400px的正方形塊,同時(shí)背景色代碼塊為#46a6ff -->
9. <div style="width: 400px; height: 400px; background-color: #46a6ff;"></div>
10. </body>
11. </html>
2)設(shè)置字體類型與大小
我們?cè)谏厦鎑iv塊中加入文字,并給加入的文字設(shè)置字體類型與大小,同時(shí)為其加粗,具體示列如下:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <!-- font-family是設(shè)置字體類型;font-size是設(shè)置字體大小;font-weight是給字體加粗 -->
9. <div style="width: 400px; height: 400px;
10. background-color: #46a6ff; font-family: 'Microsoft YaHei'; font-size: 40px; font-weight: bold">
11. 我是div塊
12. </div>
13. </body>
14. </html>
3)設(shè)置字體水平與垂直居中
上面我們給div加了字體樣式但并沒有居中,現(xiàn)在我們來(lái)看看怎么設(shè)置字體居中
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <!-- text-align給文字設(shè)置水平居中;line-height將其值設(shè)為與height一致,文字內(nèi)容就可以垂直居中 -->
9. <div style="width: 400px; height: 400px;
10. background-color: #46a6ff; font-family: 'Microsoft YaHei';
11. font-size: 40px; font-weight: bold;
12. text-align: center; line-height: 400px">
13. 我是div塊
14. </div>
15. </body>
16. </html>
在HTML頁(yè)面開發(fā)時(shí)我們經(jīng)常會(huì)用到表格進(jìn)行數(shù)據(jù)展示,HTML的表格是由標(biāo)簽<table>來(lái)定義的,每個(gè)表格均有若干行(<tr> 標(biāo)簽定義),每行被分割為若干單元格(由<td> 標(biāo)簽定義)。表格中常用的標(biāo)簽與樣式屬性如下:
下面我們創(chuàng)建兩個(gè)表格示列,分別設(shè)置上述屬性具體如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <!-- 表格示列1 -->
9. <table border="1" bordercolor="black" width="450" height="100">
10. <caption>表格示列1</caption>
11. <tr bgcolor="red" > <!-- tr為一行的起始與結(jié)束 -->
12. <th>Column 1</th> <!-- 表格頭 -->
13. <th>Column 2</th>
14. <th>Column 3</th>
15. </tr>
16.
17. <tr bgcolor="cyan"> <!-- 設(shè)置表格背景色 -->
18. <td>Data 1</td> <!-- td單元格 -->
19. <td>Data 2</td>
20. <td>Data 3</td>
21. </tr>
22.
23. <tr bgcolor="yellow">
24. <td colspan="2">New Data 1</td> <!-- 設(shè)置該單元格合并這一行上的兩列 -->
25. <td>New Data 2</td>
26. </tr>
27. </table>
28.
29. <!-- 表格示列2 -->
30. <table border="1" bordercolor="black" width="80%" height="100"> <!-- 設(shè)置單元格寬與高為百分比 -->
31. <caption> 表格示列2</caption>
32. <tr bgcolor="red" >
33. <th>Column 1</th>
34. <th>Column 2</th>
35. <th>Column 3</th>
36. </tr>
37.
38. <tr>
39. <td rowspan="2">Data 1</td> <!-- 設(shè)置該單元格合并這一列上的兩行 -->
40. <td>Data 2</td>
41. <td>Data 3</td>
42. </tr>
43.
44. <tr>
45. <td>Data 2</td>
46. <td>Data 3</td>
47. </tr>
48. </table>
49. </body>
50. </html>
HTML 表單是一個(gè)包含表單元素的區(qū)域,用于搜集不同類型的用戶輸入。HTML表單在我們?nèi)粘g覽網(wǎng)頁(yè)時(shí)很常見,比如各網(wǎng)站的登錄頁(yè)面,就是典型的HTML表單應(yīng)用。HTML表單常用的標(biāo)簽元素有如下幾種:
1)Text input:字符輸入框,一般賬戶與密碼輸入都是用的該標(biāo)簽
2)Text area:文本輸入框,一般需要輸入較多文本內(nèi)容使用
3)Radio button:?jiǎn)芜x框
4)Checkbox:多選框
5)Select box:選擇框
6)File select:文件選擇框
7)Buttons:按鈕
表單元素常用的屬性及值設(shè)置如下表所示:
結(jié)合上表我們創(chuàng)建一個(gè)表單示列,按照上表的屬性值進(jìn)行設(shè)置,具體操作如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <form>
9. <h4>Input輸入框</h4>
10. 用戶名 : <input type="text" name="user_name" size="4" value="成哥" maxlength="10"><br>
11. 密碼 : <input type="password" name="user_pass" ><br>
12. <h4> Radio單選框:(name值設(shè)置時(shí)必須一致)</h4>
13. <input type="radio" name="r_gender"> Male
14. <input type="radio" name="r_gender"> Female
15. <input type="radio" name="r_gender" checked> Infant
16. <h4> Check box多選框 :(name值設(shè)置時(shí)必須不一樣)</h4>
17. <input type="checkbox" name="c_male" checked> Male
18. <input type="checkbox" name="c_female"> Female
19. <input type="checkbox" name="c_infant"> Infant
20. <h4> Select box :選擇框(單選)</h4>
21. <select name="s_box">
22. <option value="s_male">Male</option>
23. <option value="s_female" selected>Female</option>
24. <option value="s_infant">Infant</option>
25. </select>
26. <h4> Select box :擇框(多選)</h4>
27. <!-- 選擇項(xiàng)默認(rèn)展示4個(gè),其它的選擇內(nèi)容需要通過(guò)鼠標(biāo)滾動(dòng) -->
28. <select name="s_box" size="4" multiple>
29. <option value="s_male" selected>Male</option>
30. <option value="s_female" selected>Female</option>
31. <option value="s_infant">Infant 1</option>
32. <option value="s_infant" selected>Infant 2</option>
33. <option value="s_infant">Infant 3</option>
34. <option value="s_infant">Infant 4</option>
35. </select>
36. <h4> Text文本輸入框</h4>
37. <textarea rows="10" cols="80" name="txt_area">文本框
38. HTML基礎(chǔ)教程
39. 表單示列
40. </textarea>
41. </form>
42. </body>
43. </html>
下面我們?cè)賱?chuàng)建一個(gè)button的表單示列,具體如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <!-- 設(shè)置表單提交方式為get, 跳轉(zhuǎn)的url為"http://www.baidu.com" -->
10. <form method="get" action="http://www.baidu.com">
11. <h4> Buttons按鈕表單示列</h4>
12. 用戶名 : <input type="text" name="user_name" size="4" value="成哥" maxlength="16"><br>
13. 密碼 : <input type="password" name="user_pass" ><br>
14. <!-- 點(diǎn)擊在游覽器上方顯示Say Hello -->
15. <input type="button" onclick="alert('Hello')" name="b_alert" value="Say Hello"/><br>
16. <!-- 點(diǎn)擊跳轉(zhuǎn)到百度 -->
17. <input type="submit" name="b_submit" value="百度走起"/>
18. <!-- 點(diǎn)擊重置會(huì)重置表單內(nèi)輸入的內(nèi)容 -->
19. <input type="reset" name="b_reset" value="重置"/><br>
20. </form>
21.
22. </body>
23. </html>
使用HTML框架可以在同一個(gè)瀏覽器窗口中顯示多個(gè)頁(yè)面,iframe的語(yǔ)法格式如下所示
1. <iframe src="URL">
2. <!-- URL指向不同的頁(yè)面 -->
3. </iframe>
我們現(xiàn)在創(chuàng)建一個(gè)iframe框架使用示列具體如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <h4>iframe使用示列一(簡(jiǎn)單的iframe使用)</h4>
10. <!-- 給iframe顯示區(qū)域設(shè)置寬度為800,高度為200,同時(shí)去掉其邊框 -->
11. <iframe src="http://www.baidu.com" width="800" height="200" frameborder="0"></iframe>
12.
13. <br/>
14. <br/>
15.
16. <h4>iframe使用示列二(通過(guò)點(diǎn)擊指定鏈接在iframe中顯示)</h4>
17. <!-- a標(biāo)簽中的target名稱必須與iframe的name一致都為qq -->
18. <a href="http://www.qq.com" target="qq">點(diǎn)擊我在iframe中顯示qq頁(yè)面</a>
19. <iframe name="qq" width="800" height="200" frameborder="0"></iframe>
20. </body>
21. </html>
至此我們《HTML基礎(chǔ)教程》就全部講完了,有任何問(wèn)題都可以在文章后面留言。最后如果喜歡本篇文章不要忘了點(diǎn)贊、關(guān)注與轉(zhuǎn)發(fā)哦!
-END-
@IT管理局專注計(jì)算機(jī)領(lǐng)域技術(shù)、大學(xué)生活、學(xué)習(xí)方法、求職招聘、職業(yè)規(guī)劃、職場(chǎng)感悟等類型的原創(chuàng)內(nèi)容。期待與你相遇,和你一同成長(zhǎng)。
文章推薦:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<ul>
<li></li>
<li></li>
</ul>
霍格沃茲的測(cè)試管理班是專門面向測(cè)試與質(zhì)量管理人員的一門課程,通過(guò)提升從業(yè)人員的團(tuán)隊(duì)管理、項(xiàng)目管理、績(jī)效管理、溝通管理等方面的能力,使測(cè)試管理人員可以更好的帶領(lǐng)團(tuán)隊(duì)、項(xiàng)目以及公司獲得更快的成長(zhǎng)。提供 1v1 私教指導(dǎo),BAT 級(jí)別的測(cè)試管理大咖量身打造職業(yè)規(guī)劃。
長(zhǎng)之家(ChinaZ.com) 9月2日 消息:近日,百度官方搜索資源平臺(tái)對(duì)很多開發(fā)者提出對(duì)百度搜索標(biāo)題設(shè)置還存在部分疑問(wèn)進(jìn)行了解答。
官方從"如何設(shè)置標(biāo)題"、"標(biāo)題設(shè)置的規(guī)范原則"等等指導(dǎo)開發(fā)者進(jìn)一步學(xué)習(xí)如何正確設(shè)置百度搜索標(biāo)題信息。
(1)標(biāo)題是對(duì)網(wǎng)頁(yè)內(nèi)容的準(zhǔn)確且簡(jiǎn)明扼要的描述。
符合規(guī)范的標(biāo)題源碼示例
2、標(biāo)題對(duì)于搜索用戶來(lái)說(shuō),能夠幫助用戶快速洞察網(wǎng)頁(yè)的內(nèi)容以及該網(wǎng)頁(yè)與搜索需求的相關(guān)性。它通常是用來(lái)決定用戶點(diǎn)擊哪個(gè)結(jié)果的主要信息。
所以,使用高質(zhì)量的網(wǎng)頁(yè)標(biāo)題對(duì)網(wǎng)站來(lái)說(shuō)至關(guān)重要。
1 標(biāo)題設(shè)置的原則
(1)網(wǎng)站應(yīng)確保該站點(diǎn)下的每個(gè)頁(yè)面都有指定的標(biāo)題,且同一站點(diǎn)的不同網(wǎng)頁(yè)應(yīng)分別使用不同的標(biāo)題。
(2)源碼中標(biāo)題、落地頁(yè)內(nèi)的實(shí)際標(biāo)題,需與備案時(shí)填寫的網(wǎng)站名稱保持一致。
(3)頁(yè)面標(biāo)題應(yīng)準(zhǔn)確概括頁(yè)面內(nèi)容,避免使用模糊和不相關(guān)的描述。
(4)頁(yè)面標(biāo)題應(yīng)簡(jiǎn)明扼要,避免使用冗長(zhǎng)的標(biāo)題,避免關(guān)鍵詞堆砌。
(5)頁(yè)面標(biāo)題的符號(hào)使用正確,建議參考百度建議的標(biāo)題符號(hào)用法
2 不允許出現(xiàn)的標(biāo)題類型
標(biāo)題存在以下惡劣問(wèn)題時(shí),會(huì)對(duì)這類結(jié)果做相應(yīng)的搜索結(jié)果展現(xiàn)限制。
標(biāo)題內(nèi)容虛假
虛假官網(wǎng)
指非官方網(wǎng)站,但標(biāo)題表述為官網(wǎng)的情況。
無(wú)法滿足用戶需求
如:標(biāo)題中標(biāo)明可下載或在線閱讀小說(shuō)txt,但是頁(yè)面中不提供下載服務(wù)或誘導(dǎo)用戶下載APP;
或在標(biāo)題中說(shuō)明有百度云下載、支持在線觀看,但是頁(yè)面既不能下載,又不能在線觀看。
負(fù)面案例:實(shí)際頁(yè)面無(wú)下載服務(wù)。
標(biāo)題表述部分虛假
如:某網(wǎng)頁(yè)標(biāo)題中標(biāo)明有江蘇一本大學(xué)排名,但頁(yè)面只有大學(xué)名單,而沒有排名相關(guān)的內(nèi)容。
標(biāo)題重復(fù)、堆砌
指網(wǎng)站通過(guò)網(wǎng)頁(yè)標(biāo)題過(guò)度重復(fù)或堆砌等手段,獲取不正當(dāng)流量的情況。
類型1: 標(biāo)題關(guān)鍵詞大量重復(fù)。
類型2: 標(biāo)題大量堆砌語(yǔ)義相近的關(guān)鍵詞標(biāo)簽 。
負(fù)面案例:標(biāo)題關(guān)鍵詞堆砌。
優(yōu)質(zhì)的網(wǎng)頁(yè)標(biāo)題,不僅能明確表達(dá)網(wǎng)頁(yè)的主旨目的,更能給搜索用戶有效的引導(dǎo),吸引目標(biāo)用戶點(diǎn)擊。
對(duì)符合優(yōu)質(zhì)規(guī)范的標(biāo)題,百度將會(huì)給予更多的展現(xiàn)優(yōu)待。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。