前端入门基础

您所在的位置：网站首页 › bh是谁的缩写 › 前端入门基础

前端入门基础

2023-03-22 15:54| 来源: 网络整理| 查看: 265

安装环境

vscode

live in server

html、css HTML基础

HTML是一种标记语言，用于创建网页。

HTML是“超文本标记语言”的缩写，其中“超文本”指的是文本中包含的链接，可以让你从一个页面跳转到另一个页面。HTML使用一系列标记来定义文本的结构、样式和链接。

HTML的基础结构标题1

在开始编写HTML代码之前，我们需要了解HTML的基础结构。一个HTML文档包含以下几个部分：

：这是HTML文档的声明，告诉浏览器这是一个HTML文档。：这是HTML文档的根元素，它包含了整个HTML文档。：这是HTML文档的头部，它包含了文档的元数据，如文档标题、样式表和脚本等。：这是HTML文档的主体，它包含了网页的内容，如文本、图像和表格等。

下面是一个简单的HTML文档示例：

DOCTYPE html> 我的第一个网页欢迎来到我的网页这是我的第一个网页，我学习HTML非常有趣。

在这个例子中，我们定义了一个文档标题“我的第一个网页”，并在元素中包含了一个标题和一段文本。

在vscode中输入!+回车可以自动生成结构模板

HTML的标签

HTML使用标记来定义文本的结构和样式。下面是一些常用的HTML标记：

123456 百度标签：定义 HTML 文档的根元素。常用属性：lang（定义文档语言）、xmlns（定义 XML 命名空间）。标签：定义 HTML 文档的头部区域。常用属性：无。标签：定义 HTML 文档的标题。常用属性：无。标签：定义 HTML 文档的主体区域。常用属性：bgcolor（定义背景颜色）、text（定义文本颜色）、link（定义链接颜色）、vlink（定义已访问链接颜色）。 - 标签：定义 HTML 文档的标题。常用属性：无。

标签：定义 HTML 文本段落。常用属性：align（定义对齐方式）。标签：定义 HTML 超链接。常用属性：href（定义链接地址）、target（定义链接打开方式）、title（定义链接提示信息）。标签：定义 HTML 图像。常用属性：src（定义图像地址）、alt（定义图像替代文本）、width（定义图像宽度）、height（定义图像高度）。标签：定义 HTML 无序列表。常用属性：type（定义列表标记类型）、start（定义列表起始值）。标签：定义 HTML 有序列表。常用属性：type（定义列表标记类型）、start（定义列表起始值）。标签：定义 HTML 列表项。常用属性：无。标签：定义 HTML 表格。常用属性：border（定义表格边框）、width（定义表格宽度）、bgcolor（定义表格背景颜色）。标签：定义 HTML 表格行。常用属性：bgcolor（定义行背景颜色）。标签：定义 HTML 表格单元格。常用属性：bgcolor（定义单元格背景颜色）、colspan（定义单元格跨列数）、rowspan（定义单元格跨行数）。标签：定义 HTML 表单。常用属性：action（定义表单提交地址）、method（定义表单提交方式）、enctype（定义表单数据编码方式）。

HTML标记通常是成对出现的，例如：

这是一段文本

HTML的属性

HTML标记可以包含属性，属性提供了有关元素的更多信息。属性通常用于控制元素的样式和行为。下面是一些常用的HTML属性：

class：为元素定义一个或多个类名，用于样式化元素。

id：为元素定义唯一的标识符，用于JavaScript和样式化元素。

style：为元素定义内联样式。

src：定义图像、脚本和其他文件的URL。

href：定义链接的URL。

alt：定义图像的替代文本。

下面是一个使用HTML属性的示例：

DOCTYPE html> 我的第一个网页 .highlight { color: red; font-weight: bold; } 欢迎来到我的网页这是我的第一个网页，我学习HTML非常有趣。我的爱好读书旅行游泳我的照片

在这个例子中，我们使用了class属性来样式化列表项，并使用了style属性来定义内联样式。

HTML的链接

HTML使用标记来创建链接。链接可以指向其他网页、文件或页面内的位置。下面是一个链接的示例：

访问示例网站

在这个例子中，我们创建了一个链接，它指向一个名为“http://www.baidu.com”的URL。当用户点击链接时，浏览器将打开此URL。

HTML的图像

HTML使用标记来插入图像。图像可以是本地文件或远程URL。下面是一个插入图像的示例：

在这个例子中，我们使用了标记来插入名为“photo.jpg”的本地图像，并使用了alt属性来定义图像的替代文本。

HTML的表格

HTML使用

、和标记来创建表格。表格可以包含行和列，每个单元格可以包含文本、图像或其他元素。下面是一个创建表格的示例：

姓名年龄张三 25 李四 30

