第2章搭建網站雛形

這是我參與8月更文挑戰的第2天，活動詳情查看：8月更文挑戰html

帶着問題去看書學習，好滴呀。前端

HTML5＋CSS3＋JavaScript Web 前端開發案例教程（慕課版），微信讀書中找到的學習Web前端書籍，好啦，第2章開始了，耶(＾－＾)V瀏覽器

1、習題

2-1 簡述<p>標籤和<br>標籤的區別是什麼。

<p>是段落標籤，h5中一般使用成對的<p>標籤來劃分段落，須要一對的使用，它也有換行的意義。 <br>是強制換行標籤，單獨使用便可，這個換行相對<p>會緊湊一點兒。服務器

2-2 概述絕對地址和相對地址的利弊。

絕對地址 —— 網頁上的文件或目錄在硬盤上的真正路徑。優勢是定位連接目標文件比較清晰。缺點是它須要完整路徑，若該文件被移動了，就須要從新設置全部的相關連接，易出現問題。微信

相對路徑 —— 這種地址形式利用的是構建連接的兩個文件之間的相對關係，不受站點文件夾所處服務器位置的影響，省略了絕對地址中的相同部分。優勢是站點文件夾所在服務器地址發生改變時，文件夾的全部內部文件地址都不會發生改變。缺點是內容頁面換了位置時，連接容易失效。同時它也更容易被抄襲和採集。markdown

2-3 使用連接標籤打開新窗口的方式有哪些？

<a> 連接標籤app

href：連接目標地址，是Hypertext Reference的縮寫
target：打開新窗口的方式，主要有4個屬性值
- _blank：新建一個窗口打開
- _ parent：在父窗口打開
- _self：在同一窗口打開（默認值）
- _top：在瀏覽器的整個窗口打開，將會忽略全部的框架結構

2-4 <div>標籤和<span>標籤的區別是什麼？

<div>標籤能夠定義文檔中的分區或節。<div>佔用的寬度是一行，這意味着<div></div>中的內容自動地開始一個新行。框架

<span>標籤用來對同一行內的文字分類分組。<span>佔用的寬度與分組內容的寬度一致。ide

2-5 如何爲圖片添加連接？

相似這種：工具

<a href="http://www.baidu.com" target="_blank"><img src="xiao.jpg" width="30" height="40"/></a>
複製代碼

2、練習示例

學習後固然也要手動寫點示例玩玩熟悉一下啦~

我使用的編輯工具是 Visual Studio Code，還下載了個插件，編輯代碼後，直接右鍵點擊從瀏覽器打開便可預覽代碼效果，或者使用快捷鍵 command + 1 也是OK滴。

練習代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo2</title>
</head>

<body>
    <p>王者榮耀英雄臺詞</p>
    <p>嬴政：天上天下，惟朕獨尊</p>
    <p>趙雲：勇者之誓，甚於生死！心懷不懼，方能翱翔於天際！</p>
    <p>成吉思汗：雄鷹不爲暴風折翼，<br>狼羣不因長夜畏懼！</p>

    <hr>

    <img src="xiao.jpg" width="100" height="150"> 

    <h1>果醬製做的材料準備</h1>
    <hr>
    <p>蘋果兩顆</p>
    <hr/>
    <p>檸檬汁一匙</p><hr/>
   
    <a href="https://www.baidu.com" target="_blank">百度啊</a>
    <a href="http://www.baidu.com" target="_blank"><img src="xiao.jpg" width="30" height="40"/></a>

    <div>分組一：使用div標籤</div>
    <div>分組二：使用div標籤</div>
    <span>分組三：使用span標籤</span>
    <span>分組四：使用span標籤</span>
</body>
</html>
複製代碼

預覽效果

🌈關注我吖~❤️

公衆號：妮K妮K妮

第2章 搭建網站雛形