HTML和CSS学习总结
HTML
什么是HTML
HTML（Hypertext Markup Language）是一种标记语言，用于描述网页内容的结构和语义。
基本结构
HTML文档由head和body两部分组成，head包含了文档的元数据和标题，而body则包含了文档的实际内容。下面是一个例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is a paragraph.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</body>
</html>
常用标签
除了上面示例中使用到的 <h1>、<p> 和 <ul>、<li> 标签外，其他常用的标签还包括：
- <a>：超链接
- <img>：图片
- <input>：输入框或按钮
- <span>
如果空间足够的话，这些标签会在同一行中显示，而下面这些标签则会固定占据一行，如：
- <form>：表单
- <div>
- <p>：段落
CSS
什么是CSS
CSS（Cascading Style Sheets）是用于描述HTML文档呈现效果的样式表语言。
基本结构
CSS代码通常在<head>标签中的<style>标签内书写，或者外部链接一个.css文件。
常用样式属性
一些常用的CSS样式属性包括：
- color：颜色
- font-size：字体大小
- line-height：行高
- background-color：背景色
- border：边框样式
- margin：外边距
- padding：内边距
- width：宽度
- height：高度
CSS布局
CSS布局是网页设计中的一个重要部分，它决定了元素在页面上的位置、大小和对其它元素的影响。常用的CSS布局方式有以下几种：
1. 浮动布局
浮动布局是指通过设置元素的float属性，使得元素可以左右移动，从而实现布局。通常用于制作多栏布局和图文混排等。
可以通过 ‘float: left;’和‘float: right;’等进行使用
2. 定位布局
定位布局是指通过设置元素的position属性，精确地控制元素在页面上的位置。通常用于制作弹窗、对话框等。
通常有‘position: relative;’和 ‘position: absolute;’两种用法
需要注意的是，当使用定位布局时，必须设置父元素的position属性为relative或者absolute，以便于子元素进行定位。
3. 弹性盒子布局
弹性盒子布局是指通过设置元素的display属性为flex，使得元素按照一定比例分配剩余空间，从而灵活地布局。通常用于制作导航、列表等。
当使用弹性盒子布局时，可以设置容器的justify-content属性和align-items属性来控制元素在主轴和侧轴上的排列方式。
4. 网格布局
网格布局是指通过设置元素的display属性为grid，将元素分割成网格状的区域，并可以对每个区域进行控制。通常用于制作复杂的布局。
当使用网格布局时，需要设置容器的grid-template-columns属性和grid-template-rows属性来确定网格的行列数和大小，也可以使用grid-gap属性设置网格之间的间距。