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

server/2024/9/18 6:03:12/ 标签: 学习, 笔记, html, 前端, css

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

JavaWeb 简介

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

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

请添加图片描述

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

前端web开发：

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

后端web开发：

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

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

HTML 简介

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

CSS 简介

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

HTML 、CSS的用途和好处

HTML：

  • 用途：

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

  • 好处：

    • 易于html" title=学习>学习，语法简单。
    • 强大的语义化标签，有助于搜索引擎优化（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" title=学习>学习 HTML、CSS

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

HTML 的常用标签

音频、视频、段落标签

请添加图片描述

音频、视频标签

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

换行、段落标签

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

文本加粗标签

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

CSS样式

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

注意

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

超链接、CSS属性

请添加图片描述

超链接

  • 标签：<a>
  • 属性：
    • href: 指定资源访问的URL。
    • target: 指定在何处打开资源链接。
      • _self: 默认值，在当前页面打开。
      • _blank: 在空白页面打开。

CSS属性

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

表单标签

请添加图片描述

请添加图片描述

表单标签

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

表单属性

  • action: 表单数据提交的URL地址。
  • method: 表单提交方式。
    • get: 表单数据拼接在URL后面，例如：?username=java，大小有限制。
    • post: 表单数据在请求体中携带，大小没有限制。

注意

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

表格标签

请添加图片描述

表格标签

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

  • 标签：

    html"><table><tr><td colspan="3">表格标签场景：在网页中以表格（行、列）形式整齐展示数据，例如班级表。标签：</td></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>

颜色样式

请添加图片描述

颜色表示形式

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

CSS盒子模型

CSS盒子模型

请添加图片描述

  • 组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。

CSS属性

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

注意

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

页面布局

布局标签

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

特点

  • div标签：

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

  • span标签：

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

HTML代码示例

