HTML&CSS学习总结

銇颢

已于 2023-07-03 22:14:16 修改

阅读量58

点赞数

文章标签： html css 学习

于 2023-07-03 22:10:33 首次发布

本文链接：https://blog.csdn.net/m0_64560503/article/details/131523999

版权

HTML&CSS学习总结

一、HTML

HTML（超文本标记语言）是一种用于创建网页结构和内容的标记语言。它由一系列标签组成，这些标签定义了网页中的元素和其它内容的显示方式。

1.常用标签HTML是用于构建网页的标记语言，下面是一些常用的HTML标签及其用法实例：

<html>：定义HTML文档的根元素。

示例：

<html>
  <!-- 网页内容 -->
</html>

 <head>：定义文档的头部，包含了元数据和链接样式等信息。

示例：

<head>
  <title>网页标题</title>
  <!-- 其他元数据和链接样式等 -->
</head>

<body>：定义文档的主体内容。

示例：

<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落</p>
  <!-- 其他内容 -->
</body>

<h1>-<h6>：定义标题。h1是最高级别的标题，h6是最低级别的标题。

示例：

<h1>这是一个h1标题</h1>
<h2>这是一个h2标题</h2>
<!-- 其他级别的标题 -->

<p>：定义段落。

示例：

<p>这是一个段落</p>

<a>：定义一个链接。

示例：

```html
<a href="https://www.example.com">点击这里</a>

<img>：定义图像。

示例：

<img src="image.jpg" alt="图片描述">

<ul>：定义无序列表。

示例：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

<ol>：定义有序列表。

示例：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

<li>：定义列表项。

示例：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

<div>：定义一个块级容器，常用于组合其他HTML元素，并用CSS样式来控制布局和外观。

示例：

<div>
  <h2>这是一个块级容器</h2>
  <p>这是一个段落</p>
</div>

<span>：定义一个行内容器，常用于为文本或其他行内元素应用样式。

示例：

<p>这是一段<span style="color: blue;">带有蓝色文字的文本</span></p>

<table>：定义表格。

示例：

<table>
  <tr>
    <th>列标题1</th>
    <th>列标题2</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>

<form>：定义用户输入表单。

示例：

<form action="/submit" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" />
  <br>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" />
  <br>
  <input type="submit" value="提交" />
</form>

二、CSS

CSS（层叠样式表）是一种用于定义网页元素样式和布局的样式表语言。通过学习CSS，我掌握了一些重要的概念和技巧，让我能够更好地美化和定制网页的外观和样式。

1.CSS选择器

CSS选择器是用来选择HTML文档中的元素并应用样式的工具。下面是一些常用的CSS选择器及其示例：

元素选择器：通过元素名称选择元素。
示例：

p {
  color: red;
}

类选择器：通过元素的class属性选择元素。
示例：

.highlight {
  background-color: yellow;
}

ID选择器：通过元素的id属性选择元素。
示例：

#logo {
  width: 200px;
}

属性选择器：通过元素的属性选择元素。
示例：

input[type="text"] {
  border: 1px solid gray;
}

后代选择器：选择指定元素的后代元素。
示例：

.container p {
  font-weight: bold;
}

相邻兄弟选择器：选择与指定元素相邻的兄弟元素。
示例：

h1 + p {
  margin-top: 10px;
}

伪类选择器：选择元素的特定状态或位置。
示例：

a:hover {
  color: red;
}

通配选择器：选择文档中所有元素。
示例：

* {
  padding: 0;
  margin: 0;
}

根据需要选择并对HTML元素应用特定的样式。CSS选择器非常灵活，可以与其他选择器组合使用，以实现更复杂的选择。

2. 盒模型和布局

盒模型和布局是CSS中重要的概念，用于控制和定位HTML元素的尺寸、内边距、边框和外边距。下面是对盒模型和常见布局的总结，同时附带示例：

盒模型：

内容区域（content）：元素的实际内容区域，可以使用width和height属性设置大小。
示例：

div {
  width: 200px;
  height: 100px;
}

内边距（padding）：位于内容区域和边框之间的区域，可以使用padding属性设置内边距。
示例：

div {
  padding: 10px;
}

边框（border）：包围内容和内边距的区域，可以使用border属性设置边框的宽度、样式和颜色。
示例：

div {
  border: 1px solid black;
}

外边距（margin）：边框之外的区域，可以使用margin属性设置外边距。
示例：

div {
  margin: 10px;
}

布局：

流动布局（Flow Layout）：元素按照其在HTML文档中的顺序自上而下排列，根据可用空间自动换行。
示例：

div {
  float: left;
  width: 50%;
}

弹性布局（Flexbox）：使用display: flex;将容器指定为弹性容器，可以通过flex-direction、justify-content、align-items等属性控制元素的排列和对齐方式。
示例：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

网格布局（Grid Layout）：使用display: grid;将容器指定为网格容器，可以通过grid-template-columns、grid-template-rows、grid-gap等属性定义网格的列和行，并对元素进行定位。
示例：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

3.样式优先级和层叠

在学习CSS时，我了解到样式的优先级和层叠规则。这使我能够解决样式冲突和覆盖问题。例如：

/* ID选择器的样式优先级高于类选择器 */
#my-id {
  color: red;
}

.my-class {
  color: blue;
}

/* 类选择器的样式会被应用 */
<div id="my-id" class="my-class">Hello, World!</div>

4.响应式设计

随着移动设备的普及，响应式设计变得越来越重要。我学会了使用媒体查询和响应式技术来为不同设备和屏幕尺寸提供适配的样式。例如：

@media screen and (max-width: 768px) {
  /* 当屏幕宽度小于768px时应用的样式 */
  .menu {
    display: none;
  }
}

4.动画和过渡效果

通过CSS，我学会了创建动画和过渡效果，使页面更加生动和吸引人。例如：

/* 过渡效果 */
.button {
  transition: background-color 0.3s;
}

.button:hover {
  background-color: red;
}

/* 关键帧动画 */
@keyframes slide {
  0% {
    transform: translateX(0);
 

 }
  100% {
    transform: translateX(100px);
  }
}

.box {
  animation: slide 1s infinite alternate;
}

体会：通过学习CSS，我能够更好地控制网页的样式、布局和交互效果。这为我打开了许多创造和定制独特网页的可能性。我会继续深入学习CSS，探索更多高级的样式和布局技巧，以提升用户体验并构建出色的网页设计。