HTML的pre標(biāo)簽

TML的pre標(biāo)簽

定義和用法

<pre> 標(biāo)簽定義預(yù)先格式化的文本。

<pre> 元素中的文本以等寬字體顯示，文本保留空格和換行符。文本將完全按照 HTML 源代碼中所寫的方式顯示。

使用（保留原有格式），和div區(qū)別

執(zhí)行結(jié)果如下：

在layui中使用，未使用pre,結(jié)果如下：在一行顯示，不太好看和理解

layer.alert(JSON.stringify(data,null,4));

使用pre標(biāo)簽后,結(jié)果如下：json格式化展示出來了,易于理解和好看，方便分析。

layer.alert("<pre>"+JSON.stringify(data,null,4)+"</pre>");

2024-2-26

/一、html

//a、HTML語法規(guī)范

//a.1基本語法概述

1、HTML標(biāo)簽是由尖括號包圍的關(guān)鍵字，例如,

2、HTML標(biāo)簽通常是成對出現(xiàn)的，例如和,我們成為雙標(biāo)簽，標(biāo)簽對中的第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽。

3、有些特殊的標(biāo)簽是單個(gè)標(biāo)簽（極少情況），例如

，我們稱為單標(biāo)簽

//a.2標(biāo)簽關(guān)系

雙標(biāo)簽關(guān)系可以分為兩類：包含關(guān)系和并列關(guān)系。

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

//b.1第一個(gè)HTML網(wǎng)頁

每個(gè)網(wǎng)頁都會(huì)有一個(gè)基本的結(jié)構(gòu)標(biāo)簽（也稱為骨架標(biāo)簽），頁面內(nèi)容也是在這些基本標(biāo)簽上寫的。

HTML頁面也稱為HTML文檔

標(biāo)簽名	定義	說明
<html></html>	HTML標(biāo)簽	頁面中最大的標(biāo)簽，我們稱為根標(biāo)簽
<head></head>	文檔的頭部	注意在head標(biāo)簽中我們必須要設(shè)置的標(biāo)簽是title
<title></title>	文檔的標(biāo)題	讓頁面擁有一個(gè)屬于自己的網(wǎng)頁標(biāo)題
<body></body>	文檔的主體	元素包含文檔的所有內(nèi)容，頁面內(nèi)容，基本都是放到body里面的

必須是.html或.htm,瀏覽器的作用是讀取HTML文檔，并以網(wǎng)頁的形式顯示出它們。

此時(shí)，用瀏覽器打開這個(gè)網(wǎng)頁，我們就可以預(yù)覽我們寫的第一個(gè)HTML文件了。

//c、開發(fā)工具vscode

1、<!DOCTYPE>標(biāo)簽
文檔類型聲明，作用就是告訴瀏覽器使用哪種HTML版本來顯示網(wǎng)頁

<!DOCTYPE html>這句代碼的意思是：當(dāng)前頁面采用的是HTML5來顯示頁面。

2、lang語言

用來定義當(dāng)前文檔顯示的語言：

a、en定義語言為英語

b、zh-CN定義語言為中文

簡單來說定義為en就是英文網(wǎng)頁，定義為zh-CN就是中文網(wǎng)頁

其實(shí)對于文檔顯示來說，定義成en的文檔也可以顯示中文，定義zh-CN的文檔也可以顯示英文

這個(gè)屬性對于瀏覽器和搜索引擎（百度、谷歌等）還是有作用的

3、charset字符集

字符集是多個(gè)字符的集合，以便計(jì)算機(jī)能夠識(shí)別和存儲(chǔ)各種文字

在標(biāo)簽內(nèi)，通過標(biāo)簽的charset屬性來規(guī)定HTML文檔應(yīng)該使用哪種字符編碼。

charset常用的值：GB2312、BIG5、GBK和UTF-8,其中UTF-8也稱為萬國碼，基本包含了全世界所有國家需要用到的字符。

注意：上面語法是必須寫的代碼，否則可能引起亂碼的情況，一般情況下，統(tǒng)一使用"UTF-8"編碼，盡量統(tǒng)一寫成標(biāo)準(zhǔn)的"UTF-8",不要寫成"utf-8"或"UTF8"。

//d、HTML常用標(biāo)簽

