怎么擁有自己設計的簡單個人網(wǎng)站（超細節(jié)）
時間：2022-08-03 11:42:01 | 來源：網(wǎng)站運營
時間：2022-08-03 11:42:01 來源：網(wǎng)站運營
大家好，大家應該知道我喜歡折騰一下有意思的東西。因為探索的過程是十分有趣的，而興趣又是最好的老師。我很享受這種感覺，啊~好舒服~
啪很久之前呢，我也想自己做一個網(wǎng)頁，并不是要實現(xiàn)什么很強的功能，而是感覺好玩，有意思。折騰了很久的時間，包括在剛開始的時候在“七牛云”平臺搗鼓。因為本人是機械專業(yè)，對于計算機技術(shù)，有交集的也就是機械控制方面的單片機編碼，PLC和機床指令這些，更何況當時還是很年輕，所以啥也沒整出來。
這幾年慢慢的接觸到了計算機技術(shù)，接著呢用某東會員聯(lián)名卡在本站書庫里自己看了看網(wǎng)頁的相關技術(shù)，還有就是自己查閱的資料。最后我給設計了一個超級簡單的靜態(tài)網(wǎng)頁，掛在了網(wǎng)上。
大神勿笑，我是純小白網(wǎng)頁效果圖是這樣的：
效果圖這里里面包括了以下6個知識點（很簡單，我是小白都會了）：
- 網(wǎng)頁的名稱顯示
- 網(wǎng)頁的標題顯示
- 網(wǎng)頁內(nèi)容的居左、中、右
- 網(wǎng)頁文字的刪除線
- 超鏈接
- 插入居中圖片
代碼有點長：
<!DOCTYPE html>
<html>
<head>
<title>簡介代碼測試</title>
</head>
<body>
<h1>我的測試網(wǎng)頁</h1>
<p align="center">Hello 大家好</p>
<p style="text-decoration: line-through;">我是多余的，但是這個也是知識點，需要記下來哦 ^_^</p>
<p align="center">我是麋鹿，這是我的個人網(wǎng)站。</p>
<p>很高興你來到這里, 你可以在以下的網(wǎng)站找到我</p>
<a href="
https://www.zhihu.com/people/mi-lu-de-mi-lu-77-91" target="_blank">本站</a>
<p align="center">
<img src="
https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1006013113,2872893823&fm=26&gp=0.jpg" />
</p>
</body>
</html>
首先給大家說一下HTML文檔的基本的骨架（也就是基本的格式）：
<html>
<head>
<title>網(wǎng)頁的名稱</title>
</head>
<body>
正文
</body>
</html>
上面的從<html>到</html>之間是代表這是HTML文檔，所有的內(nèi)容都要在其中。
<head>到</head> 放置定義
<title>到</title>標識網(wǎng)頁文件的標題
<body>到</body> 其中放置正文
之前6個知識點的講解：
1.網(wǎng)頁名稱的顯示------>指的是網(wǎng)頁打開后下面圖片顯示的
例：<title>簡介代碼測試<title>
按照你的需要可以在上面的代碼處更改<title><title>之間的內(nèi)容
2.網(wǎng)頁的標題顯示例：<h1>我的測試網(wǎng)頁</h1>
一般我們在網(wǎng)頁能看到的內(nèi)容都是在<body></body>之中
所以將 <h1>我的測試網(wǎng)頁</h1> 放在其中
而h1代表的是一級標題，很多的新手教程都會給大家介紹。當然有h1就會有h2、h3、h4、h5。<>和</>不能忘記。
3.網(wǎng)頁內(nèi)容的居左、中、右例：<p align="center">Hello 大家好</p>
在這其中<p></p>是段落表示，代表中間的"Hello 大家好"自己獨占一個段落，與上面的文字保持一定的距離。
前面的<p>里面可以添加對于段落的設置。
align="center"是設置該段落居中對齊
align="left"是居左對齊
align="right"居右對齊
4.網(wǎng)頁文字的刪除線例：<p style="text-decoration: line-through;">我是多余的，但是這個也是知識點，需要記下來哦 ^_^</p>
在上面的知識點3上面介紹了
前面的<p>里面可以添加對于段落的設置在段落里面的文字中添加一個刪除線，使用的命令是
style="text-decoration: line-through;"
5.超鏈接例：<a href="
https://www.zhihu.com/people/mi-lu-de-mi-lu-77-91" target="_blank">本站</a>
超鏈接的格式：<a href="
你設置的網(wǎng)頁">
超鏈接文字內(nèi)容</a>
我們看到上面的還有一個修飾，是 target="_blank"這個修飾的意思是點擊后在新的標簽頁面打開超鏈接指向的網(wǎng)站。
6.插入居中圖片例：<p align="center">
<img src="
https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1006013113,2872893823&fm=26&gp=0.jpg" />
</p>
插入圖片的指令是：<img src="
圖片地址" />但是這樣插入后圖片是默認靠左的，我們需要的是居中顯示。
我查了很多的資料，很復雜，對我這個新手超級不友好。這時候我靈機一動，能不能把圖片放到一個段落中，然后設置段落格式。嘿嘿我真是個小機靈鬼~ 啪
然后就套了一個（把圖片放在段落中），指令如下：
<p align="center"><img src="
圖片地址" /></p>
編寫軟件：記事本、瀏覽器改后綴就可以寫在文末：有些東西不你不要怕自己學不會，可能你就是缺少了去學的勇氣。
很喜歡《瑯琊榜》里梅長蘇的一句話：“有些事，你不去做‘怎么知道你不行呢？”
在線咨詢