HTML&CSS学习总结

HTML&CSS学习总结

1. 何为HTML

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

1.1. 常用标签学习

1.1 .1. 标题

在HTML中，可以使用<h1>到<h6>标签来定义标题，数字越小，表示标题级别越高。例如：

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>

这是一级标题

这是二级标题

1.1.2. 文本格式

在HTML中，可以使用一些标签来调整文本的格式，例如<strong>用于加粗文本，<em>用于强调文本，<u>用于下划线文本等。例如：

<p>这是一段 <strong>加粗</strong> 的文本。</p>
<p>这是一段 <em>强调</em> 的文本。</p>
<p>这是一段 <u>下划线</u> 的文本。</p>

这是一段 加粗 的文本。

这是一段 强调 的文本。

这是一段 下划线 的文本。

1.1.3.超链接

使用<a>标签可以创建超链接，将文本或图像链接到其他页面或资源。例如：

<a href="http://example.com">这是一个链接</a>

这是一个链接

1.1.4. 图片及文件路径

通过<img>标签可以插入图像到网页中，同时需要指定图像的文件路径。例如：

<img src="images/example.jpg" alt="示例图像">

1.1.5. 表格

使用<table>、<tr>和<td>标签可以创建表格。<table>定义整个表格，<tr>定义表格行，<td>定义单元格。例如：

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

单元格1	单元格2
单元格3	单元格4

1.1.6. 列表

使用<ul>和<li>标签可以创建无序列表，使用<ol>和<li>标签可以创建有序列表。例如：

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

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

• 列表项1
• 列表项2

1. 列表项1
2. 列表项2

1.1.7. 表单

使用<form>标签可以创建表单，包括输入框、复选框、单选按钮等元素。例如：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">

  <input type="submit" value="提交">
</form>

姓名： 邮箱：

1.1.8.其它

除了上述标签外，HTML还有很多其它有用的标签，例如<div>用于划分文档中的块级区域，<span>用于标记文档中的内联元素等。

2.何为CSS

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

2.1. CSS选择器

CSS选择器用于选择HTML元素并应用样式。我学会了使用各种选择器，包括标签选择器、类选择器、ID选择器和组合选择器等。例如：

/* 标签选择器 */
p {
  color: blue;
}

/* 类选择器 */
.my-class {
  font-size: 20px;
}

/* ID选择器 */
#my-id {
  background-color: yellow;
}

/* 组合选择器 */
.header .logo {
  text-align: center;
}

2. 2. 盒模型和布局

盒模型是CSS中的一个重要概念，它定义了HTML元素的尺寸和边距。我学会了使用盒模型来控制元素的大小、内外边距和边框等。例如：

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  margin: 20px;
  border: 1px solid black;
}

除了盒模型，我还学会了使用CSS布局来定位和排列元素。常用的布局技术包括浮动、定位和弹性布局等。

2.3. 样式优先级和层叠

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

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

.my-class {
  color: blue;
}

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

2.4. 响应式设计

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

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

2.5. 动画和过渡效果

通过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，探索更多高级的样式和布局技巧，以提升用户体验并构建出色的网页设计。