JavaWeb----HTML/CSS

Moxue124

已于 2023-10-15 11:13:00 修改

阅读量121

点赞数

文章标签： html css 前端

于 2023-10-15 11:06:38 首次发布

本文链接：https://blog.csdn.net/Moxue124/article/details/133838894

版权

一、JavaWeb概述

1、Web标准

Web标准：也即网页标准，大部分由W3C负责制定，由三个部分组成：

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

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

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

2、JavaWeb主要学习内容

前端Web开发：HTML\CSS\JavaScript

后端Web开发：Maven\SpringBoot Web\MySQL\SpringBoot Mybatis

开发工具：VS Code

相关学习网站推荐：

w3school 在线教程

MDN Web Docs (mozilla.org)

二、HTML

1、概述

2、HTML标签介绍

2.1 标题标签、水平线标签、图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 当前页面的字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 浏览器的兼容性：以上代码告诉IE浏览器，IE8/9以及以后的版本都会以最高版本IE来渲染界面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edg">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气  新思想夯实大国粮仓</title>
</head>
<body>
    <!-- 
        img标签：
          src:图片资源路径
          width:宽度（px , 像素; % , 占原图的百分比）
          height:高度（px , 像素; % , 百分比）
          alt:规定图像的替代文本：如果图像包含信息 - 使用 alt 描述图像
                                如果图像在 a 元素中 - 使用 alt 描述目标链接
                                如果图像仅供装饰 - 使用 alt=""

        路径的书写方式；
          绝对路径：
             1、绝对磁盘路径：
                <img src="E:\front_end\HTML\img\news_logo.png" alt="">
             2、绝对网络路径：保证互联网上必须有该图且访问时必须联网
                <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" alt="">
          相对路径：《推荐写法》
            ./：当前目录，其中./可以省略
            ../：上一级的目录

     -->
    <img src="./img/news_logo.png" alt=""> 新浪政务 > 正文

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

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

2.2 CSS三种引入方式及color三种表示方式

描述颜色的三种方式：

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edg">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
   <!-- 方式二：内嵌样式：当前页面内有效 -->
   <style>
      h1 {
         /* 
         描述颜色的三种方式： 
            1、关键字：color:red;
            2、rgb表示法：color: rgb(255, 0, 0);
            3、十六进制表示法
         */
         color: #1a1a1a;
      }
   </style>
   <!-- 方式三：外联样式:所有页面都可以用
    <link rel="stylesheet" href="./css/news.css"> -->
</head>

<body>
   <img src="./img/news_logo.png" alt=""> 新浪政务 > 正文
   <!-- 方式一：行内样式:只针对某一样式内有效 -->
   <!-- <h1 style="color:red;">焦点访谈：中国底气  新思想夯实大国粮仓</h1> -->
   <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
   <hr>
   2023年03月02日 21:50 央视网
   <hr>
</body>

</html>

2.3 CSS选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edg">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气  新思想夯实大国粮仓</title>
    <style>
      /* 元素选择器
      h1{
         color: #1a1a1a;
      } */

      /* 类选择器:同一个页面内可重复使用
      .cls{
         color: #968D92;
      } */

      /* ID选择器：同一个页面内只能定义一个*/
      #time{
         color: #968D92;
         font-size: 12px;
      }
    </style>
</head>
<body>
    <img src="./img/news_logo.png" alt=""> 新浪政务 > 正文

    <h1>焦点访谈：中国底气  新思想夯实大国粮仓</h1>
    <hr>
       <span class="cls" id="time">2023年03月02日 21:50</span> <span class="cls">央视网</span>
    <hr>
</body>
</html>

2.4 超链接

<!-- 
   超链接的使用
   <a href="目标页面的网址" target="在哪里展示目标页面">新浪政务</a>
      target="_self"  默认值，在当前页面下展示
      target="_blank"  在另一个空白页面展示

   使用元素选择器对超链接的字体样式进行修改：color  text-decoration
-->

代码演示：对“新浪政务”四个字添加超链接
<a href="https://news.sina.com.cn/china/" target="_self">新浪政务</a>

使用元素选择器对超链接的字体进行设置

color: black; /* 更改字体颜色 */

text-decoration: none; /* 设置文本为一个标准文本：去掉下划线 */

}

当鼠标停留在具有超链接功能的文字上时，该部分文字变蓝：

a:hover{

color: blue;

/* background-color:lightskyblue; */

}

2.5 音视频插入

视频：src 指定文件路径； controls 播放控件，使得视频可播放

音频：src 指定文件路径； controls 播放控件，使得视频可播放

2.6 盒子模型

<!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; /* 内边距, 上 右 下 左 */
            border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
            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>

2.7 表格标签

<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; /* 单元格内容居中展示 */
        }
        table{
            font-size: 12px;
        }
    </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>

    <br>
    <br>

    <table border="1px" width="600px" cellspacing="0">
        <!-- 第一行 -->
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>照片</th>
        </tr>

        <!-- 第二行 -->
        <tr>
            <td>1</td>
            <td>marry</td>
            <td>18</td>
            <td>girl</td>
            <td><img src="./img/4.jpg" alt="" width="100px"></td>
        </tr>
    </table>

</body>
</html>

运行效果展示：