HTML自学-day2

4.5 图像标签和路径

4.5.1 图像标签

< img src=‘图像URL’/>

src 是必须属性，用于指定文件的路径和文件名

其他属性：

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

如：

<img src="img.jpg" alt="图像暂时无法显示" title="我是allen" width="500" border="15"/>

注意：

• 图片标签可以有多个属性，在标签名后面
• 属性之间不分先后顺序，之间用空格隔开
• 属性采取键值对方式

4.5.2 图像标签和路径

1. 目录文件夹和目录：

   根目录：打开目录的第一层

2. 路径：

   • 相对路径：

     引用文件所在位置为参考

     相对路径分类	符号	说明
     同一级路径		直接写，如< img src=“img.jpg”/>
     下一级路径	/	< img src=“image/img.jpg”/> (此时，image和当前文件处于同一路径)
     上一级路径	…/	< img src=“…/img.jpg”/>(此时，img和当前文件的上一级处于同一路径)

     同一级可以直接选择，不在同一级则通过/或者…/来变换到同一级

   • 绝对路径：

     指目录下的绝对路径，如：< img src=“C:\Users\xxx\Desktop\HTML\img.jpg”/>

     注意相对路径和决定路径的反斜杠位置

     网络图片也可以使用绝对路径引用

4.6 超链接标签

4.6.1 语法格式

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

• href：必须属性，指定链接目标的url地址
• target：指定链接页面的打开方式， __ self 为在当前窗口跳转，默认值，__blank为在新窗口打开页面

4.6.2 链接分类

• 外部链接：

  < a href=“http://www.qq.com target=”_blank">腾讯< /a>

• 内部链接：

  网站内部页面之间的相互链接

  < a href=“xxx target=”_blank">公司简介< /a>

  跳转的页面文件在目标文件夹中，href即利用相对路径打开该目标文件

• 空链接：

  < a href=“#”>公司简介< /a>

  点击后无反应

• 下载链接：

  < a href=“xxx.zip”>下载链接< /a>

  需要下载的压缩包或者文件在目标文件夹中，href即利用相对路径打开该目标文件

• 网页元素链接：

  对网页元素如图片，音频等添加超链接

  <a href="http://www.qq.com" target="_blank"><img src="img.jpg"></a>
  

  点击图片后则会跳转到对应网址

• 锚点链接：

  类似于目录，点击则可以快速定位到页面的某个位置

  1. 在href属性中，设置属性值为**#名字**的形式，如< a href=“#two”>第二集< /a>
  2. 找到目标位置标签，添加一个id属性=刚才的名字，如< h3 id=“two”>第二集介绍< /h3>

4.7 表格标签

表格是用来展示数据的，使之整齐有序

4.7.1 表格基本语法

<table>  # 定义表格
  <tr>  # 定义表格中的行
    <td>单元格中的文字</td>  # 表格数据
    .....
  </tr>
  .....
</table>

4.7.2 表头单元格标签

<table> 
  <tr>  
    <th>表头单元格中的文字</th>  
    .....
  </tr>
  .....
</table>

表头单元格用< th>标签，突出表头的重要性

4.7.3 表格属性

这部分实际开发中并不常用，因为一般用CSS来实现

属性要写到表格标签，即table里去

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

如：

< table align=“center” border=“1” cellpadding=“20” cellspacing=“0” width=“500” height=“300” >

5.注释和特殊字符

5.1 注释

快捷键：ctrl + /

5.2 特殊字符

HTML页面中，有一些特殊的符号不方便直接使用，用以下字符替代

特殊字符	描述	字符的代码
	空格	&nbsp
<	小于	&lt
>	大于	&gt

如果页面中需要显示< p>，则可以&lt p &gt