//d.1標(biāo)簽語義

學(xué)習(xí)標(biāo)簽是有技巧的，重點(diǎn)是記住每個(gè)標(biāo)簽的語義，簡單理解就是指標(biāo)簽的含義，即這個(gè)標(biāo)簽是用來干嘛的

根據(jù)標(biāo)簽的語義，在合適的地方給一個(gè)最為合理的標(biāo)簽，可以讓頁面結(jié)構(gòu)更清晰。

//d.2標(biāo)題標(biāo)簽

(重要)

為了使網(wǎng)頁更具有語義，我們經(jīng)常會(huì)在頁面中用到標(biāo)題標(biāo)簽，HTML提供了6個(gè)等級的網(wǎng)頁標(biāo)題集

特點(diǎn)：

1、加了標(biāo)題的文字會(huì)變得更加粗，字號也會(huì)依次變大。

2、一個(gè)標(biāo)題獨(dú)占一行。

//d.3段落和換行標(biāo)簽（重要）

在網(wǎng)頁中，要把文字有條理地顯示出來，就需要將這些文字分段顯示，在HTML標(biāo)簽中，

標(biāo)簽用于定義段落，它可以將整個(gè)網(wǎng)頁分為若干段落。

<p>我是一個(gè)段落標(biāo)簽</p>標(biāo)簽語義：可以把HTML文檔分割為若干段落。

特點(diǎn)：
1、文本在一個(gè)段落中會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行。
2、段落和段落之間保有一個(gè)較大的空隙。

在HTML中，一個(gè)段落中的文字從左到右依次排列，直到瀏覽器的右端，然后自動(dòng)換行，如果希望某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)簽

<br />

單詞break的縮寫，意為打斷，換行。

特點(diǎn)：

1、單標(biāo)簽

2、

標(biāo)簽只是簡單地開始新的一行，跟段落不一樣，段落之間會(huì)插入一些垂直的間距。

//d.4文本格式標(biāo)簽

在網(wǎng)頁中，有時(shí)需要為文字設(shè)置粗體，斜體或下劃線等效果，這時(shí)就需要用到HTML中的文本格式標(biāo)簽，使文字以特殊的方式顯示

標(biāo)簽語義：突出重要性，比普通文字更重要。

語義	標(biāo)簽	說明
加粗	<strong></strong>或者<b></b>	更推薦使用<strong></strong>標(biāo)簽加粗，語義更強(qiáng)烈
傾斜	<em><em> 或者<i><i>	更加推薦使用<em><em>標(biāo)簽，語義更加強(qiáng)烈
刪除線	<del><del>或者<s><s>	更加推薦使用<del><del>標(biāo)簽，語義更加強(qiáng)烈
下劃線	<ins><ins>或者<u><u>	更加推薦<ins><ins>標(biāo)簽，語義更加強(qiáng)烈

//d.5<div>和<span>標(biāo)簽
<div>和<span>是沒有語義的，它們就是一個(gè)盒子，用來裝內(nèi)容。

<div>這是頭部</div>
<span>今日價(jià)格</span>

div是division的縮寫，表示分割，分區(qū)，span意為跨度，跨距。

特點(diǎn)：

1、<div>標(biāo)簽用來布局，但是現(xiàn)在一行只能放一個(gè)<div>，大盒子。

2、<span>標(biāo)簽用來布局，一行上可以有多個(gè)<span>,小盒子

//d.6圖像標(biāo)簽和路徑（重點(diǎn)）

1、圖像標(biāo)簽

在HTML標(biāo)簽中，<img>標(biāo)簽用于定義HTML頁面中的圖像。

<img src="圖像url"/>

單詞image的縮寫，意為圖像

src是<img>標(biāo)簽的必須屬性，它用于指定圖像文件的路徑和文件名。

所謂屬性：簡單理解就是屬于這個(gè)圖像標(biāo)簽的特性。

圖像標(biāo)簽的其他屬性：

屬性	屬性值	說明
src	圖片路徑	必須屬性
alt	文本	替換文本，圖像不能顯示的文字
title	文本	提示文本，鼠標(biāo)放到圖像上，顯示文字
width	像素	設(shè)置圖像的寬度
height	像素	設(shè)置圖像的高度
border	像素	設(shè)置圖像的邊框粗細(xì)

