【JavaWeb】HTML&CSS

最新推荐文章于 2024-10-09 20:10:15 发布

程序喵正在路上

最新推荐文章于 2024-10-09 20:10:15 发布

阅读量1k

点赞数 11

分类专栏： JavaWeb开发文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_62511863/article/details/134693652

版权

JavaWeb开发专栏收录该内容

17 篇文章 1 订阅

订阅专栏

🔥 本文由程序喵正在路上原创，CSDN首发！
💖 系列专栏：JavaWeb开发
🌠 首发时间：2024年2月1日
🦋 欢迎关注🖱点赞👍收藏🌟留言🐾

说明

该专栏关于前端技术的文章，适合让 Java 后端人员对前端有一个快速的认识，以及会搭建一些简单的前端工程。所以不会讲得太过深入，如果你是专注于前端的，也可以去找专门讲前端技术的文章。

Web开发介绍

什么是Web

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

Web网站的工作流程
在这里插入图片描述

Web网站的开发模式

前后端分离开发，当今市场主流
混合开发

Web开发课程预览

前端Web开发

HTML、CSS、JavaScript
Vue、Ajax、Axios、Element、Nginx

后端Web开发

Maven
SpringBoot Web 基础篇
MySQL
SpringBoot Mybatis
SpringBoot Web 开发篇
SpringBoot Web 进阶篇

初识Web前端

Web标准

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Consortium, 万维网联盟）负责制定
三个组成部分：
- HTML：负责网页的结构（页面元素和内容）
- CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）
- JavaScript：负责网页的行为（交互效果）

在这里插入图片描述

HTML、CSS

什么是HTML、CSS？

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

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
标记语言：由标签构成的语言
- HTML标签都是预定义好的。例如：使用<a>展示超链接，使用<img>展示图片，<video>展示视频
- HTML代码直接在浏览器中运行，HTML标签由浏览器解析

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

HTML快速入门

步骤

新建文本文件，后缀名改为 .html
编写 HTML 结构标签
在<body>中填写内容

随便选一张图片，命名为 1.jpg，将图片放在和HTML文件相同的路径下

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

效果图

在这里插入图片描述

VS Code开发工具

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

作为一名软件开发工程师，建议以后安装所有与开发相关的软件，尽量安装在一个没有中文，不带空格的目录下。

基础标签 & 样式

下面以新浪网一篇新闻的界面来讲解基础标签和样式

新浪新闻-标题排版

图片标签：<img>
- src：指定图像的url（绝对路径 / 相对路径）
- width：图像的宽度（单位为像素 / 相对于父元素的百分比）
- height：图像的高度（像素 / 相对于父元素的百分比）
标题标签：<h1> - <h6>
水平线标签：<hr>

代码实现

<!-- 文档类型为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="img/news_logo.png"> 新浪政务 > 正文

    <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>

    <hr>
    2023年03月02日 21:50 央视网
    <hr>

</body>

</html>

效果演示

在这里插入图片描述

新浪新闻-标题样式

CSS 引入方式：

行内样式：写在标签的style属性中（不推荐），<h1 style="xxx: xxx; xxx: xxx;">中国新闻网</h1>
内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中），<style> h1 { xxx: xxx; } </style>
外联样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入），<link rel="stylesheet" href="css/news.css">

对于上述3种引入方式，企业开发的使用情况如下：

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

颜色表示方式：

在这里插入图片描述

改变前面例子中文字的颜色

代码：

<!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: red; */
            /* color: rgb(0, 0, 255); */
            color: #36f;
        }
    </style>

    <!-- 方式三: 外联样式 -->
    <!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body>
    <img src="img/news_logo.png"> 新浪政务 > 正文

    <!-- 方式一: 行内样式 -->
    <!-- <h1 style="color: red;">焦点访谈：中国底气 新思想夯实大国粮仓</h1> -->
    
    <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>

    <hr>
    2023年03月02日 21:50 央视网
    <hr>

</body>
</html>

