JavaWeb-html、css-网页正文制作

视频、音频、图片引入

html 复制代码

<!-- 定义一个视频 -->
    <!-- video 标签的属性：
      src：视频的路径
      controls：添加视频控制器
      autoplay：自动播放
      width：视频宽度（建议宽度和高度只设置一个，另一个会等比例缩放）
      height：视频高度
         单位：
            px：像素
            %：百分比（相对于父元素的百分比）
 -->
    <video src="https://www.mihoyo.com/activity/20230811/1691813334/1691813334.mp4" controls width="400px"></video>
    <br></br>
    <!-- <audio src="https://www.mihoyo.com/activity/20230811/1691813334/1691813334.mp3" controls></audio> -->

	<!-- 段落标签 -->
    <p>
        团队介绍：研发效能团队聚焦于公司内部游戏项目组业务流程提效，覆盖游戏研发管线、本地化翻译等游戏生产环节，通过持续引入前沿技术，结合机器学习智能化，构建高可靠、高效率的工程系统和基础设施工具，覆盖游戏项目组多样化的业务提效需求。
    </p>

    <p>
    工作职责：
    1、负责服务端系统的技术方案设计、开发与系统维护工作；
    2、负责高质量的设计和编码，承担重点、难点的技术问题攻坚；
    3、参与各专项技术调研，新技术引入等前瞻项目。
    </p>
    <!-- 引入一张图片 -->
    <!-- img标签属性 
    src: 图片地址
        1.绝对路径
            1.1绝对磁盘路径：C:\Users\Administrator\Desktop\img\1.jpg(不推荐)
            1.2绝对网络路径：http://www.baidu.com/img/1.jpg
        2.相对路径
            2.1 ./ ：当前目录(./可以省略)
            2.2 ../ ：上级目录
    width: 图片宽度 (建议宽度和高度只设置一个，另一个会等比例缩放)
    height: 图片高度
-->
    <img src="./img/Amiya.jpg" alt="图片" width="400px">

样式处理

line-height：设置行高

text-indent：首行缩进

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【日常实习生】后端开发实习生 - 研发效能</title>

     <style>

        /* 类选择器 */
        .cls{
            color: grey;
        }

        /* ID选择器 */
        #type{
            color: gray;
        }

        a{
            /* 去除超链接下方的下划线 */
            text-decoration: none;
        }

        p{
            /* 设置行高 */
            line-height: 1.5;
            /* 设置首行缩进 */
            text-indent: 2em;
        }
     </style>
</head>
<br>
    <!-- ----------------正文标题----------------- -->
    <!-- 定义一个标题，内容：【日常实习生】后端开发实习生 - 研发效能 -->
    <h1>【日常实习生】后端开发实习生 - 研发效能</h1>

    <!-- 定义一个超链接，内容：米哈游 -->
    <a href="https://www.mihoyo.com/" target="_blank">米哈游</a>

    <!-- 换行 -->
     <br></br>
    
    <!-- 方式一：行内样式 -->
    <span style="color: grey;">上海</span>
    <span class="cls" id="type">程序&技术类</span>
    <span class="cls">日常实习生</span>
    
    <br></br>

    <!-- ----------------正文内容----------------- -->
    <video src="https://www.mihoyo.com/activity/20230811/1691813334/1691813334.mp4" controls width="400px"></video>

    <br></br>

    <!-- <audio src="https://www.mihoyo.com/activity/20230811/1691813334/1691813334.mp3" controls></audio> -->

    <p>
        <!-- 加粗 -->
        <!-- <b> 团队介绍：</b> -->
        <!-- <strong> &nbsp;&nbsp;&nbsp;&nbsp;团队介绍：</strong> -->
        <strong>团队介绍：</strong>
    </p>

    <p>
        研发效能团队聚焦于公司内部游戏项目组业务流程提效，覆盖游戏研发管线、本地化翻译等游戏生产环节，通过持续引入前沿技术，结合机器学习智能化，构建高可靠、高效率的工程系统和基础设施工具，覆盖游戏项目组多样化的业务提效需求。
    </p>

    <p>工作职责：</p>
    <p>1、负责服务端系统的技术方案设计、开发与系统维护工作；</p>
    <p>2、负责高质量的设计和编码，承担重点、难点的技术问题攻坚；</p>
    <p>3、参与各专项技术调研，新技术引入等前瞻项目。</p>
    

    <img src="./img/Amiya.jpg" alt="图片" width="400px">

</body>
</html>

内容居中

html 复制代码

<head>
	<style>
		/* 宽度为70%，居中显示 */
        #content-container{ 
            width: 70%;
            margin-left: auto;
            margin-right: auto;
        }
	</style>
</head>

盒子模型

盒子：页面中所有的元素（标签），都可以看作一个盒子。由盒子将页面中的元素包含在矩形区域内
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

布局标签：使用div和span两个没有语义的布局标签

特点：

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

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        #div1{
            width: 200px; /* 宽度 */
            height: 300px; /* 高度 */
            background-color: yellow;   /* 背景颜色 */
            padding: 20px; /* 内边距 */
            box-sizing: border-box; 
            border: 10px solid grey;
            margin: 20px 100px 20px 100px; /* 外边距 */
            /* 换行 */
            word-wrap: break-word;      /* 允许长单词换行 */
            word-break: break-all;      /* 强制换行 */
            overflow: hidden;           /* 隐藏溢出内容 */
        }
    </style>
</head>
<body>
    <div id="div1">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
    <!-- <div id="div2">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
    <span>
        ssssssssssssssssssssssssssssss
    </span>
    <span>
        ssssssssssssssssssssssssssssss
    </span> -->
</body>
</html>