6.HTML 標(biāo)題、段落和文本格式

網(wǎng)頁(yè)設(shè)計(jì)中，標(biāo)題、段落和文本格式是構(gòu)成頁(yè)面內(nèi)容的基石。它們不僅有助于傳達(dá)信息，還能通過(guò)組織和強(qiáng)調(diào)內(nèi)容來(lái)提升用戶體驗(yàn)。本文將詳細(xì)介紹這些元素的使用方法，并提供實(shí)際例子。

標(biāo)題（Headings）

標(biāo)題是用來(lái)定義網(wǎng)頁(yè)中不同部分的標(biāo)題。在HTML中，標(biāo)題標(biāo)簽從<h1>到<h6>，其中<h1>表示最高的層級(jí)，通常用于主標(biāo)題，而<h6>表示最低的層級(jí)。為了保證良好的SEO實(shí)踐和無(wú)障礙訪問(wèn)，應(yīng)保證標(biāo)題層級(jí)的邏輯順序。

使用實(shí)例：

<h1>歡迎來(lái)到我的博客</h1>
<h2>最新文章</h2>
<h3>Web開發(fā)的未來(lái)趨勢(shì)</h3>
<h4>前言</h4>
<h4>主要內(nèi)容</h4>
<h4>結(jié)論</h4>
<h3>如何提高JavaScript技能</h3>

在這個(gè)例子中，<h1>用于最主要的標(biāo)題，<h2>用于區(qū)分頁(yè)面中的主要部分，<h3>用于文章標(biāo)題，<h4>用于文章內(nèi)部的小節(jié)。

段落（Paragraphs）

段落是文本的基本單元，用于組織和展示連續(xù)的文本內(nèi)容。在HTML中，<p>標(biāo)簽用于定義段落。合理的段落分割有助于讀者更好地理解和吸收信息。

使用實(shí)例：

<p>在今天的數(shù)字時(shí)代，網(wǎng)頁(yè)開發(fā)已經(jīng)成為了一個(gè)不斷演變的領(lǐng)域。隨著新技術(shù)的出現(xiàn)，開發(fā)者需要不斷學(xué)習(xí)和適應(yīng)。</p>

<p>JavaScript是構(gòu)建現(xiàn)代網(wǎng)頁(yè)不可或缺的一部分。為了成為一名更優(yōu)秀的前端開發(fā)者，提高JavaScript技能是非常重要的。</p>

在這個(gè)例子中，兩個(gè)<p>標(biāo)簽分別定義了兩個(gè)獨(dú)立的段落，每個(gè)段落都是一個(gè)完整的思想單元。

文本格式

文本格式用于強(qiáng)調(diào)或區(qū)分網(wǎng)頁(yè)中的文本內(nèi)容。HTML提供了多種標(biāo)簽來(lái)改變文本的樣式和意義，包括但不限于加粗、斜體、下劃線、上標(biāo)和下標(biāo)等。

加粗（Bold）

<strong>和<b>標(biāo)簽用于加粗文本，但<strong>通常表示重要性，而<b>僅用于視覺(jué)上的加粗。

使用實(shí)例：

<p>重要提示：<strong>請(qǐng)不要在任何情況下泄露您的密碼。</strong></p>
<p>這是一個(gè)<b>加粗</b>的文本示例。</p>

斜體（Italic）

<em>和<i>標(biāo)簽用于斜體文本，<em>表示強(qiáng)調(diào)，而<i>僅用于斜體樣式。

使用實(shí)例：

<p>當(dāng)我們談?wù)?lt;em>用戶體驗(yàn)</em>時(shí)，我們指的是用戶與產(chǎn)品交互的整體感受。</p>
<p>這是一個(gè)<i>斜體</i>的文本示例。</p>

下劃線和刪除線

``標(biāo)簽用于下劃線文本，而<del>標(biāo)簽用于顯示文本已被刪除或更改。

使用實(shí)例：

<p>請(qǐng)閱讀使用條款了解更多信息。</p>
<p>原價(jià)<del>99.99美元</del> 現(xiàn)價(jià)69.99美元。</p>

上標(biāo)和下標(biāo)

<sup>和<sub>標(biāo)簽用于創(chuàng)建上標(biāo)和下標(biāo)文本，常用于科學(xué)公式和腳注。

使用實(shí)例：

