当前位置： 首页 > news >正文

Javaweb之HTML,CSS的详细解析

news 文章来源：https://blog.csdn.net/qq_69748833/article/details/134213251 2025/5/14 9:32:14

2. HTML & CSS

1). 什么是HTML ?

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

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

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

    • HTML标签都是预定义好的。例如：使用 <h1> 标签展示标题，使用<a>展示超链接，使用<img>展示图片，<video>展示视频。

    • HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

下面展示的是一段html代码经过浏览器解析，呈现的效果如右图所示：

2). 什么是CSS ?

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

下面展示的是一段 html代码 及 CSS样式 经过浏览器解析，呈现的效果如右图所示：

2.1 HTML快速入门

2.1.1 操作

第一步:创建一个名为HTML的文件夹，然后找到课程资料中的 1.jpg 文件放到该目录下，此时HTML文件夹中内容如下：

第二步：创建一个文本文件，然后修改文件名为hello.html,注意文件的后缀是.html,如下图所示：

第三步：选中文件，鼠标右击，选择使用记事本打开文件，并且编写前端代码

首先html有固定的基本结构

<html><head><title>HTML 快速入门</title></head><body><h1>Hello HTML</h1><img src="1.jpg"/></body>
</html>

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

而 <body> 中编写的内容，就网页中显示的核心内容。

第四步：然后选中文件，鼠标右击，选择使用浏览器打开文件，浏览器呈现效果如下:

2.1.2 总结

1). HTML页面的基础结构标签

<html><head><title> </title></head><body></body>
</html>

<title>中定义标题显示在浏览器的标题位置，<body>中定义的内容会呈现在浏览器的内容区域

2). HTML中的标签特点

  • HTML标签不区分大小写

  • HTML标签的属性值，采用单引号、双引号都可以

  • HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)

2.2 开发工具

  • 我们通过快速入门案例，发现由记事本文件开发html是非常不方便的，所以接下来我们需要学习一款前端专业的开发工具VS Code。

  • Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。VS Code 提供了非常强大的插件库，大大提高了开发效率。

  • 官网： Visual Studio Code - Code Editing. Redefined

  • 详细安装教程：参考 资料/VSCode安装/安装文档/VS Code安装文档.md

注意：需要注意的是，我们作为一名开发者，不应该将软件软装在包含中文名的路径中 。

2.3 基础标签 & 样式

那我们在讲解HTML的常见基础标签 及 CSS的基本样式时，我们就以 新浪新闻页面 为例，来进行讲解，这样大家不仅能够知道 常见标签及样式的作用，还能够知道具体的应用场景。

新浪新闻的具体页面效果如下：

原始页面网址：焦点访谈：中国底气 新思想夯实大国粮仓_新浪新闻

而对于这个新浪新闻的页面来说，核心内容分为两个部分，如下：

  • 新浪新闻-标题部分

  • 新浪新闻-正文部分

2.3.1 新浪新闻-标题实现

2.3.1.1 标题排版
2.3.1.1.1 分析

1). 第一部分，是一张图片，需要用到HTML中的图片标签 <img> 来实现。

2). 第二部分，是一个标题，需要用到HTML中的标题标签 <h1> ... <h6>来实现。

3). 第三部分，有两条水平分割线，需要用到HTML中的 <hr> 标签来定义水平分割线。

2.3.1.1.2 标签

1). 图片标签 img

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">相对路径:./ : 当前目录 , ./ 可以省略的../: 上一级目录

2). 标题标签 h 系列

A. 标题标签: <h1> - <h6>
<h1>111111111111</h1><h2>111111111111</h2><h3>111111111111</h3><h4>111111111111</h4><h5>111111111111</h5><h6>111111111111</h6>
B. 效果 : h1为一级标题，字体也是最大的 ； h6为六级标题，字体是最小的。

3). 水平分页线标签 <hr>

2.3.1.1.2 实现

1). 打开VsCode，选择左侧最底部的 "资源管理器"，然后选择打开文件夹，选择打开桌面的 HTML 文件夹

2). 将资料中提供的 图片、音频、视频 文件夹的这三个文件夹（里面是图片、音视频素材），复制到 HTML 文件夹中。

3). 在VsCode中创建一个新的 html 文件，文件的后缀名设置为 .html

4). html 文件创建好之后，在其中输入 ！，然后直接回车，就可以生成 HTML 的基础结构标签