HTML的世界里，一切都是由容器和內(nèi)容構(gòu)成的。容器，就如同一個(gè)個(gè)盒子，用來裝載各種元素；而內(nèi)容，則是這些盒子里的珍寶。理解了這一點(diǎn)，我們就邁出了探索HTML布局的第一步。

在HTML中，布局標(biāo)簽主要用于控制頁面的結(jié)構(gòu)和樣式。本文將介紹一些常用的布局標(biāo)簽及其使用方法，并通過代碼示例進(jìn)行演示。

一、理解布局的重要性

布局在我們前端開發(fā)中擔(dān)任什么樣的角色呢？想象一下，你面前有一堆散亂的積木，無序地堆放在那里。

而你的任務(wù)，就是將這些積木按照圖紙拼裝成一個(gè)精美的模型。HTML布局標(biāo)簽的作用就像那張圖紙，它指導(dǎo)瀏覽器如何正確、有序地顯示內(nèi)容和元素，確保網(wǎng)頁的結(jié)構(gòu)和外觀既美觀又實(shí)用。

下面我們就來看看在HTML中常用的基礎(chǔ)布局標(biāo)簽有哪些，如何使用這些布局標(biāo)簽完成我們的開發(fā)目標(biāo)。

二、常用的布局標(biāo)簽

1、div標(biāo)簽

div標(biāo)簽是一個(gè)塊級元素，它獨(dú)占一行，用于對頁面進(jìn)行區(qū)域劃分。它可以包含其他HTML元素，如文本、圖片、鏈接等。通過CSS樣式可以設(shè)置div的布局和樣式。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>
</head>
<body>

<div>這是一個(gè)div元素

</div>

</body>
</html>

運(yùn)行結(jié)果：

2、span標(biāo)簽

span標(biāo)簽是一個(gè)內(nèi)聯(lián)元素，它不獨(dú)占一行，用于對文本進(jìn)行區(qū)域劃分。它主要用于對文本進(jìn)行樣式設(shè)置，如字體、顏色等。與div類似，span也可以包含其他HTML元素。
示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  .text {
    color: blue;
    font-size: 20px;
  }
</style>
</head>
<body>

<p>這是一個(gè)<span>span元素</span>。</p>

</body>
</html>

運(yùn)行結(jié)果：

3、table標(biāo)簽

table標(biāo)簽用于創(chuàng)建表格，它包含多個(gè)tr（行）元素，每個(gè)tr元素包含多個(gè)td（單元格）或th（表頭單元格）元素。

<table> 定義一個(gè)表格，<tr> 定義表格中的行，而 <td> 則定義單元格。通過這三個(gè)標(biāo)簽，我們可以創(chuàng)建出整齊劃一的數(shù)據(jù)表，讓信息的展示更加直觀明了。

需要注意的是：

<table>和</table>標(biāo)記著表格的開始和結(jié)束。
<tr>和</tr>標(biāo)記著行的開始和結(jié)束，幾組表示該表格有幾行。
<td>和</td>標(biāo)記著單元格的開始和結(jié)束，表示這一行中有幾列。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  table, th, td {
    border: 1px solid black;
  }
</style>
</head>
<body>
<table>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>
</body>
</html>

運(yùn)行結(jié)果：

4、form標(biāo)簽

<form>標(biāo)簽的主要作用是定義一個(gè)用于用戶輸入的HTML表單。這個(gè)表單可以包含各種輸入元素，如文本字段、復(fù)選框、單選按鈕、提交按鈕等。

<form>元素可以包含以下一個(gè)或多個(gè)表單元素：<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>和<output>等。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  form {
    display: flex;
    flex-direction: column;
  }
</style>
</head>
<body>

<form>
  <label for="username">用戶名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密碼：</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="提交">
</form>

</body>
</html>

運(yùn)行結(jié)果：

5、列表標(biāo)簽

1）無序列表

指沒有順序的列表項(xiàng)目
始于<ul>標(biāo)簽，每個(gè)列表項(xiàng)始于<li>
type屬性有三個(gè)選項(xiàng)：disc實(shí)心圓、circle空心圓、square小方塊。默認(rèn)屬性是disc實(shí)心圓。

