HTML中的元素使用方法1-零基礎(chǔ)自學(xué)網(wǎng)頁制作

TML元素

這一節(jié)以及以后幾節(jié)我們將對HTML中<body>標(biāo)簽中的各種元素進(jìn)行一個概述，并對一些基本元素進(jìn)行練習(xí)。

HTML元素：指的是從開始標(biāo)簽到結(jié)束標(biāo)簽的所有代碼。

舉個例子，在《第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作》這一節(jié)中，我們寫了這樣一個頁面"第一個頁面.html"。后面的練習(xí)我們都在這個文件中進(jìn)行。

<!DOCTYPE HTML> 
  <html> 
  <head> 
  </head> 
  <body> 
  <h>第一個網(wǎng)頁</h>
  <p>千里之行始于足下</p> 
  </body>
  </html>

其中"<h>第一個網(wǎng)頁</h>"整個代碼就可以看做是一個html元素，<h></h>叫做標(biāo)題標(biāo)簽，加上"第一個網(wǎng)頁"這段文字共同構(gòu)成一個HTML元素。

HTML元素非常多，因為我們可以在頁面中顯示各種各樣的信息，不同的信息載體對應(yīng)不同的元素。

下面我們就介紹幾個常用的html元素。

HTML常用元素使用練習(xí)1

NO.1:<h></h>與<hr>

<h></h>這個用來添加標(biāo)題的元素大家比較熟悉了，這里要介紹一個新的用法。示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網(wǎng)頁</title>
  </head> 
  <body>
  <h1>第一個網(wǎng)頁</h1>
  <h2>第一個網(wǎng)頁</h2>
  <h3>第一個網(wǎng)頁</h3>
  <h4>第一個網(wǎng)頁</h4>
  <h5>第一個網(wǎng)頁</h5>
  <h6>第一個網(wǎng)頁</h6>
  <p>千里之行始于足下</p>
  </body> 
  </html>

頁面顯示效果如圖：

大家通過觀察可以看出h后面的編號用來控制標(biāo)題字號大小，僅僅是標(biāo)題有這種預(yù)設(shè)，其他元素如果要調(diào)整字號的話我們放在以后CSS里講。

下面看<hr>,示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網(wǎng)頁</title>
  </head> 
  <body>
  <h1>第一個網(wǎng)頁</h1><hr>
  <h2>第一個網(wǎng)頁</h2><hr>
  <h3>第一個網(wǎng)頁</h3><hr>
  <h4>第一個網(wǎng)頁</h4><hr>
  <h5>第一個網(wǎng)頁</h5><hr>
  <h6>第一個網(wǎng)頁</h6><hr>
  <p>千里之行始于足下</p><hr>
  </body> 
  </html>

效果如下：

<hr>標(biāo)簽可以為它前面的元素添加分割線，大家注意的是分割線不是下劃線，添加下劃線的操作我們會在CSS樣式表中詳細(xì)講解。

NO.2:<p></p>與<br>

<p></p>元素是添加段落的。示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網(wǎng)頁</title>
  </head> 
  <body>
  <h1>第一個網(wǎng)頁</h1><hr>
  <p>千里之行始于足下值得注意的是我們沒有必要一一講解HTML中的所有元素以及每個元素的各個屬性，
因為每個元素的使用都是大同小異，我們完全可以通過幾個常用案例對HTML全部元素及屬性的指定形成一
個整體認(rèn)識，以后可以根據(jù)需求通過查詢手冊來自己學(xué)習(xí)其他元素及其屬性的用法。</p><hr>
</body>
</html>

效果如圖所示：

通過觀察發(fā)現(xiàn)，即使我們在代碼中對段落的文字進(jìn)行回車操作，但是出現(xiàn)在頁面中是沒有回車的效果的，文字按照順序長長的排列在顯示器上，非常不利于閱讀，因此我們就要介紹常常和p標(biāo)簽連用的<br>換行標(biāo)簽。

