01-HTML和CSS

马铃薯1 / 2024-01-15 / 原文

HTML、CSS参考资料链接：w3school 在线教程

HTML快速入门

1）html 元素囊括了页面中所有其它元素，整个页面只需一个，称为根元素

2）head 元素包含的是那些不用于展现内容的元素，如 `title`，`link`，`meta` 等

3）body 元素包含了对用户展现内容的元素，例如后面会学到的用于展示文本、图片、视频、音频的各种元素

这里需要注意：

1）HTML标签不区分大小写

2）HTML标签属性值单双引号都可以

3）HTML语法比较松散

案例：实现新浪新闻网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点访谈：中国底气 新思想夯实大国粮食</title>
</head>
<body>
    <!--路径书写方式
    绝对路径：
        1.绝对磁盘路径：<img src="D:\code\JavaStudent\HTMLStudent\src\img\news_logo.png">
        2.绝对网络路径：<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
    相对路径：
        ./：代表当前目录，其中./是可以省略的  <img src="img/news_logo.png">
        ../：代表上一级目录
    -->

    <!--
    img标签的属性(如果省略，默认为px)
        src：图片的路径
        width： 图片的宽度(px, 像素; %, 相对于父元素的百分比)
        height：图片的高度(px, 像素; %, 相对于父元素的百分比)
    -->
    <img src="img/news_logo.png" width="137" height="36">
    <span style="font-size: 12px;">国内新闻 ></span>
    <span style="font-size: 12px;">正文</span>

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

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点访谈：中国底气 新思想夯实大国粮食</title>

    <!--
    方式二：内嵌样式，写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
        1）标签名选择器：h1{color:red;}
        2）类选择器：.tip{font-size: 12px;}
        3）id选择器：#t1{color: blue;}
    -->
    <style>
        h1{
            color: red;
        }
        .tip{
            font-size: 12px;
        }
        #t1{
            color: blue;
        }
    </style>

    <!--方式三：外联样式，写在一个单独的css文件中，需要通过link标签在网页中引入-->
    <link rel="stylesheet" href="css/news.css">
</head>
<body>

    <img src="img/news_logo.png" width="137" height="36">
    <span class="tip" style="font-size: 12px;">国内新闻 ></span>
    <span class="tip" id="t1" style="font-size: 12px;">正文</span>

    <!--方式一：行内样式，写在标签的style属性中，只对这一个标签生效（不推荐）-->
    <!--<h1 style="color:red;">焦点访谈：中国底气 新思想夯实大国粮食</h1>-->

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

</body>
</html>

这里需要注意：ID选择器 > 类选择器 > 元素选择器（优先级）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点访谈：中国底气 新思想夯实大国粮食</title>

    <style>
        h1{
            color: #4D4F53;
        }
        .tip{
            font-size: 12px;
        }
        #time{
            color: #968D92;
            font-size: 13px;
        }
        a{
            color: black;
            text-decoration: none; /* 去掉下划线 */
        }
    </style>
</head>
<body>

    <img src="img/news_logo.png" width="137" height="36">
    
    <!--
    超链接的属性：
        href：超链接的地址
        target：打开方式
        1）_blank：在新窗口中打开
        2）_self：在当前窗口中打开（默认）
    -->
    <a href="http://gov.sina.com.cn" target="_self"><span class="tip">国内新闻</span></a> >
    <span class="tip" style="font-size: 12px;">正文</span>

    <h1>焦点访谈：中国底气 新思想夯实大国粮食</h1>
    <hr>
    <span id="time">2023年03月02日 21：50
        <a href="http://www.news.cn/politics/leaders/20240115/22301b2858514b97a2215a5bcd84b5dd/c.html" target="_blank"><span>央视网</span></a>
    </span>
    <hr>

</body>
</html>