java综合开发-前后端分离-01前端html，css

• [ 任务列表 ]
• 1.阶段目标
• 2.网页基础知识
• 3.html和css
• 4.html的常用标签
• 4.1. 标题标签：h1-h6
• 4.2. 图片标签：img
• 4.3. 水平分割线标签：hr
• 4.4. css的三种引入方式：
• 4.5. 颜色的三种表示形式：
• 4.6. css的三种选择器：
• 4.7. 无语义的标签：span
• 4.8. 超链接：a
• 4.9. 视频标签：video
• 4.10. 音频标签：audio
• 4.11. 段落标签：p
• 4.12. 空格：&nbsp；
• 5.页面布局
• 5.1. 盒子模型
• 5.2. 布局标签：div，span
• 5.3. 表格标签：table
• 5.4. 表单标签：form
• 5.5. 表单项标签：Input，select，textarea
• 5.6. 多区域选中标签：label
• 6.补充知识

1.阶段目标

• 学习路线：
  

• 学习目标：
  具备一定的Java基础；
  掌握数据库表的设计和操作能力，基础的优化能力；
  掌握主流的前后端分离的开发模式；
  掌握文本开发核心知识，接口开发能力；
  掌握文本开发的解决方案。

• web：全球广域网，万维网（www world wide web），能够通过浏览器访问的网站。

• web应用的基础架构（web架构的重要组成部分）：
  浏览器；
  前端服务器（前端程序）；
  后端服务器（Java程序）；
  数据库服务器。

2.网页基础知识

• 网页的组成部分：
  文字，图片，音频，视频，超链接……

• 网页背后的本质是什么？
  前端代码。

• 前端代码如何转换为用户看到的网页的？
  通过浏览器转化（解析和渲染）；
  浏览器中对代码进行解析渲染的部分称为浏览器内核。

• web标准：由w3c（world wide web Consortium，万维网联盟）负责制定；

• 网页的三个组成部分：
  HTML：负责网页的结构（页面元素和内容）；
  CSS：负责网页的表现（外观，位置，颜色，大小）；
  JavaScript（简称js）：负责网页的行为（交互效果）。

3.html和css

• HTML（HyperText Markup Language）：超文本标记语言。
  超文本：超越了文本的限制，比普通文本更强大；
  标记语言：由标签构成的语言，标签都是预定义好的。

• HTML快速入门：
  ① 创建文本文件，后缀名改为.html；
  ② 编写HTML结构标签；
  ③ 在中填写内容。

• HTML的特点：
  html标签不区分大小写；
  html标签一般写在之中，而且一般成对出现；
  html标签属性值单双引号都可以；
  html语法松散。

    
    
    

    
Hello World

• css（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（外观，位置，颜色，大小）。

• css三种引入方式：

  • 行内样式：写在style属性中（不推荐）
  • 内嵌样式：写在style标签中（可以写在页面任何位置，通常约定写在head标签中）
  • 外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）

4.html的常用标签

1. 标题标签：h1 - h6

（大 - 小）

2. 图片标签：img

• 属性值：
  • src：图片资源路径；
  • width：宽度（px，像素；%，相对于父元素的百分比）；
  • height：高度（px，像素；%，相对于父元素的百分比）；
  • 为了等比例缩放，通常在高度和宽度中只会选择一个进行设置。
• 路径的书写方式：
  • 绝对路径：
    • 绝对磁盘路径：E:workJavawebHTMLimgnews_logo.png
      
    • 绝对网络路径：https://i2.sinaimg.cn/……/news_logo.png
      
  • 相对路径：（推荐使用相对路径）
    • ./ 当前目录，其中./可以省略的
    • ../ 上一级目录，../不可省略

3. 水平分割线标签：hr

作用：画出一条水平分割线。

4. css的三种引入方式：

• 方式一：行内样式：写在style属性中（不推荐）
  

  焦点访谈：中国底气 新思想夯实大国粮仓

• 方式二：内嵌样式：写在style标签中（可以写在页面任何位置，通常约定写在head标签中）

• 方式三：外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入，也是通常约定写在head标签中）

h1{
    color: aqua;
}

5. 颜色的三种表示形式：

• 关键字：预定义颜色名，red，green……
• rgb表示法：每项取值0-255
• 十六进制表示法：#开头，将数字转换成十六进制表示。其中两位是一样的可以简写。例如：#000000 ==> #000 ，#cccccc ==> #ccc

