HTML学习(2)

文章目录

    • HTML类
    • HTML id属性
    • HTML内联框架
    • HTML Javascript
    • HTML文件路径
      • HTML头部

我的个人博客:欢迎来逛逛


HTML类

使用

来进行给文章的分类,然后我们就可以为文章的类定义css样式,为相同的类设置相同的样式,或者为不同的类设置不同的样式。

如下所示:我们为下面的文章的几块定义了

属性,则表示他们属于类,并且都属于 cities一类,所以我们便可以在中统一设置 他们的类样式,如.cities所示

<html>
    <head>
        
        <style>
            .cities{
                background-color: rgb(249, 255, 207);
                color: rgb(33, 113, 120);
                margin: 20;
                padding: 20;
            }
            
        style>
    head>

    <body>
        
        <div class="cities">
            <h2>This is the Titleh2>
            <p>
                London is the capital city of England. 
                It is the most populous city in the United Kingdom,
                with a metropolitan area of over 13 million inhabitants.
            p>
            <p>
                Standing on the River Thames, London has been a major settlement for two millennia,
                 its history going back to its founding by the Romans, who named it Londinium.
            p>
        div>       
        <div class="cities">
            <h2>Parish2>
            <p>
                Paris is the capital and most populous city of France.
            p>
            <p>
                Situated on the Seine River, it is at the heart of the le-de-France region, also known as the region parisienne.
            p>
            <p>
                Within its metropolitan area is one of the largest population centers in Europe,
                 with over 12 million inhabitants.
            p>
        div>
        <div class="cities">
            <h2>Tokyoh2>
            <p>
                Tokyo is the capital of Japan, 
                the center of the Greater Tokyo Area,
                 and the most populous metropolitan area in the world.
            p>
            <p>
                It is the seat of the Japanese government and the Imperial Palace,
                 and the home of the Japanese Imperial Family.
            p>
            <p>
                The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.
            p>
        div>
    body>
html>

使用来定义行内的类,设置此属性,能够为某一行的内容设置样式。

<html>
    <head>
        
        <style>
            .cities{
                background-color: rgb(249, 255, 207);
                color: rgb(33, 113, 120);
                margin: 20;
                padding: 20;
            }
            .red{
                color: red;
            }
            .yellow{
                color: brown;
            }
        style>
    head>

    <body>
        
        <div class="cities">
            <h2>This is the Titleh2>
            <p>
                London is the capital city of England. 
                <span class="red"> is the most populous city in the United Kingdom,
                with a metropolitan area of over 13 million inhabitants.span>
            p>
            <p>
                Standing on the River Thames, London has been a major settlement for two millennia,
                 its history going back to its founding by the Romans, who named it Londinium.
            p>
        div>       
        <div class="cities">
            <h2>Parish2>
            <p>
                Paris is the capital and most populous city of France.
            p>
            <span class="red">
                Situated on the Seine River, it is at the heart of the le-de-France region, also known as the region parisienne.
            span>
            <p>
                Within its metropolitan area is one of the largest population centers in Europe,
                 with over 12 million inhabitants.
            p>
        div>
        <div class="cities">
            <h2>Tokyoh2>
            <p>
                Tokyo is the capital of Japan, 
                the center of the Greater Tokyo Area,
                 and the most populous metropolitan area in the world.
            p>
            <p>
                It is the seat of the Japanese government and the Imperial Palace,
                 and the home of the Japanese Imperial Family.
            p>
            <span class="yellow">
                The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.
            span>
        div>
    body>
html>

HTML id属性

id用于为html指定唯一的id属性。id在html中是唯一的,id属性用于为特定样式表进行样式的设置。

注意id的写法:前面是一个#号,后面跟的是id名称,然后再花括号中定义css属性

然后再具有id的标签元素中,我们便可以改变他为指定的样式

DOCTYPE html>
<html>
    <head>
        <style>
            #ylh{
                background-color:rgb(199, 149, 114);
                color: black;
                text-align: center;
                font-size: 50px;
            }
            .red{
                color: red;
            }
        style>
    head>

    <body>
        <h1>id属性h1>
        <p>设置id属性来指定样式p>
        <h2 id="ylh">Londonh2>
        <div>
            <p>
                London is the capital city of England. 
                <span class="red"> is the most populous city in the United Kingdom,
                with a metropolitan area of over 13 million inhabitants.span>
            p>
            <p>
                Standing on the River Thames, London has been a major settlement for two millennia,
                its history going back to its founding by the Romans, who named it Longinus.
            p>
        div>
    body>
html>

id对大小写敏感!

id至少包含一个字符,并且不能包含空格


class与id的区别:同一个class可以由多个HTML元素使用,但是一个id只能被页面的唯一一个HTML元素使用


使用id来进行跳转,类似于书签的跳转

也可以跳转到另一个界面

<a href="C1">点击跳转到第一章a>

...

<h2 id="C1">
    第一章: xxxxx
h2>

....

<a href="C1">点击跳转到第一章a>
<a href="F:\code\html\test2.html#C1">跳转到另一个界面的标签a>

在 JavaScript 中使用 id 属性

HTML内联框架

使用