-功能標(biāo)簽有:
left 左對齊
center 居中對齊
right 右對齊
2-使用方法
在head標(biāo)簽包裹內(nèi),title下,style內(nèi)
text-align:left;將這個(gè)功能賦予一個(gè)值,然后,標(biāo)簽使用;
3 示例
3-1讓文字居左,如下圖顯示,文字其實(shí)默認(rèn)是居左的;
代碼如下圖
3-2 讓文字居中,需要重新給個(gè)定義值;如下圖瀏覽器顯示
給p標(biāo)簽一個(gè)居中的值
3-3 讓文字居右,如下圖瀏覽器顯示;
代碼如下圖
4 給對應(yīng)的標(biāo)簽直接賦值;如下圖
代碼如下圖:
4-小結(jié),通過對瀏覽器的拉伸和縮小,發(fā)現(xiàn)其實(shí)內(nèi)容是隨著瀏覽器的寬度改變,可以理解為,這幾個(gè)值的作用并不是單純的居左居右,是對于標(biāo)簽的內(nèi)容進(jìn)行的改變,這個(gè)改變會隨著瀏覽器的寬度做出自適應(yīng)。而且,并不會因?yàn)橘x值給標(biāo)簽還是自定義標(biāo)簽而改變。
(僅為個(gè)人自學(xué)的一點(diǎn)點(diǎn)思考,如有錯漏,歡迎留言指正)
例
將 HTML 網(wǎng)頁中的文本進(jìn)行水平居中處理:
<center>這個(gè)文本居中對齊。</center>
瀏覽器支持
所有主流瀏覽器都支持 <center> 標(biāo)簽。
標(biāo)簽定義及使用說明
HTML5 不支持 <center> 標(biāo)簽。請用 CSS 代替。
在 HTML 4.01 中,<center> 元素 已廢棄。
<center> 對其所包括的文本進(jìn)行水平居中。
提示和注釋
提示:請使用 CSS 樣式來居中文本!在 CSS 教程中您能了解到更多關(guān)于居中文本的細(xì)節(jié)。
HTML 4.01 與 HTML5之間的差異
HTML5 不支持 <center> 標(biāo)簽,HTML 4.01 已廢棄 <center> 標(biāo)簽。
標(biāo)準(zhǔn)屬性
在 HTML 4.01 中,<center> 標(biāo)簽支持如下標(biāo)準(zhǔn)屬性:
屬性 | 值 | 描述 |
---|---|---|
class | classname | 規(guī)定元素的類名 |
dir | rtlltr | 規(guī)定元素中內(nèi)容的文本方向 |
id | id | 規(guī)定元素的唯一 id |
lang | language_code | 規(guī)定元素中內(nèi)容的語言代碼 |
style | style_definition | 規(guī)定元素的行內(nèi)樣式 |
title | text | 規(guī)定元素的額外信息 |
如需完整的描述,請?jiān)L問標(biāo)準(zhǔn)屬性。
事件屬性
在 HTML 4.01 中,<center> 標(biāo)簽支持如下事件屬性:
屬性 | 值 | 描述 |
---|---|---|
onclick | script | 當(dāng)鼠標(biāo)被單擊時(shí)執(zhí)行腳本 |
ondblclick | script | 當(dāng)鼠標(biāo)被雙擊時(shí)執(zhí)行腳本 |
onmousedown | script | 當(dāng)鼠標(biāo)按鈕被按下時(shí)執(zhí)行腳本 |
onmousemove | script | 當(dāng)鼠標(biāo)指針移動時(shí)執(zhí)行腳本 |
onmouseout | script | 當(dāng)鼠標(biāo)指針移出某元素時(shí)執(zhí)行腳本 |
onmouseover | script | 當(dāng)鼠標(biāo)指針懸停于某元素之上時(shí)執(zhí)行腳本 |
onmouseup | script | 當(dāng)鼠標(biāo)按鈕被松開時(shí)執(zhí)行腳本 |
onkeydown | script | 當(dāng)鍵盤被按下時(shí)執(zhí)行腳本 |
onkeypress | script | 當(dāng)鍵盤被按下后又松開時(shí)執(zhí)行腳本 |
onkeyup | script | 當(dāng)鍵盤被松開時(shí)執(zhí)行腳本 |
如需完整的描述,請?jiān)L問事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
續(xù)一周沒怎么更新了,今天我們繼續(xù)HTML的學(xué)習(xí),表格標(biāo)簽。表格是實(shí)際開發(fā)中常用的一種標(biāo)簽類型,會說到表格標(biāo)簽的主要作用和基本語法。
主要作用: 表格主要用于顯示、展示數(shù)據(jù),因?yàn)樗梢宰寯?shù)據(jù)展示的非常規(guī)整,可讀性非常好,特別是后臺展示數(shù)據(jù)的時(shí)候,能夠熟練運(yùn)用表格非常重要。一個(gè)清爽簡約的表格可以把復(fù)雜的數(shù)據(jù)表現(xiàn)的很簡單。表格不是用來布局頁面的,而是用來展示數(shù)據(jù)的。
表格的基本語法: <table><tr><td></td></tr></table>
<table></table>用來定義表格標(biāo)簽
<tr></tr>用于定義表格中的行,嵌套在<table>標(biāo)簽中使用
<td></td>用于定義表格中的單元格,嵌套在<tr>標(biāo)簽中使用,字母td指表格數(shù)據(jù)(table data),即數(shù)據(jù)單元格的內(nèi)容。
我們來展示一個(gè)例子,比如 數(shù)據(jù)庫中有三個(gè)字段,分別為 姓名 性別和年齡,如果想用前端將這三個(gè)字段的數(shù)據(jù)展示出來,應(yīng)該怎么操作呢?
先看效果:
然后我們看下代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210829---</title>
</head>
<body>
<table>
<tr> <td>姓名</td> <td>性別</td> <td>年齡</td> </tr>
</table>
</body>
</html>
這次開始使用vs code來編輯代碼了,感覺比sublime line高級一些,但是相對的也麻煩點(diǎn)。可以看到,在前端頁面展示了 姓名、性別和年齡。然后我們添加一行數(shù)據(jù),看效果:
民族英雄黃飛鴻如果還活著,應(yīng)該也是一位非常高壽的宗師了。多加幾個(gè)數(shù)據(jù)
讓我們看看代碼有什么不同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210829---</title>
</head>
<body>
<table>
<tr> <td>姓名</td> <td>性別</td> <td>年齡</td> </tr>
<tr> <td>黃飛鴻</td> <td>男</td> <td>188</td> </tr>
<!--再多創(chuàng)建幾個(gè)數(shù)據(jù)-->>
<tr><td>鬼腳七</td> <td>男</td> <td>186</td> </tr>
<tr><td>梁寬</td> <td>男</td> <td>33</td> </tr>
</table>
</body>
</html>
可以看到,就是將之前的數(shù)據(jù)進(jìn)行了復(fù)制而已。
接著我們說下表頭單元格標(biāo)簽,一般表頭單元格位于表頭的第一行或第一列,表頭單元格里面的文本內(nèi)容,加粗居中表示。
<th>標(biāo)簽表示HTML表格的表頭部分,table head的縮寫
我們先來看下效果:
再看下對應(yīng)的代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210829---</title>
</head>
<body>
<table>
<!--HTML表格的表頭標(biāo)簽,內(nèi)容加粗居中展示-->>
<tr> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr>
<tr> <td>黃飛鴻</td> <td>男</td> <td>188</td> </tr>
<!--再多創(chuàng)建幾個(gè)數(shù)據(jù)-->>
<tr><td>鬼腳七</td> <td>男</td> <td>186</td> </tr>
<tr><td>梁寬</td> <td>男</td> <td>33</td> </tr>
</table>
</body>
</html>
就是將表格表頭那一行的<td>都換成了<th>,可以看到表頭每個(gè)字段都已經(jīng)居中并且加粗了。
最后我們說下表格的屬性,其實(shí)表格標(biāo)簽屬性這部分用的不多,一般都是用css樣式來設(shè)置。例如表格的邊框、大小等。我們需要關(guān)注的表格屬性目的,有2點(diǎn):
align 屬性值: left right center 對應(yīng)表格相對周圍元素的對齊方式
border 屬性值 1或"" (空) 規(guī)定表格單元是否有邊框,默認(rèn)為空,表示沒有邊框
cellpadding 像素值 規(guī)定單元邊沿與其內(nèi)容之間的空白,默認(rèn)1像素
cellspacing 像素值 規(guī)定單元格之間的空白,默認(rèn)1像素
width 像素值或百分比 規(guī)定表格的寬度
我們來看下效果:
來看下代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210829---</title>
</head>
<body>
<table align="center" border=1 cellpadding=1 cellspacing=1 width=500>
<!--HTML表格的表頭標(biāo)簽,內(nèi)容加粗居中展示-->>
<tr> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr>
<tr> <td>黃飛鴻</td> <td>男</td> <td>188</td> </tr>
<!--再多創(chuàng)建幾個(gè)數(shù)據(jù)-->>
<tr><td>鬼腳七</td> <td>男</td> <td>186</td> </tr>
<tr><td>梁寬</td> <td>男</td> <td>33</td> </tr>
</table>
</body>
</html>
記住,屬性都是在table處添加和修改的,因?yàn)槲覀兪菍φ麄€(gè)table的設(shè)置值。
好的,今天就先到這里了,大家周末愉快
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。