JavaWeb-05-基本标签&样式（新浪新闻）

最新推荐文章于 2024-07-14 21:33:55 发布

白川_

最新推荐文章于 2024-07-14 21:33:55 发布

阅读量60

点赞数

文章标签： servlet

本文链接：https://blog.csdn.net/hillo_/article/details/133018853

版权

标题

图片标签：<img>

src：指定图像的url（绝对路径/相对路径）

width：图像宽度（像素/相当于父元素的百分比）

height：图像高度（像素/相当于父元素的百分比）

标题标签：<h1> - <h6>

水平线标签：<hr>

标题排版

<!-- 文档类型为html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 浏览器兼容性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气</title>
</head>
<body>
    <!-- src:路径
    width：宽度(px--像素；%--相对于父元素的百分比)
    height：高度 -->

    <!-- 绝对路径 -->
        <!-- 绝对磁盘路径 -->
    <!-- <img src="D:\code\html\1.png" > -->
        <!-- 绝对网络路径 -->
    <!-- <img src="https://img0.baidu.com/it/u=530426417,2082848644&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" > -->

    <!-- 相对路径 -->
            <!-- ./当前目录，且./可以省略的 -->
            <!-- ../上一级目录的 -->
    <img src="1.png" > 新浪政务 > 正文
    <h1>焦点访谈，中国底气</h1>

    <hr>
    2023/9/19 11:48
    <hr>
</body>
</html>

标题样式

CSS三种引入方式：

注：

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, initialscale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>

    <!-- 方式二: 内嵌样式 -->
    <style>
        h1 {
        /* color: red; */
        /* color: rgb(0, 0, 255); */
        color: #4D4F53;
        }

        /* 元素选择器 */

        span{
            color: #968D92;
        }

        /* 类选择器（优先级次高） */
        .cls{
            color: #968D92;
            font-size: 13px;
        }

        /* id选择器(优先级最高) */
        #source{
            color:black;
            
        }


    </style>

    <!-- 方式三: 外联样式 -->
    <!-- <link rel="stylesheet" href="css/news.css"> -->

</head>
<body>

    <img src="1.png"> 新浪政务 > 正文

    <!-- 方式一: 行内样式 -->
    <!-- <h1 style="color: red;">焦点访谈：中国底气 新思想夯实大国粮仓</h1> -->

    <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
    <hr>
    <span class="cls">2023年03月02日 21:50</span>  <span id="source">央视网</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, initialscale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>

    <!-- 方式二: 内嵌样式 -->
    <style>
        h1 {
        /* color: red; */
        /* color: rgb(0, 0, 255); */
        color: #4D4F53;
        }

        /* 元素选择器 */

        span{
            color: #968D92;
        }

        /* 类选择器（优先级次高） */
        .cls{
            color: #968D92;
            font-size: 13px;
        }

        /* id选择器(优先级最高) */
        #source{
            color:black;
            
        }

        a{
            color: #000;
            text-decoration: none;/* 设置文本标准化 */
        }


    </style>

    <!-- 方式三: 外联样式 -->
    <!-- <link rel="stylesheet" href="css/news.css"> -->

</head>
<body>

    <img src="1.png"><a href="https://www.bilibili.com" target="_self">新浪政务</a>  > 正文

    <!-- 方式一: 行内样式 -->
    <!-- <h1 style="color: red;">焦点访谈：中国底气 新思想夯实大国粮仓</h1> -->

    <h1 >焦点访谈：中国底气 新思想夯实大国粮仓</h1>
    <hr>
    <span class="cls">2023年03月02日 21:50</span>  <span id="source"><a href="https://www.baidu.com">央视网</a></span>
    <hr>

</body>
</html>

正文

正文排版

<body>

    <img src="1.png"><a href="https://www.bilibili.com" target="_self">新浪政务</a>  > 正文

    <!-- 方式一: 行内样式 -->
    <!-- <h1 style="color: red;">焦点访谈：中国底气 新思想夯实大国粮仓</h1> -->

    <h1 >焦点访谈：中国底气 新思想夯实大国粮仓</h1>
    <hr>
    <span class="cls">2023年03月02日 21:50</span>  <span id="source"><a href="https://www.baidu.com">央视网</a></span>
    <hr>


    <!-- 正文 -->
    <!-- 视频 -->
    <video src="video/1.mp4" controls="controls" width="950px"></video>
    
    <!-- 音频 -->
    <audio src="audio/1.mp3" controls></audio>

    <!-- 文本 -->
    <p>
    <strong>ydd</strong>本课程基于主流的前后端分离的开发模式进行设计和讲解，基于主流的SpringBoot
    来讲解整个Web开发的知识点，参照企业开发模式，需求分析-表结构设计-接口文档-
    功能接口实现-测试-联调，理论与实践相结合，通过案例贯穿整个课程体系，学以致用。
    </p>
    <br>
    <p>
    传智教育·黑马程序员Java研究院全新录制的Java入门教程，相关资料源码笔记等关注微信公
    众号：黑马程序员，回复关键词：领取资源02
    </p>

    <p id="aligh">over</p>
</body>