首页 前端知识 【JavaWeb】HTML&CSS

【JavaWeb】HTML&CSS

2024-02-28 11:02:26 前端知识 前端哥 130 32 我要收藏

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

目录

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

说明

该专栏关于前端技术的文章,适合让 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种引入方式,企业开发的使用情况如下:

  1. 内联样式会出现大量的代码冗余,不方便后期的维护,所以不常用
  2. 内部样式,通过定义css选择器,让样式作用于当前页面的指定的标签上
  3. 外部样式,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中无论输入多少个空格,只会显示一个。 如果确实想打多个空格,可以使用空格占位符:&nbsp;

代码演示

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

效果图

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2870.html
标签
评论
发布的文章

前端大屏适配几种方案

2024-01-29 13:01:44

JQ效果—展开和收起

2024-03-13 00:03:45

JQuery事件的基本使用

2024-03-13 00:03:39

「jQuery系列」jQuery 事件

2024-03-13 00:03:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!