5). 编写标题排版的核心代码

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集为UTF-8 --><meta charset="UTF-8"><!-- 设置浏览器兼容性 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
</head>
<body><!-- img标签: src: 图片资源路径width: 宽度(px, 像素 ; % , 相对于父元素的百分比)height: 高度(px, 像素 ; % , 相对于父元素的百分比)<img src="img/news_logo.png" width="80%" >
​路径书写方式:绝对路径: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">相对路径:./ : 当前目录 , ./ 可以省略的../: 上一级目录

     --><img src="img/news_logo.png"> 新浪政务 > 正文
​<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1><hr>2023年03月02日 21:50 央视网<hr>
​
</body>
</html>

相关文章：

Javaweb之HTML,CSS的详细解析

2. HTML & CSS 1). 什么是HTML ? HTML: HyperText Markup Language&#xff0c;超文本标记语言。 超文本&#xff1a;超越了文本的限制&#xff0c;比普通文本更强大。除了文字信息&#xff0c;还可以定义图片、音频、视频等内容。 标记语言&#xff1a;由标签构成的语言…...

编程日记 2023/11/4 7:27:26

基于python+django+vue开发的酒店预订管理系统 - 毕业设计 - 课程设计

文章目录 源码下载地址项目介绍项目功能界面预览项目备注毕设定制&#xff0c;咨询 源码下载地址 点击这里下载源码 项目介绍 该系统是基于pythondjango开发的酒店预定管理系统。适用场景&#xff1a;大学生、课程作业、毕业设计。学习过程中&#xff0c;如遇问题可在github…...

编程日记 2023/11/4 7:26:25

使用vscode实现远程开发，并通过内网穿透在公网环境下远程连接

文章目录 前言1、安装OpenSSH2、vscode配置ssh3. 局域网测试连接远程服务器4. 公网远程连接4.1 ubuntu安装cpolar内网穿透4.2 创建隧道映射4.3 测试公网远程连接 5. 配置固定TCP端口地址5.1 保留一个固定TCP端口地址5.2 配置固定TCP端口地址5.3 测试固定公网地址远程 前言 远程…...

编程日记 2023/11/4 7:25:24

ArrayList集合2

ArrayList集合的一些方法 ⑥chear()从列表中移除所有元素 ⑦.isEmpty()判断列表中是否包含元素&#xff0c;不包含返回true&#xff0c;否则返回false public class Test{public static void main(String[] args){Arraylist<String> list new Arraylist<String>()…...

编程日记 2023/11/4 7:23:22

vue+asp.net Web api前后端分离项目发布部署

一、前后端项目介绍 1.前端项目是使用vue脚手架进行创建的。 脚手架版本&#xff1a;vue/cli 5.0.8 编译器版本&#xff1a;vs code 1.82.2 2.后端是一个asp.net Core Web API 项目 后端框架版本&#xff1a;.NET 6.0 编译器版本&#xff1a;vs 2022 二、发布部署步骤 第…...

编程日记 2023/11/4 7:22:22

iOS App Store上传项目报错 缺少隐私政策网址(URL)解决方法

​ iOS App Store上传项目报错 缺少隐私政策网址(URL)解决方法 一、问题如下图所示&#xff1a; ​ 二、解决办法&#xff1a;使用Google浏览器&#xff08;翻译成中文&#xff09;直接打开该网址 https://www.freeprivacypolicy.com/free-privacy-policy-generator.php 按…...

编程日记 2023/11/4 7:21:20

如何使用Ruby 多线程爬取数据

现在比较主流的爬虫应该是用python&#xff0c;之前也写了很多关于python的文章。今天在这里我们主要说说ruby。我觉得ruby也是ok的&#xff0c;我试试看写了一个爬虫的小程序&#xff0c;并作出相应的解析。 Ruby中实现网页抓取&#xff0c;一般用的是mechanize&#xff0c;使…...

编程日记 2023/11/4 7:20:19

一文深入了解 CPU 的型号、代际架构与微架构

在 10 月 16 号的时候&#xff0c;Intel 正式发布了第 14 代的酷睿处理器。但还有很多同学看不懂这种发布会上发布的各种 CPU 参数。借着这个时机&#xff0c;给大家深入地讲讲 CPU 的型号规则、代际架构与微架构方面的知识。 CPU 在整个计算机硬件中、技术体系中都算是最最重…...

编程日记 2023/11/4 7:19:19

Java通过cellstyle属性设置Excel单元格常用样式全面总结

最近做了一个导出Excel的功能&#xff0c;导出是个常规导出&#xff0c;但是拿来模板一看&#xff0c;有一些单元格的样式设置&#xff0c;包括合并&#xff0c;背景色&#xff0c;字体等等&#xff0c;毕竟不是常用的东西&#xff0c;需要查阅资料完成&#xff0c;但是搜遍全网…...

