day01_HTML_CSS

1. B/S和C/S

1.1 B/S

  • B/S指的是浏览器与服务器工作模式
  • B/S优缺点
    • 优势：无需占用本地大量存储空间，相对节省存储空间
    • 不足：需要占用大量网络带宽

1.2 C/S

  • C/S指的是客户端与服务器工作模式
  • C/S优缺点
    • 优势：无需占用大量网络带宽，相对节省网络带宽资源
    • 不足：需要占用大量本地存储空间

2. HTML简介

  • HTML全称：Hyper Text Markup Language【超文本标记语言】
  • 超文本：超出文本以外，还可以包含图片、音频、视频等非文本资源
  • 标记语言：标记语言语义都是由标记标签及转义字符表示
  • 标记标签：由一组<>括起来关键字组成
  • HTML运行：HTML可直接运行浏览器中，各个浏览器厂商均提供HTML引擎

3. HTML之Helloworld

day01_HTML_CSS - 图1

day01_HTML_CSS - 图2

day01_HTML_CSS - 图3

day01_HTML_CSS - 图4

day01_HTML_CSS - 图5

4. HTML基本语法

HTML是否报错，需要查看浏览器控制台
进入浏览器控制台：
1. f12或fn+f12
2. 右键页面，点击检查
Elements：浏览器解析HTML后代码
Console：控制台
Sources：HTML等源代码
NetWork：网络监听

  • HTML标签分为两大类，一类成对标签【有开始有结束】，另一类自结束标签
  • HTML标签不区分大小写【因为：浏览器引擎解析HTML后，均为小写】
  • HTML标签可以嵌套，但不能交叉嵌套
    • 即使交叉嵌套HTML标签，也不会报错，浏览器提供一定容错能力【不建议使用】
  • HTML标签必须正确关闭
    • 如不正确关闭，也不会报错，浏览器提供一定容错能力【不建议使用】
  • HTML属性必须有值，且数值用双引号括起来
  • HTML注释不能嵌套

5. HTML常用标签

  • 标题标签
    • 语法：

      -
    • 作用：在网页制作标题
    • 特点：
      • 字体加粗，字号递减
      • 块级元素，自带换行效果
  • 换行标签
    • 语法：
      或
  • 分区布局标签
    • div标签
      • 语法：
      • 特点：块级元素，自带换行效果
    • span标签
      • 语法：
      • 特点：内联元素，不带换行效果
  • 段落标签
    • 语法：

    • 作用：拆分段落
    • 特点：块级元素，自带换行效果
  • 分割线
    • 语法：
      或

6. HTML中常用转义字符【实体字符】

  • 语法：以&开头，以；结尾
  • 常用转义字符
    • 空格：
      • 普通空格：【 】
      • 中文空格：【 】
    • 大于号：【>】
    • 小于号：【<】
    • 版权号：【©】

7. HTML重点标签

7.1 插入图片

  • 语法：day01_HTML_CSS - 图6文本
  • 属性
    • src：必须，设置插入图片路径
    • title：设置鼠标移入【悬停】时，提示文本
    • alt：设置图片路径有误时，提示文本

7.2 超链接

  • 语法：
  • 属性：
    • href：设置链接目标资源路径
    • target：设置链接目标资源方式
      • _blank：设置目标资源以新选项卡打开
      • _self：设置目标资源以当前选项卡打开

7.3 列表

  • 有序列表【order list】
    • 语法：
    • type：设置列表项类型
      • 1：默认值
      • a|A
      • i|I
  • 无序列表【unorder list】
    • 语法：
    • type：设置列表项类型
      • disc：实心圆形，默认值
      • square：实心方形
      • circle：空心圆形
      • none：空值
  • 定义列表

8. 项目中路径问题

  • 真实路径：基于本地盘符下的某个路径，如：C:/xxx
    • 真实路径适用于：IO、文件上传下载等场景
  • 相对路径：基于当前项目下当前文件的路径，继续检索文件，如：../3.jpg或2.jpg
    • 真实web应用，不建议使用
  • 绝对路径：基于当前服务器下的某个路径，如：http://localhost:8080/xxx
    • 真实web应用，建议使用

9. HTML中表格

9.1 表格语法

















1112 13
2131 22 23
32 33

9.2 跨行跨列

  • rowspan：跨行
  • colspan：跨列

10. HTML中表单

10.1 表单中标签

  • 使用form标签制作表单
  • 使用input\select\button\textarea制作表单项

10.2 表单中属性

  • action：设置表单提交路径
  • method：设置表单提交方式
    • get：
    • post：

10.3 input标签属性

  • type：设置表单项类型
    • text：单行文本框
    • password：密码框
    • submit：提交按钮
    • radio：单选框
      • 一组单选框的name属性值，必须一致
      • 必须为单选框设置value属性值
    • checkbox：多选框
      • 多选框注意事项，与单选框一致
    • reset：重置按钮
    • hidden：隐藏域【表单中需要当前数据，但无需显示时，使用隐藏域】
    • file：文件域
  • name：设置表单项名称
    • 如表单项需要提交数据时，必须为表单项设置name属性值
    • 如一组单选框或多选框，必须将name属性值设置一致才可以
  • value：设置表单项数值
    • 当为按钮设置value数值时，改变按钮默认文本值
    • 当为非按钮设置value数值时，设置表单项默认值
    • 如使用单选框或多选框，必须设置value数值
  • checked：设置单选框和多选框默认选中
  • selected：设置下拉框默认选中

10.4 select 标签

  • select标签制作下拉框
  • 语法
  • 注意：如option中未设置value属性值时，会将option开始结束标签的内部文本值作为value提交