HTML常用標(biāo)簽概述（可用于網(wǎng)店裝修）

TML標(biāo)簽：

所有內(nèi)容都在<html></html>標(biāo)簽之內(nèi)；
<head></head>內(nèi)放的是頭部信息，是對頁面的描述，不會直接顯示在頁面中。
<head></head>內(nèi)的<title></title>中設(shè)置的是頁面的標(biāo)題，<title></title>只能放在<head></head>中；
<body></body>是頁面的主體，大部分顯示內(nèi)容都定義在這里。

HTML注釋：：

注釋不允許嵌套

html常用標(biāo)簽:

h標(biāo)簽（標(biāo)題），HTML定義了<h1></h1>到<h6></h6>六個h標(biāo)簽，分別表示不同大小的字體。h1最大，h6最小。
<br/>只是回車，<p>是段落。<p>前后會有比較大的空白，而<br/>則沒有。
<center>居中顯示.
<b>、<strong>粗體，<i>、<em>斜體。<u>下劃線。
<sub>2</sub>下標(biāo)，如：H<sub>2</sub>O
<sup>2</sup>上標(biāo)，如：10<sup>2</sup>
<font></font>字體標(biāo)簽，<font color=“red“ size=“7” face=“隸書”>紅色</font>。color（設(shè)置顏色） size（1-7） face（設(shè)置字體,設(shè)置字體是注意用戶計算機(jī)中必須有該字體才能正常顯示）
<hr> color size（厚度） width（長度） align=left/center/right （默認(rèn)為劇中顯示）
<pre> 預(yù)格式化保持本色;
HTML特殊字符：<（小于號，less than）；>（大于號，greater than）； （空格）。
超鏈接：<a>標(biāo)簽的一些常用屬性：href、title、target、name
插入圖片：<img src=“路徑”/>
列表：dl→(定義列表)，ul→(無序列表)， ol→(有序列表)。
表格：<table>；創(chuàng)建行：<tr>；創(chuàng)建單元格：<td>；表頁眉：<thead>；表主體：<tbody>；表頁腳：<tfoot>；表頭：<th>。
rowspan(合并行)、colspan（合并列）
<input>是主要的表單元素，type的可選值：submit（提交按鈕）、button（普通按鈕）、checkbox表單標(biāo)簽：（復(fù)選框）、file（文件選擇框）、hidden（隱藏字段）、image（圖片按鈕）、password（密碼框）、radio（單選按鈕）、reset（重置按鈕）、text（文本框）。

meta標(biāo)簽：（包括在head標(biāo)簽中。主要用來描述頁面自身信息,元信息）

<meta name="keywords" content="C#學(xué)習(xí)資料,4k8k.net,.net開發(fā),軟件開發(fā),編程自學(xué)網(wǎng)"/>
<meta name="description" content="免費更新最新C#相關(guān)技術(shù)知識，主要包括：.net基礎(chǔ),網(wǎng)頁前端,三層架構(gòu),SQL數(shù)據(jù)庫..."/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />網(wǎng)頁編碼
<meta http-equiv="Refresh" content="3" />三秒鐘后刷新此網(wǎng)頁。
<meta http-equiv="Refresh" content="3;url=http://www.4k8k.net" />三秒鐘后重定向到新網(wǎng)頁。
<meta http-equiv="Cache-Control" content="no-cache" /> 禁止瀏覽器緩存頁面。
<meta name="名字" content="值" />關(guān)于網(wǎng)頁的描述信息。
<meta http-equiv="名字" content="值" />模擬http響應(yīng)頭信息。

C#編程自學(xué)_做最好的.net自學(xué)資料站_更多文章請訪問：http://www.4k8k.net/

歡迎訂閱。

SS中的浮動（Floats）、定位（Positioning）和顯示（Display）屬性是前端工程師掌握頁面布局的關(guān)鍵。本文將深入探討這些屬性的工作原理和使用場景，幫助開發(fā)者更好地理解和運用它們來構(gòu)建響應(yīng)式和精確的網(wǎng)頁布局。

浮動（Float）

浮動是CSS中用于實現(xiàn)元素排列的一種方式，它可以讓元素脫離正常的文檔流，并可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動元素的邊緣。

.element {
  float: left; /* 或者 'right' */
}

使用場景

文字環(huán)繞圖片。
創(chuàng)建水平導(dǎo)航欄。
無網(wǎng)格系統(tǒng)時的列布局。