在这个例子中，我们创建了一个包含两列和三行的表格，并使用标记定义了表头单元格。

HTML的容器（div、span）

div标签

div标签是HTML中用来划分网页内容的容器标签，可以将不同的内容分组在一起，方便进行样式设置和布局调整。

创建div容器

这是一个段落这是另一个段落

上面的代码会创建一个包含两个段落的div容器。默认情况下，div容器不会对网页的布局产生任何影响，它只是将内容分组在一起。

span标签

span标签也是HTML中用来划分网页内容的容器标签，与div标签不同的是，span标签通常用于对文本进行样式设置或标记。

创建span容器

这是一段文本

上面的代码会创建一个包含文本的span容器。默认情况下，span容器不会对网页的布局产生任何影响，它只是将文本标记起来，以便进行样式设置。

HTML的表格

table标签

table标签是HTML中用来创建表格的标签，它包含了一系列的行（tr）和列（td），可以用于展示数据或布局网页的结构。

创建基本表格第一行第一列第一行第二列第二行第一列第二行第二列

上面的代码会创建一个简单的2行2列的表格，其中每个单元格都包含了一些文本信息。在这个表格中，每个单元格的边框都是默认的黑色实线。

合并单元格

有时候，我们需要将表格中的多个单元格合并为一个单元格，以便更好地展示数据。可以使用rowspan和colspan属性来实现这个功能。

第一列第一行第二列第二行第二列第二列

在上面的代码中，第一列的第一个单元格被合并为了两个单元格，而第二列的两个单元格被合并为了一个单元格。

HTML中的表单

form标签

form标签是HTML中用来创建表单的标签，可以用于收集用户输入的数据，并将其发送到服务器进行处理。

创建表单用户名：密码：

上面的代码会创建一个包含两个输入框和一个提交按钮的表单。当用户点击提交按钮时，表单会将输入框中的数据发送到submit.php页面进行处理。

设置表单属性

可以使用action和method属性来设置表单的提交地址和提交方式。例如，下面的代码会将表单的提交地址设置为submit.php，提交方式设置为POST。

...

form标签有以下常用属性：

action：指定表单提交的地址，可以是一个URL或者相对路径。method：指定表单提交的方式，可以是GET或者POST。enctype：指定表单提交时的编码方式，常用的有application/x-www-form-urlencoded和multipart/form-data。

form标签的常用子标签：

input标签：用于创建各种不同类型的表单控件，包括文本框、密码框、单选按钮、复选框、隐藏域等等。select标签：用于创建下拉菜单。textarea标签：用于创建文本框。label标签：用于为表单控件添加标签。button标签：用于创建按钮。

示例代码：

用户名：密码：性别：男女爱好：音乐运动城市：北京上海广州留言：提交

在上面的示例代码中，我们创建了一个包含用户名、密码、性别、爱好、城市和留言等多个表单控件的表单。当用户提交表单时，表单数据将被发送到submit.php页面进行处理。

HTML的注释

HTML使用注释来添加对代码的说明。注释不会显示在浏览器中，它们只是对代码的解释。下面是一个注释的示例：

在这个例子中，我们使用了标记来定义注释。

CSS基础 CSS 是什么？

CSS 是一种用于控制网页外观的语言。它可以控制网页的字体、颜色、背景、布局等等，使网页看起来更加美观和易于阅读。

如何在 HTML 中使用 CSS？

要将CSS样式应用于HTML元素，需要将CSS代码嵌入HTML文件中。有三种将CSS代码添加到HTML文件的方法：

**0x01 ** 内部样式表

在HTML文件的头部中，使用

DOCTYPE html> p { color: red; } 这是一个段落

0x02 外部样式表

在HTML文件的头部中，使用标签来引用外部样式表文件。在样式表文件中，可以定义CSS样式，如下所示：

DOCTYPE html> 这是一个段落

在style.css文件中，定义CSS样式：

p { color: red; }

0x03 行内样式

在HTML元素中，使用style属性设置行内样式。在style属性中，可以定义CSS样式，如下所示：

DOCTYPE html> 这是一个段落 CSS 的基础语法

CSS 的基础语法非常简单。它由两个主要部分组成：选择器和声明块。

选择器用于选择要应用样式的 HTML 元素。例如，要选择所有段落元素，可以使用以下选择器：

p { /* 声明块 */ }

声明块包含要应用于选择器的样式规则。例如，要将所有段落元素的字体设置为 Arial，可以使用以下声明块：

