整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
position:
absolute
特性：
1、脫離文檔流，定位元素占據(jù)的位置會(huì)釋放
2、原點(diǎn)計(jì)算：如果該元素做了定位，那么就去找它做了定位的父元素（找最近的）作為原點(diǎn)基準(zhǔn)，如果父元素都沒做定位，則以瀏覽器(0,0)作為原點(diǎn)基準(zhǔn)。
3、對(duì)內(nèi)嵌元素定位后，設(shè)置寬高屬性就會(huì)有效果
應(yīng)用場景：
一般情況下，絕對(duì)定位用在下拉菜單、焦點(diǎn)圖輪播、彈出數(shù)字氣泡、特別花邊等場景
position:
relative
1、不脫離文檔流，定位元素占據(jù)的位置不會(huì)被釋放/
2、原點(diǎn)計(jì)算：以父級(jí)元素作為原點(diǎn)基準(zhǔn)，若沒有父級(jí)元素則以瀏覽器(0,0)為基準(zhǔn)。
一般的應(yīng)用：父相子絕
3、父元素為相對(duì)定位，子元素為絕對(duì)定位，文檔元素不會(huì)受影響。
4、父元素提供相對(duì)定位后，子元素以父元素為基準(zhǔn)來進(jìn)行定位。
應(yīng)用場景：
相對(duì)定位一般情況下很少自己單獨(dú)使用，都是配合絕對(duì)定位使用，為絕對(duì)定位創(chuàng)造定位父級(jí)而又不設(shè)置偏移量
position:
fixed
1、脫離了文檔流
2、原點(diǎn)計(jì)算：以瀏覽器(0,0)作為原點(diǎn)基準(zhǔn)，盡管父元素做了定位也不會(huì)影響它的原點(diǎn)
基準(zhǔn)。
應(yīng)用場景：
一般在網(wǎng)頁中被用在窗口左右兩邊的固定廣告、返回頂部圖標(biāo)、吸頂導(dǎo)航欄等
注意：使用定位后會(huì)激活如下5個(gè)屬性
left | right | top | bottom | z-index
z-index
改變定位后的疊放順序
取值范圍：-1~9999
其他：
設(shè)置網(wǎng)頁元素的透明度
opacity: 0~1;
filter: opacity(0.2) | contrast(0.2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>絕對(duì)定位</title>
<style type="text/css">
/*絕對(duì)定位：
*1、脫離文檔流，做了定位后它占據(jù)的位置會(huì)釋放。
*2、原點(diǎn)計(jì)算：如果該元素做了定位，那么就去找它做了定位的父元素（最近）作為原點(diǎn)基準(zhǔn)，若果父元素
* 都沒做定位，則以瀏覽器(0,0)作為原點(diǎn)基準(zhǔn)。
*3、對(duì)內(nèi)嵌元素做了定位后，它的寬度高度屬性就會(huì)有效。
*/
*{
padding: 0px;
margin: 0px;
}
.box-father{
width: 500px;
height: 500px;
margin-left: 500px;
background-color: yellow;
position: absolute;
}
.son{
width: 400px;
height: 400px;
margin-left: 20px;
background-color: black;
position: absolute;
}
.box{
width: 300px;
height: 300px;
background-color: blue;
/*絕對(duì)定位*/
position: absolute;
/*激活4個(gè)屬性*/
left: 150px;
/*right: ;*/
top: 100px;
/*bottom: ;*/
}
.box2{
width: 400px;
height: 400px;
background-color: red;
}
span{
width: 200px;
height: 200px;
background-color: green;
/* position: absolute;*/
float: left;
}
</style>
</head>
<body>
<div class="zx"> <!-- 祖先 ：定位-->
<div class="box-father"> <!-- 爺爺 ：定位-->
<div class="son"> <!-- 兒子：定位-->
<div class="box"> <!-- 孫子：如果孫子做了定位，它就去找接近它定位最近的父元素來做為基準(zhǔn) -->
</div>
</div>
</div>
</div>
<div class="box2">
</div>
<span>我是span</span>
</body>
</html>
對(duì)地址
<img src=http://www.jungjaehyung.com/uploadfile/2024/1012/20241012044403984.jpg” />
相對(duì)地址： ./當(dāng)前目錄 ../向上退一級(jí)目錄
1、圖片和網(wǎng)頁在同一個(gè)文件夾中
index.html中調(diào)用a.jpg
index.html高用a.jpg
TML5是一種標(biāo)記語言，用于創(chuàng)建和呈現(xiàn)網(wǎng)頁內(nèi)容。與早期的HTML版本相比，HTML5具有許多新的功能和改進(jìn)，可以更好地支持動(dòng)態(tài)內(nèi)容、多媒體、圖形和互動(dòng)性。在本文中，我們將討論如何使用HTML5制作網(wǎng)頁，以及HTML5與舊版本HTML的區(qū)別。
首先，讓我們了解一下HTML5的一些主要功能和優(yōu)勢(shì)。HTML5具有以下特點(diǎn)：
1. 語義化標(biāo)簽：HTML5引入了一些新的語義化標(biāo)簽，例如、、、等。這些標(biāo)簽的使用可以增強(qiáng)網(wǎng)頁的結(jié)構(gòu)并提高搜索引擎的可讀性。
2. 多媒體支持：HTML5內(nèi)置了對(duì)多媒體的支持，例如和標(biāo)簽，可以在網(wǎng)頁上直接播放視頻和音頻文件，而無需使用第三方插件。
3. Canvas繪圖：HTML5引入了元素，允許開發(fā)者通過JavaScript在網(wǎng)頁上繪制圖形和動(dòng)畫。這對(duì)于創(chuàng)建復(fù)雜的圖表、可視化效果和游戲非常有用。
4. 本地存儲(chǔ)：HTML5提供了幾種本地存儲(chǔ)方法，例如localStorage和sessionStorage。這些方法可以在客戶端存儲(chǔ)數(shù)據(jù)，使得網(wǎng)頁可以更快地加載和響應(yīng)用戶的操作。
5. 表單增強(qiáng)：HTML5為表單提供了許多新的輸入類型和屬性，例如日期、時(shí)間、顏色、URL等。這些功能減少了對(duì)JavaScript的依賴，在客戶端驗(yàn)證和收集用戶輸入數(shù)據(jù)時(shí)更加方便。
現(xiàn)在，讓我們看看如何使用HTML5制作網(wǎng)頁的基本步驟。
步驟一：創(chuàng)建HTML文檔結(jié)構(gòu)HTML5的網(wǎng)頁結(jié)構(gòu)包括、和等標(biāo)簽。在標(biāo)簽中，可以設(shè)置網(wǎng)頁的語言屬性（）和字符編碼（）。在標(biāo)簽中，可以添加網(wǎng)頁的標(biāo)題（）和其他元數(shù)據(jù)（標(biāo)簽）。在標(biāo)簽中，可以編寫網(wǎng)頁的內(nèi)容。
步驟二：使用語義化標(biāo)簽為了增強(qiáng)網(wǎng)頁的結(jié)構(gòu)和可讀性，應(yīng)盡量使用語義化標(biāo)簽。例如，標(biāo)簽用于網(wǎng)頁的標(biāo)題和導(dǎo)航欄，標(biāo)簽用于網(wǎng)頁的導(dǎo)航鏈接，和標(biāo)簽用于劃分網(wǎng)頁的內(nèi)容部分。
步驟三：插入多媒體使用、和
等標(biāo)簽插入多媒體內(nèi)容。例如，使用標(biāo)簽可以插入視頻文件，并設(shè)置其屬性（例如src、width、height）來指定視頻的來源和尺寸。
步驟四：繪制圖形和動(dòng)畫使用標(biāo)簽和JavaScript繪制圖形和動(dòng)畫。通過在標(biāo)簽中指定寬度和高度，并調(diào)用JavaScript函數(shù)繪制圖形，可以在網(wǎng)頁上顯示自定義的圖形和動(dòng)畫效果。
步驟五：使用本地存儲(chǔ)使用localStorage和sessionStorage等方法，在客戶端存儲(chǔ)數(shù)據(jù)。通過調(diào)用JavaScript的API，可以將數(shù)據(jù)存儲(chǔ)在瀏覽器中，并在需要時(shí)讀取和更新數(shù)據(jù)。
步驟六：優(yōu)化網(wǎng)頁性能使用HTML5的新功能來優(yōu)化網(wǎng)頁性能。例如，使用新的表單輸入類型和屬性可以在客戶端驗(yàn)證和收集用戶輸入數(shù)據(jù)，減少對(duì)服務(wù)器的請(qǐng)求和響應(yīng)時(shí)間。
現(xiàn)在，讓我們來了解一下HTML5和HTML的區(qū)別。
HTML5是HTML的第五個(gè)版本，是對(duì)以前的HTML版本進(jìn)行的改進(jìn)和擴(kuò)展。與HTML4相比，HTML5具有許多新的功能和語義化標(biāo)簽，使開發(fā)者能夠創(chuàng)建更現(xiàn)代、豐富和交互性的網(wǎng)頁。
以下是HTML5和HTML的一些區(qū)別：
1. 標(biāo)簽語義化：HTML5引入了許多新的語義化標(biāo)簽，如、、、等。這些標(biāo)簽增強(qiáng)了網(wǎng)頁的結(jié)構(gòu)和可讀性，有助于搜索引擎優(yōu)化和可訪問性。
2. 多媒體支持：HTML5內(nèi)置了對(duì)多媒體的支持，如和標(biāo)簽，可以在網(wǎng)頁上直接播放視頻和音頻文件。而在HTML4中，需要使用第三方插件（如Flash）來實(shí)現(xiàn)相同的功能。
3. Canvas繪圖：HTML5引入了元素，允許在網(wǎng)頁上通過JavaScript繪制圖形和動(dòng)畫。而在HTML4中，圖形和動(dòng)畫的創(chuàng)建通常依賴于第三方插件或JavaScript庫。
4. 本地存儲(chǔ)：HTML5提供了localStorage和sessionStorage等方法，在客戶端存儲(chǔ)數(shù)據(jù)。這使得網(wǎng)頁可以更快地加載和響應(yīng)用戶的操作。相比之下，HTML4需要通過服務(wù)器來存儲(chǔ)和獲取數(shù)據(jù)。
5. 表單增強(qiáng)：HTML5為表單提供了新的輸入類型和屬性，如日期、時(shí)間、顏色、URL等。這減少了對(duì)JavaScript和服務(wù)器的依賴，提高了用戶體驗(yàn)。
總結(jié)起來，HTML5相對(duì)于HTML4具有更多的功能和改進(jìn)，使得開發(fā)者可以創(chuàng)建更現(xiàn)代、豐富和互動(dòng)性的網(wǎng)頁。它提供了語義化標(biāo)簽、多媒體支持、Canvas繪圖、本地存儲(chǔ)和表單增強(qiáng)等功能，為網(wǎng)頁開發(fā)提供了更多的選擇和可能性。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