6. css的三种选择器：

作用：用来选取需要设置样式的元素（标签）
作用的优先级：id选择器 > 类选择器 > 元素选择器

• id选择器：一个页面中，id是唯一的
• 类选择器：一个页面中，class是可以重复的。
• 元素选择器：例如h1，h2……

7. 无语义的标签：span

作用：组合行内元素，一行可以展示多个span标签

8. 超链接：a

• 属性值：

  • href：指定资源访问的url
  • target：制定在何处打开资源链接
  • _self：默认值，在当前页面打开
  • _blank：在空白页面打开

• 去掉超链接中的下划线，和颜色定义成黑色：

  • text-decoration：文本装饰
  • color：定义文本颜色（black）

9. 视频标签：video

属性值：

• src：视屏的url
• controls：显示视频播放控件
• width：播放器的宽度
• height：播放器的高度
  注：controls标准写法是：controls=“controls”，但在html中，如果标签的属性名和属性值一样，可以省略不写，只要一个controls

10. 音频标签：audio

属性值：

• src：音频的url
• controls：显示播放控件

11. 段落标签：p

• 文本加粗标签：b 或者 strong
  strong标签有强调的意思，不强调可以用b标签。
• 文本对齐样式：text-align：center，left，right

12. 空格：&nbsp；

在html中，无论输入多少个空格，只会显示一个。可以使用空格占位符：&nbsp；。

5.页面布局

1. 盒子模型

盒子：页面中所有的元素（标签），都可以看作是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行布局。

• 盒子模型组成：
  内容区域（content）；
  内边距区域（padding）；
  边框区域（border）；
  外边距区域（margin）。
  其中，外边距区域margin不包含在盒子里面。

2. 布局标签：div，span

• div标签：
  一行只显示一个（独占一行）；
  宽度默认是父元素的宽度，高度默认由内容撑开；
  可以设置宽高（width，height）

• span标签：
  一行可以显示多个；
  宽度和高度默认由内容撑开；
  不可以设置宽和高。

3. 表格标签：table

• 场景：在网页中以表格（行、列）形式整齐地展示数据，如班级表。
• table：表格整体，可以包裹多个tr，
  • border：规定表格边框的宽度，
  • width：规定表格的宽度，
  • cellspacing：规定单元之间的空间。
• tr：表格的行，可以包含多个td
• td：表格单元格，可以包裹内容，如果是表头单元格，可以替换成th（加粗，居中）

4. 表单标签：form

• 场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。
• 表单标签内含多个表单项标签：Input，select，textarea
  • Input：定义表单项，通过type属性控制输入形式；
  • select：定义下拉列表；
  • textarea：定义文本域。
• 属性：
  • action：规定当提交表单时向何处发送表单数据，url；
  • method：规定用于发送表单数据的方式。get，post。
    • get：在url后面拼接表单数据，比如：？username=Tom&age=12，url长度有限制。get是method提交方式的默认值
    • post：在消息体（请求体）中传递的，参数大小无限制。
      查看post内容：f12-> network -> 点击提交 -> payload
  • name：表单项必须有name属性才可以提交
  • value：表单项提交的值

    
    
    


    姓名： 

    密码：

    性别：男
        女

    

5. 表单项标签：Input，select，textarea

Input定义表单项标签，通过type属性控制输入形式。

• text：默认值，定义单行的输入字段；

• password：定义密码字段；

• radio：定义单选框；

• checkbox：定义复选框；

• file：定义文件上传按钮；

• date/time/datetime-local：定义日期/时间/日期时间；

• number：定义数字输入框；

• email：定义邮件输入框；

• hidden：定义隐藏域；

• submit/reset/button：定义提交按钮/重置按钮/可点击按钮；

• select：定义下拉列表，

  • option定义列表项；

• textarea：文本域，

  • cols：一行可以输入多少字符，
  • rows：默认多少行；

6. 多区域选中标签：label

label标签所包裹的任何区域都可以被选中。

6.补充知识

• 前端开发官方文档：https://www.w3school.com.cn/

• 前端开发工具：vscode

• 开发注意事项：
  修改完了要记得保存；
  alt+B打开浏览器运行代码。

• 浏览器打开前端代码：
  在浏览器右键：检查（打开开发者工具）；
  或者f12。

• 字体大小调整的属性：font-size，记得加上px