-
讓品牌有溫度、有情感
專注品牌策劃15年
-
當(dāng)前位置：首頁 > 創(chuàng)意學(xué)院 > 景觀設(shè)計(jì) > 專題列表 > 正文
用html制作個人網(wǎng)頁代碼（用html制作個人網(wǎng)頁代碼的軟件）
發(fā)布時間：2023-04-08 06:24:23
稿源：
創(chuàng)意嶺 閱讀：
69
大家好！今天讓小編來大家介紹下關(guān)于用html制作個人網(wǎng)頁代碼的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。
創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，相關(guān)業(yè)務(wù)請撥打電話：175-8598-2043，或添加微信：1454722008
文章目錄列表:
頁代碼（用html制作個人網(wǎng)頁代碼的軟件）.jpg)
一、怎樣用HTML制作個人介紹網(wǎng)頁？
你無須去記復(fù)雜的HTML語言，你可以用Netscape4.0或者WORD7.0,我用的是Frontpage.打開Netscape,在file菜單里選Edit
Page,便可以制作了.文字的處理基本跟Word沒什么兩樣,關(guān)鍵是插入圖片和產(chǎn)生鏈接.我們先做關(guān)于你自我介紹的一頁，你先寫上“大家好，我是superboy，下面是我的照片：”這時要放圖片了，只須點(diǎn)擊Insert菜單，選取Image,在Choosefile里選取你的圖象文件即可，然后把這個文件保存為myself.html文件，放在myself的目錄下。好，現(xiàn)在必須做封面了，你在封面寫：“歡迎來到superboy的主頁”以下是“自我介紹，我的愛好，我的工作”。你的自我介紹要鏈接到下一頁去，你只須用鼠標(biāo)選“自我介紹”后按鼠標(biāo)右鍵，再選createlink，然后再選你myself目錄下的myself.html，就將“自我介紹”鏈接到下一頁了，以后在瀏覽器中一按，就可以跳到鑲有你靚照的頁面啦。在你的封面做好了所有鏈接和圖片后，記住你必須將這一頁保存為index.htm(有的主機(jī)要求必須為index.html),因?yàn)榫W(wǎng)頁默認(rèn)的主頁名稱是index.制作主頁其實(shí)很簡單，只要多實(shí)際制作，工多藝熟。還可以拿來主義，在網(wǎng)上看到什么好的主頁，用另存為功能保存為.html格式的文件，細(xì)細(xì)研究人家是如何做的。還可以借用網(wǎng)頁模版來搞，我的就是~~~~~~網(wǎng)頁制作網(wǎng)址大全http://www.soww.com/page/060.htm參考資料：http://xiaocun6589.go.nease.net/in/wangye%20zhizuo.htm參考資料：http://zhidao.baidu.com/question/5015128.html二、怎么用html5制作個人主頁
總體把頁面一分為二，<header>是包含在<article>里面的，頁腳部分是單獨(dú)的一塊兒。大致結(jié)構(gòu)獲悉了后再從局部入手，<header>部分，有主標(biāo)題、副標(biāo)題、還有作者署名，前面我們講過，如果除了主標(biāo)題，還有一個副標(biāo)題，那可以把這兩個標(biāo)題寫在一個<hgroup>元素中。如果除了主標(biāo)題之外，還有其他內(nèi)容，比如內(nèi)容摘要、發(fā)表時間、作者、圖片或者小標(biāo)題鏈接等，那就應(yīng)該把他們放在一個 <header>元素中。
<header>
<hgroup>
<h1>給個人博客增加色彩元素提升網(wǎng)站用戶體驗(yàn)</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元素都可以，比如鏈接、小圖標(biāo)。<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>部分只是一些簡單的頁腳信息。
三、需要一份html教程的網(wǎng)頁制作，主題是我的個人網(wǎng)頁，
這是我在大學(xué)學(xué)的知識
給你借鑒一下 ，希望對你有幫助
網(wǎng)頁設(shè)計(jì)教程
<html>文字操作（一）
1、段落 <p>……</p>
在dreamweaver設(shè)計(jì)界面中，enter（回車）即為另起一段。
2、換行 <br/>
在dreamweaver設(shè)計(jì)界面中，shift+enter即為另起一段。
3、標(biāo)題1~6 <h1>……</h1>
標(biāo)題1最大，依次變小。
4、空格:
Dreamweaver 只允許一次空格，如果需要使用連續(xù)空格，則需要設(shè)置，或使用 ；
或使用快捷鍵：ctrl+shift+space（空格鍵）
5、水平線 <hr>
size:水平線的粗細(xì)
width:長度
align:對齊方式
<htlm>文字操作（二）
一、幾個文字特殊效果
1、加粗<b></b> <strong></strong>
2、傾斜<i></i> <em></em>
3、上標(biāo)<sup></sup>（適合用代碼來實(shí)現(xiàn)，設(shè)計(jì)中無法完成）
4、下標(biāo)<sub></sub>（適合用代碼來實(shí)現(xiàn)，設(shè)計(jì)中無法完成）
隨著css的逐漸普及，文字的效果都更多的通過css來實(shí)現(xiàn)，以上的幾個標(biāo)簽作為了解即可。
二、文字列表
1、無序列表
無序列表有兩個標(biāo)簽<ul>和<li>
<ul>
<li>CSS教程</li>
<li>DOM教程</li>
<li>XML教程</li>
<li>Flash教程</li>
</ul>
2、有序列表
有序列表有兩個標(biāo)簽<ol>和<li>
<ol>
<li>CSS教程</li>
<li>DOM教程</li>
<li>XML教程</li>
<li>Flash教程</li>
</ol>
圖片
一、如何獲取圖像
最好的途徑是通過互聯(lián)網(wǎng)
二、使用設(shè)計(jì)界面插入圖像
1、菜單（一個圖片屬性：替換文字）
2、工具欄
3、拖曳
三、圖像格式擴(kuò)展閱讀：
http://blog.sina.com.cn/s/blog_45ac0d0a010005d8.html
JPEG圖像、GIF圖像、PNG圖像
四、代碼
<img src=" " width=" " height=" " alt=" "/>
一、超級鏈接的基本知識
1、含義：實(shí)現(xiàn)網(wǎng)頁之間的跳轉(zhuǎn)和聯(lián)系
2、分類：
絕對鏈接 http://www.baidu.com
相對鏈接 在同一站點(diǎn)不同位置之間的鏈接
二、三種常見的超級鏈接
1、文字鏈接<a href="http://www.baidu.com">百度</a>
2、圖像鏈接
3、圖像熱點(diǎn)鏈接
===============
還有不是太常用的鏈接
1、空連接 <a href="#">空連接</a>
2、錨鏈接:在同一頁面的不同位置跳轉(zhuǎn)
三、鏈接的屬性
鏈接目標(biāo) <a href="http://www.baidu.com" target="_blank">百度</a>
表單設(shè)計(jì)
一、設(shè)計(jì)界面
1、單元格間距
2、單元格邊距
二、代碼
1、從屬關(guān)系：表格由行組成，行由單元格組成。
表格：<table>……</table>
行：<tr>……</tr>
單元格：<td>……</td>
2、<table>標(biāo)簽的屬性
bgcolor:背景色
cellspacing:表格的單元格間距（間距）
cellpadding:表格的單元格邊距（填充）
文字占據(jù)一行<div></div>
文字不占據(jù)一行<span></span>
、html引入css的幾種方法
1、鏈接式
將css代碼寫在一個獨(dú)立的文件中，文件的擴(kuò)展名為.css。然后在html網(wǎng)頁中使用<link/>標(biāo)簽將外部css文件放在<head></head>之間。舉例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<link href="tp.css" rel="stylesheet" type="text/css">
</head>
2、嵌入式
將Css代碼寫在<head></head>之間，并且用<style></style>包含起來，如果考慮到兼容性，可以再使用<!-- --> 將css代碼包含其中。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
<!--
p {
font-family: "楷體_GB2312";
font-size: 18px;
}
-->
</style>
</head>
1．標(biāo)簽選擇器：
就是網(wǎng)頁元素本身，所有的XHTML框架中的標(biāo)簽都可以作為CSS樣式的選擇器，如定義段落樣式，我們可以選擇P標(biāo)簽的名稱，即把P作為選擇器。P{/*定義段落屬性*/}。如果定義了標(biāo)簽樣式，則整個網(wǎng)頁中使用了該標(biāo)簽都會應(yīng)用這個樣式。一般應(yīng)用在統(tǒng)一文檔的某個元素的顯示樣式中。
2．ID選擇器：
它是唯一的，網(wǎng)頁中不同的元素它的ID是不一樣的。而且一個元素它只能應(yīng)用一個ID。因?yàn)槿绻覀兪褂肑avascript來控制網(wǎng)頁元素的時候它是通過ID來實(shí)現(xiàn)的，在這種情況下就無法正常工作了。它在定義的時候用#開始，它在應(yīng)用的時候用id=””。它的名稱由設(shè)計(jì)者來確定。
3． 類選擇：
它的名稱也是由設(shè)計(jì)者來確定的，它在定義的時候用點(diǎn)號開始，應(yīng)用的時候用class=“”；它與ID選擇器所不同的是它具有一對多的特性而ID是一對一的特性。也就是說一個類選擇器它可以應(yīng)用到多個網(wǎng)頁元素中而且一個元素可以應(yīng)用多個類，一個元素也可以應(yīng)用兩個類樣式，中間用空格分開，但不能是三個或者更多。在同等條件下，ID具有比class更高的優(yōu)先權(quán)。
1、復(fù)雜類選擇器
p.one{color:red}
實(shí)例：
<style>
.one{color:red;}
p.two{color:blue;}
</style>
.one可以用于各種標(biāo)簽；而。two只能用于p標(biāo)簽。
2、后代選擇器
div p{color:#00FF00}
例子：
<div>
<h1>這是一個標(biāo)題。</h1>
<p>我是一個兵。</p>
</div>
3、組合選擇器（集體聲明）
p，h1，.one{color:red}
4、通用選擇器
對html文檔的所有元素進(jìn)行控制。
*{color：red；}
5、偽類選擇器
a:link;hover;visited;active
或者：a.one:link;a#two:link
當(dāng)用css定義鏈接的各種狀態(tài)時，一定要注意其書寫順序，即：:link :visited :hover :active。
如果不按照該順序書寫可能無法達(dá)到自己希望的效果。
一、屬性
1.大小 font-size
大小就是字號，可以直接填入數(shù)字，然后選擇單位。
2.樣式
font-style
設(shè)置文字的外觀，包括正常、斜體、偏斜體。
3.行高 line-height
這項(xiàng)設(shè)置在網(wǎng)頁制作種很常用。設(shè)置行高，可以選擇“正常”，讓計(jì)算機(jī)自動調(diào)整行高，也可以使用數(shù)值和單位結(jié)合的形式自行設(shè)置。需要注意的是，單位應(yīng)該和文字的單位一致，行高的數(shù)值是包括字號數(shù)值在內(nèi)的。例如，文字設(shè)置為12pt，如果要創(chuàng)建一倍行距，則行高應(yīng)該為24pt。
4.修飾 font-decoration
文本的特殊樣式：上下劃線、刪除線、閃爍（IE不支持此效果）
5.粗細(xì) font-weight
設(shè)置文字的加粗還是變細(xì)的效果。
6.顏色 color
設(shè)置文字的色彩。
顏色的表示方法常見的有RGB模式、十六進(jìn)制模式和名稱模式。
7.字體 font-family
設(shè)置文字的字體，注意多個字體的選擇。
8.文本對齊 text-align
設(shè)置文本的水平對齊方式。 這里也不僅僅局限于文字，泛指所包含的內(nèi)容。
9.文字縮進(jìn) text-indent
這是最重要的項(xiàng)目。中文文字的首行縮進(jìn)就是由它來實(shí)現(xiàn)的。首先填入具體的數(shù)值，然后選擇單位。文字的縮進(jìn)和字號要保持統(tǒng)一。如字號為12px，像創(chuàng)建兩個中文自的縮進(jìn)效果，文字縮進(jìn)就應(yīng)該為18px。
二、屬性值：css中的單位
1、大小單位：px和em
2、顏色單位：red和#00ff00
三、css背景
1、背景色：background-color: （5-1）
2、背景圖片：background-image:url(^);（5-3）
3、背景圖片的重復(fù)方式：background-repeat：（5-5）
4、背景圖片的位置：background-position：top right；（30% 70%;水平位置 垂直位置）(300px 30px;)（5-8）
5、背景圖片的固定與否：background-attachment：scroll；（fixed；）背景是否與網(wǎng)頁內(nèi)容一起滾動。（5-10）
fixed：背景不動，內(nèi)容動；scroll：背景和內(nèi)容一起滾動
6、背景圖片的綜合樣式：background：blue url(……) no-repeat fixed 5px 10px;
7、列表樣式：list-style：
四、什么是HTML代碼 ? 怎么制作HTML代碼?
HTML代碼 是超文本標(biāo)記語言文本，可以用文本編輯器制作HTML代碼 ，這里以記事本為例。
1、右擊電腦桌面任意空白區(qū)域，在展開的菜單中點(diǎn)擊“新建”按鈕，然后點(diǎn)擊“文本文件”按鈕：
2、打開新建的文本文件，在里面輸入一些HTML基礎(chǔ)的代碼，然后同時按住鍵盤上的“Ctrl”鍵+“S”鍵將文件保存：
3、用鼠標(biāo)將文件選中，按下鍵盤上的“F2”鍵，然后將文件格式從“txt”改成“html”，這時一個簡單的HTML代碼就制作好了：
以上就是小編對于用html制作個人網(wǎng)頁代碼問題和相關(guān)問題的解答了，如有疑問，可撥打網(wǎng)站上的電話，或添加微信。
推薦閱讀：
html網(wǎng)頁制作案例（用html做個簡單的網(wǎng)站首頁）
用html做一個5個頁面的網(wǎng)頁（用html做一個5個頁面的網(wǎng)頁怎么做）
用html制作個人網(wǎng)頁代碼（用html制作個人網(wǎng)頁代碼的軟件）
贛公網(wǎng)安備 50019002502384號
