Java

Html-day01

html

通过复制新浪新闻页面来学习html的各种格式。

快速入门

html的格式很简单，我们可以编辑一个简单的html文件来进行展示，在vscode里可以使用快捷键!来进行模板的生成，生成的代码如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

其中需要关注的是head和body这两个模块，我们可以先在body里面添加一些内容，例如Hello，World

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello, World
</body>
</html>

其结果如下

image-20250227203907153

head里面的title标签就是网页的标签，所以我们可以把这标签修改为我们想要的内容，例如

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
</head>
<body>
    Hello, World
</body>
</html>

image-20250227204334896

可以看到我们已经修改成功了

现在我们来模拟一下新浪的新闻标题，新浪的标题结果如下

image-20250227204534764

我们来思考一下需要完成哪些任务

  1. 新浪的图片标志
  2. 新浪>正文是一个超链接
  3. 中间的加粗加黑的大字标题
  4. 两条分割线
  5. 文字的样式

图片

我们需要插入一张图片，这张图片的路径可以是本地的路径，也可以是远程服务器上的路径，不过需要给出对应的url，图片的插入语法如下

1

<img src:"url" />

其中需要提供一个url来确定图片，除此之外，还可以调整图片的样式，比如图片的缩放程度。

image-20250227205245443

1

<img src:"" width="xxx" height="xxx" />

假设我们把图片固定为300x300，那么需要指定好长宽比例

1

<img src= "xxx" width="300" height="300" />

image-20250227205629078

为了还原，我们把页面设置为原始比例。后面我们先不设置超链接，所以只需要在图片的后面添加几行字即可，所以现在的代码变为

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
</head>
<body>
    <img src="../img/news_logo.png" /> 新浪政务>正文
</body>
</html>

大字标题

这种大字标题其实是<h> </h>标签的作用，在html一共有6级标题可以设置，所以我们可以使用h1标题来设置。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
</head>
<body>
    <img src="../img/news_logo.png" /> 新浪政务>正文
    <h1> 焦点访谈：中国底气 新思想夯实大国粮仓 </h1>
</body>
</html>

image-20250227210242550

此时下方还有一个分割线，而分割线也是有专门对应的标签，即<hr/>(horizontal rule的缩写).现在我们的标题就变得和示例的标题一摸一样了。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

image-20250227210721851

样式

我们可以修改字体的颜色，例如，我们把标题的字体颜色修改为red，这里总共有三种方式：

  1. 直接在行内标明颜色

    1

    <h1 style="color: red;"> 焦点访谈：中国底气 新思想夯实大国粮仓 </h1>

    这样大标题就换了颜色

    image-20250227211310792

  2. 内嵌样式

    直接在<head>里面添加一个style样式，然后指定标签的名称，把对应的样式填进去即可

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
	把整体样式填写在这里
    <style>
        h1 {
            color: blue;
        }

    </style>

</head>
<body>
    <img src="../img/news_logo.png" /> 新浪政务 > 正文
    <!-- <h1 style="color: red;"> 焦点访谈：中国底气 新思想夯实大国粮仓 </h1> -->
    <h1> 焦点访谈：中国底气 新思想夯实大国粮仓 </h1>
    <hr/>
    2023年03月02日 21:50 央视网
    <hr/>
</body>
</html>

    注意，这样做会装饰所有<h1>包裹的字体，一个优点是，如果需要统一某些共同的样式，那么这样可以快速的统一一些样式。

  3. 外联样式

    把这些样式专门封装为.css，然后使用link把该样式链接进来。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>

    <!-- <style>
        h1 {
            color: blue;
        }

    </style> -->
    外联样式
    <link rel="style" href="../css/news.css"/>

</head>
<body>
    <img src="../img/news_logo.png" /> 新浪政务 > 正文
    <!-- <h1 style="color: red;"> 焦点访谈：中国底气 新思想夯实大国粮仓 </h1> -->
    <h1> 焦点访谈：中国底气 新思想夯实大国粮仓 </h1>
    <h1> 变成了蓝色</h1>
    <hr/>
    2023年03月02日 21:50 央视网
    <hr/>
</body>
</html>

    rel：是 “relationship” 的缩写，表示“关系”。href：是 “hypertext reference” 的缩写，表示“超文本引用”，即资源的地址或链接。