示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head>
  <title>第一個網(wǎng)頁</title>
</head> 
<body>
  <h1>第一個網(wǎng)頁</h1><hr>
<p>千里之行始于足下<br>
  值得注意的是我們沒有必要一一講解HTML中的所有元素以及每個元素的各個屬性，<br>
  因為每個元素的使用都是大同小異，我們完全可以通過幾個常用案例對HTML全部元<br>
  素及屬性的指定形成一個整體認(rèn)識，以后可以根據(jù)需求通過查詢手冊來自己學(xué)習(xí)其他<br>
  元素及其屬性的用法。</p><hr>
</body>
</html>

效果如圖所示：

喜歡的小伙伴請關(guān)注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作

自:Office之家鏈接:http://www.icanzc.com/word/6854.html

一篇文章段落太多，如果想要找到自然段，那怎么給word中一段文檔添加段落編號呢？為了更好地查看文檔，會對文檔內(nèi)容添加行號，本期小編與大家分享一下有關(guān)行號的用法，對行號不了解的朋友可以惡補一下知識哦。 1、行號的添加和刪除方式選中要添加的行號的內(nèi)容，這一步是必須的，要操作先選擇，之后點擊布局——頁面設(shè)置——行號——連續(xù)即可，（其他選項大家可以嘗試）。若不想要行號，以同樣的方式設(shè)置為“無”即可，如下圖所示。

2、行號的格式設(shè)置 1）中間段不設(shè)置行號，對排版要求個性點的朋友可以了解下的若想讓文檔中間某段不設(shè)置行號，可以先選中某段，點擊行號下拉菜單中的“禁止用于當(dāng)前段落”選項，便會看到不一樣的效果。

2）每頁重新設(shè)置編號，這個的意思是每頁的編號都是從1，2，3開始的點擊文檔內(nèi)容，選擇行號下拉菜單中的“每頁重編行號”選項，看看效果。

3、行號選項的設(shè)置

1）每5行編號一次，想更個性的朋友，這是你的菜選中文檔，點擊行號——行號選項——行號，打開相應(yīng)的界面，然后在“行號間距”中輸入5，點擊確定即可，其他選項，大家可以嘗試操作。

2）調(diào)整行號與正文間距，對美極致追求的朋友可以練練手打開行號設(shè)置界面，在“距正文”中輸入想要的間距即可，Word就是這么6，總能想你所想。

注意：如果文檔沒有添加行號，在行號界面中需要勾選“添加行號編號”，這點很重要，一定要記住哦

4、在每段的末尾添加編號如何給每個段落添加相應(yīng)的編號呢？這里推薦大家使用查找和替換功能。首先在空白文檔中先插入一個編號域，點擊插入——文檔——文檔部件——域，選擇“編號”內(nèi)容，之后選擇一個格式，然后將編號復(fù)制，按Ctrl+H打開查找和替換，在查找內(nèi)容文本框中輸入^13，在替換為中輸入^c ^p，點擊全部替換即可。

PS：若不想添加空行，在替換時，后面就不用添加段落標(biāo)記以上便是為大家介紹的行號的添加和刪除方式，行號的格式設(shè)置，行號選項的設(shè)置，如何在每段的末尾添加編號，對此感興趣的各位同學(xué)，可以趁機學(xué)習(xí)一下哦

天的主要分享的是一些最基本、最常用的標(biāo)簽：<img/>、<a></a>、<table></table>、<ul></ul>，以及文件路徑。

首先，先來了解一下<img/>標(biāo)簽，它表示圖片標(biāo)簽，在頁面中會出現(xiàn)很多的圖像，主要的編碼方式就是通過<img/>來實現(xiàn)的；那是怎么實現(xiàn)的呢？它通過一些自己的屬性來規(guī)定了這個圖像的樣式，要實現(xiàn)一個圖像最基本的屬性有 src屬性、width屬性、height屬性、alt屬性，詳解一下他們的屬性分別是做什么的，是實現(xiàn)圖像的哪一個部分的？

