整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
iv 、span 沒有特殊語義 ，但是網頁布局中非常重要的2個標簽
division ,分割，分區
在我們的網頁布局中，會有很多div 來組合網頁
span, 跨度，范圍
<div>
商品展示
<span>價格</span>
</div>
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常用布局標簽，你已經擁有了構建網頁的基礎工具。記住，好的布局不僅需要技術，更需要創意和對細節的關注。現在，打開你的代碼編輯器，開始你的布局設計之旅吧！
TML是一種用來描述網頁的標記性語言。學習HTML可能并不難，主要是要記一些HTML標簽和標簽代表的含義。下面PHP程序員雷雪松根據使用的情況，整理出平時常用的HTML標簽。
HTML基礎之HTML常用標簽-PHP程序員雷雪松的博客
<!--<!DOCTYPE> 是HTML5聲明，<!DOCTYPE> 必須是 HTML 文檔的第一行，位于 <html> 標簽之前。<!DOCTYPE>是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。-->
<!DOCTYPE html>
<html>
<!-- head標簽是所有頭部元素的容器。head標簽內的元素可包含腳本、樣式表和提供頁面的元信息等等。以下標簽都可以添加到 head 部分：title、base、link、meta、script 以及style。頭部的內容不會顯示在瀏覽器的。 -->
<head>
<!-- 設置字符集，如果字符集不對，可能導致亂碼。一般建議utf-8國際編碼 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />
<!-- SEO相關標簽，title定義文檔的標題,百度建議一般不要超過32位,meta定義頁面關鍵詞和頁面的描述-->
<title>網頁標題</title>
<meta name="keywords" content="PHP程序員,技術博客,個人博客,雷雪松" />
<meta name="description" content="PHP程序員，雷雪松（Raykaeso）的博客是一個優秀的個人技術博客。PHP程序員雷雪松的博客記錄了Linux學習，PHP開發與編程，Web前端開發，MySQL學習和教程，NoSQL數據庫教程以及個人的人生經歷和觀點。" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<!-- 正文部分，所有在瀏覽器上可見的內容必須寫在body標簽內部 -->
<body>
</body>
</html>
a、布局標簽
div標簽定義文檔中的分區或節（division/section），可以把文檔分割為獨立的、不同的部分，主要用于布局。
aside標簽的內容可用作文章的側欄，<span style="color: #ff0000;">html5新增標簽</span>。
header標簽定義頁面的頭部（介紹信息），<span style="color: #ff0000;">html5新增標簽</span>。
section標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分，<span style="color: #ff0000;">html5新增標簽</span>。
footer 標簽定義文檔或節的頁腳，通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等等，<span style="color: #ff0000;">html5新增標簽</span>。
article標簽規定文章獨立的其他內容，比如：標題、內容、評論，<span style="color: #ff0000;">html5新增標簽</span>。
b、文本標簽
h1-h6標簽可定義標題
p標簽定義段落
b/strong標簽加粗
em標簽來表示強調的文本，斜體
strong標簽表示重要文本
u標簽下劃線
s標簽刪除線
br標簽表示回車換行
hr標簽表示水平線
span標簽被用來組合文檔中的行內元素。
blockquote標簽表示塊引用
pre標簽可定義預格式化的文本，保持原有格式的一種標簽。
sub標簽下標，
sup>標簽上標
表示一個空格
©表示版權符
<表示<
>表示>
c、a標簽定義超鏈接，指定頁面間的跳轉。鏈接可以指向外部鏈接或者頁面內部id錨點，可以在當前頁面打開，新開窗口。
<a href="指向的鏈接地址或者網址#ID名" target="_blank|_self|_top|_parent">百度</a>
d、多媒體標簽
img標簽主要在網頁中插入圖像，可以定義圖片替換文本、顯示寬度和高度、是否帶邊框，建議等比例設置，否則圖像會變形。
<img src="圖片地址" alt="替換文本，圖片打不開的時候顯示" width="圖片寬度" height="高度" border="0" />
audio標簽定義聲音，比如音樂或其他音頻流。<span style="color: #ff0000;">html5新增標簽</span>。
<audio src="someaudio.wav">您的瀏覽器不支持 audio 標簽。</audio>
video標簽定義視頻，比如電影片段或其他視頻流。<span style="color: #ff0000;">html5新增標簽</span>。
<video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標簽。</video>
e、序列化標簽
ul和li無序列表標簽
<ul>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ul>
ol和li有序列表標簽，可以使用type屬性規定有序列表符號的類型。1 按數字有序排列，為默認值，（1、2、3、4）；a 按小寫字母有序排列，（a、b、c、d）；A 按字母大寫有序排列，（A、B、C、D）。i 按小寫羅馬字母有序，（i, ii, iii, iv）；I 按小寫羅馬字母有序，（I, II, III, IV）。
<ol>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ol>
dl標簽定義了定義列表（definition list），dl標簽用于結合 dt（定義列表中的項目）和 dd（描述列表中的項目）。
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
</dl>
f、表格標簽
table標簽和tr標簽，th標簽和td標簽，合并單元格。
<table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">
<tr>
<th>標題</th>
<th>標題</th>
</tr>
<tr>
<!-- 合并橫向單元格 -->
<td colspan="2" nowrap="nowrap">&nbsp;</td>
</tr>
<tr>
<td></td>
<!-- 合并縱向單元格 -->
<td rowspan="2"> </td>
</tr>
<tr>
<td height="16"> </td>
</tr>
</table>
g、表單標簽
form標簽定義提交方式、提交地址、表單字符集以及如何對其進行編碼，需要提交的表單一定要放在form標簽內。
<form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>
input標簽用于搜集用戶信息
<input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />
密碼，輸入的字符會被掩碼（顯示為星號或原點）
<input name="pwd" type="password" maxlength="5" size="100" value="" />
文件類型的表單，上傳文件時，form表單一定要設置為enctype="multipart/form-data"
<input type="file" name="file" />
隱藏表單
<input type="hidden" name="country" value="China" />
提交
<input type="submit" name="Submit" value="提交" disabled="disabled" />
重置
<input type="reset" name="Submit2" value="重置" />
radio單選
<input name="sex" type="radio" value="1" />男
<input name="sex" type="radio" value="2" checked="checked" />女
checkbox多選
<input name="skill" type="checkbox" value="1" checked="checked" />PHP
<input name="skill" type="checkbox" value="2" />前端
<input name="skill" type="checkbox" value="2" />數據庫
<span style="color: #ff0000;">注：checked="checked"可以簡寫成checked</span>
label標簽為input元素定義標注，如果您點擊label元素文本，就會觸發此input控件。
textarea標簽，設置文本區內的可見行數和寬度
<textarea name="content" cols="30" rows="10">大段文本輸入框</textarea>
button標簽定義一個按鈕
提交按鈕
<button type="submit" value="提交">提交</button>
重置按鈕
<button type="reset" value="重置">重置</button>
select標簽和option標簽下拉列表
單選菜單列表框
<select name="user">
<option value="1">ray</option>
<option value="2" selected="selected">raykaeso</option>
</select>
多選列表下拉框，shift加鼠標單擊，可以連續選擇多個選擇，CTRL+鼠標點擊，可以點擊多個。
<select name="user" size="10" multiple="multiple">
<option value="1">雷雪松</option>
<option value="2" selected="selected">ray</option>
<option value="3">raykaeso</option>
</select>
注:selected="selected"可簡寫成selected，表示選中
a、HTML標簽和屬性是不區分大小寫的，建議HTML標簽和屬性都小寫，屬性值必須用雙引號包圍。
b、HTML標簽都是以開始標簽起始，以結束標簽終止。大部分HTML標簽都是成對出現的，稱為雙標簽，比如：p標簽、div標簽，也有的HTML標簽在開始標簽中結束的標簽，稱為單標簽，比如：hr標簽、br標簽。大多數 HTML 元素可擁有屬性，文本內容都是寫在開始標簽與結束標簽之間。
c、HTML標簽之間盡量縮進與換行，每行代碼不要過長，方便閱讀和維護。
d、HTML標簽使用必須符合標簽嵌套規則。禁止a標簽嵌套a標簽，p標簽嵌套div標簽。
e、建議不使用HTML已經廢棄的或者不贊成使用的標簽，少使用table布局、iframe框架嵌套以及flash播放器。
來源：PHP程序員雷雪松的博客 -HTML基礎之HTML常用標簽（http://www.leixuesong.cn/2045）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
