【JavaWeb】HTML&CSS

ゝ一纸荒年。 2024-04-26 02:58 52阅读 0赞

> ? 本文由 [程序喵正在路上][Link 1] 原创，CSDN首发！  
> ? 系列专栏：[JavaWeb开发][JavaWeb]  
> ? 首发时间：2024年2月1日  
> ? 欢迎关注?点赞?收藏?留言?

#### 目录 ####

*  说明
 *  Web开发介绍
 *  初识Web前端
 *  HTML、CSS
 *  HTML快速入门
 *  VS Code开发工具
 *  基础标签 & 样式
 *   *  新浪新闻-标题排版
     *  新浪新闻-标题样式
     *  新浪新闻-超链接
     *  新浪新闻-正文排版
     *  新浪新闻-页面布局
 *  表格、表单标签
 *   *  表格标签
     *  表单标签
     *  表单项标签

## 说明 ##

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

## Web开发介绍 ##

**什么是Web**

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

**Web网站的工作流程**  
![在这里插入图片描述][a68f6f1944f442e689685b9c754d20e9.png]

**Web网站的开发模式**

*  前后端分离开发，当今市场主流  
    ![在这里插入图片描述][175fdf87899448f88ea73ad448939d1c.png]
 *  混合开发  
    ![在这里插入图片描述][8fa1d7a7320d4f4e89fdf530093d3328.png]

**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：负责网页的行为（交互效果）

![在这里插入图片描述][dd43d2930bf74191bc9a972d6a22eadd.png]

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

**效果图**

![在这里插入图片描述][96127961513644999c27822b7b22cc74.png]

## VS Code开发工具 ##

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

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

## 基础标签 & 样式 ##

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

### 新浪新闻-标题排版 ###

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

**代码实现**

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

**效果演示**

![在这里插入图片描述][27577fc8ad8a4a2eb75ef7cff037c91f.png]

### 新浪新闻-标题样式 ###

**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种引入方式，企业开发的使用情况如下：

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

**颜色表示方式：**

![在这里插入图片描述][5cfc5f4b516b4180bd11fc74db04230b.png]

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

代码：

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

效果演示：

![在这里插入图片描述][6114a51190ca473ba19f217760889a68.png]

**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 class="cls" id="time">2023年03月02日 21:50</span> <span class="cls">央视网</span>
        <hr>
    </body>
    
    </html>

**效果图**

![在这里插入图片描述][47160d7cbfbc4ec3bab5dad723058226.png]

### 新浪新闻-超链接 ###

标签：

属性：

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

**代码演示**

**效果图**

![在这里插入图片描述][0d2f30c3acb94b03845d1bd4288cce69.png]

### 新浪新闻-正文排版 ###

视频标签：`<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>
    
        
        
        
        <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>

**效果图**

![在这里插入图片描述][d02fc3038aa0413189e0e1096115f2a2.png]

### 新浪新闻-页面布局 ###

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

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

![在这里插入图片描述][3f2863c6489a4544b5ae0b25dd4e4920.png]

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

**效果图**

![在这里插入图片描述][602d80d4743a4e8f9f34d831a784e26a.png]

## 表格、表单标签 ##

### 表格标签 ###

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

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

![在这里插入图片描述][5bc4264de1744e33b6a8178f750c6a5f.png]

**代码演示**

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

**效果图**

![在这里插入图片描述][0b7ee5a910144d20b86a8a72a95f237a.png]

### 表单标签 ###

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

对应标签：`<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="" method="post">
            用户名: <input type="text" name="username">
            年龄: <input type="text" name="age">
    
            
            <input type="submit" value="提交">
        </form>
    
    </body>
    
    </html>

**效果图**

![在这里插入图片描述][2f37a400f8a74cd58fe05735605f1e2a.png]

### 表单项标签 ###

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

![在这里插入图片描述][4cb54de8b8bb410f8a0c6e914fd91007.png]

**代码演示**

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

**效果图**

![在这里插入图片描述][888208d55272464bab4f0b75d49d73f9.png]

[Link 1]: https://blog.csdn.net/weixin_62511863?spm=1011.2421.3001.5343
[JavaWeb]: https://blog.csdn.net/weixin_62511863/category_12511257.html?spm=1001.2014.3001.5482
[a68f6f1944f442e689685b9c754d20e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/54c600583ee843388deda8ff614f8c2a.png
[175fdf87899448f88ea73ad448939d1c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/950f0ae5368946f0b2c1b3d6f389d49f.png
[8fa1d7a7320d4f4e89fdf530093d3328.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/48f27ed859484bcc986bc1d3dc81e363.png
[dd43d2930bf74191bc9a972d6a22eadd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/ffe30ba8ebcd4dc4a372b36c924d94a1.png
[96127961513644999c27822b7b22cc74.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/bc1fb0e2cd8b477eb8ddfa210aeffe16.png
[https_code.visualstudio.com]: https://code.visualstudio.com
[27577fc8ad8a4a2eb75ef7cff037c91f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/96b99df2e88e440b99b3ef1603c4b191.png
[5cfc5f4b516b4180bd11fc74db04230b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/7009c6d02a6240be81ee7736f15018fd.png
[6114a51190ca473ba19f217760889a68.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/346d0faa09014fe1a4aafb0807984b85.png
[47160d7cbfbc4ec3bab5dad723058226.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/6352982cc6044b348e5eabfa73fe4848.png
[0d2f30c3acb94b03845d1bd4288cce69.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/9175b77c83334a898afa472f202b0169.png
[d02fc3038aa0413189e0e1096115f2a2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/b4a3514fa552470ba14c76853f218afe.png
[3f2863c6489a4544b5ae0b25dd4e4920.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/f92168b2feed4e3a93c084b7264202d8.png
[602d80d4743a4e8f9f34d831a784e26a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/468e7c644bc748e396c0ed1bfe99bb52.png
[5bc4264de1744e33b6a8178f750c6a5f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/ed11fb93bff945c4a0cc27ef84727d6f.png
[0b7ee5a910144d20b86a8a72a95f237a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/85289766edbd4dc29ce9aeafd67087f8.png
[2f37a400f8a74cd58fe05735605f1e2a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/f7234c321a33453293f501f8e89d2d13.png
[4cb54de8b8bb410f8a0c6e914fd91007.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/ade604bcfb54441a806a26bbf49f7d9a.png
[888208d55272464bab4f0b75d49d73f9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/6a5553e1a7654cfd950bb4d588b58ad1.png

【JavaWeb】HTML&CSS

发表评论取消回复

还没有评论，来说两句吧...

相关阅读