编程日记 2023/11/4 7:17:14

如何查看WiFi密码

本文分享一下手机和电脑上如何查看已经连接过的WiFi的密码&#xff0c;然后好分享给他人。 手机上分享wifi密码很简单&#xff0c;步骤如下&#xff1a; 生成二维码&#xff0c;读取WiFi密码 1、首先&#xff0c;在“设置”中找到“无线网络”&#xff0c;点击需要查找密码的Wi…...

编程日记 2023/11/4 7:16:12

2023NOIP A层联测22 总结

T1 简单分析了性质&#xff0c;发现可以用双指针求值&#xff0c;后面又发现可以用类似于线段树求最大子段和的方式维护。用时 40min T2 是期望&#xff0c;想了 30min 没有思路&#xff0c;于是打暴力&#xff0c;但是打的时候没有想清楚&#xff0c;就打了很久&#xff0c;大…...

编程日记 2023/11/4 7:14:10

HTTPS的加密方式超详细解读

在了解https的加密方式之前&#xff0c;我们需要先行了解两个特别经典的传统加密方式&#xff1a; 1、对称加密 1.1、定义 需要对加密和解密使用相同密钥的加密算法。所谓对称&#xff0c;就是采用这种加密方法的双方使用方式用同样的密钥进行加密和解密。密钥是控制加密及解…...

编程日记 2023/11/4 7:13:08

自定义SpringMVC拦截器，实现内外网访问控制功能

这篇文章简单介绍如何自定义一个SpringMVC拦截器&#xff0c;并通过拦截器实现具体的功能。 首先&#xff0c;需要创建一个自定义的拦截器类&#xff0c;该类实现HandlerInterceptor接口。 package cn.edu.sgu.www.mhxysy.interceptor;import cn.edu.sgu.www.mhxysy.feign.Fei…...

编程日记 2023/11/4 7:12:08

在pycharm中配置GPU训练环境（Anaconda)（yolov5)

目录 1. 具体的配置过程&#xff1a; 2. 在指定位置&#xff08;路径&#xff09;创建虚拟环境&#xff1a; 3. conda常用命令&#xff1a; 4: 在跑模型时候遇到的一些问题&#xff1a; 4.1: conda添加python解释器找不到对应的python.exe文件 4.2: 报错“OSError: [WinErr…...

编程日记 2023/11/4 7:11:06

【LeetCode刷题-链表】--146.LRU缓存

146.LRU缓存 方法一&#xff1a;哈希表双向链表 使用一个哈希表和一个双向链表维护所有在缓存中的键值对 双向链表按照被使用的顺序存储了这些键值对&#xff0c;靠近头部的键值对是最近使用的&#xff0c;而靠近尾部的键值对是最久使用的哈希表即为普通的哈希映射&#xff0…...

编程日记 2023/11/4 7:08:03

mysql 问题解答

01 Mysql有哪些数据类型 MySQL支持多种数据类型，这些类型可以分为几个大的类别：数值类型、日期和时间类型、字符串（字符和字节）类型、空间类型、JSON类型。下面是每种类型的简要说明和用途，以及示例。 数值类型 整型: TINYINT：非常小的整数，如性别标识（0代表女性，1代…...

编程日记 2023/11/4 7:07:02

组件与Props：React中构建可复用UI的基石

目录 组件&#xff1a;构建现代UI的基本单位 Props&#xff1a;组件之间的数据传递 Props的灵活性&#xff1a;构建可配置的组件 组件间的通信&#xff1a;通过回调函数传递数据 总结&#xff1a; 组件&#xff1a;构建现代UI的基本单位 组件是前端开发中的关键概念之一。…...

编程日记 2023/11/4 7:06:01

接口框架第二篇—unittest/pytest 有什么区别

1.用例编写方法 unittest 1&#xff09;测试文件必须导入unittest包 2&#xff09;测试类必须继承unittest.TestCase 3&#xff09;测试类必须有unittest.main()方法 4&#xff09;测试方法必须要以test_打头 pytest 1&#xff09;测试文件名要以test_打头&#xff0c;或…...

编程日记 2023/11/4 7:03:59

Window 7 / 10 / 11 .bat .cmd 中文路径不识别解决方案

一般都是编码问题 我们在批处理的第一行加入: chcp 65001 进行转为UTF-8 编码就可以实现中文路径识别...

编程日记 2023/11/4 7:02:57

Linux命令(113)之rev

