从零开始：我的JaveWeb学习笔记之网页设计初探：探索 HTML 、CSS的奇妙世界（JavaWeb、HTML、CSS）

Chase-Hart 2024-09-17 11:33:05 阅读 95

从零开始：我的JaveWeb学习笔记之网页设计初探：探索 HTML 、CSS的奇妙世界（JavaWeb、HTML、CSS）

JavaWeb 简介

JavaWeb 是一种使用 Java 语言开发的 Web 应用程序技术。它通常涉及服务器端的 Java 代码，如 Servlets 和 JSP 页面，以及客户端的 HTML、CSS 和 JavaScript。JavaWeb 应用程序可以处理复杂的业务逻辑，并且能够与数据库进行交互。

所以Web开发说白了，就是开发网站的，例如下图所示的网站：淘宝，京东等等

请添加图片描述

那么我们知道了web开发是开发网站的，那么我们需要学习哪些知识呢？以及这些知识在我们整个网站开发中占据什么位置呢？对于这些问题，我们就必须知道网站整体的工作流程。

前端web开发：

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

后端web开发：

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

所以只有我们学完上述的技术，我们才能开发出一个麻雀虽小，五脏俱全的网站。

HTML 简介

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它定义了网页的结构和内容，但不包括样式和行为。HTML 由一系列的元素组成，这些元素可以被浏览器识别并渲染成可视化的网页。

CSS 简介

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档的样式表语言。它能够控制网页的布局、颜色、字体以及其他视觉和版式特性。CSS 允许开发者将页面的内容（HTML）与页面的表现（CSS）分离，这样可以更灵活地进行设计和维护。

HTML 、CSS的用途和好处

HTML：

用途：

构建网页和网站的基础。定义网页的结构，如标题、段落、列表、链接等。嵌入图像、视频和其他多媒体内容。

好处：

易于学习，语法简单。强大的语义化标签，有助于搜索引擎优化（SEO）。跨平台，可以在任何浏览器上运行。

CSS：

用途：

CSS 的主要功能包括：

布局控制：CSS 可以控制元素在页面上的定位，包括浮动、定位、弹性布局（Flexbox）、网格布局（Grid）等。

颜色和背景：可以设置文本颜色、背景颜色、渐变背景等。

字体样式：包括字体类型、大小、粗细、样式（如斜体、下划线）等。

边框和边距：可以定义元素的边框样式、宽度和颜色，以及元素之间的间距（边距）。

响应式设计：通过媒体查询，CSS 可以根据不同设备的特性（如屏幕大小）应用不同的样式，实现响应式设计。

动画和过渡：CSS 可以实现简单的动画效果和过渡效果，增强用户体验。

CSS 和 HTML 的联系

HTML（超文本标记语言，HyperText Markup Language）是用于创建网页和网络应用的标准标记语言。它定义了网页的结构和内容，例如文本、图片、链接、列表等。

CSS 和 HTML 之间的关系非常紧密，它们共同工作以创建一个完整的网页：

内容与表现分离：HTML 负责网页的结构和内容，而 CSS 负责页面的布局和设计。这种分离使得网页的维护和更新更加容易。

样式应用：CSS 可以通过多种方式应用到 HTML 中：

内联样式：直接在 HTML 元素的 style 属性中写入 CSS 规则。

内部样式表：在 HTML 文档的部分使用

如何学习 HTML、CSS

基础语法： 学习 HTML 的基础标签和属性，学习CSS常用属性实践： 通过创建简单的网页来实践所学的知识。参考文档： 阅读 MDN Web Docs 或 W3Schools 等在线文档。项目： 参与实际项目，应用 HTML 、CSS知识。

HTML 的常用标签

音频、视频、段落标签

请添加图片描述

音频、视频标签

<code><audio>: 用于在网页中嵌入音频内容。<video>: 用于在网页中嵌入视频内容。

换行、段落标签

<br>: 用于在网页中创建一个换行。<p>: 用于定义段落。

文本加粗标签

<b>: 定义粗体文本。<strong>: 定义重要的文本。

CSS样式

line-height: 设置行高。text-indent: 定义第一个行内容的缩进。text-align: 规定元素中的文本的水平对齐方式。

注意

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

超链接、CSS属性

请添加图片描述

超链接

标签：<code><a>属性：

href: 指定资源访问的URL。target: 指定在何处打开资源链接。

_self: 默认值，在当前页面打开。_blank: 在空白页面打开。

CSS属性

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

表单标签

请添加图片描述

表单标签

场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。标签：<code><form>表单项：不同类型的<input>元素、下拉列表<select>、文本域<textarea>等。

表单属性

action: 表单数据提交的URL地址。method: 表单提交方式。

get: 表单数据拼接在URL后面，例如：?username=java，大小有限制。post: 表单数据在请求体中携带，大小没有限制。

