Java 阶段四 Day01 Web前端、HTML、CSS

Web前端
HTML
CSS
- CSS引入方式
- CSS选择器

网站的基本架构包括客户端、Web服务器和数据库服务器。

客户端（页面展示）：
- 客户端是指用户使用的设备或应用程序，通常是在浏览器中访问网站的用户界面。
- 客户端负责显示网站的内容、交互元素和用户界面。
- 客户端可以是桌面电脑、笔记本电脑、平板电脑或手机等设备。
- 客户端通过与Web服务器进行通信来请求和接收网站的数据和页面。
Web服务器（业务逻辑）：
- Web服务器是托管网站的计算机，它接收来自客户端的请求，并处理这些请求以提供所需的网页和数据。
- Web服务器包含网站的业务逻辑，负责处理用户请求、执行相关操作、生成动态内容等。
- 常见的Web服务器软件包括Apache、Nginx、Microsoft IIS等。
- Web服务器通常与应用程序框架（如Django、Ruby on Rails、Express.js等）结合使用，以处理具体的业务逻辑。
数据库服务器（数据存储）：
- 数据库服务器用于存储和管理网站的数据，包括用户信息、文章、商品信息等。
- 客户端和Web服务器可以通过数据库服务器来读取和写入数据。
- 常见的数据库管理系统包括MySQL、PostgreSQL、Microsoft SQL Server、MongoDB等。
- 数据库服务器负责处理数据库查询和事务，确保数据的安全性和一致性。

基本的网站架构通常涉及到这三个主要组件，它们一起协作以提供用户友好的网站体验。客户端与Web服务器之间的通信通常使用HTTP协议进行，而Web服务器与数据库服务器之间的通信涉及数据库查询语言（如SQL）等。此外，还有其他的组件和技术，如负载均衡、缓存、安全性措施等，可以进一步增强网站的性能和功能。

Web前端

前端开发任务：

前端开发人员负责创建网站的用户界面，包括网页的布局、设计、样式和交互元素。
使用HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript等技术来实现网页的结构、样式和交互。
前端开发还涉及响应式设计，以确保网站在不同设备上具有良好的用户体验，包括桌面电脑、平板电脑和手机。

前端技术：

HTML：用于定义网页的结构和内容。
CSS：用于设置网页的样式、布局和外观。
JavaScript：用于实现网页的交互功能，包括动态加载内容、表单验证、响应用户事件等。
前端框架和库：如React、Angular、Vue.js等，用于简化前端开发并提供可重用的组件和工具。

HTML

HTML（Hypertext Markup Language）是一种标记语言，用于创建网页的结构和内容。HTML是Web开发的基础，它定义了网页上的文本、图像、链接和其他元素的结构和排列方式。

标记语言的格式

HTML文档结构：

HTML文档通常由<!DOCTYPE>声明、<html>元素、<head>元素和<body>元素组成。
<!DOCTYPE>声明指定了HTML文档的类型，通常是。
<html>元素包含整个HTML文档，它包括和两个部分。
<head>元素包含文档的元信息，如标题、字符集设置和引用外部资源。
<body>元素包含页面的主要内容，如文本、图像、链接等。

常见文本标签

内容标题 <h1></h1> ~ <h6></h6>：字体加粗, 独占一行, 自带上下的间距
段落标签 <p></p>：独占一行, 自带上下间距
水平分割线 <hr>
换行 <br>

字体相关标签

加粗 <b></b>
斜体 <i></i>
下划线 <u></u>
删除线 <s></s>

列表标签

无序列表 <ul><li></li></ul>
有序列表 <ol><li></li></ol>
列表嵌套有序列表和无序列表，可以任意无限嵌套

图片和超链接

图片`<img>`标签

src：设置资源路径
- 相对路径：访问站内资源时使用
  1. 资源和页面在同级目录：直接写图片名
  2. 资源在页面的上级目录： … / 图片名
  3. 资源在页面的下级目录：文件夹名 / 图片名
- 绝对路径：访问站外资源时使用，称为图片盗链，有找不到图片的风险
alt：当图片不能加载时显示的文本
title：鼠标悬停时显示的文本
width / height：设置宽高
- 两种赋值方式
  1. 像素
  2. 百分比
- 只设置宽度高度会自动等比例缩放

超链接`<a>`标签

将用户从一个Web页面或站点带到另一个页面或位置
href：属性指定目标页面的URL(类似图片的src属性)
target：指定链接在何处打开，常见的值有 _blank (在新窗口中打开) 和_self (在当前窗口中打开)，如果没有设置 target 属性，则默认在当前窗口中打开链接
页面内部跳转：在目的地元素里面添加id属性, 然后在超链接href="#id"，这样就能跳转到指定元素的位置

表格和表单

表格`<table>`标签

<tr></tr> (table row) 标签定义表格中的行
<td></td> (table data)标签定义表格中的单元格（数据）
<th></th> (table header)标签定义表头
<caption></caption> 定义表格名称，加粗并居中
相关属性：
- colspan 跨列
- rowspan 跨行

表单`<form>`标签

<form></form>表单的作用：用来获取用户输入的各种信息提交给服务器

扫描二维码关注公众号，回复： 17485606 查看本文章

标签	介绍
`<input type="text">`	文本框
`<input type="password">`	密码框
`<input type="radio">`	单选框
`<input type="checkbox">`	多选框
`<input type="date">`	日期
`<input type="file">`	文件
`<select><option></option></select>`	下拉框
`<button></button>`	按钮