p { font-family: Arial, sans-serif; } 文本样式 font-size：设置文本的大小，常用值为px、em、rem等。 font-size: 16px; font-family：设置文本的字体，常用值为Arial、Times New Roman等。 font-family: Arial, sans-serif; color：设置文本的颜色，常用值为十六进制颜色代码、RGB值等。 color: #333; text-align:文字的位置背景样式 background-color：设置背景颜色，常用值为十六进制颜色代码、RGB值等。 background-color: #fff; background-image：设置背景图片，常用值为图片的URL地址。 background-image: url('bg.jpg'); background-repeat：设置背景图片是否重复，常用值为repeat、no-repeat、repeat-x、repeat-y等。 background-repeat: no-repeat; 边框样式 border-width：设置边框的宽度，常用值为px、em、rem等。 border-width: 1px; border-style：设置边框的样式，常用值为solid、dashed、dotted等。 border-style: solid; border-color：设置边框的颜色，常用值为十六进制颜色代码、RGB值等。 border-color: #333; 盒子模型样式 width：设置盒子的宽度，常用值为px、em、rem等。 width: 500px; height：设置盒子的高度，常用值为px、em、rem等。 height: 300px; padding：设置盒子内边距，常用值为px、em、rem等。 padding: 10px; margin：设置盒子外边距，常用值为px、em、rem等。 margin: 20px; 定位样式 position：设置元素的定位方式，常用值为relative、absolute、fixed等。 position: relative; top、left、right、bottom：设置元素的位置，常用值为px、em、rem等。 top: 50px; left: 20px; CSS 的选择器

CSS 的选择器非常灵活，可以根据不同的 HTML 元素、类、ID 等来选择。以下是一些常用的选择器：

元素选择器：选择所有指定元素，例如 p、h1、div 等。类选择器：选择所有具有指定类的元素，例如 .classname。ID 选择器：选择具有指定 ID 的元素，例如 #idname。后代选择器：选择指定元素的后代元素，例如 div p。子元素选择器：选择指定元素的直接子元素，例如 div > p。 CSS 的盒模型

在 CSS 中，每个 HTML 元素都被视为一个矩形框，称为盒子。这个盒子由四个部分组成：内容、内边距、边框和外边距。以下是一个盒模型示例：

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

在这个例子中，我们定义了一个 div 元素，它具有 200px 的宽度和 100px 的高度，20px 的内边距，1px 的黑色实线边框和 10px 的外边距。

CSS 的布局

CSS 的布局非常重要，可以控制网页的整体外观和排版。以下是一些常用的布局技术：

浮动：将元素向左或向右浮动，使其相对于其他元素对齐。定位：将元素放置在页面的特定位置，例如相对于顶部、底部、左侧或右侧。弹性盒子：使用弹性盒子模型来控制元素的排列方式和大小。网格布局：使用网格布局来控制元素的排列方式和大小。 CSS 的继承和层叠安装环境

vscode

live in server

html、css HTML基础

HTML是一种标记语言，用于创建网页。

HTML的基础结构标题1

在开始编写HTML代码之前，我们需要了解HTML的基础结构。一个HTML文档包含以下几个部分：

下面是一个简单的HTML文档示例：

DOCTYPE html> 我的第一个网页欢迎来到我的网页这是我的第一个网页，我学习HTML非常有趣。

在这个例子中，我们定义了一个文档标题“我的第一个网页”，并在元素中包含了一个标题和一段文本。

在vscode中输入!+回车可以自动生成结构模板

HTML的标签

HTML使用标记来定义文本的结构和样式。下面是一些常用的HTML标记：

HTML标记通常是成对出现的，例如：

这是一段文本

HTML的属性

HTML标记可以包含属性，属性提供了有关元素的更多信息。属性通常用于控制元素的样式和行为。下面是一些常用的HTML属性：

class：为元素定义一个或多个类名，用于样式化元素。

id：为元素定义唯一的标识符，用于JavaScript和样式化元素。

style：为元素定义内联样式。

src：定义图像、脚本和其他文件的URL。

href：定义链接的URL。

alt：定义图像的替代文本。

下面是一个使用HTML属性的示例：

在这个例子中，我们使用了class属性来样式化列表项，并使用了style属性来定义内联样式。

HTML的链接

HTML使用标记来创建链接。链接可以指向其他网页、文件或页面内的位置。下面是一个链接的示例：

访问示例网站

在这个例子中，我们创建了一个链接，它指向一个名为“http://www.baidu.com”的URL。当用户点击链接时，浏览器将打开此URL。

HTML的图像

HTML使用标记来插入图像。图像可以是本地文件或远程URL。下面是一个插入图像的示例：

在这个例子中，我们使用了标记来插入名为“photo.jpg”的本地图像，并使用了alt属性来定义图像的替代文本。

HTML的表格

HTML使用

、和标记来创建表格。表格可以包含行和列，每个单元格可以包含文本、图像或其他元素。下面是一个创建表格的示例：

姓名年龄张三 25 李四 30

