目录

了解部分：

基础部分：

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属性的值以指向正确的文件路径。

    运行效果：

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

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