注意事項

清除浮動（Clearing Floats）：使用clear屬性可以防止元素被浮動元素覆蓋。

.clear-element {
  clear: both; /* 可以是 'left', 'right', 或 'both' */
}

包含浮動（Containing Floats）：浮動元素的父容器可能不會擴(kuò)展以包含浮動的子元素，可以通過清除浮動或使用其他技術(shù)（如overflow）來解決這個問題。
浮動塌陷（Float Collapse）：浮動元素不占據(jù)空間，可能導(dǎo)致父元素高度塌陷。

定位（Position）

定位屬性允許你控制元素的位置，它可以是相對于它的正常位置、相對于最近的已定位祖先元素、相對于視口或絕對位置。

.element {
  position: static | relative | absolute | fixed | sticky;
}

使用場景

相對定位（Relative Positioning）：元素相對于其正常位置進(jìn)行偏移。

.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}

絕對定位（Absolute Positioning）：元素相對于最近的已定位父元素進(jìn)行定位。

.absolute-element {
  position: absolute;
  top: 0;
  right: 0;
}

固定定位（Fixed Positioning）：元素相對于視口進(jìn)行定位，即使頁面滾動也不會移動。

.fixed-element {
  position: fixed;
  bottom: 0;
  left: 0;
}

粘性定位（Sticky Positioning）：元素基于用戶的滾動位置在相對和固定定位之間切換。

.sticky-element {
  position: sticky;
  top: 10px;
}

注意事項

定位元素可能會脫離文檔流，影響周圍元素的布局。
z-index屬性可以控制堆疊順序。
絕對定位元素的容器應(yīng)有position: relative;，以便正確定位。

顯示（Display）

display屬性是CSS中最重要的用于控制布局的屬性之一，它定義了元素如何顯示在頁面上。

.element {
  display: block | inline | inline-block | flex | grid | none;
}

使用場景

塊級元素（Block）：display: block;使元素表現(xiàn)為塊級，占據(jù)新的行。

.block-element {
  display: block;
}

內(nèi)聯(lián)元素（Inline）：display: inline;使元素在文本行中顯示，不開始新行。

.inline-element {
  display: inline;
}

內(nèi)聯(lián)塊元素（Inline-Block）：display: inline-block;允許元素并排排列，同時擁有塊級元素的寬度和高度屬性。

.inline-block-element {
  display: inline-block;
}

彈性盒子（Flex）：display: flex;創(chuàng)建了一個彈性容器，其子元素可以靈活地在容器內(nèi)排列。

.flex-container {
  display: flex;
}

網(wǎng)格（Grid）：display: grid;創(chuàng)建了一個網(wǎng)格容器，可以定義行和列以及在網(wǎng)格內(nèi)放置元素。

.grid-container {
  display: grid;
}

隱藏元素（None）：display: none;將元素隱藏，且不為元素保留空間。

.hidden-element {
  display: none;
}

注意事項

使用display: none;與visibility: hidden;的區(qū)別在于后者仍保留元素占據(jù)的空間。
display: flex;和display: grid;為現(xiàn)代布局提供了更多控制，通常比浮動和定位更優(yōu)。

示例

HTML結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="header">
  <div class="logo">Logo</div>
  <div class="navigation">Navigation</div>
</div>

<div class="main-content">
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

<div class="footer">Footer</div>

<div class="fixed-element">Fixed Element</div>

</body>
</html>

CSS樣式

/* Reset some default styles */
body, h1, p {
  margin: 0;
  padding: 0;
}

/* Header styles */
.header {
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px;
  overflow: hidden; /* Clearfix for floated elements */
}

.logo {
  float: left;
  font-size: 24px;
}

.navigation {
  float: right;
  font-size: 18px;
}

/* Main content styles */
.main-content {
  padding: 20px;
}

.sidebar {
  float: left;
  width: 200px;
  background-color: #ddd;
  padding: 10px;
}

.content {
  margin-left: 220px; /* Make space for the sidebar */
  background-color: #eee;
  padding: 10px;
}

/* Footer styles */
.footer {
  background-color: #f8f8f8;
  border-top: 1px solid #e7e7e7;
  text-align: center;
  padding: 10px;
  position: relative; /* For demonstration purposes */
  top: 20px; /* Move the footer down a bit */
}

/* Fixed element styles */
.fixed-element {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #333;
  color: #fff;
  z-index: 1000; /* Ensure it stays on top */
}

