JAVA-Web端学习1 HTML和CSS格式

上高中刚学竞赛的时候，我捧着一本入门书在那里啃，然后我的同学跑来问我学完能不能做一个王者荣耀。

入门

‌HTML是网页的结构骨架，CSS是网页的视觉设计师‌。 简单来说，HTML负责搭建网页的内容和结构（比如标题、段落、图片位置），而CSS则负责美化它——控制颜色、字体、布局、动画等外观表现 。

你可以把网页想象成一座房子：

‌HTML‌ 就像是房子的钢筋水泥骨架，决定了哪里是客厅、卧室、门窗；
‌CSS‌ 则是装修师傅，负责刷墙、铺地板、选灯具，让房子变得美观舒适 。

（摘自百度AI）

<head>
    <!-- 定义网页标题-->    
    <title>【new】Here we go</title>

</head>
<body>
    <!-- 定义一个页面标题-->
    <h1> This is title! </h1>
</body>

image

常见标签与样式

超链接

超链接通过href关键字来实现 并且设置了一些其它参数来扩展功能

<a href=网页地址> 链接标题 </a>

详细示例以及常用参数介绍如下：

<!-- 链接到电话 -->
<a href="tel:+1234567890">拨打电话</a>

<!-- 在新窗口打开链接 如果要在此窗口打开则是target="_self"-->
<a href="https://www.example.com" target="_blank">在新窗口打开</a>

<!-- 带有标题的链接 -->
<a href="https://www.example.com" title="点击访问示例网站">带标题的链接</a>

image

字体颜色设置

字体颜色设置有三种常见方法：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a2 {//方法2：内部样式
            color: blue;
        }
    </style>

    <link rel="stylesheet" href="news.css"> //方法3：通过设置超链接来使用外部样式设置
</head>
<body>
    <a1 style="color: red"> This is Red <br></a1> //方法1：行内样式
    <a2> This is Blue <br></a2>
    <a3> This is Green <br></a3>
</body>


*************************
<!-- 同一文件夹下设置news.css文件-->

a3{
    color: chartreuse;
}

效果如下：
image

选择器格式

上面设置字体颜色的方法2内部样式设置便是使用了选择器方法

最常见的选择器有三种：元素选择器，类选择器，ID选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a1 { //元素选择器，最为常见
            color: blue;
        }
        .a2 { //类选择器，以.开头作为标识符
            color: red;
        }
        #a3 {//ID选择器，以#开头作为标识符
            color: blueviolet;
        }
    </style>

</head>
<body>
    <a1> This is a1 <br> </a1>
    <a2 class="a2"> This is a2 <br> </a2>
    <a3 class="a2" id="a3"> This is a3 <br> </a3>
</body>

效果如下：
image

当多个选择器同时作用于同一个元素时，CSS会根据优先级来决定最终样式：

1‌.ID选择器‌（#id）优先级最高
2.类选择器‌（.class）次之
3.元素选择器‌（element）优先级最低

选择器可以做的事情

去除超链接下划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .withoutline {
            color: blue;
            text-decoration: none; //在元素选择器中通过添加text-decoration: none去掉超链接下划线
        }
    </style>

</head>
<body>
    <a href="https://www.bilibili.com/">This is a1</a>
    <a href="https://www.bilibili.com/" class=".withoutline">This is a2</a>
</body>
</html>

效果如下：

image

设置段落行高和缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            /*设置段落间距*/
            line-height: 1;
            /*设置行首缩进*/
            text-indent: 2em;
        }
    </style>

</head>
<body>
    <p>
        <strong>Now is :</strong>
        Our HTML code.Our HTML code.Our HTML code.Our HTML code.Our HTML code.Our HTML code.Our HTML code.Our HTML code.Our HTML code.Our HTML code.Our HTML code.Our HTML code.Our HTML code.Our HTML code.Our HTML code.
    </p>
    <p>
        <strong>Now is :</strong>
        Our HTML code2.
    </p>
</body>
</html>

效果如下：
image

posted @ 2026-03-15 18:30  tcswuzb  阅读(2)  评论(0)    收藏  举报