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