Head First HTML与CSS第二章深入了解超文本学习笔记

一、超文本hyertext的理解

第一章中的web语言是对html语言的简单介绍，即HTML中的ML（makeup language），来构造一个相当简单的web页面，那么超文本就是HTML中的HT，和做PPT中的超链接是一回事，就是跳出一个web页面的束缚，链接到另一个页面（或许不止能链接到页面？目前不清楚）。在HTML中实现超文本用的是<a>元素。

 

二、<a>元素

创建超文本的链接链接到另一个web页面，结构：<a href = " 地址"> 链接标签</a>

1、<a>元素中内容就是链接标签，浏览器显示的时候会有下划线，指示这是可单击的

2、<a>元素中的 href属性的属性值就是链接目标的地址，需要注意，这里会产生一个相对地址和绝对地址的概念，见下述。这里的       href属性和<img>元素中的src元素异曲同工，都是指向目标的地址。需要注意，这里的地址必须用双引号括起来。

3、链接标签 不是单指几个字，图片、段落、标题都可以放在<a>元素中作为内容。

4、对于属性的补充，写法：属性名 = “属性值” ，位于开始标签中，利用属性指定元素的附加信息，例如 <a>元素是创建连接，那么连接的目标是什么，由href属性给出；<img>属性是插入图片，那么插入什么图片，图片的地址由src属性给出；<style>属性是给html添加样式，那么样式语言种类是什么,由type属性给出。属性定制元素。浏览器能识别一个属性或一个元素称为浏览器“支持”这个属性/元素。

三、相对地址

href 与 src 属性的属性值都是双引号括起来的目标地址，可以是相对地址，可以是绝对地址。

（1）http中的地址分隔符都用  /  而不是  \  ,虽然windows系统的文件夹表示是用\作为分隔符；

（2)绝对地址：分为网络地址（即http 或https这种开头的）与本地地址（如D:\大学课程\前端），好像在html中不常用，书上没介绍，遇到再说。

（3）相对地址：从起点到目标相对而言的。当是同级文件夹时直接href = "文件名 . 格式",当是子文件夹中href = "子文件夹名/文件名.格式" , 当要经过父文件夹时 用 " .. "表示上移到父文件夹，上移几次用几次，如上行到父文件夹的父文件夹 ” ../../子文件夹/子文件夹/文件名.格式" . 请不要忘记/也不要误用为\.

四、组织文件

没有固定的格式，根据需求。

例如，对于图片文件，一种是将所有图片放在一个文件夹image中作为根目录下的一个子文件，有的时候每个子文件夹中单独列一个图片文件夹存放本分支的图像（当网站需要在不同部分使用大量图片的时候）。一般讲主页面放在根目录下，对于其他页面，有的可以设一个文件夹一起存放，有的分开存放。无论哪种方式，在构建网站初期就要确定文件的组织文件结构，避免升级时候修改一大堆路径问题。