【前端】HTML笔记（2）

最新推荐文章于 2024-08-12 17:51:29 发布

足足一米58

最新推荐文章于 2024-08-12 17:51:29 发布

阅读量112

点赞数 4

分类专栏： HTML 文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_61731785/article/details/125914035

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<style>
/*head中*/
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* 设置 id 为 "myHeader" 的元素的样式 */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
/* 设置类名为 "city" 的所有元素的样式 */
</style>

<h1 id="myHeader">My Cities</h1>

<h2 class="city">London</h2>
<h2 class="city">Paris</h2>

h1 {
color: red;
}

p {
color: blue;
}
</style>

<body style="background-color:yellow;">
<h2 style="background-color: red; text-align: center;">这是一个标题</h2>
<p style="font-family: arial; color: red;
font-size: 20px;">这是一个段落</p>
</body>

</body>
</html>

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <style>
        /*head中*/
        #myHeader {
            background-color: lightblue;
            color: black;
            padding: 40px;
            text-align: center;
        }
        /* 设置 id 为 "myHeader" 的元素的样式 */
        .city {
            background-color: tomato;
            color: white;
            padding: 10px;
        }
        /* 设置类名为 "city" 的所有元素的样式 */
    </style>
    <!-- 拥有唯一 id 的元素 -->
    <h1 id="myHeader">My Cities</h1>
    <!-- 拥有相同类名的多个元素 -->
    <h2 class="city">London</h2>
    <h2 class="city">Paris</h2>

    <style type="text/css">
        body {
            background-color: yellow;
        }

        h1 {
            color: red;
        }

        p {
            color: blue;
        }
    </style><!--定义了HTML文档的样式文件引用地址-->

    <body style="background-color:yellow;">
        <h2 style="background-color: red; text-align: center;">这是一个标题</h2><!--居中-->
        <p style="font-family: arial; color: red;
                  font-size: 20px;">这是一个段落</p><!--font-family字体,color字体颜色,font-size字体大小-->
    </body><!--body中定义-->

    <base href="http://www.w3cschool.cn/statics/images/w3c/"
          target="_blank"><!--指定了页面上所有链接的默认URL,在head中-->

    <link rel="stylesheet" type="text/css"
          href="mystyle.css"><!--定义了文档与外部资源之间的关系，在head中-->

    <meta name="description" content="Free Web tutorials on HTML, CSS, XML" /><!--定义页面的描述-->
    <meta name="keywords" content="HTML, CSS, XML" /><!--定义页面的关键词-->
    <!--<script> 标签用于加载脚本文件，如： JavaScript-->

    <img src="/statics/images/course/planets.gif" usemap="#planetmap" width="145" height="126" alt="Planets">
    <map name="planetmap">
        <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
        <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
        <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
    </map><!--创建带有可供点击区域的图像地图，其中的每个区域都是一个超级链接-->

</body>
</html>