JavaWeb 学习笔记

D01 web及HTML#

Web网站的工作流程：路由器 - 前端服务器 - 后端Java程序 - 数据库服务器 = 前后端分离开发

前端Web开发

  • HTML、CSS、JavaScript
  • Vue、Element、Nginx

后端Web开发

  • Maven
  • SpringBoot Web
  • MySQL
  • SpringBoot Mybatis

Web标准：三个组成部分 HTML（网页的结构）、CSS（网页的表现）、javaScript（网页的行为）

HTML#

  • 结构标签：html - head body
  • 特点：不区分大小写、属性值单双引号都可以、语法松散

CSS#

CSS引入方式：行内/内嵌/外联（写在单独的css文件中）

<link rel="stylesheet" href="style.css">

CSS 颜色表示形式：关键字/rgb(0,0,0)/十六进制表示#ff0000

CSS 选择器：元素选择器（元素名称 element）/ID选择器（元素ID #time）/类选择器（元素CLASS .cls）

超链接#

<a href="" target="_self or _blank">

  • _self: 当前页面，默认
  • _blank: 新页面
  • _parent: 现在已经不常用，在父级框架打开
  • _top: 现在已经不常用，在整个窗口中打开链接

text-decoration: none; 指定文本装饰。

视频#

  • src: 视频的url
  • controls: 显示播放控件
  • width
  • height

音频#

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

段落#

<p>

  • text-indent: 首行缩进
  • text-align: 文本对齐设置

文本加粗#

<b> / <strong>

HTML页面的整体布局#

盒子模型：内容区域content、内边距区域padding、边框区域border、外边距区域margin

div标签#

  • 一行只显示一个
  • 宽度默认是父元素的宽度
  • 可以设置宽高

span标签#

  • 一行可以显示多个
  • 宽度和高度默认由内容撑开
  • 不可以设置宽高

边距元素#

顺时针 - 上右下左

表格标签#

  • table: 定义表格整体
  • tr: 表格的行
  • td: 表格单元格，表头则为th

表单标签#

form -> action/method

  • input: 表单项，通过type控制输入形式
  • select: 下拉列表
  • textarea: 文本域
  • input type=submit: 提交按钮

能采集数据必须有内部属性name

label标签，聚焦区域全部元素；单选/多选按钮一组内需要有相同的name；提交的为value值