【JavaWeb】HTML、CSS

Web开发

Web介绍

Web：全球广域网，也称为万维网(www World Wide Web)，能够通过浏览器访问的网站。

Web 网站的工作流程

image-20240412145130187

整个流程如下：

  1. 浏览器先向前端服务器请求前端资源，也就是我们所说的网页；
  2. 浏览器再向后台服务器发起请求，获取数据；
  3. 浏览器将得到的后台数据填充到网页上，然后展示给用户去看。

网站的开发模式

**Web开发=开发网站~**主要有2种：前端台分离和混合开发，目前流行的是前后端分离开发模式。

前后台分离：（目前企业开发的主流，市场占有率70%以上）这种开发模式的特点如下

  • 前端人员开发前端程序，前端程序单独部署到前端服务器上

  • 后端人员开开发后端程序，后端程序单独部署到后端服务器上

网站开发技术

前端

技术 描述
HTML 用于构建网站的基础结构的
css 用于美化页面的，作用和化妆或者整容作用一样
JavaScript 实现网页和用户的交互
Vue 主要用于将数据填充到html页面上的
Element 主要提供了一些非常美观的组件
Nginx 一款web服务器软件，可以用于部署我们的前端工程

后端

技术 描述
Maven 一款java中用于管理项目的软件
Mysql 最常用的一款数据库软件之一
SpringBoot spring家族的产品，当前最为主流的项目开发技术。
Mybatis 用于操作数据库的框架

前端开发

整体认知

  1. 网页有哪些部分组成 ?
    • ​ 文字、图片、音频、视频、超链接、表格等等。
  2. 我们看到的网页，背后的本质是什么 ?
    • 程序员写的前端代码 (备注：在前后端分离的开发模式中。)
  3. 前端的代码是如何转换成用户眼中的网页的 ?
    • 通过浏览器转化（解析和渲染）成用户看到的网页。
    • 浏览器中对代码进行解析和渲染的部分，称为 浏览器内核。

Web标准

即网页标准，一系列，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。由三个组成部分：

  • HTML：负责网页的结构（页面元素和内容）。
  • CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
  • JavaScript：负责网页的行为（交互效果）。

HTML & CSS

快速入门

什么是HTML ?

**HTML: **HyperText Markup Language，超文本标记语言。

  • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。

  • 标记语言：由标签构成的语言

    • HTML标签都是预定义好的。例如：使用 <h1> 标签展示标题，使用<a>展示超链接，使用<img>展示图片，<video>展示视频。
    • HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

html的固定基本结构

1
2
3
4
5
6
7
8
9
<html>
	<head>
		<title>HTML 快速入门</title>
	</head>
	<body>
		<h1>Hello HTML</h1>
		<img src="1.jpg"/>
	</body>
</html>

<html>是根标签，<head>和<body>是子标签，<head>中的字标签<title>是用来定义网页的标题的，里面定义的内容会显示在浏览器网页的标题位置。 <body> 中编写的内容，就网页中显示的核心内容。

HTML中的标签特点

  • HTML标签不区分大小写
  • HTML标签的属性值，采用单引号、双引号都可以
  • HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)

什么是CSS ?

CSS: Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。

基础标签 & 样式

标题

【标题排版】

图片标签：<img>

  • src：指定图像的url（绝对路径 / 相对路径）
  • width：图像的宽度（像素 / 相对于父元素的百分比）
  • height：图像的高度（像素 / 相对于父元素的百分比）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
A. 图片标签: <img>

B. 常见属性: 
	src: 指定图像的url (可以指定 绝对路径 , 也可以指定 相对路径)
	width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比)
	height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)
	
	备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。
	
C. 路径书写方式:
    绝对路径:
        1. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.png
        			   <img src="C:\Users\Administrator\Desktop\HTML\img\news_logo.png">

        2. 绝对网络路径: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
        			   <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
    
    相对路径:
        ./ : 当前目录 , ./ 可以省略的
        ../: 上一级目录

标题标签h系列

  • 标题标签：<h1> - <h6>
  • 水平线标签：<hr>图片
1
2
3
4
5
6
7
8
9
10
A. 标题标签: <h1> - <h6>
    
	<h1>111111111111</h1>
	<h2>111111111111</h2>
	<h3>111111111111</h3>
	<h4>111111111111</h4>
	<h5>111111111111</h5>
	<h6>111111111111</h6>
	
B. 效果 : h1为一级标题，字体也是最大的 ； h6为六级标题，字体是最小的。

注意：HTML标签都是预定义好的，不能自己随意定义。

[补充]<span>标签

  • <span> 是一个在开发网页时大量会用到的没有语义的布局标签
  • 特点：一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

[补充]路径选择

  1. (1)绝对路径：绝对磁盘路径（D:/xxxx）、绝对网络路径（https://xxxx）
  2. (2)相对路径：从当前文件开始查找。 （./ : 当前目录, ../ : 上级目录）

【标题样式】

CSS引入方式：

  • (1)行内样式：写在标签的style属性中（不推荐），属性值是css属性键值对。
1
<h1 style="xxx: xxx; xxx: xxx;">中国新闻网</h1>
  • (2)内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中），在标签内部定义css样式。
1
2
3
4
5
6
<style>
  h1 {
     xxx: xxx; 
     xxx: xxx;
  }
</style>
  • (3)外联样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入，通过href属性引入外部css文件。）
1
2
3
4
5
6
h1 {
   xxx: xxx; 
   xxx: xxx;
}

<link rel="stylesheet" href="css/news.css">