示例代碼：

<!DOCTYPE html>
<htmml>
<head>
<meta charst = "UTF-8">
<title>html--無序列表</title>
</head>
<body>
<ul>
<li>默認(rèn)的無序列表</li>
<li>默認(rèn)的無序列表</li>
<li>默認(rèn)的無序列表</li>
</ul>
<ul>
<li type = "circle">添加circle屬性</li>
<li type = "circle">添加circle屬性</li>
<li type = "circle">添加circle屬性</li>
</ul>
<ul>
<li type = "square">添加square屬性</li>
<li type = "square">添加square屬性</li>
<li type = "squaare">添加square屬性</li>
</ul>
</body>
</html>

運(yùn)行結(jié)果：

也可以使用CSS list-style-type屬性定義html無序列表樣式。

想要快速入門前端開發(fā)嗎？推薦一個(gè)前端開發(fā)基礎(chǔ)課程，這個(gè)老師講的特別好，零基礎(chǔ)學(xué)習(xí)無壓力，知識(shí)點(diǎn)結(jié)合代碼，邊學(xué)邊練，可以免費(fèi)試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點(diǎn)這里前往學(xué)習(xí)哦！「鏈接」

2）有序列表

指按照字母或數(shù)字等順序排列的列表項(xiàng)目。
其結(jié)果是帶有前后順序之分的編號,如果插入和刪除一個(gè)列表項(xiàng)，編號會(huì)自動(dòng)調(diào)整。
始于<ol>標(biāo)簽，每個(gè)列表項(xiàng)始于<li>。

示例代碼：

<ol>
<li>默認(rèn)的有序列表</li>
<li>默認(rèn)的有序列表</li>
<li>默認(rèn)的有序列表</li>
</ol>
<ol type = "a" start = "2">
<li>第1項(xiàng)</li>
<li>第2項(xiàng)</li>
<li>第3項(xiàng)</li>
<li value ="20">第四項(xiàng)</li>
</ol>
<ol type = "Ⅰ" start = "2">
<li>第1項(xiàng)</li>
<li>第2項(xiàng)</li>
<li>第3項(xiàng)</li>
</ol>

運(yùn)行結(jié)果：

同樣也可以使用CSS list-style-type屬性定義html有序列表樣式。

3）自定義列表

自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。
以<dl>標(biāo)簽開始。每個(gè)自定義列表項(xiàng)以<dt>開始。每個(gè)自定義列表項(xiàng)的定義以<dd>開始。
用于對術(shù)語或名詞進(jìn)行解釋和描述，自定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號。
基本語法：

<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>

<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
</dl>

<dl>即“definition list（定義列表）”，
<dt>即“definition term（定義名詞）”，
而<dd>即“definition description（定義描述）”。

示例代碼：

<dl>
<dt>計(jì)算機(jī)</dt>
<dd>用來計(jì)算的儀器</dd>

<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置</dd>
</dl>

運(yùn)行結(jié)果：

以上就是HTML中常用的布局標(biāo)簽及其使用方法。在實(shí)際開發(fā)中，還可以結(jié)合CSS和JavaScript來實(shí)現(xiàn)更復(fù)雜的布局和交互效果。

掌握了這些HTML常用布局標(biāo)簽，你已經(jīng)擁有了構(gòu)建網(wǎng)頁的基礎(chǔ)工具。記住，好的布局不僅需要技術(shù)，更需要?jiǎng)?chuàng)意和對細(xì)節(jié)的關(guān)注。現(xiàn)在，打開你的代碼編輯器，開始你的布局設(shè)計(jì)之旅吧！

在線咨詢

上一篇：html開發(fā)筆記20-合并單元格-列和行
下一篇：electron開發(fā)桌面應(yīng)用實(shí)現(xiàn)串口通信，看完你就學(xué)會(huì)了

您的項(xiàng)目需求

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

整合營銷服務(wù)商

HTML的pre標(biāo)簽

一、理解布局的重要性

二、常用的布局標(biāo)簽

1、div標(biāo)簽

2、span標(biāo)簽

3、table標(biāo)簽

4、form標(biāo)簽

5、列表標(biāo)簽

1）無序列表

2）有序列表

3）自定義列表

您的項(xiàng)目需求