pink老师HTML5+CSS3学习笔记 | DAY2

目录

1、div和span标签

2、图像标签

3、路径

4、超链接标签

5、注释和特殊字符

1、div和span标签

①没有语义，就是个盒子，用来装内容的。

②div是division（分割，分区）的缩写，span（跨度）

③特点：

• div标签用来布局，一行只能放一个div，理解为一个大盒子；
• span标签用来布局，一行上可以放多个span，理解为一个小盒子。

④应用：

    
div标签1：单独占据一行
123被另起一行
    
div标签2：单独占据一行
    span标签1
    span标签2
    span标签3
    span标签可以跨行显示

2、图像标签

①，单标签；

②属性：属于某个标签的特性；

③src是img标签的必须属性（用img标签一定要写src属性），用于指定图像文件的路径和文件名；

④其他属性：

• alt：文本属性，替换文本，图像不能显示时替换；
• title：文本属性，提示文本，鼠标放在图像上显示文字；
• width：像素属性，设置图像的宽度；
• heigh：像素属性，设置图像的高度；
• 宽度和高度一般不同时设置，可只设置一项，另一项会等比例缩放；
• border：像素属性，设置图像的边框粗细。一般在CSS中设置。

⑤应用：

    
img标签的使用：
    
    
alt 替换文本，图像显示不出来时用文字替换：
    
    
title 提示文本，鼠标放在图像上提示的文字：
    

⑥注意点：

• 图像标签可以拥有多个属性，必须写在标签名的后面；
• 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开；
• 属性采取键值对的格式（即key="value"的格式，属性="属性值"）；

3、路径

①目标文件夹和根目录：

• 目录文件夹：就是普通文件夹，存放页面相关的所有文件；
• 根目录：打开目录文件夹的第一层就是根目录。

②vscode打开目录文件夹：

• 文件--打开文件夹--选择目录文件夹。如此后期更加方便管理文件。

③路径分为相对路径和绝对路径：

• 相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。就是图片相对于html页面的位置。
  • 分类：
    •  同一级路径：图像文件与html文件位于同一级，如

    •  下一级路径：符号"/",图像位于html文件下一级，如

    • 上一级路径：符号"../"，图像位于html文件的上一级，如

• 绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径，如本地地址
  或网络地址

• 注意：

  • 相对路径和绝对路径的斜杠符号不同，相对路径是"/"，绝对路径是"\"；

  • 绝对路径少用。

4、超链接标签

①用于从一个页面链接到另一个页面，。

②属性：

• href：必须属性，用于指定连接目标的url地址，当为标签应哟个href属性时，它就具有了超链接的功能格式：一定要以http://开头；

• target：用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开。

③链接分类：

• 外部链接：如：百度；
• 内部链接：跳转该网站内部的页面，直接链接内部页面名称，如：首页；
• 空链接：如果没有确定链接目标时，首页；
• 下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件，下载；
• 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接，；
• 锚点链接：点击链接可以快速定位到页面中的某个位置
  • 在连接文本的href属性中，设置属性值为#名字的形式，如第二集；
  • 找到目标位置标签，里面添加一个id属性=刚才的名字，如

    第二集介绍

    。

④应用：

    
外部链接：
    _self属性是target的默认值，在当前窗口打开网页：百度
    
_blank属性是在新窗口打开页面：百度

    
内部链接：
    体育新闻

    
空链接：
    首页

    
下载链接：
    下载

    
网页元素链接：
    

5、注释和特殊字符

①注释：

• 结尾；
• 快捷键：ctrl+/。

②特殊字符：

• 一些特殊符号在html中难以使用，则用特殊字符替代：

特殊字符	描述	字符的代码
	空格
<	小于号	<
>	大于号	>
&	和号	&
￥	人民币	¥
©	版权	©
®	注册商标	®
°	摄氏度	°
±	正负号	±
×	乘号	×
÷	除号	÷
²	平方	²
³	立方	³