整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
用HTML怎么制作網頁呢?靜態網站的編寫主要是用HTML DIV+CSS JS等來完成頁面的排版設計 ? ,常用的網頁設計軟件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的還是DW，當然不同軟件寫出的前端Html5代碼都是一致的。
一、網站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩定的浮動網頁布局結構。
二、網站程序方面：計劃采用最新的網頁編程語言HTML5+CSS3+JS程序語言完成網站的功能設計。并確保網站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網站的效果。
三、網站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網頁風格的圖片，然后使用PS做出適合網頁尺寸的圖片。
四、網站文件方面：網站系統文件種類包含：html網頁結構文件、css網頁樣式文件、js網頁特效文件、images網頁圖片文件;
五、網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟件(如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作)。 其中： (1) html文件包含：其中index.html是首頁、其他html為二級頁面; (2) css文件包含：css全部頁面樣式,文字滾動, 圖片放大等; (3) js文件包含：js實現動態輪播特效, 表單提交, 點擊事件等等(個別網頁中運用到js代碼)。
更多關于“用HTML怎么制作網頁呢?”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓服務經驗，采用全程面授高品質、高體驗培養模式，擁有國內一體化教學管理及學員服務，助力更多學員實現高薪夢想。
在現代網頁設計中，個人主頁是一個展示個人信息、技能、事件等的重要載體。為了吸引訪客的注意力并提供良好的用戶體驗，設計師通常會運用各種技巧和效果來增加頁面的吸引力。本文將介紹如何使用CSS創建一個驚嘆的個人主頁介紹卡片，展示獨特魅力；
首先，需要定義基本的HTML結構來容納個人主頁介紹卡片；
這里外層使用一個div包裹，里面使用三個<div>元素作為包裹容器布局，并在其中添加所需的圖像、內容和按鈕等：
<div class="card">
<div class="box">
<div class="img_box">
<video
src="./assets/video.mp4"
muted
autoplay
loop
/>
</div>
</div>
<div class="box">
<div class="content">
<h2>
Alexa
<br>
<span>
Professional Artist
</span>
</h2>
<ul>
<li>
Posts
<span>22</span>
</li>
<li>
Followers
<span>999+</span>
</li>
<li>
Following
<span>7</span>
</li>
</ul>
<button>Follow</button>
</div>
</div>
<div class="circle">
<div class="img_box">
<img src="./assets/user.jpg" alt="">
</div>
</div>
</div>外層是card容器，視頻和文本內容區域是上下布局的，分別使用box容器包裹，最后是circle容器包裹頭像在定位在中間左邊超出；
注：
video設置屬性：靜音(muted)可實現自動播放(autoplay)，接著設置循環播放(loop)；
img>和video>的父容器是一個類名img_box；
接下來，我們將使用CSS來為個人主頁介紹卡片添加樣式。以下是一些關鍵的樣式屬性和技巧，可以使卡片看起來更加漂亮和吸引人；
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--clr: #083d41
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: var(--clr);
}
.card {
background-color: var(--clr);
position: relative;
width: 320px;
height: 430px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* 先把容器基本樣式調整一下 */
.card .box {
background-color: tomato;
position: relative;
width: 110%;
height: 200px;
/* 文本內容區域圓角 */
border-radius: 20px;
}
/* 頭像容器則使用定位布局 */
.card .circle {
width: 180px;
height: 180px;
position: absolute;
left: -70px;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
border: 10px solid var(--clr);
}
/* 調整img和video共有的父容器樣式 */
.card .box .img_box,
.card .circle .img_box {
position: absolute;
inset: 0;
overflow: hidden;
/* img的圓角 */
border-radius: 50%;
}
.card .box .img_box {
/* video的圓角 */
border-radius: 15px;
}
/* 調整圖片和視頻的樣式 */
.card .box .img_box video,
.card .circle .img_box img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}調整card下的第一個box容器樣式，也就是包裹視頻的容器：
.card .box:nth-child(1)::before {
content: "";
width: 20px;
height: 20px;
background-color: transparent;
position: absolute;
z-index: 10;
top: 106px;
left: -1px;
border-bottom-left-radius: 20px;
box-shadow: -6px 6px var(--clr);
}
/* 樣式同before類似，注意定位樣式 */
.card .box:nth-child(1)::after {
content: "";
width: 20px;
height: 20px;
background-color: transparent;
position: absolute;
z-index: 10;
bottom: -1px;
left: 105px;
border-bottom-left-radius: 20px;
box-shadow: -6px 6px var(--clr);
}目前添加樣式效果圖，可以在調試階段更改明顯色彩用于調整距離、位置等；
調整card下的第二個box容器樣式，也就是包含文字信息的容器：
.card .box:nth-child(2) {
background-color: #fff;
width: 100%;
height: 220px;
}
.card .box:nth-child(2)::before {
content: "";
width: 20px;
height: 20px;
background-color: transparent;
position: absolute;
z-index: 10;
bottom: 106px;
left: -1px;
border-top-left-radius: 20px;
box-shadow: -6px -6px var(--clr);
}
.card .box:nth-child(2)::after {
content: "";
width: 20px;
height: 20px;
background-color: transparent;
position: absolute;
z-index: 10;
top: -1px;
left: 109px;
border-top-left-radius: 20px;
box-shadow: -6px -6px var(--clr);
}
.card .box .content {
position: absolute;
inset: 0;
padding: 30px 10px 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
/* 姓名和Title樣式 */
.card .box .content h2 {
width: 100%;
padding-left: 120px;
text-transform: uppercase;
letter-spacing: 0.1em;
line-height: 1.1em;
font-size: 1.15em;
font-weight: 600;
color: #333;
}
.card .box .content h2 span {
letter-spacing: 0.05em;
font-size: 0.75em;
font-weight: 400;
color: tomato;
text-transform: initial;
}
/* 列表樣式 */
.card .box .content ul {
position: relative;
top: 15px;
width: 100%;
padding: 0 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.card .box .content ul li {
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 10px;
font-size: 0.85em;
font-weight: 500;
color: #999;
}
.card .box .content ul li:not(:last-child)
{
border-right: 1px solid #ccc;
}
.card .box .content ul li span{
font-size: 1.65em;
color: #333;
}
/* 按鈕樣式 */
.card .box .content button {
position: relative;
top: 25px;
padding: 8px 30px;
border: none;
outline: none;
background-color: #03a9f4;
border-radius: 30px;
color: #fff;
font-size: 1em;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 500;
cursor: pointer;
border: 5px solid var(--clr);
box-shadow: 0 0 0 10px #fff;
transition: .5s;
}
.card .box .content button:hover {
letter-spacing: 0.5em;
background-color: #ff3d7f;
}由于按鈕的圓角與文本內容卡片的交界處看上去顯得有些過于突兀了； 所以現在把它們的交界處優化成弧形，樣式類似box的偽元素，這里也給按鈕創建兩個偽元素，用于優化兩邊的交界處：
.card .box .content button::before {
content: "";
width: 20px;
height: 20px;
background-color: transparent;
position: absolute;
top: 23px;
left: -29px;
border-top-right-radius: 20px;
box-shadow: 5px -7px #fff;
}
.card .box .content button::after {
content: "";
width: 20px;
height: 20px;
background-color: transparent;
position: absolute;
top: 23px;
right: -29px;
border-top-left-radius: 20px;
box-shadow: -5px -7px #fff;
}除了基本樣式之外，還進一步優化個人主頁介紹卡片的細節。一些可選的技巧包括：
通過運用CSS的各種樣式屬性和技巧，我們可以輕松地創建漂亮的個人主頁介紹卡片。這些卡片不僅能夠有效地展示個人信息和技能，還能夠吸引訪客的注意力并提供良好的用戶體驗。記得嘗試不同的樣式和效果來定制你自己獨特的個人主頁卡片！
CSS創作個人主頁介紹卡片，展示獨特魅力
原文鏈接：https://juejin.cn/post/7260709771870060603
對于前端來說，HTML 都是最基礎的內容。
今天，我們來了解一下 HTML 和網頁有什么關系，以及與 DOM 有什么不同。通過本講內容，你將掌握瀏覽器是怎么處理 HTML 內容的，以及在這個過程中我們可以進行怎樣的處理來提升網頁的性能，從而提升用戶的體驗。
不知你是否有過這樣的體驗：當打開某個瀏覽器的時候，發現一直在轉圈，或者等了好長時間才打開頁面……
此時的你，會選擇關掉頁面還是耐心等待呢？
這一現象，除了網絡不穩定、網速過慢等原因，大多數都是由于頁面設計不合理導致加載時間過長導致的。
我們都知道，頁面是用 HTML/CSS/JavaScript 來編寫的。
HTML由一系列的元素組成，通常稱為HTML元素。HTML 元素通常被用來定義一個網頁結構，基本上所有網頁都是這樣的 HTML 結構：
<html>
<head></head>
<body></body>
</html>其中：
HTML 中的元素特別多，其中還包括可用于 Web Components 的自定義元素。
前面我們提到頁面 HTML 結構不合理可能會導致頁面響應慢，這個過程很多時候體現在<script>和<style>元素的設計上，它們會影響頁面加載過程中對 Javascript 和 CSS 代碼的處理。
因此，如果想要提升頁面的加載速度，就需要了解瀏覽器頁面的加載過程是怎樣的，從根本上來解決問題。
瀏覽器在加載頁面的時候會用到 GUI 渲染線程和 JavaScript 引擎線程（更詳細的瀏覽器加載和渲染機制將在第 7 講中介紹）。其中，GUI 渲染線程負責渲染瀏覽器界面 HTML 元素，JavaScript 引擎線程主要負責處理 JavaScript 腳本程序。
由于 JavaScript 在執行過程中還可能會改動界面結構和樣式，因此它們之間被設計為互斥的關系。也就是說，當 JavaScript 引擎執行時，GUI 線程會被掛起。
以網易云課堂官網為例，我們來看看網頁加載流程。
（1）當我們打開官網的時候，瀏覽器會從服務器中獲取到 HTML 內容。
（2）瀏覽器獲取到 HTML 內容后，就開始從上到下解析 HTML 的元素。
（3）<head>元素內容會先被解析，此時瀏覽器還沒開始渲染頁面。
我們看到<head>元素里有用于描述頁面元數據的<meta>元素，還有一些<link>元素涉及外部資源（如圖片、CSS 樣式等），此時瀏覽器會去獲取這些外部資源。除此之外，我們還能看到<head>元素中還包含著不少的<script>元素，這些<script>元素通過src屬性指向外部資源。
（4）當瀏覽器解析到這里時（步驟 3），會暫停解析并下載 JavaScript 腳本。
（5）當 JavaScript 腳本下載完成后，瀏覽器的控制權轉交給 JavaScript 引擎。當腳本執行完成后，控制權會交回給渲染引擎，渲染引擎繼續往下解析 HTML 頁面。
（6）此時<body>元素內容開始被解析，瀏覽器開始渲染頁面。
在這個過程中，我們看到<head>中放置的<script>元素會阻塞頁面的渲染過程：把 JavaScript 放在<head>里，意味著必須把所有 JavaScript 代碼都下載、解析和解釋完成后，才能開始渲染頁面。
到這里，我們就明白了：如果外部腳本加載時間很長（比如一直無法完成下載），就會造成網頁長時間失去響應，瀏覽器就會呈現“假死”狀態，用戶體驗會變得很糟糕。
因此，對于對性能要求較高、需要快速將內容呈現給用戶的網頁，常常會將 JavaScript 腳本放在<body>的最后面。這樣可以避免資源阻塞，頁面得以迅速展示。我們還可以使用defer/async/preload等屬性來標記<script>標簽，來控制 JavaScript 的加載順序。
百度首頁
對于百度這樣的搜索引擎來說，必須要在最短的時間內提供到可用的服務給用戶，其中就包括搜索框的顯示及可交互，除此之外的內容優先級會相對較低。
瀏覽器在渲染頁面的過程需要解析 HTML、CSS 以得到 DOM 樹和 CSS 規則樹，它們結合后才生成最終的渲染樹并渲染。因此，我們還常常將 CSS 放在<head>里，可用來避免瀏覽器渲染的重復計算。
我們知道<p>是 HTML 元素，但又常常將<p>這樣一個元素稱為 DOM 節點，那么 HTML 和 DOM 到底有什么不一樣呢？
根據 MDN 官方描述：文檔對象模型（DOM）是 HTML 和 XML 文檔的編程接口。
也就是說，DOM 是用來操作和描述 HTML 文檔的接口。如果說瀏覽器用 HTML 來描述網頁的結構并渲染，那么使用 DOM 則可以獲取網頁的結構并進行操作。一般來說，我們使用 JavaScript 來操作 DOM 接口，從而實現頁面的動態變化，以及用戶的交互操作。
在開發過程中，常常用對象的方式來描述某一類事物，用特定的結構集合來描述某些事物的集合。DOM 也一樣，它將 HTML 文檔解析成一個由 DOM 節點以及包含屬性和方法的相關對象組成的結構集合。
我們常見的 HTML 元素，在瀏覽器中會被解析成節點。比如下面這樣的 HTML 內容：
<html>
<head>
<title>標題</title>
</head>
<body>
<a href='xx.com'>我的超鏈接</a>
<h1>頁面第一標題</h1>
</body>
</html>打開控制臺 Elements 面板，可以看到這樣的 HTML 結構，如下圖所示：
在瀏覽器中，上面的 HTML 會被解析成這樣的 DOM 樹，如下圖所示：
我們都知道，對于樹狀結構來說，常常使用parent/child/sibling等方式來描述各個節點之間的關系，對于 DOM 樹也不例外。
舉個例子，我們常常會對頁面功能進行抽象，并封裝成組件。但不管怎么進行整理，頁面最終依然是基于 DOM 的樹狀結構，因此組件也是呈樹狀結構，組件間的關系也同樣可以使用parent/child/sibling這樣的方式來描述。同時，現在大多數應用程序同樣以root為根節點展開，我們進行狀態管理、數據管理也常常會呈現出樹狀結構。
我們知道，瀏覽器中各個元素從頁面中接收事件的順序包括事件捕獲階段、目標階段、事件冒泡階段。其中，基于事件冒泡機制，我們可以實現將子元素的事件委托給父級元素來進行處理，這便是事件委托。
如果我們在每個元素上都進行監聽的話，則需要綁定三個事件;(假設頁面上有a,b,c三個兄弟節點)
function clickEventFunction(e) {
console.log(e.target === this); // logs `true`
// 這里可以用 this 獲取當前元素
}
// 元素a,b,c綁定
element2.addEventListener("click", clickEventFunction, false);
element5.addEventListener("click", clickEventFunction, false);
element8.addEventListener("click", clickEventFunction, false);使用事件委托，可以通過將事件添加到它們的父節點，而將事件委托給父節點來觸發處理函數：
function clickEventFunction(event) {
console.log(e.target === this); // logs `false`
// 獲取被點擊的元素
const eventTarget = event.target;
// 檢查源元素`event.target`是否符合預期
// 此處控制廣告面板的展示內容
}
// 元素1綁定
element1.addEventListener("click", clickEventFunction, false);這樣能解決什么問題呢？
常見的使用方式主要是上述這種列表結構，每個選項都可以進行編輯、刪除、添加標簽等功能，而把事件委托給父元素，不管我們新增、刪除、更新選項，都不需要手動去綁定和移除事件。
如果在列表數量內容較大的時候，對成千上萬節點進行事件監聽，也是不小的性能消耗。使用事件委托的方式，我們可以大量減少瀏覽器對元素的監聽，也是在前端性能優化中比較簡單和基礎的一個做法。
注意:
我們了解了 HTML 的作用，以及它是如何影響瀏覽器中頁面的加載過程的，同時還介紹了使用 DOM 接口來控制 HTML 的展示和功能邏輯。我們了解了DOM解析事件委托等相關概念。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
