Javaweb

JavaWeb前端基础教程

最新推荐文章于 2025-11-24 16:38:26 发布

原创最新推荐文章于 2025-11-24 16:38:26 发布 · 398 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

Javaweb 专栏收录该内容

9 篇文章

订阅专栏

前端：

HTML：网页结构：页面元素和内容

JS：网页行为：交互动作

CSS：网页表现：元素的外观和位置等页面样式：

只有HTML：

加上CSS：

加上JS后：

介绍：

HTML：

保证了不同浏览器用统一的解析规则

主要学习标签

CSS：

主要学习定义的样式

HTML快速入门：

1、不区分大小写

2、属性可以用单引号与双引号

3、结构较松散，即语法要求不严格，但编写时尽量按照规范严格编写

web常见标签和样式

标题

<!-- 文档类型为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>
    <!-- img标签：
        src：资源路径
        width：宽度（px，像素；%，相对于父元素的百分百）
        height：高度
    src：
        1、绝对磁盘路径
        2、绝对网络路径（保证互联网有这张图并且访问时联网） -->
        <!-- 3、相对路径： ./ 当前目录，可省略
                    ../ 上一级目录，不可省略 -->
                    
    <!-- <img src="HTML\img\news_logo.png" width="80px" height="50%"> -->
    <img src="D:\vs\HTML\img\news_logo.png" > 新浪政务>正文
    <h1>焦点访谈 ：中国底气 新思想夯实大国粮仓</h1>
    <hr>
    2023年03月02日 21:50 央视网
    <hr>
</body>
</html>

效果：

总结

CSS样式控制

标签颜色控制：

<!-- 文档类型为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>

    <!-- 方式2 内嵌样式 -->
     <!-- <style>
        h1 {
            color:red;
        }
     </style> -->

     <!-- 方式3 外联样式 -->
      <!-- <link rel="stylesheet" href="./css/news.css"> -->
       
</head>
<body>
    <img src="D:\vs\HTML\img\news_logo.png" > 新浪政务>正文

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

    <h1>焦点访谈 ：中国底气 新思想夯实大国粮仓</h1>
    <hr>
    2023年03月02日 21:50 央视网
    <hr>
</body>
</html>

颜色表示：

css引入方式，颜色表示，颜色显示总结：

2023年03月02日 21:50 央视网

：没有任何效果的标签，方便对样式进行管理，可以管理一行内的样式

CSS选择器

三种选择器同时存在，id选择器优先级最高，类选择器优先级次之，元素选择器最低

font-size：设置字体大小

span标签，css选择器，css属性总结：

超链接

<!-- 文档类型为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>
     <style>
        h1 {
            color:#4D4F53;
        }
        #time{
            color:#968D92;
            font-size: 13px;
        }
        a{
            color:black;
            text-decoration: none;
        }
     </style>
       
</head>
<body>
    <img src="D:\vs\HTML\img\news_logo.png" > <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文
    <h1>焦点访谈 ：中国底气 新思想夯实大国粮仓</h1>
    <hr>
    <span id="time">2023年03月02日 21:50</span> <span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a></span>
    <hr>
</body>
</html>