<p>水的化學(xué)式是H<sub>2</sub>O。</p>
<p>愛(ài)因斯坦的質(zhì)能方程式E=mc<sup>2</sup>。</p>

結(jié)論

合理使用標(biāo)題、段落和文本格式可以極大地提升網(wǎng)頁(yè)內(nèi)容的可讀性和專業(yè)性。通過(guò)明確的層級(jí)結(jié)構(gòu)和強(qiáng)調(diào)重要內(nèi)容，你可以幫助用戶快速找到他們需要的信息。記住正確使用這些基本元素，你的網(wǎng)頁(yè)將更加吸引人且功能強(qiáng)大。

、標(biāo)簽理解

1.HTML標(biāo)簽由尖括號(hào)包圍關(guān)鍵詞。通常是成對(duì)出現(xiàn)的，稱為雙標(biāo)簽。例如<html>(開始標(biāo)簽)和</html>(結(jié)束標(biāo)簽)。有些特殊標(biāo)簽為單個(gè)標(biāo)簽，稱為單標(biāo)簽。例如<br/>

2.標(biāo)簽關(guān)系有包含關(guān)系和并列關(guān)系

3.標(biāo)簽的含義(語(yǔ)義)：標(biāo)簽是用來(lái)干嘛的。(在適合的地方給一個(gè)合理的標(biāo)簽可以使頁(yè)面結(jié)構(gòu)更清晰)

4.每個(gè)網(wǎng)頁(yè)都會(huì)有一個(gè)基本的結(jié)構(gòu)標(biāo)簽(也稱為骨架標(biāo)簽)，HTML頁(yè)面也稱為HTML文檔

二、基本結(jié)構(gòu)標(biāo)簽

1.<html>標(biāo)簽是根標(biāo)簽，頁(yè)面中最大的標(biāo)簽

2.<head>標(biāo)簽是文檔的頭部，在<head>標(biāo)簽內(nèi)必須設(shè)置<title>標(biāo)簽

3.<title>標(biāo)簽是文檔的標(biāo)題，網(wǎng)頁(yè)的標(biāo)題

4.<body>標(biāo)簽是文檔的主體，文檔的所有內(nèi)容，網(wǎng)頁(yè)內(nèi)容

三、常見(jiàn)標(biāo)簽

1.標(biāo)題標(biāo)簽<h1>-<h6>(head的縮寫)

(1) 語(yǔ)義：作為標(biāo)題使用，并依據(jù)重要性遞減(2) 特點(diǎn)：a.加了標(biāo)題標(biāo)簽文字會(huì)變粗，字號(hào)依次變大 b.一個(gè)標(biāo)題獨(dú)占一行

2.段落標(biāo)簽<p>(paragraph的縮寫)

(1) 語(yǔ)義：可以把HTML文檔分割為若干段落

(2) 特點(diǎn)：a.一個(gè)段落根據(jù)瀏覽器窗口的大的自動(dòng)換行 b.段落之間有大的空隙

3.換行標(biāo)簽<br/>(break的縮寫)

(1) 語(yǔ)義：強(qiáng)制換行

(2) 特點(diǎn)：a.<br/>是個(gè)單標(biāo)簽 b.<br/>只是簡(jiǎn)單重新開始一行與段落不同

4.文本格式標(biāo)簽(為文字設(shè)置粗體,斜體或下劃線等效果，語(yǔ)義：突出重要性)

(1) 加粗：<strong></strong>或<b></b> 推薦使用<strong>標(biāo)簽，語(yǔ)義更強(qiáng)烈

(2) 傾斜：<em></em>或<i></i> 推薦使用<em>標(biāo)簽，語(yǔ)義更強(qiáng)烈(emphasize)

(3) 刪除線：<del></del>或<s></s> 推薦使用<del>標(biāo)簽，語(yǔ)義更強(qiáng)烈(delete)

(4) 下劃線：<ins></ins>或<u></u> 推薦使用<ins>標(biāo)簽，語(yǔ)義更強(qiáng)烈(insert)

5.<div>和<span>標(biāo)簽(沒(méi)有語(yǔ)義，是一個(gè)盒子，用來(lái)裝內(nèi)容 division span)

特點(diǎn)：a.<div>標(biāo)簽用來(lái)布局，一行只能放一個(gè)<div>,是個(gè)大盒子 b.<span>標(biāo)簽用來(lái)布局，一行可以有多個(gè)<span>,是個(gè)小盒子

三種常用的代碼分離方法：