linux命令之rev 1.rev介绍 linux命令rev是将文件中的每行内容已字符为单位反向输出&#xff0c;即第一个字符最后输出&#xff0c;最后一个字符最先输出 2.rev用法 rev [参数] filename rev参数 参数说明-V显示版本信息-h显示帮助信息 3.实例 3.1.显示rev的版本信息 命令…...

编程日记 2023/11/4 7:01:56

QT+SQLite数据库配置和使用

一、简介 1.1 SQLite&#xff08;sql&#xff09;是一款开源轻量级的数据库软件&#xff0c;不需要server&#xff0c;可以集成在其他软件中&#xff0c;非常适合嵌入式系统。Qt5以上版本可以直接使用SQLite&#xff08;Qt自带驱动&#xff09;。 二、下载和配置 2.1 SQLite下载…...

编程日记 2023/11/4 7:00:55

若依分离版——配置多数据源（mysql和oracle），实现一个方法操作多个数据源

目录 一、若依平台配置 二、编写oracle数据库访问的各类文件 三. 一个方法操作多个数据源 一、若依平台配置 1、在ruoyi-admin的pom.xml添加依赖 <dependency> <groupId>com.oracle</groupId> <artifactId>ojdbc6</artifactId> <version…...

编程日记 2023/11/4 6:59:53

Seata入门系列【19】分布式事务之CAP、BASE理论

1 CAP理论 CAP是以下三个词语的缩写&#xff1a; Consistency&#xff1a;一致性Availability&#xff1a;可用性Partition tolerance&#xff1a;分区容忍性 CAP理论的基础概念就是在分布式系统中&#xff0c;无法同时满足以上三点。 下面我们以一个简单的分布式系统&…...

编程日记 2023/11/4 6:58:51

界面控件DevExpress WPF Gauge组件 - 轻松实现个性化商业仪表盘

DevExpress WPF Gauge&#xff08;仪表&#xff09;控件包含了多种圆形仪表类型、水平和垂直线性仪表、分段和矩阵数字仪表以及状态指示器&#xff0c;同时还具有最终用户交互性的集成支持。 P.S&#xff1a;DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至…...

编程日记 2023/11/4 6:56:48

算法题：870. 优势洗牌

该算法是临时想出来的&#xff0c;Java代码的实现在时间上不占优&#xff0c;之后有时间要优化一下&#xff0c;目前就是给大家提供一下思路。 解题思路&#xff1a;田忌赛马的思想 贪心法。 Step1. 对两个数组进行排序。 Step2. 同时遍历排序后的nums2和nums1&#xff0c;将…...

编程日记 2023/11/4 6:55:47

[架构之路-252/创业之路-83]：目标系统 - 纵向分层 - 企业信息化的呈现形态：常见企业信息化软件系统 - 企业应用信息系统集成

目录 第一章 什么是企业应用信息系统集成What 1.1 简介 1.2 架构 二、为什么需要企业应用信息系统集成Why 三、如何实现企业应用信息系统集成 3.1 步骤 3.2 企业应用集成的层次 3.3 业务流程重组 第一章 什么是企业应用信息系统集成What 1.1 简介 企业应用信息系统集…...

编程日记 2023/11/4 6:54:45

MFC发送http https以及json解析

域名解析成IP char szWeb[128] "www.baidu.com";struct hostent *pHost NULL;pHost gethostbyname(szWeb);//完成主机名到域名的解析char *IP inet_ntoa(*((struct in_addr *)pHost->h_addr));CString ipStr IP;请求三部曲&#xff1a; 1、CInternetSession…...

编程日记 2023/11/4 6:53:44

UE5加载websocket模块为空

今天测试UE 发现工程启动不了&#xff0c;后来看到原来是websocket模块无法加载。 解决的它的方法很简单&#xff0c;这种问题一般会出现在源码版本的引擎或者是停电了&#xff0c;导致UElaunch版本损坏&#xff0c;解决方法是来到源码版本的引擎 这个目录下&#xff1a; D:\…...

编程日记 2023/11/4 6:52:42

学习 Python 数据可视化，如何快速入门？

Python 是一种非常流行的编程语言&#xff0c;具有简单易学、高效、丰富的库和工具等特点。其中&#xff0c;数据可视化是 Python 的一个重要应用领域&#xff0c;可以帮助人们更好地理解和分析数据。本文将介绍如何快速入门 Python 数据可视化&#xff0c;以及常用的可视化工具…...

编程日记 2023/11/4 6:51:41

XUbuntu22.04之simplenote支持的Markdown语法总结(一百九十一)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…...

编程日记 2023/11/4 6:49:37