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

級元素與內(nèi)聯(lián)元素的概念與區(qū)別

在HTML中，大多數(shù)元素都被定義為塊級元素或內(nèi)聯(lián)元素。

塊級元素通常會獨立成行，而內(nèi)聯(lián)元素會并排顯示。

在我們學過的元素中，

塊級元素如：<h> <p> <table>這些。

內(nèi)聯(lián)元素如<td><a><img>

下面我們通過練習來直觀看看他們的區(qū)別。

塊級元素展示，代碼如下：

<body>
  <h1>第一個網(wǎng)頁</h1><hr><h2>表格元素</h2><hr>
  <p>塊級元素與內(nèi)聯(lián)元素</p>
  <p>零基礎自學網(wǎng)頁制作</p>
  <table border="1" width="50%">
  <thead>
  <tr>
  <td colspan="2">表格的頭部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的腳部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格標題</caption>
  <colgroup>
  <col span = "1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td>
  <table border = "1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body>

如圖：

內(nèi)聯(lián)元素展示如下

示例代碼：這段代碼被我放在了</table>后面。

<a href = "https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid =1838467&fr=aladdin">殲20戰(zhàn)斗機</a>
<img src="img/戰(zhàn)斗機/image3.jpg" width = "200px"/>

效果如圖：

其中，<img>標簽中的width屬性規(guī)定了圖片的寬度為200px，也就是200像素。

HTML中，如果只對圖片的寬或高進行數(shù)值指定，那么未指定的數(shù)值會隨著指定數(shù)值進行等比例縮放！

熟知html元素是塊級還是內(nèi)聯(lián)對以后進行頁面布局有一定的指導意義。

<div>與<span>標簽

為了方便開發(fā)者對頁面內(nèi)容進行布局和調(diào)整，html開發(fā)者為html加入了專門的區(qū)塊元素<div></div>。

<div></div>是一個塊級元素，大家可以把它理解為一個容器，它本身是不會顯示在頁面上的。

比如這個！

筆者第一個漫畫作品

如果拋開畫面內(nèi)容，我們看到的是一堆對畫面進行分割的方格子。像這樣

<div></div>元素的作用就是對頁面進行了這樣的分割。

實際上我們的頁面布局都是基于這樣思路進行分割的，只是頁面上不會像漫畫一樣顯示外邊框而已。例如：

強制為其添加邊框分割：

大家看明白了嗎？<div></div>就是用來對頁面進行分割劃區(qū)域的。

通過給<div>標簽設置不同的id屬性，可以在css文件中對不同<div>區(qū)塊中的所有信息進行統(tǒng)一調(diào)整樣式的操作。

這是對塊級元素整體改變樣式的方法。

但是，如果我們想對一個塊級元素中的不同文字或圖片這些內(nèi)聯(lián)元素進行單獨操作怎么做呢？

html開發(fā)者為我們提供了<span></span>這樣的內(nèi)聯(lián)標簽。比如我們對<p>我有一個夢想</p>這個段落元素中的"夢想"兩個字進行變化顏色的操作，我們可以這樣寫：

通過對<span>指定不同的id或class屬性在CSS文件中對"夢想"二字進行改變顏色的操作而不會影響段落元素中的其他文字。

今天的內(nèi)容結束了，下一次我們建立一個新的頁面來簡單看看<div>元素的基本用法。

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

HTML完整學習目錄

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

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

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

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

初識meta標簽與SEO——零基礎自學網(wǎng)頁制作

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

單的 ASP.NET 頁面看上去就像普通的 HTML 頁面。

Hello RUNOOB.COM

在開始學習 ASP.NET 之前，我們先來構建一個簡單的 HTML 頁面，該頁面將在瀏覽器中顯示 "Hello RUNOOB.COM"：

Hello RUNOOB.COM!

用 HTML 編寫的 Hello RUNOOB.COM

下面的代碼將以 HTML 頁面的形式顯示實例：

<html>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

如果您想親自嘗試一下，請保存上面的代碼到一個名為 "firstpage.htm" 的文件中，并創(chuàng)建一個到該文件的鏈接：firstpage.htm。

用 ASP.NET 編寫的 Hello RUNOOB.COM

轉(zhuǎn)換 HTML 頁面為 ASP.NET 頁面最簡單的方法是，直接復制一個 HTML 文件，并把新文件的擴展名改成 .aspx 。

下面的代碼將以 ASP.NET 頁面的形式顯示實例：

<html>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

如果您想親自嘗試一下，請保存上面的代碼到一個名為 "firstpage.aspx" 的文件中，并創(chuàng)建一個到該文件的鏈接：firstpage.aspx。

它是如何工作的？

從根本上講，ASP.NET 頁面與 HTML 是完全相同的。

