水平分割线：

标题样式

CSS的引入方式
1.行内样式：写在标签的style属性中（不推荐）

标题

颜色的表示方式：

1.关键字：red，green......
2.rgb表示法：rgb（0,0,0）
3.十六进制表示法：#000000（两位一表示，每两位都一样可以简写#000）

CSS选择器：用来选取需要设置样式的元素

1.元素选择器：
元素名称{
color:red;
}
h1{
color:red;
}

hello

2.id选择器：(不能重复)

id属性值{

color:red;

}

hh{

color:red;

}

hello

3.类选择器：
.class属性值{
color:red;
}
.hh{
color:red;
}

hello

超链接

标签
属性：
href：指定资源访问的url
target：指定在何处打开资源链接
_self:默认值，在当前页面打开
_blant:在空白页面打开

石铁大称霸中国

页面布局

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域（content），内边距区域（padding 上右下左），边框区域（border），外边距区域（margin）

布局标签：

div:
1.一行只显示一个（独占一行）
2.宽度默认是父元素的宽度，高度默认由内容撑开
3.可以设置宽高
span:是 HTML 中的一个内联元素，它常用于在文本流中对特定的一小段文本进行样式设置、添加脚本行为或进行其他操作，而不会像块级元素那样独占一行。
1.一行可以显示多个
2.宽度高度都默认由内容撑开
3.不可以设置宽高

/* 图片样式 */
img {
  /* 将图片设置为块级元素，这样它可以独占一行，并且可以像块级元素一样设置外边距、内边距等样式 */
  display: block;
  /* 设置图片在垂直方向上距离上下元素的外边距为 20 像素，并且在水平方向上自动居中，用于调整图片在页面中的位置 */
  margin: 20px auto;
  /* 设置图片的最大宽度为其所在容器宽度的 100%，这样图片会根据容器的宽度自适应缩放，不会超出容器宽度，起到了响应式布局的效果，能保证图片在不同尺寸的容器中合理显示 */
  max-width: 100%;
}

/* 段落样式 */
p {
  color: #666;
  font-size: 16px;
  line-height: 1.5;
  text-indent: 2em;
}

/* 链接样式 */
a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* 列表样式 */
ul {
  list-style-type: square;
  padding-left: 20px;
}

ol {
  list-style-type: decimal;
  padding-left: 20px;
}

li {
  margin-bottom: 10px;
}

/* 视频样式 */
video {
  display: block;
  margin: 0 auto 20px;
  width: 60%;
  height: auto;
}

/* 音频样式 */
audio {
  display: block;
  margin: 0 auto 20px;
}

/* 容器 div 样式 */
div {
  background-color: #f5f5f5;
  padding: 20px;
  margin-bottom: 20px;
}

/* 类选择器示例 */

.highlight {
background-color: yellow;
}

/* ID 选择器示例 */
#special {
  font-weight: bold;
}

石铁大>称霸中国

石家庄铁道大学有着丰富的历史和卓越的成就。它在铁路建设相关领域培养了大量专业人才，为国家的基础设施建设做出了重要贡献。

这里是加粗的文本，用于强调重要信息。

这也是加粗的文本，语义上强调重要性。

点击这里访问石家庄铁道大学官方网站

• 石家庄铁道大学学科优势：土木工程
• 石家庄铁道大学学科优势：交通工程
• 石家庄铁道大学学科优势：机械工程

1. 学校发展历程重要事件一
2. 学校发展历程重要事件二
3. 学校发展历程重要事件三

这是在 div 容器内的段落内容。