上述3种引入方式，企业开发的使用情况如下：

  1. 内联样式会出现大量的代码冗余，不方便后期的维护，所以不常用。
  2. 内部样式，通过定义css选择器，让样式作用于当前页面的指定的标签上。
  3. 外部样式，html和css实现了完全的分离，企业开发常用方式。
[补充]CSS属性-颜色设置方式
表示方式 表示含义 取值
关键字 预定义的颜色名 red、green、blue…
rgb表示法 红绿蓝三原色，每项取值范围：0-255 rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
十六进制表示法 #开头，将数字转换成十六进制表示 #000000、#ff0000、#cccccc，简写：#000、#ccc

颜色属性：color: 设置文本内容的颜色

[补充]CSS选择器：来选取需要设置样式的元素(标签)

image-20240412170049481

(1)元素（标签）选择器：

  • 选择器的名字必须是标签的名字
  • 作用：选择器中的样式会作用于所有同名的标签上
1
2
3
元素名称 {
    css样式名:css样式值；
}

例子如下：

1
2
3
div{
    color: red;
}

(2)id选择器:

  • 选择器的名字前面需要加上#
  • 作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）
1
2
3
#id属性值 {
    css样式名:css样式值；
}

例子如下：

1
2
3
#did {
    color: blue;
}

(3)类选择器：

  • 选择器的名字前面需要加上 .
  • 作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个
1
2
3
.class属性值 {
    css样式名:css样式值；
}

例子如下：

1
2
3
.cls{
     color: green;
 }

[补充]css属性

  • font-size：字体大小 （注意：记得加px）

【超链接】

标签：

1
<a href="..." target="...">央视网</a>

属性：

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

[补充]CSS属性

  • text-decoration：规定添加到文本的修饰，none表示定义标准的文本。
  • color：定义文本的颜色。

正文

【正文排版】

  1. 视频标签：<video>
    • src：规定视频的url
    • controls：显示播放控件
    • width：播放器的宽度
    • height：播放器的高度
  2. 音频标签：<audio>
    • src：规定音频的url
    • controls：显示播放控件
  3. 段落标签：换行~<br> , 段落：<p>
显示结果 描述 占位符
空格 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
“ 引号 &quot;
‘ 撇号 &apos;

​ 4. 文本加粗标签: <b> / <strong>

效果 标签 标签(强调)
加粗 b strong
倾斜 i em
下划线 u ins
删除线 s del
[补充]CSS属性-文本排版样式
  • line-height：设置行高
  • text-indent：定义第一个行内容的缩进
  • text-align：规定元素中的文本的水平对齐方式

【页面布局】

盒子模型
  • 盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。
  • 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）。

image-20240412154004604

布局标签

实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。

  • 标签：<div> <span>
  • 特点：
    • div标签：
      • 一行只显示一个（独占一行）
      • 宽度默认是父元素的宽度，高度默认由内容撑开
      • 可以设置宽高（width、height）
    • span标签：
      • 一行可以显示多个
      • 宽度和高度默认由内容撑开
      • 不可以设置宽高（width、height）
[补充]CSS盒子模型
  • 组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）
[补充]CSS属性
  • width：设置宽度
  • height：设置高度
  • border：设置边框的属性，如：1px solid #000；
  • padding：内边距
  • margin：外边距
  • 注意：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上 – 位置，如：padding-top、padding-left、padding-right …
布局实现
  1. 需要将body中的新闻标题部分、正文部分使用一个 div 布局标签将其包裹起来，方便通过css设置内容占用的宽度，比如：65%。
  2. 通过css为该div设置外边距，左右的外边距分别为：17.5%，上下外边距靠边展示即可，为：0%。

表格、表单标签

表格标签

场景：在网页中以表格（行、列）形式整齐展示数据，如：班级表。
标签：

标签 描述 属性/备注
<table> 定义表格整体，可以包裹多个 <tr> border：规定表格边框的宽度
width：规定表格的宽度
cellspacing: 规定单元之间的空间。
<tr> 表格的行，可以包裹多个 <td>
<td> 表格单元格(普通)，可以包裹内容 如果是表头单元格，可以替换为 <th>

表单标签

场景：在网页中主要负责数据采集功能，如 注册、登录等数据采集。

标签：<form>

  • 表单项：不同类型的 input 元素、下拉列表、文本域等。
    • <input>：定义表单项，通过type属性控制输入形式
    • <select>：定义下拉列表，<option>定义列表项
    • <textarea>：定义文本域
  • 属性：
    • action：规定当提交表单时向何处发送表单数据，URL
    • method：规定用于发送表单数据的方式。GET、POST
      • GET：表单数据是拼接在url后面的， 如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。
      • POST： 表单数据是在请求体（消息体）中携带的，大小没有限制。

注意事项

  • 表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。 否则，无法提交该表单项。
1
用户名: <input type="text" name="username">

表单标签-表单项<input>

type取值 描述 形式
text 默认值，定义单行的输入字段 image-20240412160140233
password 定义密码字段 image-20240412160146970
radio 定义单选按钮 image-20240412160153981
checkbox 定义复选框 image-20240412160200603
file 定义文件上传按钮 image-20240412160208339
date/time/datetime-local 定义日期/时间/日期时间 image-20240412160216061
number 定义数字输入框 image-20240412160227021
email 定义邮件输入框 image-20240412160235837
hidden 定义隐藏域
submit / reset / button 定义提交按钮 / 重置按钮 / 可点击按钮 image-20240412160242687

文档查阅

文档地址: https://www.w3school.com.cn/index.html