HTML（day02）

作业:

1. NodeJs 6 个接口
2. 完成文本和图片

1. 文本样式

< b > < strong > 加粗
< i > < em > 斜体
< s > < del > 删除线
H5 语义 推荐使用有于意的标签
< u > 下划线
< sup > 上标
< sub > 下标

2. 分区元素

1. 块分区 < div >
   用于页面布局的
   特点: 独立成行
2. 行分区 < span >
   同一行文字使用不同样式时候, 使用 span
   特点: 与其他 span 共用一行

3. 元素的显示方式

1. 块级元素

在网页中独占一行的元素就是块级元素 默认是从上往下排列
ex: < div > < h1~h6 > < p > < pre >

2. 行内元素

在网页中能够在一行内显示的元素(后期加深学习)
同一行中从左往右排列
ex: span b i em…

2.1 行内块
2.2 table
2.3 flex 弹性

4. 图像和连接

1. 图像语法

< img > 或 < img >
< img src=“图片路径/url” >

2. url

Uniform Resurce Locator 统一资源定位符
俗称：路径

3. 路径的表现形式
   3.1 绝对路径

   完整路径

   1. 使用任何网络资源的时候，使用绝对路径
      https://img-blog.csdnimg.cn/20210805084944378.png
      通信协议: //主机名/文件目录结构/文件名称
      优点：不占用本地的存储空间
      缺点: 不稳定
   2. 使用本机资源, 项目允许使用
      < img src=“C:/08.png” >

练习: 请在 02_img.html 中在从别的网站中抓取一张图片

3.2 相对路径
参照物, 访问资源的 HTML 文件

1. 兄弟关系, 直接写文件名称
2. 子集目录
   先进进入兄弟文件夹, 再引入图片 ex: src=“img/09.png”
3. 父级目录, 使用 …/返回到父级目录 ex: src="…/…/img/07.png"

4. < img > 的属性

src:（source 源） 设置图片资源路径
title: 鼠标悬停, 提示信息
alt: 图片资源出现错误信息时, 显示的文本
width: 设置图片, 宽
height: 设置图片, 高
如果设置的宽高比, 不符合图片本身的宽高比, 图片会发生 失真
解决方法, 宽高只设置一个, 另外一个自动适应

5. 链接
   6.1 语法

< a href="" >< /a >
属性:

1. href
2. target 指定打开链接的方式
   取值: 1. _self 默认, 在当前页打开网页
   2. _blank 在新的标签页打开

6.2 < a > 标签的其它表现形式

1. 下载资源
   < a href="*.zip | *.rar" >< /a >
2. 链接电子邮件
   < a href=“mailto:3320753238@qq.com” >打开邮件< /a >
3. 返回页面顶部
   < a href="#" >返回页面顶部< /a >
4. 使用 < a > 执行 JS

6. 锚点
   7.1 什么是锚点

锚点, 就是在页面上做了一个记号
可以通过点击 a 标签, 跳转到这个记号

7.2 使用锚点

1. 定义锚点
   a. < a name=“锚点名称” >< /a >
   b. < any id=“锚点名称” >
2. 使用 a 标签跳转到锚点
   < a href="#锚点名称" >< /a >

小提示: Lorem 假文命令 [Lorem后面跟字数] | [Lorem*倍数]

练习：新建 03_ex 在页面中通过 < a > 标记 链接到 3 锚点 完成三个锚点之间的正常跳转

5. 表格

1. 表格的语法
   1.1 标记
   < table > 表格
   < tr > 行–> table row
   < td > 列–> table data
   table 中, 所有的数据写在 td 中

  <table>
    <tr> <!--行-->
      <td></td><!--列-->
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </table>
  <!-- 简写方式: table>tr*4>td*3>a{123} -->

小提示: table 是一种特殊显示方式, 把 table 中所有的数据全部读取到内容, 再一次性加载到页面上

1.2 属性
1.2.1 < table > 元素 的属性

border=“2px” 设置表格边框
width=“150px” 设置表格宽度
height=“200” 设置表格高度
align=“center” 设置 表格本身的水平对其方式
取值 left/center/right
bgcolor=“pink” 设置背景颜色
bordercolor=“red” 设置边框颜色
cellpadding=“px” 设置内单元格的边距（内容到内边框的边距）
cellspacing=“20px” 设置外边距（边框到边框的距离）

1.2.2 < tr > 的属性

align=“right” 设置表格内容的水平对齐方式
取值: left/center/right
valign=“bottom” 设置表格内容的垂直对齐方式
取值: top/middle/bottom
bgcolor=“orange” 设置背景颜色

1.2.3 < td > 的属性

width： 设置单元格宽, 会影响其他行, 同位置的单元格宽带
height: 设置单元格高度, 会影响当前行, 其他单元格高度
align: 设置单元格内容水平对齐方式
valign: 设置单元格内容垂直对齐方式
bgcolor: 设置背景
colspan: 跨行
rowspan: 跨列

练习：
06_ex
设置表格 四行 四列
表格的尺寸 400px*400px
表格的背景为黄色 yellow
表格的边框 1px 红色
表格水平居中显示
单元格内边距 5px 外边距 10px

2. 不规则的表格
   2.1 colspan: 跨行

colspan
从指定单元格开始, 横向向右合并 N 个单元格 N 包含自己
被合并的单元格要删除

2.2 rowspan: 跨列

rowspan
从指定单元格开始, 纵向向下合并 N 个单元格 N 包含自己
被被合并的单元个要删除

3. 表格中的可选标记
   3.1 表格的标题

< caption >< /caption >
要紧跟 < table > 标签

3.2 行/列的标题

< th >
代替 < td >, 内容字体加粗, 水平居中

4. 表格的复杂应用
5. 行分组

<table>
  <!-- 表头 -->
  <thead>
    <tr>...</tr>
  </thead>

  <!-- 主体 -->
  <tbody>
    <tr>...</tr>
  </tbody>

  <!-- 标尾 -->
  <tfoot>
    <tr>...</tr>
  </tfoot>
</table>