HTML網頁制作常用標簽及說明-前端開發入門

篇文章我們介紹了怎么創建一個最基本的網頁，這篇我們介紹一下經常被使用的標簽及用途。

顯示在瀏覽器中的內容都要添加在基本模板中的body標簽的中間，這點一定要記住！！

下面的body標簽中各個標簽，我做了解釋說明，大概了解各個標簽長什么樣子，能記住就更好了。

下面的HTML代碼可以直接復制到你的網頁中（創建HTML文件的方法上篇文章有介紹）

<!DOCTYPE html>

<head>

<title>這里是網頁的標題，你看到在哪里顯示的了嗎？——橙先生</title>

</head>

<body>

<div>div標簽可以理解為是個空盒子，什么都能裝下</div>

這是一張圖片，注意這里的img標簽形式，這是個單標簽

<a href="需要跳轉到的網址或是文件，如" target="_blank">這個是文字的鏈接，也可以在其他內容上添加（比如圖片）</a>

<p>在這里填入文字</p>

<span>在這里添加你想要的內容</span><span>!!!!!!這里是另外一段內容</span>

<br>

<ul>

<li>這里是無序列表1</li>

<li>這里是無序列表2</li>

<li>這里是無序列表3</li>

</ul>

<ol>

<li>這里是有序列表1</li>

<li>這里是有序列表2</li>

</ol>

<table>

<tr>

<td>表格中第一行的第1列</td>

<td>表格中第一行的第2列</td>

</tr>

<tr>

<td>表格中第二行的第1列</td>

<td>表格中第二行的第2列</td>

<td>表格中第二行的第3列</td>

</tr>

</table>

</body>

</html>

上面的內容已經大致了解了吧？下一篇我們將介紹各種常用到的樣式，讓各個標簽更加的美觀。記得關注一下哦！

格語法:

注意：顏色使用格式有三種：rgb(x,x,x) #xxxxxx colorname

<table width=""></table>指定表格的寬度大小(使用數字pixel或%)

<table border=""></table>設定表格邊框大小(使用數字pixel)

<table align=""></table>表格位置,置左,為默認值

align屬性:left(左對齊表格，默認值)、right(右對齊表格)、center(居中對齊表格)

<table bgcolor=""></table>設定表格的背景顏色

<table cellpadding=""></table>指定內容與網格線之間的間距(使用數字pixel或%)

<table cellspacing=""></table>指定網格線與網格線之間的距離(使用數字pixel或%)

通常表格, 這兩個參數都設置為 0 。

<table rules="rows"></table>規定內側邊框的哪個部分是可見的。(兼容性差)

rules屬性:none 沒有線條。

groups 位于行組和列組之間的線條。

rows 位于行之間的線條。

cols 位于列之間的線條。

all 位于行和列之間的線條。

定義了表格內容的摘要：

表格結構：

在使用表格進行布局時, 可以將表格劃分為頭部、主體和頁腳, 具體如下所示：

<thead></thead>：用于定義表格的頭部, 必須位于<table></table>標記中, 一般包含網頁的logo和導航等頭部信息。

<tfoot></tfoot>：用于定義表格的頁腳, 位于<table></table>標記中<thead></thead>標記之后, 一般包含網頁底部的企業信息等。

<tbody></tbody>：用于定義表格的主體, 位于<table></table>標記中<tfoot></tfoot>標記之后, 一般包含網頁中除頭部和底部之外的其他內容。

注意：在沒有<tbody></tbody>比較的情況下, 瀏覽器會自動添加<tbody></tbody>標記。

<table bordercolor=""></table>設定表格邊框的顏色

<table cols=""></table>指定表格的欄數

<table height=""></table>指定表格的高度大小(使用數字)

<table background=""></table>背景圖片的URL=就是路徑網址(默認是repeat：水平和垂直方向重復)

<table bordercolordark=""></table>設定表格暗邊框的顏色

<table bordercolorlight=""></table>設定表格亮邊框的顏色

<tr align=""></tr> 定義表格行的內容對齊方式。

align屬性值:right、left、center、justify、char

<tr bgcolor=""></tr> 規定表格行的背景顏色。

<tr valign=""></tr> 規定表格行中內容的垂直對齊方式。

valign屬性值right、left、center、justify、char

<td colspan=""></td>指定儲存格合并欄的欄數(使用數字)