src屬性：就是你要放置圖像，該圖像的文件路徑，你的文件是放在C盤里面的文件還是D盤里面的文件，那么src就是這個圖像的路徑；

width屬性：就是你的圖像的寬度，同理height就是圖像的高度；

alt屬性：是指一種提示，比如你的鼠標(biāo)在移動到你的圖片的時候或有文字提示、或者因為某種原因圖片不能正常顯示的時候，會有直接文字提示；

完整的語法：<img src="圖像路徑" width="100px" height="100px" alt="提示"/>

接下來，我們分享<a></a>鏈接標(biāo)簽，它是一個能夠?qū)崿F(xiàn)跳轉(zhuǎn)的標(biāo)簽，在小編還是沒有完全總結(jié)<a>標(biāo)簽的情況下，可以先簡單的可以理解為從一個頁面跳轉(zhuǎn)到另外一個頁面。要實現(xiàn)一個跳轉(zhuǎn)也是需要它自有的一些屬性來完成，href屬性，target屬性，name屬性。解一下他們的屬性分別是做什么的，是實現(xiàn)跳轉(zhuǎn)的哪一個部分的？

href屬性：就是你要跳轉(zhuǎn)到哪個頁面，就是這個頁面的路徑；

target屬性：就是你要跳轉(zhuǎn)的網(wǎng)頁的打開方式，它有自己的備選答案，其中_blank代表在新的標(biāo)簽中打開，_self代表在當(dāng)前頁面中打開（這個是缺省值）

name屬性：就是定義錨點名稱（只有當(dāng)<a>標(biāo)簽當(dāng)做錨點使用時需要該屬性）

完整的語法：<a href="網(wǎng)頁路徑" target=“_blank”></.a>

總結(jié)一下<a>標(biāo)簽常用的表現(xiàn)形式（作用）

1、網(wǎng)頁面間跳轉(zhuǎn)

2、頁面上的文檔(資源)下載

<a href="資源路徑"></a> 其中：資源路徑是指非html,htm,txt的資源，一般常見有為壓縮包形式 <a href="xxx.rar">下載</a>

3、返回頁面頂部的空連接

<a href="#">返回頂部</a> 跳轉(zhuǎn)到本頁(一般在開發(fā)、測試階段使用)

4、電子郵件鏈接

5、鏈接到Javascript

<a href="javascript：js代碼段落"></a> 就是在點擊<a>標(biāo)簽的時候，執(zhí)行一段js代碼

錨點：就是在頁面的任意位置處定義一個標(biāo)識，隨時隨地的都可以跳轉(zhuǎn)到這個標(biāo)識上；如果你想要在同一個頁面中，快速的到達(dá)某個點，這時候用錨點的方式是非常好的。

錨點的使用方式（2步驟）：

1、定義錨點 <a name="anchorName"></a>

2、鏈接到錨點 <a href="#anchorName">文本或圖像</a> 或者 <a href="url#anchorName"></a>

第三、關(guān)于<table>表格標(biāo)簽

表格：有行有列，按照一定的格式(從左到右，從上到下)排列里面的內(nèi)容；它能組織結(jié)構(gòu)化的信息，按照一定的格式來進(jìn)行數(shù)據(jù)顯示

要想創(chuàng)建表格：

1.定義表格:<table></table>

2. 定義行:<tr></tr>

3.創(chuàng)建列(單元格):<td></td>

注意:原始的表格中，每行的列數(shù)全部都是統(tǒng)一的。

在一些情況下，表格會有：表頭，表主體，表尾

表頭:<thead></thead>

表主體:<tbody></tbody>

表尾:<tfoot></tfoot>

實戰(zhàn)：創(chuàng)建一個表格，有4行3列

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

