1.練習(xí)1.1代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>這是我第一個前端練習(xí)網(wǎng)頁</title>
</head>
<body>
<a name="top" id="top"></a>
<center><h1>這是我的個人博客</h1></center>
<hr/>
<center><h2>東風破</h2></center>
<center><a >周杰倫</a></center>
<center>
<p>
一盞離愁孤 燈佇立在窗口<br/>
我在門后 假裝你人還沒走<br/>
舊地如重游 月圓更寂寞<br/>
夜半清醒的燭火 不忍苛責我<br/>
一壺漂泊 浪跡天涯難入喉<br/>
你走之后 酒暖回憶思念瘦<br>
水向東流 時間怎么偷<br/>
花開就一次成熟 我卻錯過<br/>
誰在用琵琶彈奏 一曲東風破<br/>
歲月在墻上剝落 看見小時候<br/>
猶記得那年我們都還很年幼
而如今琴聲幽幽 我的等候你沒聽過<br/>
<center><img src="1.1.jpg" alt="周杰倫照片"/></center>
誰在用琵琶彈奏 一曲東風破<br/>
楓葉將故事染色 結(jié)局我看透<br/>
籬笆外的古道 我牽著你走過<br/>
荒煙蔓草的年頭 就連分手都很沉默<br/>
一壺漂泊 浪跡天涯難入喉<br/>
你走之后 酒暖回憶思念瘦<br/>
水向東流 時間怎么偷<br/>
花開就一次成熟 我卻錯過<br/>
誰在用琵琶彈奏 一曲東風破<br/>
歲月在墻上剝落 看見小時候<br/>
猶記得那年 我們都還很年幼<br/>
而如今琴聲幽幽 我的等候你沒聽過<br/>
誰在用琵琶彈奏 一曲東風破<br/>
楓葉將故事染色 結(jié)局我看透<br/>
籬笆外的古道 我牽著你走過<br/>
荒煙蔓草的年頭 就連分手都沉默<br/>
<center><img src= "1.2.jpeg" alt="周杰倫的照片"/></center>
誰在用琵琶彈奏 一曲東風破<br/>
歲月在墻上剝落 看見小時候<br/>
猶記得那年 我們都還很年幼<br/>
而如今琴聲幽幽 我的等候你沒聽過<br/>
誰在用琵琶彈奏 一曲東風破<br/>
楓葉將故事染色 結(jié)局我看透<br/>
籬笆外的古道 我牽著你走過<br/>
荒煙蔓草的年頭 就連分手都很沉默<br/>
</p>
</center>
<hr/>
<center>
<p>
友情鏈接：<a >A網(wǎng)站</a>|<a >B網(wǎng)站</a>|<a >C網(wǎng)站</a><br/>
<a href="#top" target="_self">回到頂部</a>|<a href="mailto:guoyongrou@126.com? subject=我的聯(lián)系">聯(lián)系我們</a>
</p>
</center>
</body>
</html>
效果如下
_E__前端練習(xí)_練習(xí)1.html (1).png
2.注意幾點
- 網(wǎng)頁居中顯示的時候，可以在body的開始標簽之后始藕，body的結(jié)束標簽之前分別添加center的開始和結(jié)束標簽，以使得網(wǎng)頁整體居中顯示
- 網(wǎng)頁出現(xiàn)超鏈接的時候胖翰，鏈接的具體路徑不清楚時臼节，可以使用#號代替
- 注意網(wǎng)頁的細節(jié)撬陵，比如網(wǎng)頁中插入圖片時候和目標網(wǎng)頁的圖片大小一致，行距是否相同
1.網(wǎng)頁圖片大小可以通過查看目標網(wǎng)頁的源代碼网缝，也可以通過瀏覽器的截圖功能拉出其寬度
- 行距如何小了可以通過添加br標簽
- 網(wǎng)頁中回到頂部的實現(xiàn)代碼
<a href="#">回到頂部</a>
也就是表明#具有回到頂部的作用
- 網(wǎng)頁內(nèi)跳轉(zhuǎn)任意位置的設(shè)置
html中有一個唯一的屬性是任何標簽都可以使用的巨税，他就是id。
一個頁面中id屬性的值只能是唯一的
跳轉(zhuǎn)到元素的位置粉臊，直接在href后面加#id的屬性值
<p id="here">我是一只特立獨行的豬</p>
<hr/>
<a href="#here">我要找到你</a>
- 聯(lián)系我們設(shè)置
實際上就是發(fā)送電子郵件的超鏈接草添，默認打開計算機的郵件客戶端
href="mailto:郵件地址"
<a href="mailto:jhhk@126.com">
3.修改后的代碼和效果圖
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>這是我第一個前端練習(xí)網(wǎng)頁</title>
</head>
<body>
<center>
<a name="top" id="top"></a>
<h1>這是我的個人博客</h1>
<a href="#bottom">到底部</a>
<hr/>
<a href="#pic1">到第一張圖片<a>
<h2>東風破</h2>
<a href="#">周杰倫</a>
<center>
<p>
一盞離愁孤 燈佇立在窗口<br/>
我在門后 假裝你人還沒走<br/>
舊地如重游 月圓更寂寞<br/>
夜半清醒的燭火 不忍苛責我<br/>
一壺漂泊 浪跡天涯難入喉<br/>
你走之后 酒暖回憶思念瘦<br>
水向東流 時間怎么偷<br/>
花開就一次成熟 我卻錯過<br/>
誰在用琵琶彈奏 一曲東風破<br/>
歲月在墻上剝落 看見小時候<br/>
猶記得那年我們都還很年幼<br/>
而如今琴聲幽幽 我的等候你沒聽過<br/>
<img id="pic1"src="1.1.jpg" alt="周杰倫照片" width="300"/><br/>
誰在用琵琶彈奏 一曲東風破<br/>
楓葉將故事染色 結(jié)局我看透<br/>
籬笆外的古道 我牽著你走過<br/>
荒煙蔓草的年頭 就連分手都很沉默<br/>
一壺漂泊 浪跡天涯難入喉<br/>
你走之后 酒暖回憶思念瘦<br/>
水向東流 時間怎么偷<br/>
花開就一次成熟 我卻錯過<br/>
誰在用琵琶彈奏 一曲東風破<br/>
歲月在墻上剝落 看見小時候<br/>
猶記得那年 我們都還很年幼<br/>
而如今琴聲幽幽 我的等候你沒聽過<br/>
誰在用琵琶彈奏 一曲東風破<br/>
楓葉將故事染色 結(jié)局我看透<br/>
籬笆外的古道 我牽著你走過<br/>
荒煙蔓草的年頭 就連分手都沉默<br/>
<img src= "1.2.jpeg" alt="周杰倫的照片" width="300"/><br/>
誰在用琵琶彈奏 一曲東風破<br/>
歲月在墻上剝落 看見小時候<br/>
猶記得那年 我們都還很年幼<br/>
而如今琴聲幽幽 我的等候你沒聽過<br/>
誰在用琵琶彈奏 一曲東風破<br/>
楓葉將故事染色 結(jié)局我看透<br/>
籬笆外的古道 我牽著你走過<br/>
荒煙蔓草的年頭 就連分手都很沉默<br/>
</p>
</center>
<hr/>
<p>
友情鏈接：<a href="h#">A網(wǎng)站</a>|<a href="#">B網(wǎng)站</a>|<a href="#">C網(wǎng)站</a><br/><br/>
<a id="bottom" href="#">回到頂部</a>|<a href="mailto:guoyongrou@126.com">聯(lián)系我們</a>
</p>
</center>
</body>
</html>
修改后.png
