Java web 开发记录：day02 vscode的基础入门

最新推荐文章于 2024-07-27 13:31:57 发布

白白一片

最新推荐文章于 2024-07-27 13:31:57 发布

阅读量414

点赞数 12

分类专栏： vscode 文章标签： java 前端 vscode

本文链接：https://blog.csdn.net/m0_62844219/article/details/135587693

版权

vscode 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

超链接

<a href="https://blog.csdn.net/m0_62844219?spm=1010.2135.3001.5421" target="_self">主页</a>
#href:指定跳转地址
#target:指定在何处打开资源链接

按下"主页"超链接后就会跳转到我预设的网页我们可以发现它是在原窗口打开的网址，这是因为我们未设置target他的默认值是"_self"在本窗口打开跳转,读者若想在新页面打开跳转网址可以将target改为"_blank"再次点击超链接后就会创建新窗口打开网页。

此外，超链接的默认样式如上显示，我们也可以进行修改，只需在之前学习的style内添加一个a模块设定，这里读者可以自行尝试，可以查阅w3school学习文本装饰。

文章排版

我们在网页浏览新闻时可以看见它是具有一定排版的，若简单的复制文字虽然可以显示文章内容，但是影响观感，下面用一个简单的例子来演示文章的排版

例如我们想要显示一下内容首先内容存在多个段落这是我们需要使用'p'标签来显示段落

<body>
<p>请假条</p>
<p>尊敬的辅导员:</p>
<p>您好，我是20级2班的XXX，因期末考试安排无法参加此次班级活动，特此向您请假，望批准。</p>
<p>此致</p>
<p>敬礼! </p>
<p>申请人： XXX</p>
<p>XXXX年XX月XX日</p>
</body>

可以看见大致的分段已经出现了，下面一一处理每段的格式。

首先“请假条”需要居中，并且加粗，这是我们可以给这一段添加一个style查阅w3school可知text-align可以修改对其方式。显示加粗我们可以对内容进行强调，这里可以使用两种标签“<b>"或者"<strong>"

<p style="text-align: center;"> <b>请假条</b></p>

下面处理第三段需要缩进两个字符，查阅w3school有一各indent标签能够修改缩进

效果如下：

<p style="text-indent: 35px;">您好，我是20级2班的XXX，因期末考试安排无法参加此次班级活动，特此向您请假，望批准。</p>

第四段同样也是缩进两个字符，这时我们可以联想到之前学到的内嵌样式，如果设置一个内嵌样式p模块缩进就可以实现。但是其他的段落也会缩进，这如何解决呢？其实我们可以取一个别名，让第三四段单独缩进。

在第三四两段的p标签中添加一个id，然后采用内嵌style的方式对这个id进行缩进，相关代码如下，部分代码以省略（后面会附上完整代码）

<style>
    #text{
        text-indent: 35px;
    }
</style>


<p id="text">您好，我是20级2班的XXX，因期末考试安排无法参加此次班级活动，特此向您请假，望批准。</p>
<p id="text">此致</p>

剩下的就是最后两端的置右，我们可以采用同样的方式取别名在内嵌中设置对齐（读者可以自行尝试），下面采用单独设置展示效果

<p style="text-align:end">申请人： XXX</p>
<p style="text-align:end">XXXX年XX月XX日</p>

这样我们的格式就修改完成了，其他格式设置可以学习w3school了解更多的样式。

完整代码如下

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="abcss.css">
<style>
    #text{
        text-indent: 35px;
    }
</style>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>白白一片</title>
</head>
<body>
<p style="text-align: center;"> <b>请假条</b></p>
<p>尊敬的辅导员:</p>
<p id="text">您好，我是20级2班的XXX，因期末考试安排无法参加此次班级活动，特此向您请假，望批准。</p>
<p id="text">此致</p>
<p>敬礼! </p>
<p style="text-align:end">申请人： XXX</p>
<p style="text-align:end">XXXX年XX月XX日</p>
</body>
</html>

视频文件与音频文件的添加

<video src="E:\1.mp4" controls></video>
<audio src="E:\audio\music.mp3" controls="controls"></audio>

需要注意必须要添加controls才能播放，这里我分别用了不同的形式，等于自己的时候可以省略。

白白一片

关注

12
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Java web 开发记录：day02 vscode的基础入门

按下"主页"超链接后就会跳转到我预设的网页我们可以发现它是在原窗口打开的网址，这是因为我们未设置target他的默认值是"_self"在本窗口打开跳转,读者若想在新页面打开跳转网址可以将target改为"_blank"再次点击超链接后就会创建新窗口打开网页。此外，超链接的默认样式如上显示，我们也可以进行修改，只需在之前学习的style内添加一个a模块设定，这里读者可以自行尝试，可以查阅w3school学习文本装饰。
复制链接

扫一扫

专栏目录