表格的屬性：表格也是通過自己的屬性來形成自己風(fēng)格的table

width：寬度

height：高度

align：水平對齊方式（left,center,right）

border：設(shè)置表格的變寬,以px(像素)為單位

cellpadding：內(nèi)邊距,(單元格邊框與內(nèi)容之間的距離)

cellspacing：外邊距,(單元格與單元格之間的距離)

bgcolor：表格背景顏色

align：設(shè)置該行內(nèi)容的水平對齊方式(left,center,right)

valign：設(shè)置該行內(nèi)容的垂直對齊方式(top,middle,bottom)

colspan：單元格跨列(向右合并單元格)

rowspan：單元格跨行(向下合并單元格)

表格標(biāo)題：即表格第一行，文字加粗語法：<caption>標(biāo)題</caption>

<table>

<tr>

</tr>

</table>

表格除了中規(guī)中矩，還有復(fù)雜應(yīng)用，可以形成不規(guī)則的表格，實現(xiàn)不規(guī)則表格主要是通過跨列：colspan、跨行:rowspan

第四：關(guān)于列表<ul>

列表根據(jù)使用情景，可以分為：有序列表、無序列表、自定義列表，其中

1、有序列表

語法:<ol><li></li> 列表項</ol>

常用屬性:

type : 列表類型，取值可以為：

1 :表示數(shù)字（默認(rèn)值）

a : 表示小寫字母

A : 表示大寫字母

i : 表示小寫羅馬數(shù)字

I : 表示大寫羅馬數(shù)字

start : 起始編號

2、無序列表

語法:<ul><li></li></ul>

屬性: type 取值可以為:

disc : 實心圓(默認(rèn))

circle : 空心圓

square : 實心矩形

3、自定義列表

<dl> 定義列表

<dt></dt> 列表內(nèi)容標(biāo)題

<dd></dd> 列表數(shù)據(jù)

</dl>

有序、無序使用場景：

1、從上到下，只有一列顯示數(shù)據(jù)

2、從左到右，只有一行顯示數(shù)據(jù)(導(dǎo)航)

自定義列表使用場景：做圖文混排的布局

最后是關(guān)于文件路徑，即URL

目錄結(jié)構(gòu)的表示方式

URL : Uniform Resource Locator , 統(tǒng)一資源定位器，俗稱，路徑

作用：用來標(biāo)識網(wǎng)絡(luò)中的資源位置

http://www.baidu.com

images/logo.gif

URL的三種形式: 絕對路徑相對路徑根相對路徑

1、絕對路徑

文件從最高級目錄開始的完整的路徑

絕對路徑就是完整的URL

1、從本機目錄結(jié)構(gòu)查找，從盤符開始

C:\xxx\xxx.jpg

2、網(wǎng)絡(luò)資源目錄結(jié)構(gòu)開始查找

協(xié)議、主機、目錄路徑、文件名稱

http://www.baidu.com/images/logo.jpg

2、相對路徑

相對于當(dāng)前文件的位置，查找資源文件

1、同級目錄(直接找)

直接輸入資源文件名稱即可

2、子級目錄(先進(jìn)入)

先進(jìn)入到指定文件夾，再查找資源文件

3、父級目錄(先返回)

先返回到指定的父級目錄出，再查找指定資源文件

../ : 表示返回上一級

../../images/logo.png

3、根相對路徑

file:///C:/zhaoxu/ ........ 本地訪問

http://www.baidu.com

http://localhost/ ...... 從服務(wù)器訪問數(shù)據(jù)

在線咨詢

上一篇：純CSS實現(xiàn)波浪效果
下一篇：這個投訴通道真有用，7天解決各地復(fù)工難題1000+

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML中的元素使用方法1-零基礎(chǔ)自學(xué)網(wǎng)頁制作

TML元素

HTML完整學(xué)習(xí)目錄

您的項目需求