html笔记（一）

目录

html元素

双标签

单标签

单标签与双标签元素的区别

完整的代码内容

html元素属性

双标签属性

HTML部分

CSS部分（内联样式）

单标签属性

[1. 元素类型](#1. 元素类型)

[2. CSS类名](#2. CSS类名)

[3. 内联样式属性](#3. 内联样式属性)

[border-color: chartreuse;](#border-color: chartreuse;)

[border-width: 5px;](#border-width: 5px;)

[background-color: crimson;](#background-color: crimson;)

[height: 20px;](#height: 20px;)

单标签中的属性与双标签属性的区别

完整代码

html元素

html标签是指开始标签到结束标签的所有内容

双标签

下面是一个完整双标签的元素内容

单标签

下面这个是单标签的内容，在第一个标签内以**/>**结尾

单标签与双标签元素的区别

单标签元素里面不能嵌套其他元素，多标签可以，而且可以嵌套单标签

完整的代码内容

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <div>

        标签内容

    </div>


    <hr/>

    <div>
        <p>这个一段本文</p>
        
        <hr>

        <div>
            <h1>这是一级标题</h1>
        </div>
    </div>

    
</body>
</html>

html元素属性

写在起始标签中的内容，空格分开多个属性。一个元素可以有多个属性

类似key="value"这样的

属性的组成 = {

属性名 = "属性值"

}

双标签属性

html 复制代码

    <div 

        style= "

                width: 200px;
                height: 200px;
                background-color: burlywood;

                "

        id="div_001"
        
        >

        标签内容

    </div>

解释

HTML部分

<div>：这是一个HTML容器元素，用于组织和结构化网页内容
id="div_001"：为这个div元素设置唯一标识符，可用于CSS样式或JavaScript操作
标签内容：div元素内部显示的文本内容

CSS部分（内联样式）

width: 200px;：设置元素宽度为200像素
height: 200px;：设置元素高度为200像素
background-color: burlywood;：设置背景颜色为浅棕色
浏览器中的样子

单标签属性

1. 元素类型

<hr> - 水平分隔线HTML元素，用于在页面中创建一条水平分隔线

2. CSS类名

class="css_style1 css_style2" - 为元素应用两个CSS类
- 需要在外部CSS文件中定义这些类的样式规则
- 类名可以自定义，这里只是示例名称

3. 内联样式属性

`border-color: chartreuse;`

含义：设置边框颜色为黄绿色
chartreuse 是CSS预定义颜色名称，十六进制值为 #7FFF00
这是一个鲜艳的黄绿色

`border-width: 5px;`

含义：设置边框宽度为5像素
但由于没有指定border-style，边框可能不会显示

`background-color: crimson;`

含义：设置背景颜色为深红色
crimson 是CSS预定义颜色名称，十六进制值为 #DC143C
这是一个鲜艳的深红色

`height: 20px;`

含义：设置HR元素的高度为20像素
默认HR高度通常为1-2px，这里设置为20px使其更明显

单标签中的属性与双标签属性的区别

双标签是写在**<div** 属性1="属性值1" 属性2="属性值2" ></div>

单标签是写在 <hr 属性1="属性值1" 属性2="属性值2" />

完整代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <div 

        style= "

                width: 200px;
                height: 200px;
                background-color: burlywood;

                "

        id="div_001"
        
        >

        标签内容

    </div>


    <hr 
        class="css_style1 css_style2"
        style="
                
                border-color: chartreuse; 
                border-width: 5px;  background-color: crimson; 
                height: 20px;
        "


    />



    
</body>
</html>

还可以写成下面的样式，写成上面的样式只是为了方便阅读。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <div style= " width: 200px; height: 200px; background-color: burlywood;"  id="div_001" >

        标签内容

    </div>


    <hr class="css_style1 css_style2" style="border-color: chartreuse; border-width: 5px;  background-color: crimson; height: 20px;"/>



    
</body>
</html>

浏览器展示