HTML 頁面的擴展名是 .htm。如果瀏覽器向服務器請求一個 HTML 頁面，服務器可以不進行任何修改，就直接發(fā)送頁面給瀏覽器。

ASP.NET 頁面的擴展名是 .aspx。如果瀏覽器向服務器請求個 ASP.NET 頁面，服務器在將結果發(fā)回給瀏覽器之前，需要先處理頁面中的可執(zhí)行代碼。

上面的 ASP.NET 頁面不包含任何可執(zhí)行的代碼，所以沒有執(zhí)行任何東西。在下面的實例中，我們將添加一些可執(zhí)行的代碼到頁面中，以便演示靜態(tài) HTML 頁面和動態(tài) ASP 頁面的不同之處。

經(jīng)典 ASP

Active Server Pages (ASP) 已經(jīng)流行很多年了。通過 ASP，可以在 HTML 頁面中放置可執(zhí)行代碼。

之前的 ASP 版本（在 ASP.NET 之前）通常被稱為經(jīng)典 ASP。

ASP.NET 不完全兼容經(jīng)典 ASP，但是只需要經(jīng)過少量的修改，大部分經(jīng)典 ASP 頁面就可以作為 ASP.NET 頁面良好地運行。

如果您想學習更多關于經(jīng)典 ASP 的知識，請訪問我們的 ASP 教程。

用經(jīng)典 ASP 編寫的動態(tài)頁面

為了演示 ASP 是如何顯示包含動態(tài)內(nèi)容的頁面，我們將向上面的實例中添加一些可執(zhí)行的代碼（紅色字體標識）：

<html>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

<% --%> 標簽內(nèi)的代碼是在服務器上執(zhí)行的。

Response.Write 是用來向 HTML 輸出流中寫東西的 ASP 代碼。

Now() 是一個返回服務器當前日期和時間的函數(shù)。

如果您想親自嘗試一下，請保存上面的代碼到一個名為 "dynpage.asp" 的文件中，并創(chuàng)建一個到該文件的鏈接：dynpage.asp。

用 ASP .NET 編寫的動態(tài)頁面

下面的代碼將以 ASP.NET 頁面的形式顯示實例：

<html>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

如果您想親自嘗試一下，請保存上面的代碼到一個名為 "dynpage.aspx" 的文件中，并創(chuàng)建一個到該文件的鏈接：dynpage.aspx。

ASP.NET 對比經(jīng)典 ASP

上面的實例無法演示 ASP.NET 與經(jīng)典 ASP 之間任何的不同之處。

正如最后的兩個實例中，您看不出 ASP 頁面和 ASP.NET 頁面兩者之間的不同之處。

在下一章中，您將看到服務器控件是如何讓 ASP.NET 比經(jīng)典 ASP 更強大的。

認WordPress頁面不能實現(xiàn)偽靜態(tài)鏈接，比如：https://defcon.cn/about.html，手動在鏈接中添加“.html”，會自動轉(zhuǎn)碼為"-html"，但萬能的WordPress，你能想到的功能都會有相應的插件幫你實現(xiàn)。

既然用插件可以實現(xiàn)，直接將插件中的代碼集成到主題中同樣也可以，代碼提取自.html on PAGES插件，將下面代碼添加主題functions.php中即可。

// 頁面鏈接添加html后綴
add_action('init', 'html_page_permalink', -1);
function html_page_permalink() {
 global $wp_rewrite;
 if ( !strpos($wp_rewrite->get_page_permastruct(), '.html')){
 $wp_rewrite->page_structure = $wp_rewrite->page_structure . '.html';
 }
}

添加后，需要到固定鏈接設置頁面，重新保存一下固定鏈接設置，否則不會生效。此代碼適合偽靜態(tài)的固定鏈接形式使用，比如：

/%postname%.html
/%post_id%.html
另外，如果同時使用了“給WordPress分類目錄和頁面添加斜杠”一文中的代碼，還需要將該文中的代碼修改為：

// 添加斜杠
function nice_trailingslashit($string, $type_of_url) {
 if ( $type_of_url != 'single' && $type_of_url != 'page' )
 $string = trailingslashit($string);
 return $string;
}
add_filter('user_trailingslashit', 'nice_trailingslashit', 10, 2);

排除頁面文件，否則頁面鏈接.html后面也會自動加上斜杠。

在線咨詢

上一篇：WPS輕松辦公—如何粘貼表格鏈接到文檔
下一篇：互聯(lián)網(wǎng)電視認知度與購買使用調(diào)查

您的項目需求

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

整合營銷服務商

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

級元素與內(nèi)聯(lián)元素的概念與區(qū)別

HTML完整學習目錄

您的項目需求