HTML5+CSS3学习 DAY2

4.<div>和<span>标签

<div>和<span>没有语义，他们就是一个盒子，用来装内容的

div表示分割，分区；span意为跨度，跨距

特点：div标签用来布局，但是现在一行只能放一个<div>,大盒子；<span>标签用来布局，一行上可以多个span,小盒子

5.图像标签和路径

（1）图像标签

<img>标签用于定义HTML页面中的图像

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

图像标签的其他属性

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

 图像标签属性注意点：

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

（2）路径（前期铺垫知识）

1. 目录文件夹和根目录

• 目录文件夹：就是普通文件夹，里面存放了我们做页面所需要的的相关素材，比如html文件、图片等。
• 根目录：打开目录文件夹的第一层就是根目录    

    2.路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径，这里简单来说就是图片相对于HTML页面的位置

相对路径分类	符号
同一级路径		图像文件位于HTML文件同一级 如<img src="baidu.gif"/>
下一级路径	/	图像文件位于HTML文件下一级 如<img src="images/baidu.gif"/>
上一级路径	../	图像文件位于HTML文件的上一级 如<img src="../baidu.gif"/>

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

6.超链接标签

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

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

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

链接分类：

1.外部链接：如<a href="http://www.qq.com">腾讯</a>

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

3.空链接：如果当时没有确定链接目标时，<a href="#">首页</a>

4.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件

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

6.锚点链接：点击链接可以快速定位到页面中的某个位置

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

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

5.1注释

注释以"<!--"开头，以“-->”结束，Ctrl+/添加取消注释

 

HTML标签（下）

1.表格标签

（1）表格的主要作用：显示，展示数据，可读性好

（2）表格的基本语法：

• <table></table>是用于定义表格的标签
• <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
• <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>中
• 字母td指表格数据，即数据单元格的内容
• <th>标签表示表格的表头部分，表头单元格里面的文本内容加粗居中显示

（3）表格属性：不常用，后面通过css来设置

属性名	属性值	描述
align	left，center，right	规定表格相对周围元素的对齐方式
border	1或“”	规定表格是否拥有边框，默认为“”，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度