两分钟掌握web知识点（一部分）

05-14 阅读 0评论

了解部分：

基础部分：

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文档的根元素。
: 包含了所有的头部标签元素。如, , , , 等。
: 定义了浏览器工具栏的标题，当网页添加到收藏夹时的标题。

: 包含了可见的页面内容，如标题、段落、图片、链接、表格、列表等。

2. 标题标签

到

: 定义HTML标题。

定义最大的标题，

定义最小的标题。

3. 段落和换行标签

: 定义一个段落。

: 插入一个简单的换行符。

4. 文本格式化标签

: 定义粗体文本。
: 定义斜体文本。
: 定义下划线文本（不推荐使用，建议使用CSS）。
: 定义加删除线的文本。
: 定义重要的文本（通常显示为粗体）。
: 定义强调的文本（通常显示为斜体）。

: 定义带有背景色标记的文本。

5. 链接标签

: 定义超链接，用于从一个页面链接到另一个页面。

6. 列表标签

: 定义列表项。
: 定义描述列表。
: 定义描述列表中的项目/名字。

: 定义描述列表中的描述。

7. 图像标签

: 定义图像。src 属性规定图像的来源，alt 属性提供替代文本。

8. 表格标签

: 定义HTML表格。

: 定义表格中的行。

: 定义表格的头部单元格。	: 定义表格的数据单元格。 9. 表单标签 : 定义HTML表单，用于用户输入。 : 定义输入字段，type 属性用于指定输入类型（如text, password, checkbox, radio, submit等）。 : 定义多行文本输入字段。 : 定义元素的描述。 : 定义下拉列表。 : 定义下拉列表中的选项。 : 定义一个点击按钮。 10. 框架标签（已过时，不推荐使用） : 定义框架集。 : 定义框架集中的单个框架。 : 定义内联框架，用于在当前HTML文档中嵌入另一个HTML文档。 11. 其他常用标签 : 定义文档中的分区或节（常用于样式布局）。 : 用于对文本中的一部分进行单独处理（常用于文本内样式）。 : 提供有关HTML文档的元信息。 : 定义文档与外部资源之间的关系（如链接到CSS文件）。 : 用于嵌入或引用可执行脚本（如JavaScript代码）。 : 定义文档的页眉（常用于网站导航）。 : 定义文档的页脚（常用于版权信息、网站地图链接等）。 : 定义文档中的节（如章节、页眉、页脚或文档中的其他部分）。 : 定义页面独立的内容区域（如博客条目、论坛帖子等）。 : 定义页面的侧边栏内容（如广告、相关链接、侧边栏导航等）。 : 定义导航链接的部分。 : 定义文档的主体内容。这些标签只是HTML中的一部分，但它们是最常用和最基本的标签。通过使用这些标签，就可以创建基本的网页结构和内容。提高部分：①margin-left: auto 水平居中的含义:当容器宽度比内容大的时候，“居中”才有意义，因此使用此方法的前提是内容的宽度比容器的宽度小。 [易错点]对和容器宽度相等的内容使用 margin:auto;，例如容器是浮动盒子时，脱流的定位容器。 [原理] margin的auto值等于剩余空间的宽度，写 margin-left: auto;内容会被顶到右边，如果同时设置左右margin: 0 auto;则左右平分剩余空间。 [技巧] margin: 0 auto;可以简写成: margin: auto;因为当margin-top或margin-bottom为auto时值为0，除非脱离文档流。 ②水平居中布局之text-align: center 实践部分：以下是一个简单的CSS代码示例，用于样式化一个HTML页面中的元素： HTML部分 (index.html): CSS样式示例欢迎来到我的网站这是一个使用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属性的值以指向正确的文件路径。运行效果：也可以自己尝试以下有序列表无序列表感谢观看，有兴趣的话动手试试吧~

: 定义表格的头部单元格。

: 定义表格的数据单元格。

9. 表单标签

: 定义HTML表单，用于用户输入。
: 定义输入字段，type 属性用于指定输入类型（如text, password, checkbox, radio, submit等）。
: 定义多行文本输入字段。
: 定义元素的描述。
: 定义下拉列表。
: 定义下拉列表中的选项。
: 定义一个点击按钮。
10. 框架标签（已过时，不推荐使用）
- : 定义框架集。
- : 定义框架集中的单个框架。
- : 定义内联框架，用于在当前HTML文档中嵌入另一个HTML文档。
  11. 其他常用标签
  - : 定义文档中的分区或节（常用于样式布局）。
  - : 用于对文本中的一部分进行单独处理（常用于文本内样式）。
  - : 提供有关HTML文档的元信息。
  - : 定义文档与外部资源之间的关系（如链接到CSS文件）。
  - : 用于嵌入或引用可执行脚本（如JavaScript代码）。
  - : 定义文档的页眉（常用于网站导航）。
  - : 定义文档的页脚（常用于版权信息、网站地图链接等）。
  - : 定义文档中的节（如章节、页眉、页脚或文档中的其他部分）。
  - : 定义页面独立的内容区域（如博客条目、论坛帖子等）。
  - : 定义页面的侧边栏内容（如广告、相关链接、侧边栏导航等）。
  - : 定义导航链接的部分。
  - : 定义文档的主体内容。
    这些标签只是HTML中的一部分，但它们是最常用和最基本的标签。通过使用这些标签，就可以创建基本的网页结构和内容。
    
    提高部分：①margin-left: auto
    
    水平居中的含义:当容器宽度比内容大的时候，“居中”才有意义，因此使用此方法的前提是内容的宽度比容器的宽度小。
    [易错点]对和容器宽度相等的内容使用
    margin:auto;，例如容器是浮动盒子时，脱流的定位容器。
    [原理] margin的auto值等于剩余空间的宽度，写 margin-left: auto;内容会被顶到右边，如果同时设置左右margin: 0 auto;则左右平分剩余空间。 [技巧] margin: 0 auto;可以简写成: margin: auto;因为当margin-top或margin-bottom为auto时值为0，除非脱离文档流。
    
    ②水平居中布局之text-align: center
    
    实践部分：
    
    以下是一个简单的CSS代码示例，用于样式化一个HTML页面中的元素：
    
    HTML部分 (index.html):
```
  
  
  
  
  
CSS样式示例  
  
  
  
  
欢迎来到我的网站  
  
这是一个使用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属性的值以指向正确的文件路径。
    
    运行效果：
    
    也可以自己尝试以下有序列表无序列表
    
    感谢观看，有兴趣的话动手试试吧~