整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML的pre標簽
定義和用法
<pre> 標簽定義預先格式化的文本。
<pre> 元素中的文本以等寬字體顯示，文本保留空格和換行符。文本將完全按照 HTML 源代碼中所寫的方式顯示。
使用（保留原有格式），和div區別
執行結果如下：
在layui中使用，未使用pre,結果如下：在一行顯示，不太好看和理解
layer.alert(JSON.stringify(data,null,4));使用pre標簽后,結果如下：json格式化展示出來了,易于理解和好看，方便分析。
layer.alert("<pre>"+JSON.stringify(data,null,4)+"</pre>");2024-2-26
/一、html
//a、HTML語法規范
//a.1基本語法概述
1、HTML標簽是由尖括號包圍的關鍵字，例如,
2、HTML標簽通常是成對出現的，例如和,我們成為雙標簽，標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽。
3、有些特殊的標簽是單個標簽（極少情況），例如
，我們稱為單標簽
//a.2標簽關系
雙標簽關系可以分為兩類：包含關系和并列關系。
//b、HTML基本結構標簽
//b.1第一個HTML網頁
每個網頁都會有一個基本的結構標簽（也稱為骨架標簽），頁面內容也是在這些基本標簽上寫的。
HTML頁面也稱為HTML文檔
標簽名 | 定義 | 說明 |
<html></html> | HTML標簽 | 頁面中最大的標簽，我們稱為根標簽 |
<head></head> | 文檔的頭部 | 注意在head標簽中我們必須要設置的標簽是title |
<title></title> | 文檔的標題 | 讓頁面擁有一個屬于自己的網頁標題 |
<body></body> | 文檔的主體 | 元素包含文檔的所有內容，頁面內容，基本都是放到body里面的 |
必須是.html或.htm,瀏覽器的作用是讀取HTML文檔，并以網頁的形式顯示出它們。
此時，用瀏覽器打開這個網頁，我們就可以預覽我們寫的第一個HTML文件了。
//c、開發工具vscode
1、<!DOCTYPE>標簽
文檔類型聲明，作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁
<!DOCTYPE html>這句代碼的意思是：當前頁面采用的是HTML5來顯示頁面。
2、lang語言
用來定義當前文檔顯示的語言：
a、en定義語言為英語
b、zh-CN定義語言為中文
簡單來說定義為en就是英文網頁，定義為zh-CN就是中文網頁
其實對于文檔顯示來說，定義成en的文檔也可以顯示中文，定義zh-CN的文檔也可以顯示英文
這個屬性對于瀏覽器和搜索引擎（百度、谷歌等）還是有作用的
3、charset字符集
字符集是多個字符的集合，以便計算機能夠識別和存儲各種文字
在標簽內，通過標簽的charset屬性來規定HTML文檔應該使用哪種字符編碼。
charset常用的值：GB2312、BIG5、GBK和UTF-8,其中UTF-8也稱為萬國碼，基本包含了全世界所有國家需要用到的字符。
注意：上面語法是必須寫的代碼，否則可能引起亂碼的情況，一般情況下，統一使用"UTF-8"編碼，盡量統一寫成標準的"UTF-8",不要寫成"utf-8"或"UTF8"。
//d、HTML常用標簽
//d.1標簽語義
學習標簽是有技巧的，重點是記住每個標簽的語義，簡單理解就是指標簽的含義，即這個標簽是用來干嘛的
根據標簽的語義，在合適的地方給一個最為合理的標簽，可以讓頁面結構更清晰。
//d.2標題標簽
-
(重要)
為了使網頁更具有語義，我們經常會在頁面中用到標題標簽，HTML提供了6個等級的網頁標題集
-
特點：
1、加了標題的文字會變得更加粗，字號也會依次變大。
2、一個標題獨占一行。
//d.3段落和換行標簽（重要）
在網頁中，要把文字有條理地顯示出來，就需要將這些文字分段顯示，在HTML標簽中，
標簽用于定義段落，它可以將整個網頁分為若干段落。
<p>我是一個段落標簽</p>標簽語義：可以把HTML文檔分割為若干段落。
特點：
1、文本在一個段落中會根據瀏覽器窗口的大小自動換行。
2、段落和段落之間保有一個較大的空隙。
在HTML中，一個段落中的文字從左到右依次排列，直到瀏覽器的右端，然后自動換行，如果希望某段文本強制換行顯示，就需要使用換行標簽
<br />
單詞break的縮寫，意為打斷，換行。
特點：
1、單標簽
2、
標簽只是簡單地開始新的一行，跟段落不一樣，段落之間會插入一些垂直的間距。
//d.4文本格式標簽
在網頁中，有時需要為文字設置粗體，斜體或下劃線等效果，這時就需要用到HTML中的文本格式標簽，使文字以特殊的方式顯示
標簽語義：突出重要性，比普通文字更重要。
語義 | 標簽 | 說明 |
加粗 | <strong></strong>或者<b></b> | 更推薦使用<strong></strong>標簽加粗，語義更強烈 |
傾斜 | <em><em> 或者<i><i> | 更加推薦使用<em><em>標簽，語義更加強烈 |
刪除線 | <del><del>或者<s><s> | 更加推薦使用<del><del>標簽，語義更加強烈 |
下劃線 | <ins><ins>或者<u><u> | 更加推薦<ins><ins>標簽，語義更加強烈 |
//d.5<div>和<span>標簽
<div>和<span>是沒有語義的，它們就是一個盒子，用來裝內容。
<div>這是頭部</div>
<span>今日價格</span>div是division的縮寫，表示分割，分區，span意為跨度，跨距。
特點：
1、<div>標簽用來布局，但是現在一行只能放一個<div>，大盒子。
2、<span>標簽用來布局，一行上可以有多個<span>,小盒子
//d.6圖像標簽和路徑（重點）
1、圖像標簽
在HTML標簽中，<img>標簽用于定義HTML頁面中的圖像。
<img src="圖像url"/>單詞image的縮寫，意為圖像
src是<img>標簽的必須屬性，它用于指定圖像文件的路徑和文件名。
所謂屬性：簡單理解就是屬于這個圖像標簽的特性。
圖像標簽的其他屬性：
屬性 | 屬性值 | 說明 |
src | 圖片路徑 | 必須屬性 |
alt | 文本 | 替換文本，圖像不能顯示的文字 |
title | 文本 | 提示文本，鼠標放到圖像上，顯示文字 |
width | 像素 | 設置圖像的寬度 |
height | 像素 | 設置圖像的高度 |
border | 像素 | 設置圖像的邊框粗細 |
HTML的世界里，一切都是由容器和內容構成的。容器，就如同一個個盒子，用來裝載各種元素；而內容，則是這些盒子里的珍寶。理解了這一點，我們就邁出了探索HTML布局的第一步。
在HTML中，布局標簽主要用于控制頁面的結構和樣式。本文將介紹一些常用的布局標簽及其使用方法，并通過代碼示例進行演示。
布局在我們前端開發中擔任什么樣的角色呢？想象一下，你面前有一堆散亂的積木，無序地堆放在那里。
而你的任務，就是將這些積木按照圖紙拼裝成一個精美的模型。HTML布局標簽的作用就像那張圖紙，它指導瀏覽器如何正確、有序地顯示內容和元素，確保網頁的結構和外觀既美觀又實用。
下面我們就來看看在HTML中常用的基礎布局標簽有哪些，如何使用這些布局標簽完成我們的開發目標。
div標簽是一個塊級元素，它獨占一行，用于對頁面進行區域劃分。它可以包含其他HTML元素，如文本、圖片、鏈接等。通過CSS樣式可以設置div的布局和樣式。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>這是一個div元素
</div>
</body>
</html>
運行結果：
span標簽是一個內聯元素，它不獨占一行，用于對文本進行區域劃分。它主要用于對文本進行樣式設置，如字體、顏色等。與div類似，span也可以包含其他HTML元素。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<style>
.text {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p>這是一個<span>span元素</span>。</p>
</body>
</html>
運行結果：
table標簽用于創建表格，它包含多個tr（行）元素，每個tr元素包含多個td（單元格）或th（表頭單元格）元素。
<table> 定義一個表格，<tr> 定義表格中的行，而 <td> 則定義單元格。通過這三個標簽，我們可以創建出整齊劃一的數據表，讓信息的展示更加直觀明了。
需要注意的是：
示例代碼：
<!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>
運行結果：
<form>標簽的主要作用是定義一個用于用戶輸入的HTML表單。這個表單可以包含各種輸入元素，如文本字段、復選框、單選按鈕、提交按鈕等。
<form>元素可以包含以下一個或多個表單元素：<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>
運行結果：
示例代碼：
<!DOCTYPE html>
<htmml>
<head>
<meta charst = "UTF-8">
<title>html--無序列表</title>
</head>
<body>
<ul>
<li>默認的無序列表</li>
<li>默認的無序列表</li>
<li>默認的無序列表</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>
運行結果：
也可以使用CSS list-style-type屬性定義html無序列表樣式。
想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！「鏈接」
示例代碼：
<ol>
<li>默認的有序列表</li>
<li>默認的有序列表</li>
<li>默認的有序列表</li>
</ol>
<ol type = "a" start = "2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
<li value ="20">第四項</li>
</ol>
<ol type = "Ⅰ" start = "2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
</ol>
運行結果：
同樣也可以使用CSS list-style-type屬性定義html有序列表樣式。
<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>計算機</dt>
<dd>用來計算的儀器</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置</dd>
</dl>
運行結果：
以上就是HTML中常用的布局標簽及其使用方法。在實際開發中，還可以結合CSS和JavaScript來實現更復雜的布局和交互效果。
掌握了這些HTML常用布局標簽，你已經擁有了構建網頁的基礎工具。記住，好的布局不僅需要技術，更需要創意和對細節的關注。現在，打開你的代碼編輯器，開始你的布局設計之旅吧！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