入口起點(diǎn)：使用 entry 配置手動(dòng)地分離代碼。
防止重復(fù)：使用 CommonsChunkPlugin 去重和分離 chunk。
動(dòng)態(tài)導(dǎo)入：通過(guò)模塊的內(nèi)聯(lián)函數(shù)調(diào)用來(lái)分離代碼。

1、入口起點(diǎn)

這是迄今為止最簡(jiǎn)單、最直觀的分離代碼的方式。不過(guò)，這種方式手動(dòng)配置較多

webpack.config.js

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js',
another: './src/another-module.js'
},
plugins: [
new HTMLWebpackPlugin({
title: 'Code Splitting'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};

這將生成如下構(gòu)建結(jié)果

Hash: 309402710a14167f42a8
Version: webpack 2.6.1
Time: 570ms
Asset Size Chunks Chunk Names
index.bundle.js 544 kB 0 [emitted] [big] index
another.bundle.js 544 kB 1 [emitted] [big] another
[0] ./~/lodash/lodash.js 540 kB {0} {1} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} {1} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} {1} [built]
[3] ./src/another-module.js 87 bytes {1} [built]
[4] ./src/index.js 216 bytes {0} [built]

正如前面提到的，這種方法存在一些問(wèn)題:

如果入口 chunks 之間包含重復(fù)的模塊，那些重復(fù)模塊都會(huì)被引入到各個(gè) bundle 中。
這種方法不夠靈活，并且不能將核心應(yīng)用程序邏輯進(jìn)行動(dòng)態(tài)拆分代碼。

2、防止重復(fù)

CommonsChunkPlugin 插件可以將公共的依賴模塊提取到已有的入口 chunk 中，或者提取到一個(gè)新生成的 chunk。讓我們使用這個(gè)插件，將之前的示例中重復(fù)的 lodash 模塊去除：

webpack.config.js

const path = require('path');
+ const webpack = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js',
another: './src/another-module.js'
},
plugins: [
new HTMLWebpackPlugin({
title: 'Code Splitting'
- })
+ }),
+ new webpack.optimize.CommonsChunkPlugin({
+ name: 'common' // 指定公共 bundle 的名稱。
+ })
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};

這里我們使用 CommonsChunkPlugin 之后，現(xiàn)在應(yīng)該可以看出，index.bundle.js 中已經(jīng)移除了重復(fù)的依賴模塊。需要注意的是，CommonsChunkPlugin 插件將 lodash 分離到單獨(dú)的 chunk，并且將其從 main bundle 中移除，減輕了大小。執(zhí)行 npm run build 查看效果：

Hash: 70a59f8d46ff12575481
Version: webpack 2.6.1
Time: 510ms
Asset Size Chunks Chunk Names
index.bundle.js 665 bytes 0 [emitted] index
another.bundle.js 537 bytes 1 [emitted] another
common.bundle.js 547 kB 2 [emitted] [big] common
[0] ./~/lodash/lodash.js 540 kB {2} [built]
[1] (webpack)/buildin/global.js 509 bytes {2} [built]
[2] (webpack)/buildin/module.js 517 bytes {2} [built]
[3] ./src/another-module.js 87 bytes {1} [built]
[4] ./src/index.js 216 bytes {0} [built]

以下是由社區(qū)提供的，一些對(duì)于代碼分離很有幫助的插件和 loaders：

ExtractTextPlugin: 用于將 CSS 從主應(yīng)用程序中分離。
bundle-loader: 用于分離代碼和延遲加載生成的 bundle。
promise-loader: 類似于 bundle-loader ，但是使用的是 promises。

CommonsChunkPlugin 插件還可以通過(guò)使用顯式的 vendor chunks 功能，從應(yīng)用程序代碼中分離 vendor 模塊。

3、動(dòng)態(tài)導(dǎo)入

當(dāng)涉及到動(dòng)態(tài)代碼拆分時(shí)，一般使用使用webpack提供的符合 ECMAScript 提案的 import() 語(yǔ)法。

new Vue({

el: '#app',
components: {
AsyncComponent: () => import('./AsyncComponent.vue')
}
});

實(shí)施代碼分割并不難，難在搞清楚在什么時(shí)候、什么地方進(jìn)行。

Vue.js 單頁(yè)應(yīng)用進(jìn)行代碼分割有三種思路：

按頁(yè)面分割
使用折疊
按條件分割

