一." />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁(yè) > 營(yíng)銷(xiāo)資訊 > 網(wǎng)站運(yùn)營(yíng) > HTML入門(mén)速成

HTML入門(mén)速成

時(shí)間:2023-09-28 00:48:02 | 來(lái)源:網(wǎng)站運(yùn)營(yíng)

時(shí)間:2023-09-28 00:48:02 來(lái)源:網(wǎng)站運(yùn)營(yíng)

HTML入門(mén)速成:工作之中,經(jīng)常需要自己寫(xiě)一些簡(jiǎn)單的網(wǎng)頁(yè),那么,就需要有一定的前端代碼能力。HTML,CSS,JavaScript等皆是最常用的前端代碼,本小節(jié)即學(xué)習(xí)筆記,幫助各位初學(xué)者快速找到自己想要的網(wǎng)頁(yè)制作所需要的HTML代碼。


一. 最常見(jiàn)的網(wǎng)頁(yè)結(jié)構(gòu)

<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>開(kāi)始HTML</title> </head> <body> <h1>你今天碼代碼了嗎?</h1> </body></html>以上代碼保存為.html格式,然后用瀏覽器打開(kāi)即為最簡(jiǎn)單的網(wǎng)頁(yè)??梢栽囈辉噡




二. HTML元素




元素是HTML的最基本部件,由成對(duì)尖括號(hào)<>及括號(hào)間的內(nèi)容組成。例如:<h1>你今天碼代碼了嗎?</h1>。

2.1 基本元素(文字粗細(xì),斜體,上/下標(biāo),鏈接,加載圖片,刪除線,下劃線

<!DOCTYPE html><html><head><meta charset='utf-8'><title>教程</title></head><body> <h1>我的第一個(gè)標(biāo)題</h1> <p>我的第一個(gè)段落</p> <a href="http://www.runoob.com">這是我的第一個(gè)鏈接</a> <br /> <img src="/images/logo.png" width="258" height="28" /> <br /> <b>加粗文本</b> <br /> <i>斜體文本</i> <br /> <p>這是<sub>下標(biāo)</sub></p> <p>這是<sup>上標(biāo)</sup></p> <p>My favorite color is <del>blue</del> <ins>red</ins>!</p> <br /> <br /> <br /> <br /> <br /> <br /></body></html>上述元素包括文字粗細(xì),斜體,上/下標(biāo),鏈接,加載圖片,刪除線,下劃線等。以上代碼運(yùn)行后,如圖:

2.2 表格

如何生成表格?

會(huì)用到以下標(biāo)簽<table></table>,<tr>行標(biāo)簽設(shè)置</tr>,<tr>列標(biāo)簽設(shè)置</tr>,<th>表頭標(biāo)簽設(shè)置</th>

<!DOCTYPE html><html><head><meta charset='utf-8'><title>教程</title></head><!--給表格加樣式---><style type="text/css">th {background-color:lightskyblue;color: #255e95}</style><body><table border="1" cellspacing="0" ><caption>工資單</caption><tr> <th>年份</th>> <th>季度</th>> <th>姓名</th>> <th>工資</th>> <th>獎(jiǎng)金</th>> <th>個(gè)稅</th>> <th>扣除個(gè)稅工資</th>></tr><tr> <td rowspan="4">2019</td> <td>1</td> <td rowspan="4">王建民</td> <td>28900</td> <td>3458</td> <td>3988</td> <td>21454</td></tr><tr> <td>2</td> <td>27366</td> <td>3458</td> <td>3988</td> <td>21454</td> </tr><tr> <td>3</td> <td>27366</td> <td>3458</td> <td>3988</td> <td>21454</td> </tr><tr> <td>4</td> <td>27366</td> <td>3458</td> <td>3988</td> <td>21454</td> </tr></table></body></html>2.3 列表(有序列表/無(wú)序列表/嵌套列表)

2.3.1 有序列表

<!DOCTYPE html><html><head><meta charset='utf-8'><title>教程</title></head><body><ol type="A"> <li>蘋(píng)果</li> <li>香蕉</li> <li>雪梨</li> <li>西瓜</li></ol></body></html>
有序列表-水果
2.3.2 無(wú)序列表

<!DOCTYPE html><html><head><meta charset='utf-8'><title>教程</title></head><body><ul type="A"> <li>蘋(píng)果</li> <li>香蕉</li> <li>雪梨</li> <li>西瓜</li></ul></body></html>
無(wú)序列表-水果
2.3.3 嵌套列表

<!DOCTYPE html><html><head><meta charset='utf-8'><title>教程</title></head><body><ul type="A"> <li>蘋(píng)果</li> <ol> <li>大蘋(píng)果</li> <li>小蘋(píng)果</li> </ol> <li>香蕉</li> <li>雪梨</li> <li>西瓜</li></ul></body></html>2.4 <style>和<script>

<!--給表格加樣式---><style type="text/css">th {background-color:lightskyblue;color: #255e95}</style>以上是給表格增加背景色的代碼,一般這段加在HTML的<head></head>之間

加入css樣式有三種形式:內(nèi)聯(lián)樣式,內(nèi)部樣式表,外部樣式表

內(nèi)聯(lián)樣式:<h1 style="font-family:arial;"> 文字文字文字</h1>

內(nèi)部樣式表:<style type="text/css"> body {background-color:yellow;} </style>

外部樣式表:<link rel="stylesheet" type="text/css" href="mystyle.css">




以下是xmind可以幫助大家記憶:




覺(jué)得有用的小伙伴記得收藏點(diǎn)贊~

關(guān)鍵詞:速成,入門(mén)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