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

JavaWeb--day1--HTMLCSS

news 2025/9/10 10:00:01

(以下内容全部来自上述课程及课件)
在这里插入图片描述

web开发介绍

1. 什么是web？

Web：全球广域网，也称为万维网，能够通过浏览器访问的网站。

2. Web网站的工作流程

请添加图片描述

3. Web标准

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。由三个组成部分：

HTML：负责网页的结构（页面元素和内容）。
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
JavaScript：负责网页的行为（交互效果）

HTML&CSS

1. 什么是HTML、CSS？

HTML: HyperText Markup Language，超文本标记语言。
请添加图片描述
CSS: Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。

2. 快速入门

第一步:创建一个名为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>

在这里插入图片描述

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

3. 开发工具

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

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

好用的插件：

Chinese（Simplified）Language Pack
Code Spell Checker
HTML CSS Support
JavaScript (ES6) code snippets
Mithril Emmet
Path Intellisense
Vue 3 Snippets
VueHelper
Auto Close Tag
Auto Rename Tag
Beautify
Bracket Pair Colorizer
open in browser
Vetur
IntelliJ lDEA Keybindings

4. 基础标签 & 样式

参考页面：新浪新闻
在这里插入图片描述

4.1 新浪新闻-标题实现

4.1.1 标题排版（HTML）

在这里插入图片描述
请添加图片描述

4.1.2 标签

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

标题标签 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为六级标题，字体是最小的。

水平分页线标签

<hr>

4.1.3 标题样式（CSS）

在这里插入图片描述

内联样式会出现大量的代码冗余，不方便后期的维护，所以不常用。
内部样式，通过定义css选择器，让样式作用于当前页面的指定的标签上。
外部样式，html和css实现了完全的分离，企业开发常用方式。

4.1.4 颜色表示

在这里插入图片描述

备注: 要想拾取某一个网页中的颜色，我们可以借助于浏览器的拾色器插件来完成。

CSS选择器

顾名思义：选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求
也是多种多样的，所以选择器有很多种，因为我们是做后台开发的，所以对于css选择器，我们只学习
最基本的3种。

选择器通用语法如下：

选择器名   {css样式名：css样式值;css样式名：css样式值;}

01. 元素（标签）选择器：

选择器的名字必须是标签的名字
作用：选择器中的样式会作用于所有同名的标签上

元素名称 {css样式名:css样式值；
}

例子如下：

 div{color: red;}

02. id选择器:

选择器的名字前面需要加上#
作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）

 #id属性值 {css样式名:css样式值；
}

例子如下：

 #did {color: blue;}

03. 类选择器：

选择器的名字前面需要加上 .
作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个

.class属性值 {css样式名:css样式值；
}

例子如下：

 .cls{color: green;}