CSS

CSS，全称层叠样式表（Cascading Style Sheets），是一种用于描述HTML（超文本标记语言）网页的呈现和布局的样式表语言。CSS是Web开发的关键技术，它允许开发人员控制Web内容的视觉外观，使其看起来吸引人并且用户友好。

以下是CSS的一些关键方面：

选择器：CSS选择器是用于选择和样式化HTML元素的模式。例如，您可以选择所有的<p>元素或具有特定类别或ID的特定元素。

/* 选择所有的 <p> 元素 */
p {
      
      
    color: blue;
}

/* 选择类名为 "highlight" 的元素 */
.highlight {
      
      
    background-color: yellow;
}

属性：CSS属性定义了如何样式化所选择的元素。属性包括诸如color、font-size、background-color、margin、padding等等。
```
/* 更改文本颜色和字体大小 */
p {
      
      
    color: red;
    font-size: 16px;
}
```
值：CSS属性被赋予值。值可以是具体的值，如12px、#FF0000（十六进制颜色）或关键词，如bold表示font-weight的加粗。
层叠：CSS中的“C”表示层叠。这意味着样式可以从父元素继承，并可以由子元素覆盖或添加。此外，可以使用多个样式表，样式根据特定性层次应用。
盒模型：CSS定义了如何使用盒模型在Web页面上显示元素。每个元素被视为一个矩形框，具有内容、内边距、边框和外边距。

响应式设计：CSS在创建响应不同屏幕尺寸和设备的网页设计时起着至关重要的作用。媒体查询通常用于根据设备的特征应用不同的样式。

/* 小屏幕的媒体查询示例 */
@media (max-width: 768px) {
      
      
    body {
      
      
        font-size: 14px;
    }
}

CSS框架：开发人员通常使用CSS框架，如Bootstrap、Foundation或Materialize，以简化创建响应式和视觉吸引人的网站的过程。这些框架提供了预设计的CSS类和组件。

动画和过渡：CSS可用于创建动画和过渡效果，从而实现交互式和引人入胜的用户体验。

/* 简单CSS动画示例 */
@keyframes fadeIn {
      
      
    from {
      
      
        opacity: 0;
    }
    to {
      
      
        opacity: 1;
    }
}

/* 将动画应用于元素 */
.fade-in-element {
      
      
    animation: fadeIn 2s ease-in-out;
}

外部、内部和内联CSS：可以以不同的方式将CSS应用于HTML文档。可以将其作为外部CSS文件引入，内部使用<style>标签包含在HTML文档中，或者内联在HTML元素中使用style属性。

<!-- 外部CSS -->
<link rel="stylesheet" type="text/css" href="styles.css">

<!-- 内部CSS -->
<style>
    h1 {
        
        
        color: purple;
    }
</style>

<!-- 内联CSS -->
<p style="font-weight: bold;">这是粗体文本。</p>

CSS是Web开发人员的重要技能，因为它使他们能够创建视觉吸引人且响应式的Web应用程序。它与HTML一起用于构建Web内容，与JavaScript一起用于交互性，构成了现代Web开发的基础。

CSS引入方式

上面提到，CSS包含外部、内部和内联三种引入方式。

内联：在标签的style属性中添加样式代码，不能复用
内部：在head标签里面添加style标签，在标签体内添加样式代码，可以当前页面复用不能多页面复用
外部：在单独css文件中添加样式代码，在html页面中的head标签里面添加link标签把css引入到html页面中，支持多页面复用

CSS选择器

CSS选择器是用于选择HTML文档中要应用样式的元素的模式。选择器允许您根据元素的类型、类别、ID、属性等条件来选择一个或多个元素。以下是一些常用的CSS选择器示例：

元素选择器：选择特定类型的HTML元素。

p {
      
      
    color: blue; /* 所有 <p> 元素将变成蓝色 */
}

类选择器：选择具有特定类别的元素。

.highlight {
      
      
    background-color: yellow; /* 所有具有 "highlight" 类的元素将具有黄色背景 */
}

ID选择器：选择具有特定ID的元素。

#header {
      
      
    font-size: 24px; /* 具有 "header" ID的元素的字体大小为24像素 */
}

后代选择器：选择元素的后代元素。

article p {
      
      
    font-style: italic; /* 选择<article>元素内的所有<p>元素并将它们的字体样式设置为斜体 */
}

子选择器：选择元素的直接子元素。

ul > li {
      
      
    list-style-type: square; /* 选择<ul>元素下的直接<li>元素，并将它们的列表样式设置为方块，但不包含<li>的后代 */
}

通用选择器：选择所有元素。

* {
      
      
    margin: 0;
    padding: 0; /* 清除所有元素的默认边距和填充 */
}

属性选择器：选择具有特定属性的元素。

input[type="text"] {
      
      
    border: 1px solid #ccc; /* 选择所有type属性为"text"的<input>元素并为它们添加边框 */
}

伪类选择器：选择元素的特定状态或位置。

a:hover {
      
      
    text-decoration: underline; /* 鼠标悬停在链接上时为其添加下划线 */
}

伪元素选择器：选择元素的特定部分，如首字母或最后一个行。

p::first-line {
      
      
    font-weight: bold; /* 选择每个<p>元素的第一行并将其字体加粗 */
}