总结，当需要重复引用一个样式时，外联样式可能是最好的选择。

分块样式

当多个内容处于一行的时候，我们可以使用分块的标签来对其进行修饰。

<span>选择器是一个空白标签，被这个标签包裹的内容在默认情况下不会作出任何修改，但是还是可以凭借这个标签来进行样式的修改，同样的，可以作用在<span>上的修饰也有三种

  1. 直接修饰

    元素选择器

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
    <style>
        专门进行修饰
        span {
            color: red;
        }
    </style>

</head>
<body>
    <img src="../img/news_logo.png" /> 新浪政务 > 正文
    <h1> 焦点访谈：中国底气 新思想夯实大国粮仓 </h1>
    <hr/>
    <span>2023年03月02日</span> 21:50 央视网
    <hr/>
</body>
</html>

  2. 类选择器

    可以在style中指定类选择器,需要我们给这个类起一个名字，例如，我们想要修饰时间，把所有时间字体全部修改为蓝色，那么我们就可以这样写

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>

    <!-- <style>
        h1 {
            color: blue;
        }

    </style> -->
    <link rel="style" href="../css/news.css"/>
    <style>
        span {
            color: red;
        }
        .time {
            color: blue;
        }
    </style>

</head>
<body>
    <img src="../img/news_logo.png" /> 新浪政务 > 正文
    <!-- <h1 style="color: red;"> 焦点访谈：中国底气 新思想夯实大国粮仓 </h1> -->
    <h1> 焦点访谈：中国底气 新思想夯实大国粮仓 </h1>
    <hr/>
    <span class="time">2023年03月02日</span> <span> 21:50 央视网 </span> 
    <hr/>
</body>
</html>

    在标签里面定义好class，然后在head的style里面使用.classname来进行修饰。值得一提的是，在span和class同时都被修饰的情况下，class的优先级更好

  3. 使用id来进行修饰

    同样的，要想使用id，可以使用#开头来进行修饰，需要注意的是,id是唯一的，不可以重复使用，如果要重复使用，那么可以使用类装饰器

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>

    <!-- <style>
        h1 {
            color: blue;
        }

    </style> -->
    <link rel="style" href="../css/news.css"/>
    <style>
        span {
            color: red;
        }
        .time {
            color: blue;
        }
        #f {
            color: #00ff00;
        }
    </style>

</head>
<body>
    <img src="../img/news_logo.png" /> 新浪政务 > 正文
    <!-- <h1 style="color: red;"> 焦点访谈：中国底气 新思想夯实大国粮仓 </h1> -->
    <h1> 焦点访谈：中国底气 新思想夯实大国粮仓 </h1>
    <hr/>
    <span class="time">
        2023年03月02日 21:50 
    </span>
    <span id="f"> 
        央视网 
    </span> 
    <hr/>
</body>
</html>

超链接

超链接的标签是a，在使用时，我们只需要把超链接标签包裹住对应的文字即可

1
2
3
4
5

<span id="f"> 
    <a href="baidu.com"> 
        央视网 
    </a> 
</span>

这样就可以把央视网指向对应的链接处，不过这样默认是链接的形式，所以可以设置css样式来取消下划线。

在style里面为所有的a标签来指定样式

1
2
3
4

a {
    color: black;
    text-decoration: none; /* 设置文本为一个标准的文本 */
}

总结

  1. 图片的插入

    1

    <img src="" />

  2. 标题

    1
2
3
4
5
6
7

    <h1>

</h1>

<h2>

</h2>

    一直到h6

  3. css样式

    这里样式比较多，需要了解

    • 直接使用标签

    • 类装饰器，前面要加“."

    • id装饰器，前面加"#",每个标签使用的id是唯一的

    • 可以连接外部css样式

      1

      <link rel="xxx" href="xxx"/>

  4. 超链接

    超链接的标签是<a href= ""> </a>，凡是这样的标签都可以在style里面进行修饰，超链接也不例外

Javaweb
Licensed under CC BY-NC-SA 4.0
© 2024 - 2025 Xiao Peng
花有重开日，人无再少年
使用 Hugo 构建
主题 Stack 由 Jimmy 设计