HTML第二天

4.6图像标签和路径

1.图像标签

图像标签属性注意点：

（1）图像标签可以拥有多个属性，必须写在标签名的后面。

（2）属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

（3）属性采取键值对的格式，即key=“value”的格式，属性=“属性值”。

重点掌握title和alt的区别。

（title：鼠标放到图片后显4示的文字，alt：图片加载不出来时的替换文字）

2.路径

目录文件夹和根目录：

目录文件夹：就是普通的文件夹里面存放相关素材。

根目录：打开目录文件夹的第一层就是根目录

页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件（images），这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为：

1.相对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。

这里简单来说，图片相对于HTML页面的位置。

 2.绝对路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

4.7超链接标签

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

1.链接的语法格式

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

2.链接的分类

（1）外部链接，例如：<a href="http://www.baidu.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注释

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

HTML中的注释以"<!--"开头，以"-->"结束。

<!--注释语-->   快捷键：Ctrl+ /

添加注释是为了更好的解释代码功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。

5.2特殊字符

以下为丰富填充之后的代码和网页： 

 

 

 HTML标签（下）

表格是实际开发中非常常用的标签：

1.表格标签

1.1表格的主要作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

表格不是用来布局页面的，而是用来展示数据的。

1.2表格的基本语法

<table>
  <tr>
     <td>单元格的文字</td>
     ...
   </tr>
  ...
</table>

1.<table></table>是用于定义表格的标签。

2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。

3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

4.字母td指表格数据，即数据单元格内容。

1.3表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示

<th>标签表示HTML表格的表头部分（table head的缩写）

<table>
  <tr>
     <th>姓名</th>
     ...
   </tr>
  ...
</table>

表头单元格也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。

1.4表格属性

1.记住这些英语单词，后面CSS会使用。

2.直观的感受表格的外观形态。

1.5表格结构标签

表格可以分割成表格头部和表格主体两大部分

在表格标签中分别用：<thead>标签 表格头部区域、<tbody>标签 表格的主体区域，这样可以更好地分清表格的结构。

1.<thead></thead>：用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般是位于第一行。

2.<tbody></tbody>：用于定义表格的主体，主要用于放数据本体。

3.以上标签都是放在<table></table>标签中

1.6合并单元格

1.合并单元格

合并单元格方式：

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

2.目标单元格

3.合并单元格的步骤

合并单元格三部曲：

1.先确定是跨行还是跨列合并。

2.找到目标单元格，写上合并方式=合并的单元格数量。比如：<td colspan="2"></td>。

3.删除多余的单元格。

1.7表格总结

表格学习整体可以分为三大部分：

1.表格的相关标签

学习了  table标签   tr行标签   td单元格标签   th表头单元格标签   

             thead表格头部区域标签           tbody表格主体区域标签

2.表格的相关属性

3.合并单元格

以下为我做的代码及表格：