-
讓品牌有溫度、有情感
專注品牌策劃15年
html設(shè)計(jì)個(gè)人網(wǎng)頁(yè)簡(jiǎn)單（html個(gè)人網(wǎng)站設(shè)計(jì)）
發(fā)布時(shí)間：2023-03-29 02:47:31
稿源：
創(chuàng)意嶺 閱讀：
88
當(dāng)前文章關(guān)鍵詞排名出租
大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于html設(shè)計(jì)個(gè)人網(wǎng)頁(yè)簡(jiǎn)單的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。
開(kāi)始之前先推薦一個(gè)非常厲害的Ai人工智能工具：開(kāi)始之前先推薦一個(gè)非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對(duì)話答疑等等
只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫(xiě)出的就越詳細(xì)，有微信小程序端、在線網(wǎng)頁(yè)版、PC客戶端
官網(wǎng)：https://ai.de1919.com
本文目錄:
計(jì)個(gè)人網(wǎng)頁(yè)簡(jiǎn)單（html個(gè)人網(wǎng)站設(shè)計(jì)）.jpg)
一、用HTML語(yǔ)言編寫(xiě)一個(gè)簡(jiǎn)單的個(gè)人網(wǎng)頁(yè)，
<html>
<head>
<title>我的個(gè)人網(wǎng)頁(yè)</title>
</head>
<body>
<a href="http://www.fudan.edu.cn">復(fù)旦大學(xué)</a><a href=mailto:name@host.com?subject="主題">寫(xiě)郵件給我們</a>
</body>
</html>
二、用HTML設(shè)計(jì)一個(gè)自我介紹的網(wǎng)頁(yè) 感謝
<style>.content>.name{font-size:16px; color:blue}
.home{font-size:18px; color:red}
#address{font-size:20px; color:gray}
.btn>a,.btn>input{color:green;display:block;width:120px;height:60px}
.btn>a:hover,.btn>input:hover{color:yellow;}
</style>
<DIV class="content" style="background:url('img.jpg')">
<div class="name">
我叫XXX
</div>
<div class="home">
我的家鄉(xiāng)XXX
</div>
<div id="address">
我在xxxx
</div>
<div class="btn">
<a>確定</a>
<input type="button" value="確定"/>
</div>
</DIV>
三、用html制作一個(gè)個(gè)人網(wǎng)頁(yè)要求有五個(gè)鏈接，每頁(yè)都有css格式
方法/步驟
1
CSS是由選擇器加聲明組成的。
比如：
h1{color:red;}
h1就是選擇器，意思是只要遇到h1，就使用該CSS的規(guī)則
color：red; :這個(gè)事聲明
color:這個(gè)是屬性
red:這個(gè)是值
2
OK，我們先來(lái)分析選擇器。
END
一.選擇器
1
選擇器的種類很多，各有各的作用。我們來(lái)一一講解。
標(biāo)簽選擇器
class選擇器
id選擇器
全局選擇器
組合選擇器
偽類選擇器
2
標(biāo)簽選擇器
顧名思義，HTML中有許多標(biāo)簽，而標(biāo)簽選擇器就是用來(lái)給標(biāo)簽直接申明樣式的，簡(jiǎn)單、實(shí)用、常用。
舉例：
p{color:red;}
只要是p標(biāo)簽，其P標(biāo)簽內(nèi)部的顏色，都是紅色。
如圖代碼
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無(wú)標(biāo)題文檔</title><style>p{ color:red;}</style></head><body><p>嘿嘿哦嘿嘿呀哦嘿嘿哦</p></body>
其中，<style>標(biāo)簽是樣式標(biāo)簽，請(qǐng)將CSS放在其中
（這部分內(nèi)容后續(xù)會(huì)介紹，這里只是先提一下）
3
看網(wǎng)頁(yè)效果
4
class選擇器
也叫做類選擇器，直接說(shuō)概念估計(jì)你也不明白，直接上例子吧。
舉例：
.alsp{color:red;}
這就是一個(gè)class選擇器，意思是有一種CSS的樣式，其名字是alsp，誰(shuí)想用誰(shuí)用。
看代碼：
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無(wú)標(biāo)題文檔</title><style type="text/css">.alsp{color:red;}</style></head><body><p class="alsp">嘿嘿哦嘿嘿呀哦嘿嘿哦</p><ol class="alsp"><li>嘿啥嘿</li><li>我想嘿嘿</li><li>專制各種不服</li></ol><p>世界為亡，死不投降</p></body>
5
看網(wǎng)頁(yè)效果
通過(guò).alsp定義一個(gè)class選擇器。
在后面的代碼中，哪個(gè)標(biāo)簽想用，就用class="alsp"去調(diào)用，就可以使用這件“衣服”來(lái)修飾自己了
6
ID選擇器
ID和class很像，但是和class有一個(gè)區(qū)別。class像姓名，兩個(gè)人是可以同名的，但是id像身份證，只有一個(gè)人可以使用。
例如：
#alsp{color:red;}
OK，上代碼：
#alsp{color:red;}</style></head><body><p id="alsp">嘿嘿哦嘿嘿呀哦嘿嘿哦</p><ol><li>嘿啥嘿</li><li>我想嘿嘿</li><li>專制各種不服</li></ol><p>世界為亡，死不投降</p></body>
7
看網(wǎng)頁(yè)效果
只能有一個(gè)標(biāo)簽使用該id，或者說(shuō)該標(biāo)簽專屬I(mǎi)D
8
全局選擇器
*{margin:0; padding:0;}
這個(gè)很簡(jiǎn)單，前面用個(gè)*來(lái)表示，整個(gè)網(wǎng)頁(yè)都會(huì)使用。這句話也是網(wǎng)頁(yè)基本都要添加的，什么意思呢？自己試試看吧。
9
組合選擇器
組合選擇，小編是非常喜歡使用的，原因無(wú)他，懶而已。他可以減少代碼量，并且方便、易讀。
不過(guò)組合選擇器的組合方式比較多，但也多很好理解。
1）群模式
比如：
h1{color:red; font-size:14px;}
p{color:red; font-size:14px;}
a{color:red; font-size:14px;}
這三個(gè)雖然標(biāo)簽不同，但是樣式是一模一樣的，所以，可以這樣寫(xiě)：
h1,p,a,{color:red; font-size:14px;}
2）繼承模式
比如：
.alsp li{color:red;}
<ul class=".alsp">
<li>fdf</li>
</ul>
li是在ul之中的，算是ul的后代。通過(guò).alsp li確定li是屬于調(diào)用alsp類選擇器里的li標(biāo)簽，其他的li標(biāo)簽并不會(huì)使用該樣式。
3）群模式（多元素并列選擇器）
其實(shí)也是一種特殊的群模式
p.alsp{color:red;}
<p class="alsp">p.alsp</p>
<a class="alsp">a.alsp</p>
alsp仍然是一種class選擇器，但是他只有在p的標(biāo)簽下被使用才生效。
所以，第一行生效，p.alsp字樣變紅，第二行不生效
10
偽類選擇器
“偽”字暴露了他的本質(zhì)，偽類選擇器并不像其他選擇器直接做用在標(biāo)簽上，但是他偏偏又是在標(biāo)簽上進(jìn)行使用，所以稱為“偽類選擇器”。
偽類的作用，是作用在狀態(tài)上。
一般情況正常運(yùn)行，只有當(dāng)達(dá)成條件的時(shí)候觸發(fā)，才會(huì)執(zhí)行偽類選擇器所代表是css樣式。
偽類選擇器很多，但許多都是我們這輩子估計(jì)都用不到的。
OK，偽類選擇器后續(xù)我會(huì)專門(mén)寫(xiě)一篇經(jīng)驗(yàn)介紹，有點(diǎn)小多，這里也就不多說(shuō)了。
END
二.在HTML中調(diào)用CSS
調(diào)用CSS的常用方法有3中
內(nèi)樣式
外樣式
行間樣式
內(nèi)樣式
直接看代碼，如圖所示
在<head></head>中，加入<style></style>,并將相關(guān)的CSS樣式放在其中
外樣式
直接看代碼，如圖所示：
<link rel="stylesheet" type="text/css" href="index.css">
這里，href為css的路徑。
意思是，你專門(mén)創(chuàng)建一個(gè)index.css的文件，里面放上CSS樣式，和內(nèi)樣式的語(yǔ)法一模一樣，只是專門(mén)找了一個(gè)文件存放而已。
4
行間樣式
行間樣式直接寫(xiě)在元素里面
例如：<p style="color:#900">嘿嘿哦嘿嘿呀哦嘿嘿哦</p>
直接在標(biāo)簽后面加上style
一般不要用，不過(guò)可以用來(lái)調(diào)試使用
四、怎么用html5制作個(gè)人主頁(yè)
總體把頁(yè)面一分為二，<header>是包含在<article>里面的，頁(yè)腳部分是單獨(dú)的一塊兒。大致結(jié)構(gòu)獲悉了后再?gòu)木植咳胧郑?lt;header>部分，有主標(biāo)題、副標(biāo)題、還有作者署名，前面我們講過(guò)，如果除了主標(biāo)題，還有一個(gè)副標(biāo)題，那可以把這兩個(gè)標(biāo)題寫(xiě)在一個(gè)<hgroup>元素中。如果除了主標(biāo)題之外，還有其他內(nèi)容，比如內(nèi)容摘要、發(fā)表時(shí)間、作者、圖片或者小標(biāo)題鏈接等，那就應(yīng)該把他們放在一個(gè) <header>元素中。
<header>
<hgroup>
<h1>給個(gè)人博客增加色彩元素提升網(wǎng)站用戶體驗(yàn)</h1>
<h4>網(wǎng)頁(yè)的色彩——決定用戶是否駐足停留的關(guān)鍵</h4>
</hgroup>
<p class="Byline">design by DanceSmile</p>
</header>
接下來(lái)是文章正文部分：
部分代碼：
<div class="Content">
<p>第一眼看到楊青個(gè)人博客網(wǎng)站的時(shí)候，如果你喜歡...</p>
...
</div>
正文當(dāng)中還有一幅插圖，html5新增加了插圖這個(gè)<figure>語(yǔ)義元素，<figcaption>不是只能包含文本，任何html元素都可以，比如鏈接、小圖標(biāo)。<figcaption>包含了對(duì)圖片的完整說(shuō)明，所以alt文本就顯得多于了，這種情況下，可以把<img>元素中的alt屬性刪除：
<figure>
<img src="/d/file/jstt/bj/2013-06-19/200e781ddaa1d92cc3996637d06c38b2.jpg">
<figcaption>圖片來(lái)源：騰訊CDC《淺析網(wǎng)頁(yè)色彩應(yīng)用》</figcaption>
</figure>
最后在把上面的代碼寫(xiě)在<article>里面。
<footer>部分只是一些簡(jiǎn)單的頁(yè)腳信息。
以上就是關(guān)于html設(shè)計(jì)個(gè)人網(wǎng)頁(yè)簡(jiǎn)單相關(guān)問(wèn)題的回答。希望能幫到你，如有更多相關(guān)問(wèn)題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。
推薦閱讀：
html與python交互（html與python結(jié)合）
開(kāi)槽機(jī)排行榜（開(kāi)槽機(jī)排行榜）
蘋(píng)果手機(jī)調(diào)振動(dòng)在哪找（蘋(píng)果手機(jī)如何調(diào)振動(dòng)量）
贛公網(wǎng)安備 50019002502384號(hào)
