目录
[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>
浏览器展示
