HTML中的元素使用方法1-零基礎自學網頁制作

TML元素

這一節以及以后幾節我們將對HTML中<body>標簽中的各種元素進行一個概述，并對一些基本元素進行練習。

HTML元素：指的是從開始標簽到結束標簽的所有代碼。

舉個例子，在《第一個HTML頁面如何寫？——零基礎自學網頁制作》這一節中，我們寫了這樣一個頁面"第一個頁面.html"。后面的練習我們都在這個文件中進行。

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

其中"<h>第一個網頁</h>"整個代碼就可以看做是一個html元素，<h></h>叫做標題標簽，加上"第一個網頁"這段文字共同構成一個HTML元素。

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

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

HTML常用元素使用練習1

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

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

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

頁面顯示效果如圖：

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

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

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

效果如下：

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

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

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

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

效果如圖所示：

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

示例代碼如下：

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

效果如圖所示：

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

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

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

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

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

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

3、行號選項的設置

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結一下<a>標簽常用的表現形式（作用）

1、網頁面間跳轉

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

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

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

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

4、電子郵件鏈接

5、鏈接到Javascript

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

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

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

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

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

第三、關于<table>表格標簽

表格：有行有列，按照一定的格式(從左到右，從上到下)排列里面的內容；它能組織結構化的信息，按照一定的格式來進行數據顯示

要想創建表格：

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

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

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

注意:原始的表格中，每行的列數全部都是統一的。

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

表頭:<thead></thead>

表主體:<tbody></tbody>

表尾:<tfoot></tfoot>

實戰：創建一個表格，有4行3列

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

表格的屬性：表格也是通過自己的屬性來形成自己風格的table

width：寬度

height：高度

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

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

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

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

bgcolor：表格背景顏色

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

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

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

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

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

<table>

<tr>

</tr>

</table>

表格除了中規中矩，還有復雜應用，可以形成不規則的表格，實現不規則表格主要是通過跨列：colspan、跨行:rowspan

第四：關于列表<ul>

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

1、有序列表

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

常用屬性:

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

1 :表示數字（默認值）

a : 表示小寫字母

A : 表示大寫字母

i : 表示小寫羅馬數字

I : 表示大寫羅馬數字

start : 起始編號

2、無序列表

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

屬性: type 取值可以為:

disc : 實心圓(默認)

circle : 空心圓

square : 實心矩形

3、自定義列表

<dl> 定義列表

<dt></dt> 列表內容標題

<dd></dd> 列表數據

</dl>

有序、無序使用場景：

1、從上到下，只有一列顯示數據

2、從左到右，只有一行顯示數據(導航)

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

最后是關于文件路徑，即URL

目錄結構的表示方式

URL : Uniform Resource Locator , 統一資源定位器，俗稱，路徑

作用：用來標識網絡中的資源位置

http://www.baidu.com

images/logo.gif

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

1、絕對路徑

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

絕對路徑就是完整的URL

1、從本機目錄結構查找，從盤符開始

C:\xxx\xxx.jpg

2、網絡資源目錄結構開始查找

協議、主機、目錄路徑、文件名稱

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

2、相對路徑

相對于當前文件的位置，查找資源文件

1、同級目錄(直接找)

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

2、子級目錄(先進入)

先進入到指定文件夾，再查找資源文件

3、父級目錄(先返回)

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

../ : 表示返回上一級

../../images/logo.png

3、根相對路徑

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

http://www.baidu.com

http://localhost/ ...... 從服務器訪問數據

在線咨詢

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

您的項目需求

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

整合營銷服務商

HTML中的元素使用方法1-零基礎自學網頁制作

TML元素

HTML完整學習目錄

您的項目需求