注意

表单项必须有name属性才可以提交。.

表格标签

请添加图片描述

表格标签

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

标签：

<tr>

<td colspan="3">表格标签场景：在网页中以表格（行、列）形式整齐展示数据，例如班级表。标签：</td>code>

</tr>

<tr>

<td>标签</td>

<td>描述</td>

<td>属性/备注</td>

</tr>

<tr>

<td><table></td>

<td>定义表格整体，可以包裹多个<tr></td>

<td>border: 规定表格边框的宽度；width: 规定表格的宽度；cellspacing: 规定单元之间的空间。</td>

</tr>

<tr>

<td></td>

<td>表格的行，可以包裹多个<td></td>

<td></td>

</tr>

<tr>

<td><td></td>

<td>表格单元格（普通），可以包裹内容</td>

<td>如果是表头单元格，可以替换为<th></td>

</tr>

</table>

`颜色样式`

 
 
颜色表示形式
    表示方式  表示含义  取值  
 
   关键字  预定义的颜色名  <code>red、green、blue…  
  rgb表示法  红绿蓝三原色，每项取值范围：0-255  rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)  
  十六进制表示法  #开头，将数字转换成十六进制表示  #000000、#ff0000、#cccccc，简写：#000、#ccc  
 
 CSS盒子模型
 CSS盒子模型
 
 
组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。 
CSS属性

表示方式	表示含义	取值
关键字	预定义的颜色名	<code>red、`green`、`blue`…
rgb表示法	红绿蓝三原色，每项取值范围：0-255	`rgb(0,0,0)`、`rgb(255,255,255)`、`rgb(255,0,0)`
十六进制表示法	#开头，将数字转换成十六进制表示	`#000000`、`#ff0000`、`#cccccc`，简写：`#000`、`#ccc`

<code>width: 设置宽度。height: 设置高度。border: 设置边框的属性，例如：1px solid #000;padding: 内边距。margin: 外边距。

注意

如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，例如：padding-top、padding-left、padding-right…

页面布局

布局标签

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

特点

div标签：

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

span标签：

一行可以显示多个。宽度和高度默认由内容撑开。不可以设置宽高（width、height）。

HTML代码示例

<!DOCTYPE html>

<html lang="en">code>

<head>

<meta charset="UTF-8">code>

<meta name="viewport" content="width=device-width, initial-scale=1.0">code>

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

<style>

/* 设置h1标签的文本颜色为紫色 */

h1 {

color: rgb(255, 0, 255);

}

/* 设置ID为time的span标签的文本颜色为红色，并设置字体大小 */

#time {

color: rgb(255, 0, 0);

font-size: 13px;

}

/* 设置超链接的文本颜色为浅绿色，并去除下划线 */

a {

color: aquamarine;

text-decoration: none;

}

/* 设置p标签的首行缩进和行高 */

p {

text-indent: 20px;

line-height: 40px;

}

/* 设置ID为plast的p标签的文本右对齐 */

#plast {

text-align: right;

}

/* 设置ID为中心的div标签的宽度、居中显示 */

#center {

width: 65%;

margin: 0 auto;

}

</style>

</head>

<body>

<div id="center">code>

<img src="../img/news_logo.png"><a href="https://gov.sina.cn/" target="_self">新浪政务</a>->正文code>

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

<hr>

<span id="time">2024年9月31日 19:01</span> <a href="https://gov.sina.cn/" target="_blank">央视网</a>code>

<hr>

<p>

<b>枸杞</b>作为“药食同源”的代表性品种，广泛应用于食品、饮料、保健品等领域。然而，看起来颗粒饱满、鲜艳红亮的枸杞，背后却隐藏着不为人知的秘密，有着巨大的食品安全隐患，威胁消费者身体健康。

</p>

<img src="../img/1.jpg">code>

<p>

青海省海西蒙古族藏族自治州格尔木市生长出的枸杞因颗粒大且饱满、色泽鲜红、果肉厚实、含糖量高等优势深受消费者喜爱。然而有知情人表示，这里有些厂家、商户在生产枸杞的过程中存在使用焦亚硫酸钠进行“提色增艳”的情况。

</p>

<p id="plast">code>

文章关键词：央视靖远县甘肃省

</p>

</div>

</body>

</html>

HTML示例图片：

 
 
   上一篇： 通过示例学习 Go 中的 Web 编程 
  下一篇： Nuxt Kit 中的页面和路由管理  
  本文标签 
  从零开始：我的JaveWeb学习笔记之网页设计初探：探索 HTML 、CSS的奇妙世界（JavaWeb、HTML、CSS）    
 
  
  声明
  本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
 如有涉及侵权，请联系本站进行删除
 转载本站原创文章，请注明来源及作者。