html"><!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：中国底气 新思想夯实大国粮仓</title><!-- 内嵌样式 --><style>css">/* 设置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"><!-- 网站logo和导航链接 --><img src="../img/news_logo.png"><a href="https://gov.sina.cn/" target="_self">新浪政务</a>->正文<!-- 主标题 --><h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1><!-- 分隔线 --><hr><!-- 时间和来源 --><span id="time">2024年9月31日 19:01</span> <a href="https://gov.sina.cn/" target="_blank">央视网</a><hr><!-- 正文内容 --><p><b>枸杞</b>作为“药食同源”的代表性品种，广泛应用于食品、饮料、保健品等领域。然而，看起来颗粒饱满、鲜艳红亮的枸杞，背后却隐藏着不为人知的秘密，有着巨大的食品安全隐患，威胁消费者身体健康。</p><!-- 相关图片 --><img src="../img/1.jpg"><p>青海省海西蒙古族藏族自治州格尔木市生长出的枸杞因颗粒大且饱满、色泽鲜红、果肉厚实、含糖量高等优势深受消费者喜爱。然而有知情人表示，这里有些厂家、商户在生产枸杞的过程中存在使用焦亚硫酸钠进行“提色增艳”的情况。</p><!-- 文章关键词 --><p id="plast">文章关键词：央视 靖远县 甘肃省</p></div>
</body></html>

HTML示例图片：

在这里插入图片描述


http://www.ppmy.cn/server/112188.html

相关文章

ubuntu任何版本 卡死 解决办法

ubuntu任何版本 卡死 解决办法

首先&#xff0c;我们一定要记得ubuntu一定不要强制关机&#xff0c;一定&#xff0c;一定 因为90% 的可能你的电脑从此就会黑屏开不了机了&#xff0c;然后你就可以按照我的方法去卸载&#xff0c;重装ubuntu系统了。/(ㄒoㄒ)/~~ &#xff08;如果能解决您的问题&#xff0c…
阅读更多...
监控视频删除了怎么恢复回来？教你恢复的方法

监控视频删除了怎么恢复回来？教你恢复的方法

在数字化安防时代&#xff0c;监控视频的重要性日益凸显。然而&#xff0c;由于操作失误、设备故障或存储问题等原因&#xff0c;监控视频有时会被意外删除&#xff0c;给个人或企业带来不必要的麻烦和损失。 那么&#xff0c;当监控视频被删除后&#xff0c;我们该如何恢复呢…
阅读更多...
单门店共享自习室小程序系统源码搭建对接门禁和空开api

单门店共享自习室小程序系统源码搭建对接门禁和空开api

共享自习室小程序&#xff0c;单门店共享自习室小程序&#xff0c;有源码&#xff0c;对接门禁和电控api接口&#xff0c;php开发语言&#xff0c;前端是uniapp。可以源码搭建&#xff0c;也可以二开或定制。 一 用户端 在线选择预约时间&#xff0c;选择座位&#xff0c;选择…
阅读更多...
uniapp ios sticky定位，内部 u-tabs（包含scroll-view）消失问题

uniapp ios sticky定位，内部 u-tabs（包含scroll-view）消失问题

uniapp中用sticky定位时&#xff0c;元素内部如果有scroll-view&#xff0c;ios在触发bounce机制时&#xff0c;scroll-view的元素会消失&#xff0c;解决方法是页面上包一层高度为100vh的scroll-view <scroll-view style"height: 100vh;" scroll-y scrolltolowe…
阅读更多...
HarmonyOS开发实战（ Beta5版）状态管理优秀实践

HarmonyOS开发实战（ Beta5版）状态管理优秀实践

为了帮助应用程序开发人员提高其应用程序质量&#xff0c;特别是在高效的状态管理方面。本章节面向开发者提供了多个在开发ArkUI应用中常见的低效开发的场景&#xff0c;并给出了对应的解决方案。此外&#xff0c;还提供了同一场景下&#xff0c;推荐用法和不推荐用法的对比和解…
阅读更多...
数学建模常见模型（下）

数学建模常见模型（下）

目录 神经网络法详细介绍 1. 引言 2. 神经网络的基本概念 2.1 神经元 2.2 层次结构 2.3 激活函数 3. 神经网络的工作原理 3.1 前向传播 3.2 反向传播 4. 神经网络的类型 4.1 前馈神经网络&#xff08;Feedforward Neural Networks, FNN&#xff09; 4.2 卷积神经网…
阅读更多...
@DateTimeFormat和@JsonFormat的区别和使用场景

@DateTimeFormat和@JsonFormat的区别和使用场景

一、区别 DateTimeFormat 用于前端给后端传参时 JsonFormat 用于后端给前端返回时 二、使用场景 2、1 JsonFormat的场景 1、**&#xff08;错误写法&#xff09; **如果参数是实体类&#xff0c;不可以使用DateTimeFormat&#xff0c;这种写法前端传参序列化会报错&#xf…
阅读更多...
Neural Magic发布GuideLLM：评估和优化大型语言模型（LLM）部署的强大工具

Neural Magic发布GuideLLM：评估和优化大型语言模型（LLM）部署的强大工具

大型语言模型&#xff08;LLMs&#xff09;的部署和优化已成为各种应用的关键。Neural Magic推出了GuideLLM&#xff0c;以应对对高效、可扩展且具有成本效益的LLM部署日益增长的需求。这款强大的开源工具旨在评估和优化LLM的部署&#xff0c;以确保它们在满足现实中的推理需求…
阅读更多...
vue 项目打包图片没有打包进去问题解决

vue 项目打包图片没有打包进去问题解决

解决方法1.在导入图片的文件中通过 import 引入图片 这种方法只适合图片少的情况 <template> <img :srctestImg/> </template> <script> import testImg from /assets/img/testImg.png </script>2.封装公共方法,通过 new URL() 的方式…
阅读更多...
算法：图片压缩算法【Z字行扫描】（Java实现）

算法：图片压缩算法【Z字行扫描】（Java实现）

要在Java中实现Z字形扫描&#xff0c;我们需要遍历一个给定的nn矩阵&#xff0c;并按照Z字形的顺序输出其元素。Z字形扫描的路径通常是从矩阵的左上角开始&#xff0c;沿着对角线方向交替向下和向上移动&#xff0c;直到遍历完整个矩阵。 下面是一个简单的Java实现示例&#xf…
阅读更多...
Java项目: 基于SpringBoot+mysql校园周边美食探索及分享平台(含源码+数据库+答辩PPT+毕业论文)

Java项目: 基于SpringBoot+mysql校园周边美食探索及分享平台(含源码+数据库+答辩PPT+毕业论文)

一、项目简介 本项目是一套基于SpringBootmysql校园周边美食探索及分享平台 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操…
阅读更多...
将多张图片生成一个渐变的效果图

将多张图片生成一个渐变的效果图

这段代码使用了OpenCV库来将两组图片逐步融合生成一个视频&#xff0c;视频中逐帧展示两张图片之间的过渡效果&#xff0c;并在过渡过程中画出一条竖线。 import cv2 import os import numpy as np # 读取两张图片 img1 cv2.imread(data/2img2video/IM-1210-0015.jpg) img2 …
阅读更多...
01：【铁头山羊stm32-HAL库】对GPIO的操作

01：【铁头山羊stm32-HAL库】对GPIO的操作

对GPIO的操作 1、LED闪烁2、按键控制LED3、芯片调试接口被锁死导致无法下载程序 1、LED闪烁 使用的是STM32CubeMXKeilv5进行HAL库的开发。 开发的步骤&#xff1a; 第一步&#xff1a;新建工程 第二步&#xff1a;选择芯片 第三步&#xff1a;如下图哈哈 第四步&#xff1a;…
阅读更多...
TeamTalk消息服务器（未读计数）

TeamTalk消息服务器（未读计数）

信令和协议设计 enum MessageCmdID {// ...... 省略无关逻辑 CID_MSG_UNREAD_CNT_REQUEST 775,CID_MSG_UNREAD_CNT_RESPONSE 776,// ...... 省略无关逻辑 };message IMUnreadMsgCntReq{//cmd id: 0x0307required uint32 user_id 1;optional bytes attach_data 20; }mes…
阅读更多...
＜Rust＞egui学习之小部件（七）：如何在窗口中添加颜色选择器colorpicker部件？

＜Rust＞egui学习之小部件（七）：如何在窗口中添加颜色选择器colorpicker部件？

前言 本专栏是关于Rust的GUI库egui的部件讲解及应用实例分析&#xff0c;主要讲解egui的源代码、部件属性、如何应用。 环境配置 系统&#xff1a;windows 平台&#xff1a;visual studio code 语言&#xff1a;rust 库&#xff1a;egui、eframe 概述 本文是本专栏的第七篇博…
阅读更多...
Unity之获取Avpro视频画面并在本地创建缩略图

Unity之获取Avpro视频画面并在本地创建缩略图

一、效果 获取StreamingAssets文件夹下的所有视频&#xff08;包含其子文件夹&#xff09;&#xff0c;获取指定时间的视频画面&#xff0c;然后将图片保存到本地磁盘中。 二、关于Avpro的事件监听 当指定视频时间进度时会触发FinishedSeeking&#xff0c;代表加载完成这时我们…
阅读更多...
ElasticSearch-关联关系

ElasticSearch-关联关系

Elasticsearch并不擅长处理关联关系&#xff0c;一般会采用以下四种方法处理关联 对象类型嵌套对象 (Nested Object)父子关联关系 (Parent / Child)应用端关联 对象类型 在每一博客的文档中都保留作者的信息 如果作者信息发生变化&#xff0c;需要修改相关的博客文档 包含对象…
阅读更多...
MySQL高阶练习题1- 寻找面试候选人

MySQL高阶练习题1- 寻找面试候选人

目录 题目 准备数据 分析数据 实现代码 总结 题目 返回 所有面试候选人 的姓名 name 和邮件 mail 。当用户满足以下两个要求中的 任意一条 &#xff0c;其成为 面试候选人 : 该用户在 连续三场及更多 比赛中赢得 任意 奖牌。该用户在 三场及更多不同的 比赛中赢得 金牌&…
阅读更多...
攻击者如何使用已删除的云资产来对付你

攻击者如何使用已删除的云资产来对付你

我们正处于云计算时代&#xff0c;虚拟服务器和存储空间等资源通常根据需要通过部署脚本以编程方式进行配置。虽然启动此类资产几乎是一个即时过程&#xff0c;但在不再需要它们时删除它们并不那么简单。简单地删除云资产&#xff0c;而不确保删除资产的所有可能指向它们的记录…
阅读更多...
代码山的沉思CD之粒子能量石

代码山的沉思CD之粒子能量石

KERNEL build了许多探测器&#xff0c;即视觉上的冲击感&#xff0c;这种探测是建立在物理实体的恐惧感之下&#xff0c;我们是罪恶城里的车手&#xff0c;无数次车对车的痛苦碰撞&#xff0c;触发怨恨的表情包。 面对物理法则带来的痛苦好过神法。 是被物理碾压还是被巨大的电…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站