超链接&图片&表格

1.超链接标签

​ 超链接的使用场景-----点击实现跳转新页面

• 标签名称：a

• 默认样式

  超链接标签默认有下划线

  默认字体是有颜色

  鼠标指针移动上去会变成小手

• 属性

  href 跳转页面的路径

  title 提示文本----鼠标移入当前文本出现有单提示文字

  target 打开新窗口的方式

  ​ _self-----默认值 在原窗口中打开新页面

  ​ _blank------打开一个新的窗口

<a href="http://www.baidu.com" title="点击你会跳转到百度首页">点击跳转到百度首页</a>
    <a href="http://www.1000phone.com">千锋</a>

2.图片标签

• 标签名称：img

• 属性

  src 图片存放的路径

  alt 当图片加载失败时 显示一段文本

  title 提示文本

• 需要了解的属性（html属性的单位是可以省略的 web中的单位是像素）

  width 宽度

  height 高度

  border 边框

<img src="https://bkimg.cdn.bcebos.com/pic/d53f8794a4c27d1ed21bc3a9f79fba6eddc451da9201?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UyMjA=,g_7,xp_5,yp_5/format,f_auto" alt="当前图片是xx 网络状态不佳 加载失败.." title="这是一张好看的图片" width="100" height="200" border="1">

3.路径的使用（相对路径、绝对路径）

• 绝对路径（了解，一般不要使用）

  从磁盘开始选择

  <img src="C:\Users\qf\Desktop\好程序员基础课\day04\02-代码\images\1.jpg" alt="">
  

• 相对路径

  同级找同级 目标文件的名称

  <img src="11.jpg" alt="">
  

  父级找子级 目标文件的文件夹名称/目标文件的名称

  <img src="images/1.jpg" alt="">
  

  子级找父级 …/目标文件名称

  <img src="../11.jpg" alt="">
  

4.div&span

• div：没有任何实际含义 只是一个盒子 用来网页布局
• span：没有任何实际含义 只是一个盒子 用来包裹文本内容

5.标签之间的嵌套关系

• 常见的嵌套关系 加粗和倾斜、ul>li>ol>li

• p和h标签之间的嵌套

  p和p标签 不可以

  h和h标签 不可以

  p和h标签 h1可以嵌套p

• a>img

• div（块级元素） 可以嵌套一切

6.表格的使用

• 表格的标签名称

  table 表示表格

  tr 表示行

  td 表示列（行与列相交部分的单元格）

• 表格的基本属性

  width/height/border

  bordercolor/bgcolor 边框颜色/表格背景色

  cellspacing/cellpadding 单元格与单元格之间的间距

  ​ cell 单元格

  ​ space 空间

  ​ padding 内边距

  对齐方式

  ​ 水平方向 align:left right center

  ​ 垂直方向 valign:top bottom middle

  难点：行列合并

  ​ 列合并

  ​ 行合并 rpwspan

  ​ span作为属性出现的时候表示选中几个 行列合并的属性值需要时一个数字

  roules=“rows/cols/all/none/groups” 添加行列的分割线

  ​ groups 位于分组之间的分割线

• 表格的高级属性及标签

  数据的行分组

  ​ tbody 默认会生成一次 包裹住表格的所有内容 无数个

  ​ thead/tfoot 表格的头部和底部 成双成对 只有一个

  数组的列分组

  ​ 单标签 col

  ​ 双标签 colgroup

  ​ 属性：

  ​ span 选择几个列

  ​ width 控制这几个列的宽度

  表格的列标题

  ​ th 默认字体是加粗并居中显示

  表格标题

  ​ caption