4.1.5 发布时间字体颜色

 <!DOCTYPE html><html lang="en"><head><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><style>h1 {color: #4D4F53;}/* 元素选择器 *//* span {color: red;} *//* 类选择器 *//* .cls {color: green;} *//* ID选择器 */#time {color: #968D92;font-size: 13px; /* 设置字体大小 */}</style>
</head>
<body><img src="img/news_logo.png"> 新浪政务 > 正文<h1>[非政治]</h1><hr><span class="cls" id="time">[非政治]</span>  <span class="cls">[非政治]</span><hr></body></html>

上述我们还使用了一个css的属性 font-size , 用来设置字体的大小。但是需要注意，在设置字体
的大小时，单位px不能省略，否则不生效。

4.1.6 超链接

[非政治]在新浪新闻的标题部分，当我们点击顶部的 “新浪政务”，浏览器将自动在当前窗口访问新浪政务
首页这个资源（http://gov.sina.com.cn/）
[非政治]当我们点击新闻发布时间之后的 “央视网”，浏览器将会自动打开一个新的标签页，然后在新的标
签页中访问央视网中的该新闻资源（https://news.cctv.com/2023/03/02/ARTIUCKFf9k
E9eXgYE46ugx3230302.shtml）

<!DOCTYPE html>
<html lang="en">
<head><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><style>h1 {color: #4D4F53;}#time {color: #968D92;font-size: 13px; /* 设置字体大小 */}a {color: black;text-decoration: none; /* 设置文本为一个标准的文本 , 去除掉超链接 下面默认的下划线 */}</style>
</head>
<body><img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a>  > 正文<h1>[非政治]</h1><hr><span id="time">2023年03月02日 21:50</span>  <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">[非政治]</a></span><hr></body>
</html>

浏览器打开此页面，我们可以看到最终效果（超链接的字体，以及默认的下划线，通过css样式已经调
整好了）：

4.2 新浪新闻-正文实现

4.2.1 排版

在这里插入图片描述
整个正文部分的排版，主要分为这么四个部分：

视频 (当前这种新闻页面,可能也会存在音频)
文字段落
字体加粗

前面的标签 b、i、u、s 就仅仅是实现加粗、倾斜、下划线、删除线的效果，是没有强调语义的。而
后面的strong、em、ins、del在实现加粗、倾斜、下划线、删除线的效果的同时，还带有强调语义。

图片

<!DOCTYPE html><html lang="en"><head><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><style>h1 {color: #4D4F53;}#time {color: #968D92;font-size: 13px; /* 设置字体大小 */}a {color: black;text-decoration: none; /* 设置文本为一个标准的文本 */}p {text-indent: 35px; /* 设置首行缩进 */line-height: 40px; /* 设置行高 */}#plast {text-align: right; /* 对齐方式 */}</style></head><body><!-- 标题 --><img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">[非政治]</a>  > 正文<h1>[非政治]</h1><hr><span id="time">2023年03月02日 21:50</span><span><a 
href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">[非政治]</a></span><hr><!-- 正文 --><!-- 视频 --><video src="video/1.mp4" controls width="950px"></video><!-- 音频 --><!-- <audio src="audio/1.mp3" controls></audio> --><p><strong>[非政治]</strong>[非政治] </p><p> [非政治]</p><img src="img/1.jpg"><p> [非政治]</p><img src="img/2.jpg"><p> [非政治]</p><p id="plast">[非政治]</p></body></html>

在上述的正文排版实现中，还用到了几个CSS属性：

text-indent: 设置段落的首行缩进
line-height: 设置行高
text-align: 设置对齐方式, 可取值为 left / center / right

在HTML页面中无论输入了多少个空格, 最多只会显示一个。可以使用空格占位符
（&nbsp；）来生成空格，如果需要多个空格，就使用多次占位符。
那在HTML中，除了空格占位符以外，还有一些其他的占位符(了解, 只需要知道空格的占位
符写法即可)，如下：

4.2.2 页面布局

目前，新闻页面的基本排版，我们都已经完成了，但是，大家会看到，无论是标题部分，还是正文部
分，都是铺满了整个浏览器。而我们再来看看新浪新闻的原始页面，我们会看到新闻网页内容都是居
中展示的，左边、右边都是一定的边距的。
在这里插入图片描述
那接下来呢，我们就需要按照这个效果，来完成页面布局。而要想完成这样一个页面布局，我们就需
要介绍一下CSS中的盒子模型。

盒子模型

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个
矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边
距区域（margin）

CSS盒子模型，其实和日常生活中的包装盒是非常类似的，就比如：

盒子的大小，其实就包括三个部分： border、padding、content，而margin外边距是不包括在盒
子之内的。

请添加图片描述

<!DOCTYPE html><html lang="en"><head><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><style>div {width: 200px;  /* 宽度 */height: 200px;  /* 高度 */box-sizing: border-box; /* 指定width height为盒子的高宽 */background-color: aquamarine; /* 背景色 */padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边
距都一行, 可以简写: padding: 20px;*/ border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距
都一行, 可以简写: margin: 30px; */}</style></head><body><div>A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
A A A A </div></body>
</html>

代码编写好了, 可以通过浏览器打开该页面, 通过开发者工具,我们就可以看到盒子的大小, 以及盒子
各个组成部分(内容、内边距、边框、外边距)：
在这里插入图片描述

我们也可以，通过浏览器的开发者工具，清晰的看到这个盒子，以及每一个部分的大小：

布局实现

在实现新闻页面的布局时，我们需要做两部操作：

第一步：需要将body中的新闻标题部分、正文部分使用一个 div 布局标签将其包裹起来，方便
通过css设置内容占用的宽度，比如：65%。
第二步：通过css为该div设置外边距，左右的外边距分别为：17.5%，上下外边距靠边展示即
可，为：0%。

<!DOCTYPE html><html lang="en"><head><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><style>h1 {color: #4D4F53;}#time {color: #968D92;font-size: 13px; /* 设置字体大小 */}a {color: black;text-decoration: none; /* 设置文本为一个标准的文本 */}p {text-indent: 35px; /* 设置首行缩进 */line-height: 40px; /* 设置行高 */}#plast {text-align: right; /* 对齐方式 */}#center {width: 65%;/* margin: 0% 17.5% 0% 17.5% ; */ /* 外边距, 上 右 下 左 */margin: 0 auto;}</style></head><body><div id="center"><!-- 标题 --><img src="img/news_logo.png"> <a 
href="http://gov.sina.com.cn/" target="_self">新浪政务</a>  > 正文<h1>[非政治]</h1><hr><span id="time">2023年03月02日 21:50</span><span><a 
href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">[非政治]</a></span><hr><!-- 正文 --><!-- 视频 --><video src="video/1.mp4" controls width="950px"></video><!-- 音频 --><!-- <audio src="audio/1.mp3" controls></audio> --><p><strong>[非政治]</strong>[非政治] </p><p> [非政治]</p><img src="img/1.jpg"><p> [非政治]</p><img src="img/2.jpg"><p> [非政治]</p><p id="plast">[非政治]</p>  </div></body></html>

浏览器打开此页面，最终效果如下：
在这里插入图片描述

5. 表格标签

场景：在网页中以表格（行、列）形式整齐展示数据，我们在一些管理类的系统中，会看到数据通常都
是以表格的形式呈现出来的，比如：班级表、学生表、课程表、成绩表等等。
请添加图片描述

 <!DOCTYPE html><html lang="en"><head><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>HTML-表格</title><style>td {text-align: center; /* 单元格内容居中展示 */}</style></head><body><table border="1px" cellspacing="0"  width="600px"><tr><th>序号</th><th>品牌Logo</th><th>品牌名称</th><th>企业名称</th></tr><tr><td>1</td><td> <img src="img/huawei.jpg" width="100px"> </td><td>华为</td><td>华为技术有限公司</td></tr><tr><td>2</td><td> <img src="img/alibaba.jpg"  width="100px"> </td><td>阿里</td><td>阿里巴巴集团控股有限公司</td></tr></table></body></html>

打开浏览器，效果如下图所示：
在这里插入图片描述

整合表格使用 table 标签包裹 , 其中的每一行数据都是一个 tr , 每一行中的每一个单元格都是
一个 td , 而如果是表头单元格, 可以使用 th (具有加粗居中展示的效果)。

6. 表单标签

在这里插入图片描述
请添加图片描述

6.1 GET方式提交的表单

<!DOCTYPE html><html lang="en"><head><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>HTML-表单</title></head><body><!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.-->   <form action="" method="get">用户名: <input type="text" name="username">年龄: <input type="text" name="age"><input type="submit" value="提交"></form></body>
</html>

表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单
的数据在url后面提交到服务端，格式为：?username=Tom&age=12。
在这里插入图片描述

6.2 POST方式提交表单

 <!DOCTYPE html><html lang="en"><head><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>HTML-表单</title></head><body><!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.-->   <form action="" method="post">用户名: <input type="text" name="username">年龄: <input type="text" name="age"><input type="submit" value="提交"></form></body>
</html>

表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name
属性。否则，无法提交该表单项。
用户名: <input type="text" name="username">

7. 表单项

请添加图片描述

 <!DOCTYPE html><html lang="en"><head><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>HTML-表单项标签</title></head><body><!-- value: 表单项提交的值 --><form action="" method="post">姓名: <input type="text" name="name"> <br><br>密码: <input type="password" name="password"> <br><br> 性别: <input type="radio" name="gender" value="1"> 男<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>爱好: <label><input type="checkbox" name="hobby" value="java"> java </label><label><input type="checkbox" name="hobby" value="game"> game </label><label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>图像: <input type="file" name="image">  <br><br>生日: <input type="date" name="birthday"> <br><br>时间: <input type="time" name="time"> <br><br>日期时间: <input type="datetime-local" name="datetime"> <br><br>邮箱: <input type="email" name="email"> <br><br>年龄: <input type="number" name="age"> <br><br>学历: <select name="degree"><option value="">----------- 请选择 ----------</option><option value="1">大专</option><option value="2">本科</option><option value="3">硕士</option><option value="4">博士</option></select>  <br><br>描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br><input type="hidden" name="id" value="1"><!-- 表单常见按钮 --><input type="button" value="按钮"><input type="reset" value="重置"> <input type="submit" value="提交">   <br></form></body></html>