tft每日頭條

 > 圖文

 > html表格标簽及其屬性

html表格标簽及其屬性

圖文 更新时间:2024-12-14 19:07:48

今天為大家帶來了HTML中的表格與列表、塊及類與ID的基礎知識,首先為大家介紹的是HTML中的表格與列表。

一、HTML中的表格與列表:

相信大家都知道在office、Excel等辦公軟件中如何制作表格,那大家知道如何在網頁上制作表格呢?同時網頁上面的注冊和登陸表又是怎麼制作出來的呢?今天将會為大家詳細講解。

1、表格:

① 了解<table>标簽

在網頁上的表格制作是用<table>标簽來定義的。

② table中的<tr>和<td>标簽

l 每個表格有若幹行,即用<tr>标簽來定義。

l 每行被分割為若幹單元格,即用<td>标簽來定義。

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)1

示例圖

運行結果:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)2

③ 在<table>元素中添加border屬性就可以顯示邊框,示例:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)3

運行結果:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)4

④ 表單的表格用<th>标簽表示,示例:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)5

運行結果:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)6

2、列表

列表分為無序列表、有序列表和定義列表

① 無序列表

l 無序列表是一個項目的列表,此列表項目使用粗體圓點進行标記。

l 無序列表始于<ul>标簽,每個列表始于<li>,示例:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)7

運行結果:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)8

l 在<ul>标簽中使用type屬性可以改變列表前面的符号,示例:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)9

運行結果:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)10

② 有序列表

l 與無序列表不同的是,有序列表使用的是<ol>标簽,示例:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)11

運行結果:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)12

在<ol>标簽中添加type屬性,可以改變列表前面的符号,示例:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)13

運行結果:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)14

③ 定義列表

l 定義列表就是自定義列表,是項目及其注釋的組合。

l 自定義列表以<dl>标簽開始,每個自定義列表項以<dt>開始,每個自定義列表項的定義以<dd>開始,示例:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)15

運行結果:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)16

二、HTML中的塊:

1、大多數HTML元素被定義為塊級元素或内聯元素

① 塊級元素在浏覽器顯示時,通常以新行來開始(和結束),例如:<h1>、<p>、<ul>、<table>等。

② 内聯元素在顯示時通常不會以新行開始,例如:<b>、<td>、<a>、<img>等。

2、HTML中的<div>元素

HTML<div>元素是塊級元素,是可以組合其他HTML元素的容器,簡單來說<div>元素一般被用在HTML布局上面,示例:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)17

運行結果:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)18

3、HTML中的<span>元素

HTML<span>元素是内聯元素可用作文本的容器,當與css一同使用時,<span>元素可用于為部分文本設置樣式屬性,示例:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)19

運行結果:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)20

三、HTML中的CLASS和ID:

在上面的示例中我們有看到id标簽,在學習過程中很多人搞不懂class類和id标簽的區别,現在開始教大家如何區分class類和id标簽。

CLASS:

1、Class就我們口中所說的類

2、在css中引用時以“.”開頭,并且可以被多個元素調用,例如:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)21

3、在使用中,可以先設置出一個樣式,然後被多個元素引用。

ID:

1、id是一種标簽

2、在css中引用時以“#”開頭,隻能定義一個元素,例如:

html表格标簽及其屬性(HTML的表格與列表塊及類與ID)22

3、在使用時,隻能先确定一個元素,然後才能設置其樣式,無法被其它元素引用,是唯一的标簽。

希望大家能夠從這篇文章學習到HTML的部分知識~

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved