目录

了解部分：

基础部分：

1. 文档结构标签

2. 标题标签

3. 段落和换行标签

4. 文本格式化标签

5. 链接标签

6. 列表标签

7. 图像标签

8. 表格标签

9. 表单标签

10. 框架标签（已过时，不推荐使用）

11. 其他常用标签

提高部分：①margin-left: auto

②水平居中布局之text-align: center

实践部分：

了解部分：

• HTML（超文本标记语言）：是网页的基础结构，用于定义网页的内容和布局。HTML文档由一系列的元素（如标题、段落、链接等）组成，这些元素通过标签进行标识。

• CSS（层叠样式表）：用于控制网页的样式和布局。通过CSS，开发者可以定义颜色、字体、间距等视觉元素，使网页看起来更加美观和易于阅读。

• JavaScript：是一种脚本语言，用于实现网页的交互性和动态效果。通过JavaScript，开发者可以添加点击按钮、弹出对话框、动态更新内容等功能。

基础部分：

   通过一张手写笔记展开html常用标签，看过记住大概有个印象

整理总结

1. 文档结构标签

• : 声明文档类型和版本。
• : HTML文档的根元素。
• : 包含了所有的头部标签元素。如, , 

  欢迎来到我的网站

  这是一个使用CSS进行样式化的简单示例。

  这是一个红色盒子 这是一个绿色盒子 这是一个蓝色盒子

  CSS部分 (styles.css):

  /* 基础样式 */  
  body {  
    font-family: Arial, sans-serif;  
    margin: 0;  
    padding: 20px;  
    background-color: #f4f4f4;  
  }  
    
  /* 标题样式 */  
  .title {  
    color: #333;  
    text-align: center;  
    margin-bottom: 20px;  
  }  
    
  /* 介绍段落样式 */  
  .intro {  
    color: #666;  
    line-height: 1.6;  
    text-indent: 2em; /* 首行缩进两个字符宽 */  
  }  
    
  /* 容器样式 */  
  .container {  
    display: flex;  
    justify-content: space-around; /* 盒子之间平均分布 */  
    margin-top: 40px;  
  }  
    
  /* 盒子样式 */  
  .box {  
    width: 150px;  
    height: 150px;  
    margin: 10px;  
    display: flex;  
    align-items: center; /* 垂直居中 */  
    justify-content: center; /* 水平居中 */  
    font-size: 20px;  
    border-radius: 10px; /* 圆角 */  
  }  
    
  /* 不同颜色的盒子 */  
  .red { background-color: red; color: white; }  
  .green { background-color: green; color: white; }  
  .blue { background-color: blue; color: white; }

  在这个示例中，创建了一个简单的HTML页面，它包含一个标题、一个介绍段落和三个不同颜色的盒子。CSS样式表（styles.css）定义了如何呈现这些元素。通过使用类选择器（如.title、.intro、.container、.box、.red、.green和.blue），我们可以将样式应用到HTML文档中的特定元素或元素组上。

  请注意，HTML文件通过链接到CSS文件。确保这两个文件位于同一目录下，或者调整href属性的值以指向正确的文件路径。

  运行效果：

  

  也可以自己尝试以下有序列表无序列表

  

  

  感谢观看，有兴趣的话动手试试吧~