第2章 搭建网站雏形
2021-08-11 本文已影响0人
夜远曦白
带着问题去看书学习，好滴呀。
HTML5＋CSS3＋JavaScript Web 前端开发案例教程（慕课版），微信读书中找到的学习Web前端书籍，好啦，第2章开始了，耶(＾－＾)V
一、习题
2-1 简述<p>标签和<br>标签的区别是什么。
<p>是段落标签，h5中通常使用成对的<p>标签来划分段落，需要一对的使用，它也有换行的意义。
<br>是强制换行标签，单独使用即可，这个换行相对<p>会紧凑一点儿。
2-2 概述绝对地址和相对地址的利弊。
绝对地址 —— 网页上的文件或目录在硬盘上的真正路径。
优点是定位链接目标文件比较清晰。
缺点是它需要完整路径，若该文件被移动了，就需要重新设置所有的相关链接，易出现问题。
相对路径 —— 这种地址形式利用的是构建链接的两个文件之间的相对关系，不受站点文件夹所处服务器位置的影响，省略了绝对地址中的相同部分。
优点是站点文件夹所在服务器地址发生改变时，文件夹的所有内部文件地址都不会发生改变。
缺点是内容页面换了位置时，链接容易失效。同时它也更容易被抄袭和采集。
2-3 使用链接标签打开新窗口的方式有哪些？
<a> 链接标签
- href：链接目标地址，是Hypertext Reference的缩写
- target：打开新窗口的方式，主要有4个属性值
- _blank：新建一个窗口打开
- _ parent：在父窗口打开
- _self：在同一窗口打开（默认值）
- _top：在浏览器的整个窗口打开，将会忽略所有的框架结构
2-4 <div>标签和<span>标签的区别是什么？
<div>标签可以定义文档中的分区或节。<div>占用的宽度是一行，这意味着<div></div>中的内容自动地开始一个新行。
<span>标签用来对同一行内的文字分类分组。<span>占用的宽度与分组内容的宽度一致。
2-5 如何为图片添加链接？
类似这种：
<a href="http://www.baidu.com" target="_blank"><img src="xiao.jpg" width="30" height="40"/></a>
二、练习示例
学习后当然也要手动写点示例玩玩熟悉一下啦~
我使用的编辑工具是 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>
- 预览效果
demo
