HTML+CSS学习笔记------第一章（下）

一、HTML常用标签

1.1<div>和<span>标签

<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。
特点：
1.<div>标签用来布局，但是现在一行只能放一个<div>，大盒子。
<h4&gt和<div>一样，独占一行
2.<span>标签用来布局，一行上可以放多个<span>，小盒子。

<一>.图像标签和路径（重点）

1.图像标签 <img>

<img src="图像URL" />

src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

图像标签的其他属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示时，显示文字
title	文本	提示文本，鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
bodder	像素	设置图像的边框粗细

案例：


图像标签属性的注意点：
①.图像标签可以拥有多个属性，必须写在标签名的后面。
②.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③.属性采取键值对的格式，即key = "value"的格式，属性 = “属性值”。

照片必须与标签文件放在一起。

2.相对路径

相对路径：以引用文件所在位置为参考基础，而建立的目录路径。意思就是以图片相对于HTML页面的位置。

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级，如<img src=“baidu.jpg” />
下一级路径	/	图像文件位于HTML文件下一级，如<img src=“images/baidu.jpg” />
上一级路径	. ./	图像文件位于HTML文件上一级，如<img src=". ./baidu.jpg" />

3.绝对路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如："D:\web\img\logo.gif"或者完整的网络地址 “http://www.itcast.cn/images/logo.gif”。

<二>超链接标签（重点）

<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

1.链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

两个属性的作用：

属性	作用
href	用于指定链接目标的url地址，是必须属性，当标签应用href属性时，它就具有了超链接的功能。
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

2.链接分类

①.外部链接，例如 <a href=“http://www.baidu.com”>百度<a>
一定要以"http://"开头

②.内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如 <a href=“index.html”>首页</a>。

③.空链接：如果当时没有确定链接目标时，<a href="#">首页</a>.
④.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。



⑤.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

⑥.锚点链接：当我们点击链接，可以快速定位到页面中的某个位置

• 在链接文本的href属性中，设置属性值为 #名字 的形式，如<a href="#two">第2集</a>。
• 找到目标位置标签，里面添加一个id属性 = 刚才的名字，如<h3 id=“two”>第2集介绍</h3>。
  
  
  

二.HTML中的注释和特殊字符

1. 注释

以"<!–“开头，以”–>"结束。快捷键：Ctrl + /
注释标签里面的内容是给程序员看的，这个代码是不执行不显示到页面中的。

2.特殊字符

特殊字符	描述	字符的代码
	空格符	&nbsp；
<	小于号	&lt；
>	大于号	&gt；
&	和号	&amp；
￥	人民币	&yen；
©	版权	&copy；
®	注册商标	&reg；
°	摄氏度	&deg；
±	正负号	&plusmn；
×	乘号	&times；
÷	除号	&divide；
²	2次方	&sup2；
³	3次方	&sup3；

实践：