<td rowspan=""></td>指定儲存格合并列的列數(使用數字)

<td align=""></td> 調整表格字段之左右對齊

<td bgcolor=""></td> 設定表格字段之背景顏色

<td colspan="" rowspan=""></td> 表格字段的合并

<td valign=""></td> 調整表格字段之上下對齊

<td width=""></td> 調整表格字段寬度

<td nowrap="nowrap"></td> 規定表格單元格中的內容不換行(注意只有一個值:nowrap)

<caption></caption>為表格加上標題

<caption align="">設定表格標題位置

align屬性:left, center(默認值), right

<th></th> 定義表頭(粗體居中)

細表格邊框

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="158" height="68">
<tr>
<td width="158" height="68"></td>
</tr>
</table>

表格創建后瀏覽器會自動添加<tbody>標簽

么現在咱們

就進入JavaE部分了~

HTML、CSS和JS又被稱為“前端三劍客”~雖然Java主要是做后臺服務端開發的，但是畢竟是要和前端合作,的多少要了解一下~~總之技多不壓身~多學一點東西總歸是好的~嗯~咱們開始今天的內容吧~

HTML

什么是HTML？

HTML 全稱是 Hyper Text Markup Language:超文本標記語言。超文本意味著功能比普通文本更加強大。標記語言則是：使用一組標簽對內容進行描述的一門語言(注意：它不是編程語言)

HTML的語法和規范

1）HTML文件都是以.html或者.htm結尾的。建議使用.html結尾。

2）HTML文件分為頭部分(<head></head>)和體部分(<body></body>)

3）HTML標簽一般是由開始標簽和結束標簽組成。

（大部分是成對存在的，有個別標簽是單著的~）

4）HTML標簽不區分大小寫，建議使用小寫。

HTML相關標簽學習

接下來就是重頭戲了，來一起看看HTML標簽都有什么~

標題標簽<hn > </hn>

n的取值從1到6逐漸變小，獨占一行加粗加黑顯示，與其他行有一定的行間距

水平線標簽 <hr />

里面有一些屬性象顏色（color）、大小（size）等等就不詳細介紹了，伙伴們自己去摸索一下哈~

段落標簽<p></p>

字體標簽<font></font>

換行標簽<br/>

其中有些屬性：

size:指定內容的大小

color：指定內容的顏色

face：指定內容的字體

加粗：<b></b>

斜體：<i></i>

下劃線：<u></u>

圖片標簽

<img />

src:指的是圖片顯示的路徑(位置)

width:指定圖片的寬度，取值可以是像素值，也可以是百分比

height：指定圖片的高度，取值可以是像素值，也可以是百分比

alt：當圖片無法正常顯示的時候給出的提示信息(該屬性的顯示效果與瀏覽器以及瀏覽器版本有關)

路徑分為兩種：

絕對路徑：

從盤符開始的到圖片位置的完整描述：

類似~C:\Program Files\Img.jpg

相對路徑：

①同一級：直接寫文件名稱或者./文件名稱

②上一級：../文件名稱

③下一級：寫上目錄名稱/文件名稱

列表標簽

有序列表：

type：可以選擇數字、字母及阿拉伯數字作為前面的序號，

start： 從哪里開始計數

reversed： 表示顛倒順序

無序列表：

type：可以選擇前面的樣式實心圓、空心圓和方塊

超鏈接標簽

href:指定跳轉的位置

target：指定跳轉頁面顯示的位置(取值：_self 、_blank)

表格標簽

border：邊框的寬度

width：表格的寬

height：表格的高

align：元素的位置居中、上、下、左、右

bgcolor：背景色

cellpadding：邊框與邊框間的距離

cellspacing：表格內容到邊框的距離

跨行跨列操作

跨行：rowspan

跨列：colspan

今天先說這么多了

剩下的小伙伴們自己摸索吧~

拜拜~

我是萌新娜娜

立志做一個不翻車的老司機

學習Java的路上請多多指教

大家如果想要更深入了解java相關知識，私信我回復：【Java】即可知道你們想要知道的java相關問題

在線咨詢

上一篇：前端開發：JavaScript 模板引擎（二）
下一篇：大膽嘗試這些新的CSS屬性，釋放CSS的力量吧（一）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML網頁制作常用標簽及說明-前端開發入門

您的項目需求