1. 按頁(yè)面

按頁(yè)面來(lái)進(jìn)行代碼分割，是最明顯的一種方式。

如果能確保每個(gè)單文件組件代表一個(gè)頁(yè)面，如 Home.vue, About.vue 以及 Contact.vue，那么我們就可以使用 Webpack 的 "動(dòng)態(tài)導(dǎo)入" 函數(shù) (import) 來(lái)將它們分割至單獨(dú)的構(gòu)建文件中。之后后，當(dāng)用戶訪問(wèn)一個(gè)新頁(yè)面的時(shí)候，Webpack 將異步加載該請(qǐng)求的頁(yè)面文件。

如果用到了 vue-router，由于頁(yè)面已經(jīng)分割成了單獨(dú)的組件，實(shí)施起來(lái)會(huì)非常方便。

const Home = () => import(/* webpackChunkName: "home" */ './Home.vue');
const About = () => import(/* webpackChunkName: "about" */ './About.vue');
const Contact = () => import(/* webpackChunkName: "contact" */ './Contact.vue');
const routes = [
{ path: '/', name: 'home', component: Home },
{ path: '/about', name: 'about', component: About },
{ path: '/contact', name: 'contact', component: Contact }
];

代碼編譯完成后，通過(guò)查看生成的統(tǒng)計(jì)數(shù)據(jù)得知：每個(gè)頁(yè)面都有自己?jiǎn)为?dú)的文件，同時(shí)有多出來(lái)一個(gè)名為 build_main.js 的打包文件。里面包含一些公共的代碼以及邏輯，用來(lái)異步加載其它文件，因此它需要在用戶訪問(wèn)路由之前加載完成。

2. 折疊

“折疊” 是指頁(yè)面初次加載時(shí)，視圖的不可見(jiàn)部分。用戶通常會(huì)花費(fèi) 1~2 秒來(lái)瀏覽可視區(qū)域，特別是第一次訪問(wèn)網(wǎng)站的時(shí)候（可能更久），之后才開始向下滑動(dòng)頁(yè)面。

這個(gè)時(shí)候，可以異步加載剩余的內(nèi)容。

3. 條件展示內(nèi)容

代碼分割另一種比較好的備選方式，是按條件展示。比如：模態(tài)框、標(biāo)簽頁(yè)、下拉菜單之類。

如果我們需要一個(gè)模態(tài)框，給模態(tài)框設(shè)置 v-if 屬性，綁定了 show 變量。一方面用來(lái)控制模態(tài)框是否顯示，同時(shí)也決定了是否應(yīng)該渲染模態(tài)框組件。當(dāng)頁(yè)面加載的時(shí)候，它的值為 false，模態(tài)框的代碼只有當(dāng)它顯示的時(shí)候才會(huì)被加載。如果用戶永遠(yuǎn)不打開這個(gè)模態(tài)框，這部分代碼就永遠(yuǎn)不會(huì)被下載。缺點(diǎn)是，可能會(huì)增加很小的用戶體驗(yàn)成本：用戶點(diǎn)擊按鈕后，需要等待代碼文件下載完成。

在線咨詢

上一篇：HTML5(七)-SVG基礎(chǔ)入門
下一篇：雅虎前端優(yōu)化的35條軍規(guī)(干貨分享速速收藏)

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商

6.HTML 標(biāo)題、段落和文本格式

標(biāo)題（Headings）

使用實(shí)例：

段落（Paragraphs）

使用實(shí)例：

文本格式

加粗（Bold）

使用實(shí)例：

斜體（Italic）

使用實(shí)例：

下劃線和刪除線

使用實(shí)例：

上標(biāo)和下標(biāo)

使用實(shí)例：

結(jié)論

、標(biāo)簽理解

二、基本結(jié)構(gòu)標(biāo)簽

三、常見(jiàn)標(biāo)簽

1.標(biāo)題標(biāo)簽<h1>-<h6>(head的縮寫)

2.段落標(biāo)簽<p>(paragraph的縮寫)

3.換行標(biāo)簽<br/>(break的縮寫)

4.文本格式標(biāo)簽(為文字設(shè)置粗體,斜體或下劃線等效果，語(yǔ)義：突出重要性)

5.<div>和<span>標(biāo)簽(沒(méi)有語(yǔ)義，是一個(gè)盒子，用來(lái)裝內(nèi)容 division span)

您的項(xiàng)目需求