Html和CSS学习笔记-CSDN博客

本文链接：https://blog.csdn.net/XS666666666/article/details/142661606

HTML（超文本标记语言）是一种用于创建网页的标记语言。它由一系列标签组成，这些标签定义了网页的结构和内容。以下是一些常见的HTML标签和属性：

<html>：定义HTML文档的根元素。
<head>：定义文档的头部，包含元数据信息，如标题、样式表和脚本引用等。
<title>：定义网页的标题，在浏览器的标题栏中显示。
<body>：定义文档的主体部分，包含要在网页中显示的内容。
<h1> - <h6>：定义标题，从h1（最高级别）到h6（最低级别）。
<p>：定义段落。
<a>：定义链接，用于创建超链接到其他文档或位置。
<img>：定义图像，用于插入图片。
<div>：定义文档中的一个区块，可以用于布局和样式控制。
<span>：定义文档中的一个区块，通常用于内联元素的样式控制。
<ul>：定义无序列表。
<ol>：定义有序列表。
<li>：定义列表项。
<table>：定义表格。
<tr>：定义表格中的行。
<td>：定义表格中的单元格。

CSS

1.文本样式

p {
  color: blue; /* 设置文本颜色为蓝色 */
  font-size: 16px; /* 设置字体大小为16像素 */
  font-weight: bold; /* 设置字体粗细为粗体 */
  text-align: center; /* 设置文本居中对齐 */
}

2.背景样式

body {
  background-color: #f0f0f0; /* 设置背景颜色为浅灰色 */
  background-image: url('background.jpg'); /* 设置背景图片 */
  background-repeat: no-repeat; /* 设置背景图片不重复 */
  background-size: cover; /* 设置背景图片适应容器大小 */
}

3.边框样式

div {
  border: 1px solid black; /* 设置边框为1像素宽，黑色实线 */
  border-radius: 5px; /* 设置边框圆角为5像素 */
  box-shadow: 1px 1px 5px gray; /* 设置阴影效果 */
}

4.布局样式

.container {
  display: flex; /* 设置容器为弹性盒子 */
  justify-content: center; /* 设置子元素水平居中对齐 */
  align-items: center; /* 设置子元素垂直居中对齐 */
  flex-wrap: wrap; /* 设置子元素自动换行 */
}