整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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常用布局標簽，你已經擁有了構建網頁的基礎工具。記住，好的布局不僅需要技術，更需要創意和對細節的關注。現在，打開你的代碼編輯器，開始你的布局設計之旅吧！
這里是云端源想IT，幫你輕松學IT”
嗨~ 今天的你過得還好嗎？
天不言而四時行，
地不語而百物生。
- 2024.03.11 -
在數字世界的構建中，字體不僅僅是文字的外衣，更是情感和風格的傳遞者。作為網頁設計師和前端開發者，掌握HTML中的字體標簽，能夠讓我們創造出更加豐富和吸引人的用戶體驗。
今天，就讓我們一起走進HTML字體標簽的世界，探索它們如何讓網頁變得生動有趣。
語法結構：<標簽 屬性=“值”> 內容 </標簽>
1、標題標簽< h1> - < h6>
標題標簽的默認樣式是自動加粗的，字體一級標題最大，六級標題最小，每個標題標簽獨占一行。
示例：
<h1>一級</h1>
<h2>二級</h2>
<h3>三級</h3>
<h4>四級</h4>
<h5>五級</h5>
<h6>六級</h6>2、字體標簽<font>
在HTML中，最常用的字體標簽非<font>莫屬，雖然現代開發中更推薦使用CSS來控制字體樣式，但了解它的歷史仍然有其必要性。<font>標簽允許我們通過color、size和face屬性來改變字體的顏色、大小和類型。
例如，如果我們想要顯示紅色Arial字體的文字，我們可以這樣寫：
<font color="red" size="5" face="Arial">這是紅色Arial字體的文字</font>這行代碼的意思是：
注意：雖然標簽在HTML4.01中是有效的，但在HTML5中已經被廢棄，建議使用CSS來進行樣式定義。
3、字號大小：<font size="n">
字號大小在網頁設計中同樣重要，它直接影響著閱讀體驗。HTML允許我們通過<font size="n">來調整字體的大小，其中“n”可以是1到7的數字。
例如：
<!DOCTYPE html>
<html>
<head>
<title>Font Size Example</title>
</head>
<body>
<p><font size="5">This is a paragraph with font size 5.</font></p>
<p><font size="10">This is a paragraph with font size 10.</font></p>
<p><font size="15">This is a paragraph with font size 15.</font></p>
</body>
</html>運行結果：
不過，現代網頁設計更傾向于使用CSS來控制字號，以便更精細地調整字體大小。
4、粗體標簽
<b>：這個標簽用于將文本加粗顯示，相當于英文中的bold。它不會改變字體，只是使文本看起來更粗體。
<p><b>這是加粗的文本</b></p><strong>：與<b>標簽類似，<strong>標簽也用于表示加粗的文本。
<p><strong>這是重要的文本</strong></p>但在HTML5中，<strong>標簽被賦予了語義，用來表示重要的文本內容。
5、斜體字標簽
<i>：這個標簽用于將文本設置為斜體，相當于英文中的italic。
<p><i>這是斜體的文本</i></p><em>：與<i>標簽類似，<em>標簽也用于表示斜體文本。
<p><em>這是強調的文本</em></p>但在HTML5中，<em>標簽被賦予了語義，用來表示強調的文本內容。
6、刪除字標簽
<del>：這個標簽用于表示刪除的文本，常用于表示不再準確或已過時的內容。比如原價與現價。
<p>原價：<del>100元</del></p>
<p>現價：80元</p>運行之后是這樣子的：
在上述示例中，原價為100元，但已被刪除，因此使用標簽將其包圍起來。這樣，瀏覽器會顯示刪除線來表示該文本已被刪除。
7、文本格式化標簽 < div> < span>
< div> 標簽用來布局，但是一行只能放一個< div> //大盒子，塊元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>這是一個div</div>
<div>這是一個div</div>
<div>
<p>這是一個div</p>
</div>
<p>
<div>云端源想</div>
</p>
</body>
</html>如上圖控制臺所示（打開控制臺的方式：F12）：<div>標簽里面可以包含<p>標簽，<p>標簽，里面不可以放<div>標簽。
< span> 標簽用來布局，一行上可以多個 < span>//小盒子，行元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span>1234</span>
<span>5678</span>
</body>
</html>8、其它字體標簽
<mark>：這個標簽用于突出顯示文本，通常用于表示高亮的部分。
<small>：這個標簽用于表示小號文本，通常用于表示版權聲明或法律條款等次要信息。
<ins>：這個標簽用于表示插入的文本，常用于表示新增的內容。
<sub> 和 <sup>：這兩個標簽分別用于表示下標和上標文本，常用于數學公式或化學方程式中。
盡管上述標簽可以直接在HTML中使用，但現代網頁設計越來越傾向于使用CSS來控制文本的樣式，因為CSS提供了更多靈活性和控制能力。
使用CSS類和樣式規則可以更有效地管理網站的整體樣式，并且可以更容易地適應不同設備和屏幕尺寸。
因此，如果您正在學習或更新您的網頁設計知識，建議學習和使用CSS來控制字體和其他文本樣式，關于HTML的這些標簽了解一下就可以了。
總之，字體是網頁設計中不可或缺的元素，它們就像是網頁的語言，傳遞著信息和情感。通過HTML字體標簽的學習和應用，我們可以讓我們的網頁“字”得其樂，讓每一位訪問者都能享受到更加美妙的網絡體驗。不斷探索和實踐，讓我們的網頁在字體的世界里綻放光彩吧！
今天就先講到這里了，
更多前端開發基礎知識點擊文末閱讀原文查看哦！
記得關注【云端源想IT】一起學編程！
我們下期再見！
END
文案編輯|云端學長
文案配圖|云端學長
內容由：云端源想分享
一下html中文件標簽和文本標簽的使用
目的是學會使用，所以借助工具可以省好多時間
1.文件標簽：構成html最基本的標簽
html:html文檔的根標簽
head：頭標簽。用于引入html文檔的一些屬性。引入外部的一些資源
title：標題標簽
body：體標簽
<!DOCTYPE html>:html5中定義該文檔是html
2.文本標簽：和文本有關的標簽
注釋:<!-- 注釋內容 –->
<h1> 到<h6>:標題標簽自帶換行的效果
<p>：表示段落的標簽
<br>：換行標簽<br/>和<br>的寫法都不會報錯
<hr>：顯示一條水平線（也是一個自閉和標簽）水平線有一些屬性我們可以控制它的樣式。hr里面表示高度是size而不是height.對齊方式默認是居中的。
<b>：字體加粗
<i>：斜體
<font>:字體標簽（通過屬性來修改字體的字號，大小，顏色，以及字體的樣式）
<center>:文本居然標簽
這里講下網頁下面的版權標簽是如何寫出來的。
3.圖片標簽：用來展示圖片的（圖片也是一個自閉合標簽）
屬性:src:用來指定圖片的位置
什么都不寫默認就是./的形式
../表示上一級目錄
4.列表標簽：
有序列表:ol,li(li表示的是列表的每一項)
無序列表:ul,li
5.鏈接標簽：
a:定義一個超鏈接
屬性：
href:指定訪問資源的URL(統一資源定位符，就是路徑的表示形式)
target：（是目標的意思）指定打開資源的方式
_self:在當前頁面打開
_blank:在空白頁面打開
6.表格標簽：在HTML中的表格只有行的概念，沒有列的概念，將表格以行的形式進行分割，然后再對行進行操作。
table:定義表格
width:表格的寬度
border:邊框
cellpadding:單元格內容左對齊（定義內容和單元格的距離）
cellspacing:邊框合并(定義單元格之間的距離，如果指定為0，單元格的線會合為一條)
bgcolor:背景色
align:表格的對齊樣式
tr:定義行
bgcolor:背景色
align:表格的對齊樣式(是用來修改文本的對齊方式的)
td:定義單元格
colspan:合并列
rowspan:合并行
th:定義表頭單元格
<caption>:表格標題
<thread>:表示表格的頭部分
<tbody>:表示表格的體部分
<tfoot>:表示表格的腳部分
7.塊標簽：div和span是結合css使用的
span:文本信息在一行顯示，行內標簽，內聯標簽(意思就是它不會換行)
div:是會換行的。每一個div占滿一整行。塊級別的標簽
8.語義化標簽：html5中為了提高程序的可讀性，提高了一些標簽
<header>
<footer>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