效果演示：

在这里插入图片描述

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

元素选择器，选择器的名字必须是标签的名字，选择器中的样式会作用于所有同名的标签上
类选择器，选择器的名字前面需要加上.，选择器中的样式会作用于所有 class 的属性值和该名字一样的标签上，可以是多个
id选择器，选择器的名字前面需要加上#，选择器中的样式会作用于指定 id 的标签上，而且有且只有一个标签（由于id是唯一的）

注意：三种选择器的优先级为 id选择器 > 类选择器 > 元素选择器

代码演示

<!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标签是没有任何语义的 -->
    <span class="cls" id="time">2023年03月02日 21:50</span> <span class="cls">央视网</span>
    <hr>
</body>

</html>

效果图

在这里插入图片描述

新浪新闻-超链接

标签：

  <a href="..." target="...">央视网</a>

属性：

href：指定资源访问的url
target：指定在何处打开资源链接
- _self：默认值，在当前页面打开
- _blank：在空白页面打开

代码演示

<!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>

效果图

在这里插入图片描述

新浪新闻-正文排版

视频标签：<video>

src：规定视频的url
controls：显示播放控件
width：播放器的宽度
height：播放器的高度

音频标签：<audio>

src：规定音频的url
controls：显示播放控件

段落标签：<p>

文本加粗标签: <b> / <strong>

用到的CSS样式：

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

注意：在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>
        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">2024年01月31日 08:00</span>
    <span><a href="https://www.cctv.com/?spm=C73544894212.P9moqzeXHoOr.E2XVQsMhlk44.1" target="_blank">央视网</a></span>
    <hr>

    <!-- 正文 -->
    <!-- 视频 -->
    <!-- controls="controls"可以缩写为controls -->
    <video src="video/1.mp4" controls width="950px"></video>

    <!-- 音频 -->
    <audio src="audio/1.mp3" controls></audio>

    <p>
        <strong>央视网消息</strong>
        春节临近，中国各地的年货市场也开始热闹起来。日前，浙江象山县茅洋乡设在田间地头的乡村年味集市热闹开场。新桥冻面、泗洲头土豆，独具传统特色的大塘麦糕、手工年糕等各式“宝藏好物”，引得游客市民争相品尝。这两天，四川眉山举办了一场庖汤年货大集活动，肥而不腻的腊肉香肠、香嫩爽口的粉蒸肉、鲜美有味的小火锅，村民和游客共同围坐在桌旁，品火热“庖汤”、过红火新年。
    </p>

    <p id="plast">
        来源：央视网微博
    </p>
</body>

</html>

效果图

在这里插入图片描述

新浪新闻-页面布局

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

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

在这里插入图片描述

CSS属性：

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

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

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

标签：<div> <span>

特点：

div 标签：
- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（width、height）
span 标签：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高（width、height）

加上布局

<!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% ; */
            /* 外边距, 上 右 下 左 */

            /* 简化写法：上下0 左右auto自动计算*/
            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">2024年01月31日 08:00</span>
        <span><a href="https://www.cctv.com/?spm=C73544894212.P9moqzeXHoOr.E2XVQsMhlk44.1"
                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 id="plast">
            来源：央视网微博
        </p>
    </div>
</body>

</html>

效果图

在这里插入图片描述

表格、表单标签

表格标签

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

和表格相关的标签主要有以下3个：

在这里插入图片描述

代码演示

<!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>

效果图

在这里插入图片描述

表单标签

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

对应标签：<form>

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

<input>：定义表单项，通过type属性控制输入形式
<select>：定义下拉列表
<textarea>：定义文本域

属性：

action：规定当提交表单时向何处发送表单数据，URL
method：规定用于发送表单数据的方式，分为GET和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>

效果图

在这里插入图片描述

表单项标签

<input>：表单项，通过 type 属性控制输入形式
<select>：定义下拉列表，定义列表项
<textarea>：文本域

在这里插入图片描述

代码演示

<!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>