一、前端知识结构介绍[非重点]

主学内容

• web前端
• 数据库
• SpringBoot相关知识

网站开发MVC三层架构：

• 页面展示[客户端手机或浏览器]
• 业务逻辑[web服务器]
• 数据存储[数据服务器]
  

Web前端-HTML[超文本标记语言]

• HTML作用：负责搭建页面结构和内容(相当于盖房子)
• 学习HTML主要学习的就是有哪些标签

HTML相关标签和常用快捷键：

1. 常用快捷键：

   • Tab:补全标签
   • Ctl+D:复制一整行
   • Ctl+Shift+/:注释
   • Shift+Enter:快速进入下一行

2. 文本相关标签：

   • h[1-6]:标题标签 特点：字体加粗 独占一行 自带上下间距
   • p:段落标签 特点：独占一行 自带上下间距
   • hr:分割线标签【单标签：不需要写结尾标签】
   • br:换行标签【单标签】
   • b：加粗
   • i：斜体
   • U：下划线
   • s：删除

3. 列表相关标签：

   • ul:无序列表标签[unorder list]
   • li:列表中的每一行的标签[list item 列表项]
   • ol:有序列表标签[order list]
   • 列表嵌套：有序列表和无序列表可以任意无限嵌套

4. img:图片标签

   相关属性
   • src:资源路径
   • alt:当图片不能正常显示时，显示的文本
   • title:图片标题
   • width/height:设置宽/高

5. 超链接a

   相关属性
   • href:资源路径, 作用类似图片标签的src
   • a标签包裹文本为文本超链接, 包裹图片为图片超链接
   • 页面内部跳转, 在目的地的元素里面添加id=xxx 然后在超链接里面添加href="#xxx"

6. 表格table

   相关标签

   • tr表示行
   • td表示列
   • th表头
   • caption标题

   相关属性

   • border:设置表的边框宽度
   • colspan:跨列
   • rowspan:跨行

    src:资源路径
        1.相对路径：一般访问站内资源时使用
            - 图片和页面在同一目录：直接写图片名
            - 图片在页面的上一级【上一级】目录：../[../]图片名
            - 图片在页面的下级目录：文件夹名/图片名
        2.绝对路径[一般用来访问站外资源，图片盗链--有找不到图片的风险]:站外图片地址       
    width/height:设置宽/高
        1.像素
        2.占上级元素的百分比【只设置宽度时，高度会自动等比例缩放；即所在盒子的百分比】