HTML+CSS 輕鬆入門之HTML基礎標籤(一)
html 中的註解
#?<!--內容-->
HTML種標籤有很多,大家可以參考手冊,接下來我們講解一些我們常用的標籤
首先我們來講P標籤?段落(p)
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>大家好</p> </body> </html>
然後我們在瀏覽器上運行,輸出:大家好
看以下程式碼:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>大家好</p> <p>大家好!</p> </body> </html>
段落會自己換行,所以輸出:
大家好
大家好
<meta>-----是head 標籤內的一個輔助標籤,通常用來設定編碼,以及優(yōu)化推廣的關鍵字關鍵字等
<br> -------換行
<font>---------給文字格式化
<table>------表格
<span>------行內標籤
##提示與註解:
提示:請使用<span> 來組合行內元素,以便透過樣式來格式化它們。
註解:span 沒有固定的格式表現(xiàn)。當對它套用樣式時,它才會產(chǎn)生視覺上的變化。
<h1>到<h6>-----控製字體大小
<div>----- --把文件分割成獨立的、不同的部分(等學到css ?我們會講解)
<hr>-------被水平線分隔的標題和段落
接下來我們先解釋這些簡單的標籤
如下程式碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>大家好<span>123456</span></p> <p>大家好</p> 111111111111111<br>1111111111111111 <!--換行--> <hr> <!--用來和以上隔開,有一條黑色的直線--> <font size='18' color="red">我們都一樣</font> <!--font設置字體大小,顏色--> <hr> <h1>中國</h1> <h2>中國</h2> <h3>中國</h3> <h4>中國</h4> <h5>中國</h5> <h6>中國</h6> </body> </html>
大家把程式碼拷貝到自己的電腦上,建立文件,後綴為.html ?然後雙擊預覽表格
#大家請看以下程式碼:
##
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table> <tr> <th>美國</th> <th>日本</th> <th>中國</th> </tr> <tr> <td>123</td> <td>456</td> <td>789</td> </tr> <tr> <td>123</td> <td>456</td> <td>789</td> </tr> </table> </body> </html>表格的構成是由行和列? 準確的說不能叫列,只能叫儲存格以上程式碼中的<tr>標籤代表行? ? <td>代表儲存格? 但是我們在預覽中是以表格的形式展示,所以稱為3行3列<th> ?定義表頭單元格,一般用於標題上,例如我們做一個星期的日程表? ?星期一到星期天,這些字需要加粗等以上程式碼運作結果:美國? 日本? 中國123 ? ?456 ? ?789 ? ?123 ? #?456 ?#?這樣的表格我們看的有點不習慣,那我來為表格加上邊框#以上程式碼中。我們在table ?標籤中加入border='1' ? 然後我們?yōu)楸砀窦右粋€寬度和高度?width="300" ?height="200"具體程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1" width="300" height="200"> <tr> <th>美國</th> <th>日本</th> <th>中國</th> </tr> <tr> <td>123</td> <td>456</td> <td>789</td> </tr> <tr> <td>123</td> <td>456</td> <td>789</td> </tr> </table> </body> </html>