一天一个java知识点----HTML、CSS

最新推荐文章于 2025-10-21 22:58:22 发布

程序员小蘇

最新推荐文章于 2025-10-21 22:58:22 发布

阅读量964

点赞数 35

CC 4.0 BY-SA版权

文章标签： java html css

本文链接：https://blog.csdn.net/weixin_75175096/article/details/147062986

Web网站开发模式

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

web网站工作流程

前后端分离开发（主流）

混合开发

Web标准

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

三个组成部分：

HTML：负责网页的结构（页面元素和内容）。

CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。

JavaScript：负责网页的行为（交互效果）。

HTML

HTML（HyperText Markup Language）：超文本标记语言。

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

标记语言：由标签 "<标签名>" 构成的语言

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

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

HTML入门案例

网页头部：用来存放给浏览器看的信息，如：CSS样式

网页主体：用来存放给用户看的信息，如：文字、图片、视频

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

HTML语言特点：

html标签不区分大小写，建议小写

html标签的属性值使用单引号/双引号都可以

html语法结构松散，但是建议规范书写

前端开发工具

Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。

VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。

VS Code 提供了非常强大的插件库，大大提高了开发效率。

官网： https://code.visualstudio.com，下载完后双击打开，根据提示下一步下一步即可。默认选择既是最佳选择。

VSCode安装使用：

不仅要安装软件，还得安装插件

注意：安装在一个没有中文，不带空格的目录下

注意：由于安装了IDEA快捷键映射插件，VSCode快捷键与IDEA一致

VSCode推荐安装的14个插件

1、Chinese (Simplified) Language Pack

适用于 VS Code 的中文（简体）语言包

安装完毕之后，点击右下角的 "Change Language and Restart" 按钮，重新启动服务。

2、HTML CSS Support

在编写样式表的时候，自动补全功能大大缩减了编写时间。

3、JavaScript (ES6) code snippets

支持ES6语法提示

4、Mithril Emmet

一个能大幅度提高前端开发效率的一个工具，用于补全代码

5、Path Intellisense

路径提示插件

6、Vue 3 Snippets

在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。

7、Auto Close Tag

自动闭合HTML/XML标签

8、Auto Rename Tag

自动完成另一侧标签的同步修改

9、open in browser

vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari

10、Live Server

一个具有实时加载功能的小型服务器，也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。

11、File Utils

File Utils插件,可以方便快捷的来创建、复制、移动、重命名文件和目录。

12、IntelliJ IDEA Keybindings

安装VSCode的插件 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷键。

13、 Fitten Code: Faster and Better AI Assistant

14、Prettier - Code formatter

CSS

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

数据展示标签 & 样式

标题排版

图片标签：<img>

src：指定图像的url（绝对路径 / 相对路径）

alt: 替换文本，图片无法显示的时候显示的文字

width：图像的宽度（像素 / 相对于父元素的百分比）

height：图像的高度（像素 / 相对于父元素的百分比）

标题标签：<h1> - <h6>

水平线标签：<hr>

注意：一般图片的width、height只设置一个，图片会等比例缩放。

绝对路径:

绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\logo.png

HTML
<img src="C:\Users\Administrator\Desktop\HTML\img\logo.png">

绝对网络路径: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png

HTML
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">

相对路径:

HTML
./ : 当前目录 , ./ 可以省略
../: 上一级目录

标题样式

CSS引入方式：

行内样式：写在标签的style属性中

内部样式：写在style标签中（可以写在页面任何位置）

外部样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入）

颜色表示方式

CSS选择器：用来选取需要设置样式的元素(标签)

拓展

标签：

属性：

href：指定资源访问的url

target：指定在何处打开资源链接

_self：默认值，在当前页面打开

_blank：在空白页面打开

正文排版

视频标签：<video>

src：规定视频的url

controls：显示播放控件

width：播放器的宽度

height：播放器的高度

音频标签：<audio>

src：规定音频的url

controls：显示播放控件

段落标签：<p>

文本格式化标签:

加粗: <b> / <strong>

下划线: <u> / <ins>

倾斜: <i> / <em>

删除线: <s> / <del>

注意事项：

在HTML页面中无论输入了多少个空格, 最多只会显示一个。可以使用空格占位符（）来生成空格，如果需要多个空格，就使用多次占位符。

那在HTML中，除了空格占位符以外，还有一些其他的占位符(了解, 只需要知道空格的占位符写法即可)，如下：

页面布局

盒子模型

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

margin：与父容器之间的距离。

布局标签

布局标签：网页开发中，会大量使用 div 和 span 这两个没有语义的布局标签。

特点：

<div> 标签：

一行只显示一个（独占一行）

宽度默认是父元素的宽度，高度默认由内容撑开

可以设置宽高（width、height）

<span> 标签：

一行可以显示多个

宽度和高度默认由内容撑开

不可以设置宽高（width、height）

HTML
盒子模型实例代码
<!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>

表格标签

HTML
<!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,th {
              border: 1px solid #ccc;
            }

            table {
              width: 50%; /* 宽度 */
              text-align: center; /* 单元格内容居中展示 */
              line-height: 60px; /* 行高 */
              border-collapse: collapse; /* 设置表格的边框是分开的还是合并的, collapse为合并的 */
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>序号</th>
                <th>品牌Logo</th>
                <th>品牌名称</th>
                <th>企业名称</th>
            </tr>
            <tr>
                <td>1</td>
                <td> <img src="img/huawei.jpg" height="50px"/> </td>
                <td>华为</td>
                <td>华为技术有限公司</td>
            </tr>
            <tr>
                <td>2</td>
                <td> <img src="img/alibaba.jpg" height="50px"/> </td>
                <td>阿里</td>
                <td>阿里巴巴集团控股有限公司</td>
            </tr>
        </table>
    </body>
</html>

表单标签

场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。

标签：<form>

表单项：不同类型的 input 元素、下拉列表、文本域等。

<input>：定义表单项，通过type属性控制输入形式

<select>：定义下拉列表

<textarea>：定义文本域

属性：

action：规定当提交表单时向何处发送表单数据，URL

method：规定用于发送表单数据的方式。GET、POST

注意：表单项必须有name属性才可以提交。

表单标签：<form>

表单属性:

action：表单数据提交的url地址

method：表单提交方式

get：表单数据拼接在url后面，?username=java ,大小有限制

post：表单数据在请求体中携带，大小没有限制

HTML
<!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="" 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>

flex布局

flex是flexible Box的缩写，意为"弹性布局"。采用flex布局的元素，称为Flex容器（container），它的所有子元素自动成为容器成员，称为Flex项目（item）。

通过给父容器添加flex属性,来控制子元素的位置和排列方式。