在这个例子中，我们创建了一个包含两列和三行的表格，并使用标记定义了表头单元格。

HTML的容器（div、span）

div标签

div标签是HTML中用来划分网页内容的容器标签，可以将不同的内容分组在一起，方便进行样式设置和布局调整。

创建div容器

这是一个段落这是另一个段落

上面的代码会创建一个包含两个段落的div容器。默认情况下，div容器不会对网页的布局产生任何影响，它只是将内容分组在一起。

span标签

span标签也是HTML中用来划分网页内容的容器标签，与div标签不同的是，span标签通常用于对文本进行样式设置或标记。

创建span容器

这是一段文本

上面的代码会创建一个包含文本的span容器。默认情况下，span容器不会对网页的布局产生任何影响，它只是将文本标记起来，以便进行样式设置。

HTML的表格

table标签

table标签是HTML中用来创建表格的标签，它包含了一系列的行（tr）和列（td），可以用于展示数据或布局网页的结构。

创建基本表格第一行第一列第一行第二列第二行第一列第二行第二列

上面的代码会创建一个简单的2行2列的表格，其中每个单元格都包含了一些文本信息。在这个表格中，每个单元格的边框都是默认的黑色实线。

合并单元格

有时候，我们需要将表格中的多个单元格合并为一个单元格，以便更好地展示数据。可以使用rowspan和colspan属性来实现这个功能。

第一列第一行第二列第二行第二列第二列

在上面的代码中，第一列的第一个单元格被合并为了两个单元格，而第二列的两个单元格被合并为了一个单元格。

HTML中的表单

form标签

form标签是HTML中用来创建表单的标签，可以用于收集用户输入的数据，并将其发送到服务器进行处理。

创建表单用户名：密码：

上面的代码会创建一个包含两个输入框和一个提交按钮的表单。当用户点击提交按钮时，表单会将输入框中的数据发送到submit.php页面进行处理。

设置表单属性

可以使用action和method属性来设置表单的提交地址和提交方式。例如，下面的代码会将表单的提交地址设置为submit.php，提交方式设置为POST。

...

form标签有以下常用属性：

form标签的常用子标签：

示例代码：

用户名：密码：性别：男女爱好：音乐运动城市：北京上海广州留言：提交

HTML的注释

HTML使用注释来添加对代码的说明。注释不会显示在浏览器中，它们只是对代码的解释。下面是一个注释的示例：

在这个例子中，我们使用了标记来定义注释。

CSS基础 CSS 是什么？

CSS 是一种用于控制网页外观的语言。它可以控制网页的字体、颜色、背景、布局等等，使网页看起来更加美观和易于阅读。

如何在 HTML 中使用 CSS？

要将CSS样式应用于HTML元素，需要将CSS代码嵌入HTML文件中。有三种将CSS代码添加到HTML文件的方法：

**0x01 ** 内部样式表

在HTML文件的头部中，使用

DOCTYPE html> p { color: red; } 这是一个段落

0x02 外部样式表

在HTML文件的头部中，使用标签来引用外部样式表文件。在样式表文件中，可以定义CSS样式，如下所示：

DOCTYPE html> 这是一个段落

在style.css文件中，定义CSS样式：

p { color: red; }

0x03 行内样式

在HTML元素中，使用style属性设置行内样式。在style属性中，可以定义CSS样式，如下所示：

DOCTYPE html> 这是一个段落 CSS 的基础语法

CSS 的基础语法非常简单。它由两个主要部分组成：选择器和声明块。

选择器用于选择要应用样式的 HTML 元素。例如，要选择所有段落元素，可以使用以下选择器：

p { /* 声明块 */ }

声明块包含要应用于选择器的样式规则。例如，要将所有段落元素的字体设置为 Arial，可以使用以下声明块：

CSS 的选择器非常灵活，可以根据不同的 HTML 元素、类、ID 等来选择。以下是一些常用的选择器：

在 CSS 中，每个 HTML 元素都被视为一个矩形框，称为盒子。这个盒子由四个部分组成：内容、内边距、边框和外边距。以下是一个盒模型示例：

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

在这个例子中，我们定义了一个 div 元素，它具有 200px 的宽度和 100px 的高度，20px 的内边距，1px 的黑色实线边框和 10px 的外边距。

CSS 的布局

CSS 的布局非常重要，可以控制网页的整体外观和排版。以下是一些常用的布局技术：

浮动：将元素向左或向右浮动，使其相对于其他元素对齐。定位：将元素放置在页面的特定位置，例如相对于顶部、底部、左侧或右侧。弹性盒子：使用弹性盒子模型来控制元素的排列方式和大小。网格布局：使用网格布局来控制元素的排列方式和大小。 CSS 的继承和层叠

【本文地址】

前端入门基础

前端入门基础

今日新闻

推荐新闻