Javaweb之HTML,CSS的详细解析

news/2024/10/31 3:17:04/

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>


http://www.ppmy.cn/news/1195316.html

相关文章

现在转型社群团购来不来得及吗?社群团购还可以做多久呢?

现在转社群团购来不来得及吗&#xff1f;社群团购还可以做多久呢&#xff1f; 这个问题很多刚想转型社群团购的朋友或许都纠结过的。 我担心我刚刚转到社群团购&#xff0c;结果社群团购又不能做长久&#xff0c;再转型会损失团队的 首先&#xff0c;人是群居动物&#xff0c;社…

关于微软文本转语音(语音合成)的一些坑

1. 单个音频时长限制10分钟 文档地址 2. 多人配音SSML 每次请求 <voice> 标签只能最大50个&#xff0c;参考 #1 3. SDK 在 linux 环境下 报错&#xff1a;gcc 软件无法加载 4. 语音品质问题 使用 SDK 生成的音频声音很差&#xff0c;默认音频流格式为 WAV&#xf…

MySQL中如何进行数据加密和安全的设计?

在MySQL中&#xff0c;数据加密和安全设计有多种方式&#xff1a; 加强密码安全&#xff1a;首先&#xff0c;要确保MySQL账户的强密码&#xff0c;避免使用简单的密码或者默认密码。同时&#xff0c;定期更换密码&#xff0c;并尽可能使用复杂的多字符密码。此外&#xff0c;还…

『亚马逊云科技产品测评』活动征文|占了个便宜,12个月的免费云服务器

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 在群里看到有小伙伴说亚马逊可以免费试用服务器&#xff0c;这种好事不得…

u20.04安装slam库

git clone https://github.com/strasdat/Sophus.git // 下载的最新版是模板类的 git checkout a621ff // 切换为非模板类的历史版本 模板类Sophus的依赖库是Eigen(版本为3.3.X)和fmt&#xff0c;需提前安装好Eigen库和fmt库 git clone https://github.c…

研发效能DevOps: Git安装

目录 一、理论 1.Git 2.Git 工具 二、实验 1.Git安装 2.配置Git 3. VS Code加载Git 一、理论 1.Git &#xff08;1&#xff09;简介 Git 是一个分布式版本控制及源代码管理工具;Git 可以为你的项目保存若干快照&#xff0c;以此来对整个项目进行版本管理。 Git 是一个…

西安华为od前端-性格测试(综合测试)

借鉴&#xff1a;华为性格测试注意事项_华为性格测试题目讲解以及注意事项-CSDN博客 原则&#xff1a; &#xff08;1&#xff09;、华为喜欢那种喜欢加班的人&#xff0c;所以必须要能吃苦耐劳不计较报酬   &#xff08;2&#xff09;、华为喜欢中庸&#xff0c;不要表现自己…

Elasticsearch 8.X 如何生成 TB 级的测试数据 ?

1、实战问题 我只想插入大量的测试数据&#xff0c;不是想测试性能&#xff0c;有没有自动办法生成TB级别的测试数据&#xff1f;有工具&#xff1f;还是说有测试数据集之类的东西&#xff1f;——问题来源于 Elasticsearch 中文社区https://elasticsearch.cn/question/13129 2…