/* Clearfix hack */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

在這個例子中，我們創(chuàng)建了一個包含頭部、側(cè)邊欄、主要內(nèi)容和頁腳的基本布局。我們使用浮動來對齊頭部的Logo和導(dǎo)航，以及創(chuàng)建一個側(cè)邊欄。我們還使用了相對定位來稍微下移頁腳，并使用固定定位為頁面添加了一個始終可見的固定元素。最后，我們使用了overflow: hidden;來清除頭部中浮動元素的影響。

結(jié)語

浮動、定位和顯示屬性是CSS中構(gòu)建復(fù)雜布局的強(qiáng)大工具。通過深入理解和正確應(yīng)用這些屬性，前端工程師可以創(chuàng)建出既美觀又功能強(qiáng)大的網(wǎng)頁。隨著Web標(biāo)準(zhǔn)的不斷發(fā)展，我們也需要不斷學(xué)習(xí)和適應(yīng)新的CSS特性，以保持我們技能的前沿性。

格是頁面中常見的一中標(biāo)簽，通常是用來數(shù)據(jù)展示的，而不是用來布局。

一、創(chuàng)建表格

語法

<table>

<tr>

...

</tr>

...

</table>

說明

table 標(biāo)簽：定義一個表
tr 標(biāo)簽：定義表格中的一行，必須嵌套在table標(biāo)簽中，有幾對，表示表格有幾行
td 標(biāo)簽：定義表格中的單元格，必須嵌套在標(biāo)簽中，一對中包含幾對，就表示該行中有多少列（或多少個單元格）

注意

中只能嵌套
標(biāo)簽，就像一個容器，可以容納所有的元素

表格屬性

設(shè)置表格的外觀樣式

表頭標(biāo)簽

說明
表頭一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設(shè)置了表頭的表格。設(shè)置表頭非常簡單，只需用表頭標(biāo)簽<th></th>替代相應(yīng)的單元格標(biāo)簽<td></td>即可
示例

代碼

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

標(biāo)題標(biāo)簽

表格標(biāo)題標(biāo)簽，為表格添加標(biāo)題，跟隨表格的位置而移動。設(shè)置標(biāo)題，我們用的是caption標(biāo)簽。

語法

<caption style="text-align:left">My savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

說明

將標(biāo)題定位在表格的左|右|上|下位置。

示例

合并單元格（重點）

分類

跨行合并 rowspan=“合并單元格的個數(shù)”

跨列合并 colspan=“合并單元格的個數(shù)”

合并順序：先上后下，先左后右

代碼

...

姓名	張三	性別	李四	照片
家庭住址	張三	性別	李四	照片

```

合并方法：

（1）先確定是跨行還是跨列合并

（2）根據(jù)先上后下，先左后右的原則，找到目標(biāo)單元格，寫上合并方式（rowspan/colspan）和要合并的單元格數(shù)量

（3）刪除多余的單元格

表格結(jié)構(gòu)劃分（了解）

表格的結(jié)構(gòu)劃分，使用thead、tbody 、tfoot 三種標(biāo)簽

說明
標(biāo)簽用于組合 HTML 表格的表頭內(nèi)容元素應(yīng)該與和元素結(jié)合起來使用，用來規(guī)定表格的各個部分（表頭、主體、頁腳）
語法

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tfoot>

<tr>

</tr>

</tfoot>

<tbody>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</tbody>

</table>

提示

（1）元素內(nèi)部必須包含一個或者多個標(biāo)簽。

（2） thead, tbody, 和 tfoot 元素默認(rèn)不會影響表格的布局。用途主要是可以使用 CSS 來為這些元素定義樣式，從而改變表格的外觀。

在線咨詢

上一篇：Kubernetes已部署集群切換kube-apiserver等核心容器鏡像倉庫地址
下一篇：Word里如何段落首行縮進(jìn)

您的項目需求

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

整合營銷服務(wù)商

HTML常用標(biāo)簽概述（可用于網(wǎng)店裝修）

浮動（Float）

使用場景

注意事項

定位（Position）

使用場景

注意事項

顯示（Display）

使用場景

注意事項

示例

HTML結(jié)構(gòu)

CSS樣式

結(jié)語

一、創(chuàng)建表格

表格屬性

表頭標(biāo)簽

標(biāo)題標(biāo)簽

合并單元格（重點）

表格結(jié)構(gòu)劃分（了解）

您的項目需求